javascript menuentries wachsen lassen

S

simcup

0
ich hab ein listing geschrieben und brauch mal andere augen um drueberzugucken, ich find ums verrecken den fehler nicht.

Code: 
<html>
<head>
<title>belibige seite</title>

<style type="text/css">
div.col {
float:left;
}
div.middle {
width:30px;
height:500px;
background-color:brown;
}
div.right ul li {
width:150px;
height:30px;
vertical-align:middle;
background-color:blue;
font-size:22px;
margin-left:-1em;
margin-bottom:5px;
}
</style>

<script type="text/javascript">
//variablen
var growcounter = 0;
var shrinkcounter = 0;

//funktion bei mouseover
function grow(id)
{
    if(growcounter < 5)
    {
        var entry = document.getElementById(id).style;
        entry.width += 10;
        entry.height += 2;
        growcounter++;
        setTimeout('grow("'+id+'");', 50);
    }
    else
    {
        growcounter = 0;
    }
}

//function bei mouseout
function shrink(id)
{
    if(shrinkcounter < 5)
    {
        var entry = document.getElementById(id).style;
        entry.width += 10;
        entry.height += 2;
        shrinkcounter++;
        setTimeout('shrink("'+id+'");', 50);
    }
    else
    {
        shrinkcounter = 0;
    }
}
</script>

</head>

<body>

<div class="left col"><div>

<div class="middle col"></div>

<div class="right col">
<ul>
<?php
$new = array("test1", "test2", "test3");
foreach($new as $entry) echo '<li id="'.$entry.'" onmouseover="grow('.$entry.');" onmouseout="shrink('.$entry.');">'.$entry.'</li>';
?>
</ul>
</div>

</body>

</html>
ich hab mich schon durch diverse tuts und foren gequaelt aber nichts gefunden.

ich will das die blauen eintraege "langsam" anwachsen, wenn man mit der maus drueber faehrt und wieder schrumpfen wenn man das element verlaesst. da die eintraege hinterher aus einer datenbank gelesen werden sollen lasse ich die eintraege mit php erstellen. ich habe schon probiert die groeße einfach neu zuzuweisen, um zu überprüfen ob die functionen aufgerufen werden(werden sie), allerdings koennte ich das auch mit css realisieren und es würde nicht den gewünschten effekt erziehlen.

thx if help
 
Zuletzt bearbeitet:
Hey

hab gerade etwas daran rumgesucht und bin darauf gestoßen, dass deine ID falsch, bzw. nur als ein html object übergeben wird. Mit dieser Version "tut" sich schonmal was:

Code: 
<html>

<head>

<title>belibige seite</title>


<style type="text/css">

div.col {

float:left;

}

div.middle {

width:30px;

height:500px;

background-color:brown;

}

div.right ul li {

width:150px;

height:30px;

vertical-align:middle;

background-color:blue;

font-size:22px;

margin-left:-1em;

margin-bottom:5px;

}

</style>


<script type="text/javascript">

//variablen

var growcounter = 0;

var shrinkcounter = 0;

//funktion bei mouseover

function grow(id)

{

    if(growcounter < 5)

    {
        var entry = document.getElementById(id.innerHTML).style;

        entry.width += 10;

        entry.height += 2;

        growcounter++;

        setTimeout('grow("'+id+'");', 50);

    }

    else

    {
	alert("Hello World!");
        growcounter = 0;

    }

}


//function bei mouseout

function shrink(id)

{

    if(shrinkcounter < 5)

    {

        var entry = document.getElementById(id.innerHTML).style;

        entry.width += 10;

        entry.height += 2;

        shrinkcounter++;

        setTimeout('shrink("'+id+'");', 50);

    }

    else

    {

        shrinkcounter = 0;

    }

}

</script>


</head>


<body>


<div class="left col"><div>


<div class="middle col"></div>


<div class="right col">

<ul>

<?php

$new = array("test1", "test2", "test3");

foreach($new as $entry) {
echo '<li id="'.$entry.'" onmouseover="grow('.$entry.');" onmouseout="shrink('.$entry.');">'.$entry.'</li>';
}

?>


</ul>

</div>


</body>


</html>

Einfach bei deinem elementbyid bei der variable "id" noch ein .innerHTML ran.

Grüße
 
fertig

so bin fertig und habe alles auf ein simples snippet heruntergeschrieben:

Code: 
<script type="text/javascript">
/**********
menüeinträge editieren
**********/
var menu = new Array("CSS", "JavaScript", "PHP", "C++", "Pyhton", "Ruby");
var links = new Array("css.htm", "js.htm", "php.htm", "cpp.htm", "py.htm", "rb.htm");
/**********
unterhalb dieses kommentars muss nichts mehr geändert werden
**********/
//variablen
var growing = new Object();
var counter = new Object();
//funktion bei mouseover
function grow(id)
{
    if(counter[id] < 5)
    {
        counter[id]++;
		if(!growing[id])growing[id] = true;
		var entry = document.getElementById(id).style;
        entry.width = 150 + 10 * counter[id];
        entry.height = 30 + 2 * counter[id];
		entry.marginBottom = 10 - 2 * counter[id];
        setTimeout("grow('"+id+"');", 50);
    }
	else
	{
		growing[id] = false;
	}
	
}
//function bei mouseout
function shrink(id)
{
    if(counter[id] > 0 && !growing[id])
    {
		counter[id]--;
		var entry = document.getElementById(id).style;
        entry.width = 150 + 10 * counter[id];
        entry.height = 30 + 2 * counter[id];
		entry.marginBottom = 10 - 2 * counter[id];
        setTimeout("shrink('"+id+"');", 50);
    }
	else if(counter[id] == 0)
	{
		var entry = document.getElementById(id).style;
        entry.width = 150;
        entry.height = 30;
		entry.marginBottom = 10;
	}
	else
	{
		setTimeout("shrink('"+id+"');", 50);
	}
}
for(var i = 0; i < menu.length; i++) {
counter[menu[i]]=0;
document.write('<a href="'+links[i]+'"><div id="'+menu[i]+'" style="background-color:#ffff00;width:150;height:30;margin-bottom:10;" onmouseover="grow(\''+menu[i]+'\');" onmouseout="shrink(\''+menu[i]+'\');">'+menu[i]+'</div></a>');
}
</script>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben