[JavaScript] DIV layer laat zich niet verplaatsen

[NaliXL]

Goed, ik had eerst ook zoiets van: dit moet een UTFS vraag zijn, maar na toch zo ongeveer een week iedere dag een uur of wat te hebben gezocht en geprobeerd naar mogelijke oplossingen, word ik zo ongeveer helemaal gek van het volgende probleem. Elders zie ik dergelijke dingen wel werken, dus ik moet iets over het hoofd zien:

Ik heb een hele simpele pagina, met daarin een aantal DIV layers, die ik wil gaan gebruiken voor een geanimeerd menu. Anyway, ik krijg de DIV-layers niet van hun plaats af. Ik kan hier wel een hele lap code plaatsen, maar in plaats daarvan heb ik het probleem geïsoleerd én laat ik een aantal van mijn verschillende pogingen zien om het op te lossen in deze pagina. De enige fout die ik met dit script krijg (in de JavaScript console van Firefox) is deze:

Error: div_ref("layerDiensten").MoveToAbsolute is not a function
Source File: http://www.dagservice.nl/tweakers/tweaktest.html
Line: 75

wat me niet logisch lijkt aangezien die functie toch zou moeten bestaan?, maar om maar te laten zien dat ik het geprobeerd heb...

In ieder geval: ik denk dat de voorbeeldpagina voor zich spreekt. Wie biedt uitkomst?

[Glaanie]

Hmm, het eerste wat me opvalt is de aanroep van de functie:

code:

 div_ref("layerDiensten").MoveToAbsolute

Het probleem zit 'm (denk ik, ik heb ff geen tijd om te testen) dat je een functie aanroept met funtienaam("hoepel") en vervolgens een .BlaBla achter zet. Voor zover ik weet kan een javascript functie alleen worden gebruikt als funtienaam("hoepel") of hooguit functienaam.tweedegedeelte("hoepel"). In het voorbeeld van jou klopt dit helemaal, aangezien jij een functie hebt met de naam div_ref(id), verder niets erachter.
Nogmaals, ik heb geen tijd om te testen, dus hoe het wel zou moeten werken, weet ik niet. Ik hoop wel dat ik je op het juiste spoor heb gebracht.

[NaliXL]

Volgens mij werkt de functie getElementByID("id") ook zo... Maar ik zal eens kijken of het wat doet...

Edit:
Als ik de code verander in:

JavaScript:

                    var divrstyle_layerDiensten = div_ref_style("layerDiensten");
                    var divrstyle_layerContact  = div_ref_style("layerContact");
                    var divr_layerDiensten      = div_ref("layerDiensten");
                    var divr_layerContact       = div_ref("layerContact");
                    
                    for (var A = 0;A < 10;A++){
                        // 1e poging
                        divrstyle_layerDiensten.Top = (parseInt(div_ref_style("layerDiensten").Top) + 5) + "px";
                        divrstyle_layerContact.Top  = (parseInt(div_ref_style("layerContact").Left) + 5) + "px";
                        
                        // 2e poging
                        divrstyle_layerDiensten.topPos += 5;
                        divrstyle_layerContact.topPos += 5;
                        
                        // 3e poging
                        // divr_layerDiensten.MoveToAbsolute(100, 100);
                        // divr_layerContact.MoveToAbsolute(100, 100);
                        
                        // 4e poging
                        divr_layerDiensten.MoveTo(100, 100);
                        divr_layerContact.MoveTo(100, 100);
                    }

dan werkt het ook nog niet. Overigens is de regel met MoveToAbsolute uitgecommentariseerd omdat de JS console steeds klaagde dat die functie niet bestond...

[ Voor 119% gewijzigd door NaliXL op 25-04-2005 09:56 . Reden: Iets vollediger ]

[crisp]

MoveToAbsolute is ook geen standaard functie, en al helemaal geen method van je object.
Wat je moet doen is de style-properties voor top en left aanpassen.

[NaliXL]

@crisp: is dat niet wat ik doe met

JavaScript:

divrstyle_layerDiensten.Top = (parseInt(div_ref_style("layerDiensten").Top) + 5) + "px";
divrstyle_layerContact.Top  = (parseInt(div_ref_style("layerContact").Left) + 5) + "px";

?
En btw heb ik dit ook al geprobeerd:

JavaScript:

divrstyle_layerDiensten.Top = (parseInt(divrstyle_layerDiensten.Top) + 5) + "px";
divrstyle_layerContact.Top  = (parseInt(divrstyle_layerContact.Top) + 5) + "px";

[crisp]

nee, zo:

JavaScript:

divrstyle_layerDiensten.style.top = (parseInt(divrstyle_layerDiensten.Top) + 5) + "px";
divrstyle_layerContact.style.top  = (parseInt(divrstyle_layerContact.Top) + 5) + "px";

[Sappie]

divrstyle_layerDiensten en divrstyle_layerContact refereren reeds naar de style (maakte ik net op uit de code op de site). Het feit dat het niet werkt zit het dus in het gebruik van de hoofdletter "T" in "Top", wat zoals crisp al aangeeft een kleine letter moet zijn. zo dus:

code:

divrstyle_layerDiensten.top = (parseInt(divrstyle_layerDiensten.top) + 5) + "px";

[NaliXL]

Helaas, ik heb het nog niet op kunnen lossen, ondanks alle tips. Ik kan me overigens ook niet voorstellen dat Firefox me niet zou waarschuwen als Top met een hoofdletter geen property zou zijn. In ieder geval: ik heb alle gesuggereerde oplossingen eens verwerkt in een nieuwe versie van de pagina. Heeft er nog iemand een suggestie?

[André]

Cherub schreef op maandag 25 april 2005 @ 13:18:
Ik kan me overigens ook niet voorstellen dat Firefox me niet zou waarschuwen als Top met een hoofdletter geen property zou zijn.

Op het moment dat jij Top een waarde geeft maak jij dus een property aan en waarom zou FF daar een waarschuwing over geven?

[NaliXL]

@André: ik wist niet dat je ook properties kon maken anders dan aan een bestaand object te refereren of er een te declareren. Dacht altijd dat JS een expliciete taal was (met expliciet gedeclareerde variabelen)? Weer wat geleerd

[André]

En zoals crisp al zegt kun je niet naar de style refereren en zul je naar het object moeten refereren zodat de aanroep style.top word en niet gewoon top (zie crisps laatste post).

[Guldan]

ok... /me gaat ff brainstormen...

Stel je zou die knoppen in 1 DIV zetten.

code:

<div id='menu'>
<div id='item1'>Item1</div>
<div id='item2'>Item1</div>
<div id='item3'>Item1</div>
</div>

en dan de css de een height opgeven van 0.

code:

#menubalk
{
    position:absolute;
    width:100px;
    height:0px;
    overflow:hidden;
    visibility:hidden;
}

#item1
{
     //do some stuff
}

etc.

en dan in de javacode. zodra je op de bovenste menubalk klikt de menudiv visible maken en hem steeds hoger/lager laten worden. Ik zit niet echt into javascript ofzow.. maar ik hoop dat je hier wat aan hebt.

[Sappie]

André schreef op maandag 25 april 2005 @ 13:37:
En zoals crisp al zegt kun je niet naar de style refereren en zul je naar het object moeten refereren zodat de aanroep style.top word en niet gewoon top (zie crisps laatste post).

Ik ben geen held in javascript maar zie niet in waarom dat niet zou kunnen? Met

code:

var blaat = document.getElementById("bla").style;
blaat.top = 100 + "px";

bewerkstellig je toch hetzelfde als met

code:

document.getElementById("bla").style.top = 100 + "px";

of niet?

[NaliXL]

@Sappie, ik geloof ook niet dat dat een probleem mag zijn. Maar ik ga het even proberen.
Edit: het maakt inderdaad geen verschil.

@Guldan, ik geloof dat ik zo ongeveer hetzelfde aan het doen ben als jij, alleen zijn die menudivs altijd zichtbaar en reageren ze op een onMouseover i.p.v. een onClick (in het geval je het niet gezien hebt: het is niet de bedoeling dat alléén die GIF geänimeerd word, de layer moet ook bewegen, en dat is het probleem).

[ Voor 5% gewijzigd door NaliXL op 25-04-2005 14:08 ]

[André]

Cherub schreef op maandag 25 april 2005 @ 14:04:
@Sappie, ik geloof ook niet dat dat een probleem mag zijn. Maar ik ga het even proberen.
Edit: het maakt inderdaad geen verschil.

Maakt ook geen verschil, ik was even in de wat met wat anders

Als jij in de functie Initialize de top's van de divs declareert werkt het prima:

code:

div_ref_style("layerDiensten").top = "190px";

[ Voor 25% gewijzigd door André op 25-04-2005 14:57 ]

[Guldan]

@ Cherub: hmmzz.... hmmz ik geloof dat ik je begrijp. Je wilt dus dat nu alles mee naar beneden gaat. Ook je huidige menuitems. Dat lijkt mij idd vrij lastig.Dan zou je constant de onderkant van die glij div in de gaten moeten houden de rest daarop aanpassen. Ik denk dat ik je daar niet zoveel verder mee kan helpen. Ik had je startpost iewat verkeerd begrepen. Suc6 iig

[NaliXL]

André schreef op maandag 25 april 2005 @ 14:26:
[...]
Als jij in de functie Initialize de top's van de divs declareert werkt het prima:

code:

div_ref_style("layerDiensten").top = "190px";

Hey, bedankt André! Dat is de oplossing blijkbaar . Dan ben ik meteen ook wel nieuwsgierig: de waarde van .top is toch al heel duidelijk in mijn CSS code gedefiniëerd? Is het een bug in firefox dat die niet gebruikt word?

[crisp]

Cherub schreef op dinsdag 26 april 2005 @ 08:42:
[...]

Hey, bedankt André! Dat is de oplossing blijkbaar . Dan ben ik meteen ook wel nieuwsgierig: de waarde van .top is toch al heel duidelijk in mijn CSS code gedefiniëerd? Is het een bug in firefox dat die niet gebruikt word?

Wat is heel duidelijk? Alleen dit is heel duidelijk:

HTML:

<div style="position:absolute;top:100px"></div>

Alles wat je via externe stylesheets doet resulteert in berekende styleproperties (denk aan de cascade), en is dus niet direct uit te lezen; daarvoor heb je getComputedStyle of currentStyle nodig.
Een alternatief is nog om in de initiele fase iets met offsetTop te doen.

Overigens opvallend dat je wel XHTML wilt gebruiken, maar ook support voor NS4 en IE4 inbouwt. Verder zitten er een aantal validatie-foutjes in, en moet je met XHTML rekeneing houden met het feit dat attributen ook case-sensitive zijn. 'onMouseover' gaat bijvoorbeeld niet werken op het moment dat je ook een XHTML-mimetype gaat gebruiken, en de HTML-comments in je style en script-blokken gaan dan ook problemen opleveren (en zijn voor moderne browsers ook compleet overbodig).

Ook dit soort referenties kunnen eigenlijk ook alleen werken in browsers die het document.all model ondersteunen:

JavaScript:

document.producten.src

Last but not least: een sliding effect zal alleen dan zichtbaar worden als je tussen het wijzigen van de positie elke keer een korte timeout inlast zodat je de browser de tijd geeft een repaint te doen.
Overigens is het ook zinvol om referenties naar je objecten (tijdelijk) op te slaan in een variabele; elke keer weer een lookup moeten doen is killing voor de performance.

[ Voor 45% gewijzigd door crisp op 26-04-2005 09:02 ]

[NaliXL]

Crisp, bedankt voor al je tips.

Overigens opvallend dat je wel XHTML wilt gebruiken, maar ook support voor NS4 en IE4 inbouwt

Ik heb hier en daar wel eens xml en css geleerd op het Grafisch Lyceum R'dam, maar was er nooit echt verder mee gegaan. Ik zag in GoLive de optie om mijn pagina als XHTML weg te schrijven, en kreeg na wat expirimenteren de indruk dat dit een in feite een XML document is, waarin ruimte is gemaakt voor een blok HTML? Anyway, ik heb ervoor gekozen om dit te gebruiken om een beetje toekomstbestendig te zijn, met het idee: baat het niet, dan schaad het niet. Maar misschien kan ik beter gewoon HTML blijven gebruiken...

Verder zitten er een aantal validatie-foutjes in, en moet je met XHTML rekeneing houden met het feit dat attributen ook case-sensitive zijn.

Validatiefoutjes die werk ik nog wel weg, bovendien is het document wat ik jullie heb laten zien alleen maar een abstractie van wat ik hier probeer te maken (was alleen bedoeld om probleem te laten zien).

en moet je met XHTML rekeneing houden met het feit dat attributen ook case-sensitive zijn. 'onMouseover' gaat bijvoorbeeld niet werken op het moment dat je ook een XHTML-mimetype gaat gebruiken

Thanx, ga ik zeker meenemen. Ik pluk een heleboel van diverse websites af, met name omdat ik JavaScript nogal moeilijk te volgen vind soms (neem bijvoorbeeld de reden waarom ik dit topic gestart heb). Maar da's meer een persoonlijk probleempje. De MSDN vertelt me dat het lowercase moet zijn zie ik...

HTML-comments in je style en script-blokken gaan dan ook problemen opleveren

Dat begrijp ik niet helemaal. Comments in XML zien er toch hetzelfde uit als comments in HTML (<!-- comment -->)? Overigens is de CSS code aangemaakt door GoLive. Is dit een slordigheid van GoLive dan?

[crisp]

Cherub schreef op dinsdag 26 april 2005 @ 09:44:
Dat begrijp ik niet helemaal. Comments in XML zien er toch hetzelfde uit als comments in HTML ()? Overigens is de CSS code aangemaakt door GoLive. Is dit een slordigheid van GoLive dan?

Check dit:

PHP:

<?php

header('Content-type: application/xhtml+xml');

?><!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=iso-8859-1" />
        <title>foo</title>
        <style type="text/css"><!--
            h1 { color: red; }
        --></style>
    </head>
    <body>
        <h1>test</h1>
        <p>
            <script type="text/javascript"><!--
                alert('foo');
            //--></script>
        </p>
    </body>
</html>

(in script moet je de end-remark ook nog voorzien van een comment).
In een XHTML-capable browser zoals firefox zal je zien dat het gehele scriptblok als comment wordt gezien; m.a.w. er wordt niets uitgevoerd. Ook de style wordt niet toegepast.