Mit Javascript auf externe CSS-Elemente zugreifen

[CyberDemon]

Hallo zusammen,

ich habe einen <div>-Container per CSS absolut positioniert. Die CSS-Angaben befinden sich in einer externen *.css Datei.

Ich möchte nun mit Javascript auf das Element 'left' zugreifen, um die Position dynamisch zu ändern. Die Funktion befindet sich ebenfalls in einer externen *.js Datei.

Mein bisheriger Versuch:

Javascript:

show(id)

{

	var i;

	if (document.getElementById) 

 	{

		for (i=250; i<=350; i++)

		{

			document.getElementById(id).style.left="i";

		}

	} 

	else if (document.all) 

	{

		for (i=250; i<=350; i++)

		{

			document.all[id].style.left="i";

		}

	} 

	else if (document.layers) 

	{

		for (i=250; i<=350; i++)

		{

			document.layers[id].left="i";

		}

	}

}[/PHP]

HTML:

[PHP]<a href="index.htm#" onClick="show('sub_menu');">
<img src="design_1.gif" name="design" border=0>
</a>

<!--Das soll dynamisch eingeblendet werden.-->
<div class="submenu_design" id="sub_menu" style="display:none;">
<!-- Navigation-->
</div>

CSS:

.submenu_design

{

position:absolute;

top:131px;

left:250px;

width:100px;

z-index:2;

} [/PHP]

Das funktioniert aber nicht. Es kommt immer die Fehlermeldung, das ein Objekt erwartet wird.

[kills]

Hm naja, da sind auch einige Fehler im JS:

// definition vergessen

function show(id)

{

    var obj = null;

    if (document.getElementById)

    {

        obj = document.getElementById(id);

    }

    else if (document.all)

    {

        obj = document.all[id];

    }

    else if (document.layers)

    {

        obj = document.layers[id];

    }


    if ( obj != null) {

        var i;

        for (i=250; i<=350; i++)

        {

            // hier die Variable i als Variable zuweisen, nicht als String.. Einheit nicht vergessen!

            obj.style.left = i + "px";

        }

    }

} 

ungetestet!

Das mit dem Object anhand der ID Heraussuchen würde ich in eine Extra Funktion exportieren.

PS:

Damit das im Mozilla funktioniert, muss die eingenschaft left im CSS schon einmal gesetzt sein...

Gruß,

Markus

[CyberDemon]

Danke! Funktioniert soweit. Die Fehler sind peinlich.

Wie bekomme ich es nun hin, das der Layer von der Position 250px nach 350px "wandert"? Mit deinem Beispiel springt er sofort dorthin.

[etreu]

In dem du den Layer von Punkt A nach B in einer bestimmten Zeit bewegst.

Mittels setInterval(). Da kannst du dann ein Timeout angeben. Stell es dir einfach so ein, wie du willst.

[CyberDemon]

Hier mein neuer Code:

var aktiv = window.setInterval("show()", 100);

var i=250;


function show(id)

{

	var obj = null;

    if (document.getElementById)

    {

        obj = document.getElementById(id);

    }

    else if (document.all)

    {

        obj = document.all[id];

    }

    else if (document.layers)

    {

        obj = document.layers[id];

    }


    if ( obj != null) 

    {

        	obj.style.display="block";

            i=i+1;

			obj.style.left = i + "px";

			if(i==350)

			{

				window.clearInterval(aktiv);

			}

    }

} [/PHP]

Der Layer bewegt sich zwar, aber nicht bis zur Endposition. Er bewegt sich nur um jeweils 1 Pixel. Ich muß für jede weitere Bewegung mit der Maus über den auslösenden Button fahren. Ausserdem bewegt er sich über die Endposition hinweg. Bei 350 ist also nicht Schluß.

[CyberDemon]

Es bewegt sich!

Allerdings gibt es immer noch ein gewaltiges Problem.

Der Layer fährt nun von A => B. Wenn der Layer an der Endposition angelangt ist und man jetzt mit der Maus nochmal über den Auslöser fährt, bewegt sich der Layer endlos weiter. Er soll aber da stehen bleiben.

Hier der Code:

var i=250;


function show2(id)

{

	if(i<=350)

	{

		var aktiv = setInterval("show('"+id+"')", 10);

	}

}


function show(id)

{

	var obj = null;

    if (document.getElementById)

    {

        obj = document.getElementById(id);

    }

    else if (document.all)

    {

        obj = document.all[id];

    }

    else if (document.layers)

    {

        obj = document.layers[id];

    }


    if ( obj != null) 

	{

       	obj.style.display="block";

		// hier die Variable i als Variable zuweisen, nicht als String. Einheit nicht vergessen!

        i=i+1;

		obj.style.left = i + "px";

		if(i==350)

			{

				clearInterval(aktiv);

			}

    }

}

[/PHP]

Im HTML-Tag rufe ich die Funktion "show2(id)" auf.

[kills]

var i=250;

var move = true;


function show2(id)

{

    if(i<=350 && move)

    {

        var aktiv = setInterval("show('"+id+"')", 10);

    }

}


function show(id)

{

    var obj = null;

    if (document.getElementById)

    {

        obj = document.getElementById(id);

    }

    else if (document.all)

    {

        obj = document.all[id];

    }

    else if (document.layers)

    {

        obj = document.layers[id];

    }


    if ( obj != null)

    {

           obj.style.display="block";

        // hier die Variable i als Variable zuweisen, nicht als String. Einheit nicht vergessen!

        i=i+1;

        obj.style.left = i + "px";

        if(i==350)

            {

                clearInterval(aktiv);

                move = false;

            }

    }

} 

ungetestet!

Gruß,

Markus