[HaBo]
| (Web-) Design und webbasierte Sprachen Tipps & Tricks, Designabgleich, HTML & Javascript, Flash, ASP, PHP, Perl/CGI... |
javascript menuentries wachsen lassen
Diskussion: javascript menuentries wachsen lassen im Forum (Web-) Design und webbasierte Sprachen, in der Kategorie Web, Network & Multimedia Palace; Anzeige ich hab ein listing geschrieben und brauch mal andere augen um drueberzugucken, ich find ums verrecken den fehler nicht. ...
 |
07.02.11, 17:07
| #1 (permalink) |
| Registriert seit: 27.12.07  Likes: 0 |  javascript menuentries wachsen lassen Anzeige 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 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 Geändert von simcup (10.02.11 um 00:58 Uhr) |
|  |
|
07.02.11, 23:43
| #2 (permalink) |
 Registriert seit: 02.09.10   Likes: 21 |  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> Grüße |
|
| |
| HaBOT | - Anzeige - |
|
|
09.02.11, 15:49
| #3 (permalink) |
| Themenstarter Registriert seit: 27.12.07 Likes: 0 | 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> Geändert von simcup (11.02.11 um 01:09 Uhr) |
|
| |
|
| - Anzeige - | |
|
|
[HaBo] » Web, Network & Multimedia Palace » (Web-) Design und webbasierte Sprachen » javascript menuentries wachsen lassen
| Themen-Optionen | |
| Ansicht | |
Linear-Darstellung
| |
