js div verplaatsen

[Verwijderd]

ik ben nu voorzichtig begonnen aan een javascript functie waarmee ik een div (die een window voorstelt) kan verplaatsen, er volgt met dit script onder safari al enige reacite.

JavaScript:

function movewindow(id)
{
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";
}

echter, op firefox doet dit script niets, op ie heb ik het nog niet kunnen testen.

hoe maak ik dit script zo dat het ook op ff en ie werkt?

(ja ik kan op google naar prefab script zoeken maar ik wil er ook nog wat van leren)

[ Voor 1% gewijzigd door een moderator op 05-07-2008 00:51 . Reden: Code tags toegevoegd ]

[disjfa]

window.event is toch een IE only event? Als je dan vervolgens op je waar je zelf naar verwijste google zoekt dan word dit over het algemeen best netjes uitgelegd hoe je dat event kan ondervangen op alle browsers

[ Voor 21% gewijzigd door disjfa op 04-07-2008 01:42 ]

[Michali]

Hoe roep je de functie aan? Variabel e is op deze manier een globale variabel (die in de if statement, die daarna niet overigens), dus lijkt me niet dat dit is wat je wil.

[ Voor 17% gewijzigd door Michali op 04-07-2008 08:31 ]

[Verwijderd]

ik heb al heel wat google werk erop zitten en daaruit bleek:

The screenX and screenY properties are the only ones that are completely cross–browser compatible.

laat dat nu net degene zijn die ik gebruik.

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

haal ik hetvolgende:

- e is voor netscape browsers hetzelfde als window.event voor ie is (volgens mij)
- als e niet bestaat (ie dus) krijgt e de waarde van window.event (e is nu crossbrowser)
- screenX en screenY zijn al crossplatform dus passen ze achter e, de code met nu werken.

jammer genoeg doet dat het niet, daarom hoop ik dat iemand mij kan helpen.

[_Thanatos_]

De variabele "e" is undefined aan het begin van de functie. Dus de if die je eromheen zet zal altijd een (interne warning en) false opleveren. Je assignt dus altijd window.event aan e.

window.event is vervolgens een IE-only variabele, bij W3C-compliant browsers wordt het event object in een functie-argument meegegeven bij het event. Het komt er dus op neer dat je een event als volgt cross-browser kunt assignen:

JavaScript:

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

Hier zie je dat e als argument wordt meegegeven. Gebeurt dat niet, wordt er window.event van gemaakt. Je ziet ook gelijk dat "this" het element is waar van waaruit het event wordt afgevuurd.

[Cartman!]

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

www.getfirebug.com

[Cousin Boneless]

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.

[Bosmonster]

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'

[ Voor 17% gewijzigd door Bosmonster op 04-07-2008 16:24 ]

[Cousin Boneless]

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

[Verwijderd]

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:

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;

[Cousin Boneless]

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

[Verwijderd]

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

[Michali]

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?

[gvanh]

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.

[Sebazzz]

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.

[Bosmonster]

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

[ Voor 13% gewijzigd door Bosmonster op 05-07-2008 00:52 ]

[RobIII]

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

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?

[ Voor 24% gewijzigd door RobIII op 05-07-2008 01:04 ]

[krvabo]

JavaScript:

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:

<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

[Sebazzz]

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.

[Bosmonster]

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.

[Verwijderd]

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>

[Michali]

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:

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

Dit is vrijwel equivalent aan het volgende:

HTML:

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

Waarbij de volgende script nog uitgevoerd wordt:

JavaScript:

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:

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.

[ Voor 10% gewijzigd door Michali op 06-07-2008 10:52 ]

[Verwijderd]

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

[curry684]

Verwijderd 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.

[ Voor 16% gewijzigd door curry684 op 07-07-2008 22:53 ]

[Michali]

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?

[ Voor 4% gewijzigd door Michali op 07-07-2008 23:20 ]

[Verwijderd]

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

[edwinistrator]

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.

[Michali]

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.

[XangadiX]

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.

[Cousin Boneless]

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)

[ Voor 34% gewijzigd door Cousin Boneless op 12-07-2008 11:00 ]