[JS] Jquery resizeable/draggable

Pagina: 1
Acties:

Onderwerpen


Acties:
  • 0 Henk 'm!

  • brammie2118
  • Registratie: April 2009
  • Niet online
Ik wil graag een venster op de pagina versleepbaar maken, maar het wil me maar niet lukken.
Ik heb wel de pagina's van jqeury.com doorgelezen, en het ging eerst ook goed. maar nu wil dat meerdere vensters versleepbaar zijn, zonder dat de ander ook gaat, en dat ik niet in het jquery script het id van het venster moet invoeren maar dat hij die via this.id krijgt.

code:
1
2
3
4
5
6
7
8
9
10
function hoi(elm) {
$(function() {
    var elm2 = elm.id;
    var elm3 = '"#' + elm2 + '"';
    alert(elm3);
    $(elm3).resizable({ minHeight: 60, minWidth: 180, maxHeight: 550, maxWidth: 1250 });
    $(elm3).draggable({ scroll: false, handle: 'div.titlebar' });
    $("div.titlebar").disableSelection();
});
}


Omdat het venster aangemaakt wordt met php heb ik in de div ervan ' onmouseover="hoi(this)" ' staan

Firefox foutconsole zegt: "Selector verwacht." verder geen regel, pagina. IE geeft geen fout aan.

Als iemand mij zou kunnen helpen zou dat erg fijn zijn :)

edit: Ow, sorry.. Ik ben vergeten te melden dat het venster er pas later ingezet wordt. Mbv Ajax..

[ Voor 5% gewijzigd door brammie2118 op 23-02-2010 13:51 ]


Acties:
  • 0 Henk 'm!

  • iivvvii
  • Registratie: Oktober 2003
  • Laatst online: 12-09 08:10
met jquery zou je denk ik geen mouseover in de tag moeten/hoeven gebruiken. om meerdere divs te selecteren zou je zoiets kunnen doen:

$('#div1, #div2').resizable of $('.alledivs').resizable en dit gewoon in de document ready functie zetten

Acties:
  • 0 Henk 'm!

  • brammie2118
  • Registratie: April 2009
  • Niet online
Ow, sorry.. Ik ben vergeten te melden dat het venster er pas later ingezet wordt. Mbv Ajax..

Daarom werkt het niet om jquery er gewoon in te zetten. En het id wordt door het php script aangemaakt, dus ik weet het zelf.

Zou $(.alledivs) er niet voor zorgen dat meerdere vensters versleept worden als ik er een probeer te verslepen?

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45
Nee je maakt elementen versleepbaar. Ze gaan niet ineens allemaal bewegen als je er eentje versleept.

Je kunt ook eenvoudig de draggable op een element aanroepen (en hem dus versleepbaar maken) nadat je hem hebt toegevoegd via XHR natuurlijk. Dat doen via die onmouseover is een beetje weird.

[ Voor 50% gewijzigd door Bosmonster op 23-02-2010 13:58 ]


Acties:
  • 0 Henk 'm!

  • brammie2118
  • Registratie: April 2009
  • Niet online
Heb nu class venster versleepbaar gemaakt, en zonder die onmouseover werkt het niet..
Dus door los de jquery code in mijn js bestand te zetten.
En met onLoad="hoi()" werkt het ook niet.

Terug de onmouseover erin gezet en dan werkt het wel, maar dan is alleen het nieuwste venster versleepbaar, de oude vensters niet.

Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45
Je hele hoi functie klopt ook van geen kant. Je hebt een functie waarin je een ondocumentready event toevoegt. Die hele functie slaat dus nergens op.

Als je nu eens gewoon ondocumentready, zoals het hoort, die draggable's aanmaakt.

[ Voor 9% gewijzigd door Bosmonster op 23-02-2010 14:30 ]


Acties:
  • 0 Henk 'm!

  • brammie2118
  • Registratie: April 2009
  • Niet online
code:
1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
    $(function() {
        $(".venster").resizable({
            minHeight: 60, minWidth: 180, maxHeight: 550, maxWidth: 1250
        });
        $(".venster").draggable({
        containment: "#bureaublad", scroll: false, group: ".venster", handle: "div.titlebar"
        });
        $("div.titlebar").disableSelection();
    });
});

dit dus? Heb dit gewoon in de pagina gezet met <script> eromheen.. Dit werkt alleen ook niet. En met die lege functie eruit werkt het ook niet.

En ik snap dat die hoi functie nergens op slaat, maar ik had hem eromheen gezet omdat zonder die code niet wordt uitgevoert lijkt wel.

[ Voor 12% gewijzigd door brammie2118 op 23-02-2010 14:48 ]


Acties:
  • 0 Henk 'm!

  • Bosmonster
  • Registratie: Juni 2001
  • Laatst online: 10-09 08:45
Je snapt niet zo goed wat $(function(){}) doet. Dat is namelijk een shortcut voor het definieren van een ondocumentready handler. Dat doe je nu dus 2x in elkaar ;)

Wat je normaliter doet is

JavaScript:
1
2
3
$(function(){
   $('.dragclass').draggable();
});


Dat zou prima moeten werken, mits die elementen al bestaan natuurlijk. Als je ze later toevoegt, roep je de draggable() op dat element aan nadat je hem hebt toegevoegd.

JavaScript:
1
2
3
4
5
6
7
$(function(){
   function addDraggable() {
       $('<div>blaat</div>').appendTo('body').draggable();
   }

   $('button').click(addDraggable);
});

[ Voor 75% gewijzigd door Bosmonster op 23-02-2010 17:04 ]

Pagina: 1