js div verplaatsen

firebug erbij pakken dus console.log(e); en je weet wat e (niet) is...

www.getfirebug.com

code:

element.onmousemove = function(e) { 
  e = e || window.event; 
  this.style.left = "..."; 
  //etc. 
};

Ehmm.. je maakt nu van e een boolean? Dit is immers een logische or. En een bitwise or op een objectpointer lijkt me ook niet de bedoeling.

quote:

Cousin Boneless schreef op vrijdag 04 juli 2008 @ 16:17:
code:

element.onmousemove = function(e) { 
  e = e || window.event; 
  this.style.left = "..."; 
  //etc. 
};

Ehmm.. je maakt nu van e een boolean? Dit is immers een logische or. En een bitwise or op een objectpointer lijkt me ook niet de bedoeling.

Das gewoon shorthand (voor de shorthand ):
code:

var e = e ? e : window.event;

code:

var x = false;
var y = 'woot';
alert(x || y); // alert 'woot'

var x = 'blaat';
var y = 'woot';
alert(x || y); // alert 'blaat'

Bosmonster wijzigde dit bericht 04-07-2008 16:24 (17%)

Je hebt zowaar gelijk.. alert(window || document) geeft een object terug.. raarrr...

quote:

Cousin Boneless schreef op vrijdag 04 juli 2008 @ 16:17:
Ehmm.. je maakt nu van e een boolean? Dit is immers een logische or. En een bitwise or op een objectpointer lijkt me ook niet de bedoeling.

In JavaScript zijn de logische operatoren || en && als volgt gedefinieerd:
JavaScript:

1 2 3 4 5 6 7

var a = b || c; // als b evalueert naar true --> a = b; // als b evalueert naar false --> a = c; var a = b && c; // als b evalueert naar false --> a = b; // als b evalueert naar true --> a = c;

Thanx! Toch nog wat geleerd vandaag (terug on-topic als het aan mij ligt)

idd want ik heb de truc nog steeds niet door. (al weet ik nu wel iets meer)

Wat bedoel je met "de truc"? Als je een functie aan een event koppelt, dan is het in DOM compliant browsers normaal dat je het event object terugkrijgt als enige parameter van de functie. Dit gebeurt in IE dus niet, daar kun je dat object bereiken als member van de (globale) window variabel.

Je hebt een functie movewindow die een parameter id terugkrijgt. Zou je kunnen laten zien wat je met die functie doet, en waar je die waarde meegeeft aan de functie?

Ik mis ook volledig de context waarin deze functie wordt gebruikt. Ik kan me niet voorstellen dat - zelfs in safari - die functie ook maar iets doet als hij niet ergens aan een event wordt gekoppeld. Ik ben benieuwd hoe je dat tot nu toe geregeld hebt. Probeer eens een minimaal stukje code te maken waarin je code in elk geval iets doet. Op deze manier moeten we zo'n beetje alles voor je verzinnen om het werkend te krijgen.

quote:

Cartman! schreef op vrijdag 04 juli 2008 @ 15:07:
firebug erbij pakken dus console.log(e); en je weet wat e (niet) is...

www.getfirebug.com

Niet voor Firefox 3 helaas en beta 1 is broken.

quote:

Sebazzz schreef op vrijdag 04 juli 2008 @ 21:36:
[...]

Niet voor Firefox 3 helaas en beta 1 is broken.

In Firefox 3 kun je de laatste compatibele versie gewoon installeren via het Add-on venstertje. Daar werkt het prima.

(Tools -> Add-ons -> Get Add-ons -> Firebug intypen en voila)

Dat is blijkbaar ook al de 1.2 beta 4, dus denk dat de link op de site al een tijdje niet meer geupdatet is

Bosmonster wijzigde dit bericht 05-07-2008 00:52 (13%)

quote:

Bosmonster schreef op zaterdag 05 juli 2008 @ 00:50:
Dat is blijkbaar ook al de 1.2 beta 4, dus denk dat de link op de site al een tijdje niet meer geupdatet is

Of je kijkt even onder releases

quote:

Sebazzz schreef op vrijdag 04 juli 2008 @ 21:36:
beta 1 is broken.

Hoezo? Waar staat dat? Of doel je op 't feit dat 'ie niet werkt op Fx 3?

RobIII wijzigde dit bericht 05-07-2008 01:04 (24%)

JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

function movePlayerDif(x) {     var newpos = parseInt(document.getElementById('player').style.left) + x;     if (((newpos + parseInt(document.getElementById('player').style.width)) <= 300) && (newpos >= 0)) {         document.getElementById('player').style.left = newpos +'px';     } } function getInput(e) {     var evt = e || window.event;     var code;     if (e.keyCode) code = e.keyCode;     else if (e.which) code = e.which;     // 37 is links     // 39 is rechts     if (code == 37) {         movePlayerDif(-10);     }     else if (code == 39) {         movePlayerDif(10);     } }

Met
HTML:

1 2 3

<body onkeydown="getInput(event);">     <div id="player" style="left: 120px; width: 40px;"></div> </body>

Geeft zoiets: http://krijn.net/dump/arka.html (even snel iets gemaakt)
Note: in opera werkt het alleen als je muis over het 'actieve' element hangt (hier dus het blauwe balkje). IE6 kan niet met position: fixed; overweg (daarom een position: absolute). Nou weet ik niet precies wat je er mee wil, maar dit helpt je vast op weg

quote:

RobIII schreef op zaterdag 05 juli 2008 @ 01:03:
[...]

Hoezo? Waar staat dat? Of doel je op 't feit dat 'ie niet werkt op Fx 3?

Firefox zegt dat dat hele installatiepakket ongeldig is, en dat klopt ook want de xpi (wat gewoon een ZIP of een JAR is) is niet te openen met bijvoorbeeld 7-zip.

quote:

RobIII schreef op zaterdag 05 juli 2008 @ 01:03:
[...]

Of je kijkt even onder releases

Neemt niet weg dat de homepage al een tijdje niet geupdatet is blijkbaar, als daar nog steeds 1.1 beta met dikke letters op staat met een niet werkende xpi.

de context waarin ik het gebruik is alsvolgt. Ik wil een systeem op zetten waarmee ik verschillende windows kan openen en kan verplaatsen. het is dus belangrijk dat de functie uiteindelijk weet welk window versplaatst moet worden. ik zal ff de complete (crap) code posten:
code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.window_title {
    font-weight: bold;
    overflow: hidden;
}
.window {
    background-color: #FFFFCC;
    border: 1px solid #FFCC66;
    position: absolute;
    z-index: 2;
    left: 200px;
    top: 157px;
    width: 250px;
    vertical-align: top;
    opacity: 1;
    display: none;
    margin-left: -125px;
}
.document {
    height: 100%;
    width: 100%;
}
.overlay {
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #000000;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}
.window_content {
    margin: 10px;
    overflow: auto;
    height: 150px;
    overflow-x: hidden;
}
.document .window_title div {
    margin-left: 5px;
    height: inherit;
}
.title_close {
    position: absolute;
    right: 10px;
    text-decoration: none;
    color: #000000;
}
.menu {
    background-color:#0099FF;
    height: 32px;
    color: #FFFFFF;
    font-size: 24px;
}
.menu a {
    color: #FFFFFF;
    margin: 10px;
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
}
-->
</style>
<script type="text/javascript">
function movewindow(id,e)
{
if (!e) var e = window.event;
var x = e.screenX;
var y = e.screenY;
document.getElementById(id).style.left=x+"px";
document.getElementById(id).style.top=y+"px";
}

function togglewindow(id) {
if(!(document.getElementById(id).style.display == 'inline'))
{
document.getElementById(id).style.display='inline';
document.getElementById('overlay').style.display='inline';
}
else
{
document.getElementById(id).style.display='none';
document.getElementById('overlay').style.display='none';
}


}
</script>
</head>
<body>
<div class="document">
  <div class="menu"><a href="#" onclick="togglewindow('window')">Informatie:</a> | <a href="#" onclick="togglewindow('formexample')">Formulier:</a></div>
<div class="overlay" id="overlay"></div>
  <div class="window" id="window">
    <div class="window_title" onclick="movewindow('onclick)">
      <div>
        <div align="left">Titel:<a class="title_close" href="#" onmousedown="movewindow('window')">x</a></div>
      </div>
    </div>
    <div class="window_content">Dit ding bevat momenteel nonsens...</div>
  </div>
  
  <div class="window" id="formexample">
    <div class="window_title" onclick="movewindow('formexample')">
      <div>
        <div align="left">Formulier voorbeeld:<a class="title_close" href="#" onclick="movewindow('formexample')">x</a></div>
      </div>
    </div>
    <div class="window_content">
      <form action="#">
      <input type="text" size="20" value="naam" onclick="this.value=''" id="name" />
      <input type="text" size="20" value="achternaam" onclick="this.value=''" id="achternaam" />
      </form>
    </div>
  </div>
</div>
</body>
</html>

Sowieso zie ik een foutje in regel 107, in je onclick scriptje. Je mist een tweede aanhalingsteken. Ook wil je volgens mij de waarde 'window' meegeven, net zoals je dat bij 'formexample' doet, en niet 'onclick'.

Verder zie ik ook dat je helemaal geen 2de parameter aan movewindow meegeeft. Binnen event handler definities in je HTML kun je het event object overigens bereiken via de variabel 'event'. Je kunt hier natuurlijk niet zelf bepalen wat de naam van de variabel wordt, dus standaard is dat dus 'event'. Dit is (waarschijnlijk) waarom IE er zo mee omgaat, en waarom je daar altijd event moet gebruiken.

Ik heb het idee dat ik je nu nog een beetje in het duister laat staan en dat je zo nog niet goed snapt wat er nu gebeurt. Ik zal je met een alternatief proberen duidelijk te maken hoe het ook kan.

Wat je ook kunt doen is je elementen waaraan je een event wilt hangen via DOM ophalen en er zo een functie aan koppelen. Bijvoorbeeld het volgende stukje:
HTML:

1	<div id="test" onclick="alert(event);">test</div>

Dit is vrijwel equivalent aan het volgende:
HTML:

1	<div id="test">test</div>

Waarbij de volgende script nog uitgevoerd wordt:
JavaScript:

1 2 3 4 5

var test = document.getElementById('test'); test.onclick = function(event) {     alert(event); };

Dit is waar voor DOM compliant browsers, maar, omdat IE er anders mee omgaat, is het daar niet hetzelfde voor. In IE is het event object namelijk te bereiken als member van window. Zoals alle variabelen die daaronder hangen, hoef je window zelf niet te specificeren, window.event is dus in de meeste gevallen gelijk aan event. In dit geval is dat echter niet zo, omdat de parameter deze variabel overschaduwd. En aangezien IE helemaal geen waarden mee stuurt via parameters aan de handler, heeft deze dus geen waarde in dit geval. In een handler definitie in je HTML is er voor IE echter geen parameter met deze naam, en wordt hij dus ook niet overschaduwd, je bereikt via 'event' dus altijd het de member van window.

Wat er dan meestal wordt gedaan is de parameter sowieso een andere naam geven, namelijk 'e'. In browsers die het event meesturen als parameter aan de handler kun je dan die waarde gebruiken. In het andere geval overschrijf de waarde met het event object dat onder window hangt. Zo dus:
JavaScript:

1 2 3 4 5 6

var test = document.getElementById('test'); test.onclick = function(e) {     e = e || window.event;     alert(e); };

Ik hoop dat het zo iets duidelijker is, je moet even doorkrijgen wat er gebeurt en waar je gegevens vandaan komen. Belangrijk is om je goed in te lezen zodat je het echt goed snapt.


Wees je er overigens van bewust dat wat je nu doet waarschijnlijk niet gaat werken zoals je wil. Een onclick event wordt namelijk maar 1 keer uitgevoerd en ik heb het idee dat je meer in de drag en drop hoek wil zitten. Zoals ik nu kan beoordelen wordt je element gewoon verplaatst naar de plaatst waar je klikt, en verder niets. Beter is om met mousedown en mouseup te werken voor het in werking stellen van het geheel, en dan met mousemove je element te verplaatsten.

Michali wijzigde dit bericht 06-07-2008 10:52 (10%)

Bedankt voor je uitgebreide uitleg, maar ik kom nog steeds niet verder. mischien snap of zie ik het gewoon niet maar na aanleiding van je code kon ik enkel die ene fout herstellen en

e = e || window.event;

als vervanging voor

if (!e) var e = window.event;

met hetzelfde resultaat (volgens mij doen bijde code's min of meer hetzelfde)

het resultaat:

- safari doet wat hij moet doen:
- firefox doet dat niet

quote:

tuxdapinguin schreef op zaterdag 05 juli 2008 @ 23:23:
de context waarin ik het gebruik is alsvolgt. Ik wil een systeem op zetten waarmee ik verschillende windows kan openen en kan verplaatsen. het is dus belangrijk dat de functie uiteindelijk weet welk window versplaatst moet worden.

Pak voor dat soort dingen asjeblieft iets van Mootools of zo.... dan kun je je feitelijk focusen op lappen code schrijven in plaats van 5 keer zoveel code met iedere 3 regels uitzonderingen voor quirks van iedere mogelijke browser.

curry684 wijzigde dit bericht 07-07-2008 22:53 (16%)

Je roept movewindow nu handmatig aan, maar die moet dan wel over een event object beschikken. In IE (en Safari blijkbaar) heb je daar nu wel beschikking over, omdat die dat object onder window hangen. Voor alle andere browsers moet je echter dit object als parameter meegeven aan de functie.

Ik zie in je functiedefinitie al dat je 2 parameters definieert, maar bij je aanroep geef je er echter maar 1 mee. Ik heb al verteld hoe je het event object bereikt in alle browsers (vanuit zo'n eventhandlerdefintie via een attribuut), dus dan moet het niet meer moeilijk zijn om deze mee te geven aan die functie als 2de parameter, toch?

Michali wijzigde dit bericht 07-07-2008 23:20 (4%)

Nu heb ik er dit van gemaakt:
code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.window_title {
    font-weight: bold;
    overflow: hidden;
}
.window {
    background-color: #FFFFCC;
    border: 1px solid #FFCC66;
    position: absolute;
    z-index: 2;
    left: 200px;
    top: 157px;
    width: 250px;
    vertical-align: top;
    opacity: 1;
    display: none;
    margin-left: -125px;
}
.document {
    height: 100%;
    width: 100%;
}
.overlay {
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #000000;
    position: absolute;
    left: 0px;
    top: 0px;
    display: none;
}
.window_content {
    margin: 10px;
    overflow: auto;
    height: 150px;
    overflow-x: hidden;
}
.document .window_title div {
    margin-left: 5px;
    height: inherit;
}
.title_close {
    position: absolute;
    right: 10px;
    text-decoration: none;
    color: #000000;
}
.menu {
    background-color:#0099FF;
    height: 32px;
    color: #FFFFFF;
    font-size: 24px;
}
.menu a {
    color: #FFFFFF;
    margin: 10px;
    font-size: 24px;
    text-decoration: none;
    font-weight: bold;
}
-->
</style>
<script type="text/javascript">
function movewindow(id,e)
{
e = e || window.event; 
var x = e.screenX;
var y = e.screenY;
document.getElementById(id).style.left=x+"px";
document.getElementById(id).style.top=y+"px";
}

function togglewindow(id) {
if(!(document.getElementById(id).style.display == 'inline'))
{
document.getElementById(id).style.display='inline';
document.getElementById('overlay').style.display='inline';
}
else
{
document.getElementById(id).style.display='none';
document.getElementById('overlay').style.display='none';
}


}
</script>
</head>
<body>
<div class="document">
  <div class="menu"><a href="#" onmousedown="togglewindow('window')">Informatie:</a> | <a href="#" onmousedown="togglewindow('formexample')">Formulier:</a></div>
<div class="overlay" id="overlay"></div>
  <div class="window" id="window">
    <div class="window_title" onmousedown="movewindow('window',e)">
      <div>
        <div align="left">Titel:<a class="title_close" href="#" onmousedown="movewindow('window',e)">x</a></div>
      </div>
    </div>
    <div class="window_content">Dit ding bevat momenteel nonsens...</div>
  </div>
  
  <div class="window" id="formexample">
    <div class="window_title" onmousedown="movewindow('formexample',e)">
      <div>
        <div align="left">Formulier voorbeeld:<a class="title_close" href="#" onmousedown="movewindow('formexample',e)">x</a></div>
      </div>
    </div>
    <div class="window_content">
      <form action="#">
      <input type="text" size="20" value="naam" onmousedown="this.value=''" id="name" />
      <input type="text" size="20" value="achternaam" onmousedown="this.value=''" id="achternaam" />
      </form>
    </div>
  </div>
</div>
</body>
</html>

en dus e al meegegeven bij het aanroepen van het event (of doe ik dit fout) maar nog steeds gebeurt er niets in ff

quote:

curry684 schreef op maandag 07 juli 2008 @ 22:52:
[...]

Pak voor dat soort dingen asjeblieft iets van Mootools of zo.... dan kun je je feitelijk focusen op lappen code schrijven in plaats van 5 keer zoveel code met iedere 3 regels uitzonderingen voor quirks van iedere mogelijke browser.

ja, dat wilde ik dus ook zeggen. Waarom het wiel weer opnieuw uitvinden als andere al heel veel goeie wielen met spaken en dynamo's er op gemaakt hebben.

Om dergelijke technieken toe te passen is het best wel handig om de innerlijke werking wat beter te kennen. En leren hoe je dit zelf kunt oplossen is absoluut niet het wiel opnieuw uitvinden. Die kennis is echt geen verloren tijd, iets dat het wiel opnieuw uitvinden wel zou zijn, aangezien het al bestaat. Natuurlijk is het handig om zulke libs te gebruiken als je vaak dit soort zaken doet. Maar naar mijn mening moet je het in ieder geval 1 keer zelf gedaan hebben om er echt effectief mee om te kunnen gaan.

wil de ts ophouden met blokken code van 130 regels te plaatsen met een vraag in de trand van "wat doe ik fout?" zelf nadenken verdient de voorkeur in dit soort gevallen.

Je moet 'event' doorgeven in je function call ipv 'e'.. Heb getest in IE en FF en ok bevonden.
Zie post van krvabo van vorige week zaterdag en die van Michali (zondag 06 juli 2008 10:43)

Cousin Boneless wijzigde dit bericht 12-07-2008 11:00 (34%)