[JS] Buttons wiederholen Funktion?

Bleistift

Hey,

ich sitze gerade an einem kleinen Menü, doch es gibt ein Problem ..
Das Menü wird mit JavaScript erstellt.
Anschließend wollte ich Buttons diesen Menüpunkten zuteilen per JavaScript.

Das Menü ist so aufgebaut, dass 5 Elemente in einem "menue"-Element sind. Diese 5 Elemente (MI1-5) haben ein onmouseover- (dropdown()) und onmouseoutEvent (dropup()).
Danach wollte ich die Menüunterpunkte als Buttons erstellen und hinzufügen ..
Die beiden Funktionen funktionieren soweit aber wenn ich nun in einem der Elemente über einen Menüpunkt, also einen Button fahre, wieder die dropup() function ausgeführt und die dropdown() wird wiederholt .. Die Buttons haben aber keine functions ..
Hatte es auch mit Links versuchst aber da ist es genau das Gleiche ..

Wie kann ich jetzt meinem Menüpunkten die Buttons so zuweisen, dass sie diesem Element angehören?
Ich denke mal das passiert weil der Button oder die Links ein neues Objekt darstellen, oder?

Es gibt leider auch nichts in der Konsole was mir helfen könnte ..

Hier der betreffende Quellcode:

Code

function createMenue() {    
// get Size
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var docHeight = (screenHeight/2)-30;




// menue - element
var myMenue = document.createElement("div");
myMenue.style.width = screenWidth-400 + "px";
myMenue.style.height = "30px";
myMenue.style.marginLeft = "200px";
myMenue.style.marginTop = docHeight + "px";
myMenue.id = "dropdown";        

// menüpunkte MI1-5
myMenue.innerHTML = "<div id='MI1' class='menue_item'>Home<br></div>" +
"<div id='MI2' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Übersicht<br><br></div>" +
"<div id='MI3' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Spiele<br><br></div>" + 
"<div id='MI4' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Informationen<br><br></div>" + 
"<div id='MI5' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Login<br><br></div>";
// add element to body
document.body.appendChild(myMenue);

// create buttons
var myBtn = document.createElement("input");
myBtn.type = "button";
myBtn.id = "example.php";
//myBtn.onclick = "getPage(this.id); return false;";
myBtn.value = "Example 1.1";
// add buttons
document.getElementById("MI2").appendChild(myBtn);
}

Alles anzeigen

synaptic

also so geschichten macht man wesentlich besser mit jQuery.
dein problem ist wahrscheinlich, dass des event-bubbling zu deinem nachteil wird (ich vermute einfach mal, dass events ohne jquery genauso bubblen, wie mit)
will sagen du kloppst elemente in ein div, auch wenn du in dieses div andere elemente reinlegst wird wahrschenlich ein klick auf ein kind-element ebenso ein klick auf das umschliessende div sein.

aber: ein menü mit javascript zu erstellen ist eigentlich so fruchtbar wie eine flashseite fürs ipad zu machen

Bleistift

Danke für deine Antwort.

Könntest du mir vielleicht sagen wie ich ein onmouseover Event abfragen kann?
Hab schon gegoolet aber da finde ich immer nur das aufrufen einer Funktion mit functioname(e.type) zum beispiel aber das bringt mir nicht viel

Also sprich das ich abfragen kann, ist eines der child-Element onmouseover?

Hatte gerade selber bisschen ausprobiert und in etwa sowas gebastelt:

Code

function dropup(closeItem) {
var childCount = document.getElementById(closeItem).childNodes;
var i = 0;
while(i != childCount) {
if (document.getElementById(closeItem).childNodes[i].onmouseover) {
return;
}
else {
i++
}
}
// schließe Menüpunkt
}

Alles anzeigen

Funzt aber leider nicht ..
Oder kann ich es mit document.getElementById(closeItem).childNodes[i] = Event.onmouseover versuchen?, Hm

Das mit dem Klick auf das umschließende Div ist irrelevant bei mir

synaptic

der klick auf das div ist ja auch nur das beispiel gewesen, das is des gleiche system bei ALLEN events.

also an dein element kommste doch via myBtn dran oder nich? will sagen während du es erstellst und in einer variablen hast kannst du dem ding zum einen eine eigene ID geben und zum anderen dort dann auch anbinden.

Code

myBtn.onmouseover = function(){
  //do heroic stuff in here
}

Bleistift

Ja das ist klar meine Buttons haben ja auch ne ID
Aber ich möchte in einer ganz anderen Funktion abfragen ob die Buttons "gehovert" werden..

Halt in der dropup() function.
Also ParentElement onmouseout -> child Element onmouseover? -> ja?-return, nein?-schließe parent

Und myBtn befindet sich in der tool.js. Die Menüfunktionen sind in der dropdown.js

synaptic

ja dann nutz doch die id..
dafür is die ja da. und dass du hier mit zwei files arbeitest hatte mir meine glaskugel verschwiegen, ich muss die wohl umtauschlichen, die sau..^^
ich denke dafür solltest du mit zwei kontrollvariablen arbeiten einmal für parent und einmal fürs child.

und dann die beiden vars abfragen wird wohl nich ohne globalisierung gehen
aber ich bleibe dabei du machst dir hier sowas von das leben schwer, mit jQuery wär es weniger

Bleistift

ich habe leider absolut 0 plan von jQuery noch nie angeschaut

Mit nem Timeout funzt es auch nicht, ouh man.

Hast du vielleicht einen hilfreichen Artikel zu jQuery?

synaptic

mmh hilfreiche artikel. näh ich habs in medias res gelernt. eifach mal ne bildergalerie damit bauen

is im prinzip voll easy.
1.) die selektoren um ein objekt zu bekommen oder ein array von objekten is wie bei CSS musste nur nen $() drum wrappen oder nen jQuery() (dollarzeichen is das short-tag für jQuery, wenn man es benutzt. also im css #meineID wird zu $('#meineID).
2.) benutzen wie normales javascript, nur eben einfacher
3.) man kann mehrere funktionen verbinden (chaining nennt man des) also: $('#meineID).slideup().css('height', '20px');

http://oscarotero.com/jquery/ mal als funktionsübersicht zur doku

Bleistift

Kann ich jQuery einfach in JavaScript Quellcode schreiben?
Also sowas wie

Code

<script type="text/javascript">
function example(closeItem) {
while(i < childCount) {
if(event.target == document.getElementById(document.getElementById(closeItem).childNodes[i])) {
return
}
}
}
</script>

synaptic

klar das is nur ne javascript-bibliothek

HTML

<script type="text/javascript"> 
function example(closeItem) { 
while(i < childCount) { 
  if(event.target == $('#closeItem').children().first().attr('id')) { 
    return 
  } 
} 
} </script>

holt dann vom closeItem das erste kind und vergleicht die id mit dem event.target

Bleistift

Also das ganze sieht bei mir jetzt so aus:

Code

function dropup(closeItem) {var i = 0;
var chCount = document.getElementById(closeItem).childNodes.length;
while(i != chCount) {
if(event.target == $('#' + closeItem).children().eq(i).attr('id')) {
alert("true"); // trifft nie ein!
return;
}
i++;
}

state = 0;
document.getElementById(closeItem).style.height = "30px";
document.getElementById(closeItem).style.marginTop = "0px";
}

Alles anzeigen

Habe es auch schon versucht mit $("input").onmouseover(function(event) { return; }); aber das funzt auch nicht.

Das Problem ist bei mir nun, dass sobald ich einmal etwas gehovert habe nichts mehr geht.
Neuladen geht nicht mehr über F5 oder STRG+F5, irgendetwas anderes hovern auch nicht, die Seite ist einfach tod und die Konsole bleibt leer

synaptic

gib mal bitte etwas mehr sourcecode..
dann schau ich mir das mal genauer an

Bleistift

Ok hier mal der vollständige Sourcecode:

tools.js (hier wird Menü erstellt und im späteren Verlauf werden dort alle Menüunterpunkte als Buttons hinzugefügt)

Code

function createMenue() {// get Size
var screenWidth = window.innerWidth-440;
var screenHeight = window.innerHeight;
var docHeight = (screenHeight/2)-30;




// menue - element
var myMenue = document.createElement("div");
myMenue.style.width = screenWidth + "px";
myMenue.style.height = "30px";
myMenue.style.marginLeft = "220px";
myMenue.style.marginTop = docHeight + "px";
myMenue.id = "dropdown";        

// menüpunkte MI1-5
myMenue.innerHTML = "<div id='MI1' class='menue_item'>Home<br></div>" +
"<div id='MI2' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Übersicht<br><br></div>" +
"<div id='MI3' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Spiele<br><br></div>" + 
"<div id='MI4' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Informationen<br><br></div>" + 
"<div id='MI5' class='menue_item' onmouseover='dropdown(this.id); return false;' onmouseout='dropup(this.id); return false;'>Login<br><br></div>";
// add element to body
document.body.appendChild(myMenue);

// create buttons
var myBtn = document.createElement("input");
myBtn.type = "button";
myBtn.id = "example.php";
//myBtn.onmouseover = function() { block(this.id); }
//myBtn.onclick = "getPage(this.id); return false;";
myBtn.value = "Example 1.1";
// add buttons (example for Btn1^)
document.getElementById("MI2").appendChild(myBtn);
}

Alles anzeigen

createMenue() wird beim onload Event vom body ausgeführt.

So dann gibt es noch die dropdown.js, dort sind die functions verfügbar, welche mouseover- und mouseoutEvent der Divs MI1 bis MI5 behandeln

Code

// GLOBALSvar tmpObjHeight;
var tmpObjTop;
var counter;
var menueSlide;
var state = 0;




function dropdown(tmpObj) {
if(state==1) {
return;
}
//else {
//var childCount = document.getElementById(tmpObj).childNodes.length;
//var i=0;
//while(i != childCount) {
//if(event.target == $('#MI2').children().first().attr('id')) {
//return; - kein return
//}
//else {
//i++;
//}
//}
//}


// standardgrößen
    document.getElementById("MI1").style.height = "30px";
    document.getElementById("MI1").style.marginTop = "0px";

    document.getElementById("MI2").style.height = "30px";
    document.getElementById("MI2").style.marginTop = "0px";

    document.getElementById("MI3").style.height = "30px";
    document.getElementById("MI3").style.marginTop = "0px";

    document.getElementById("MI4").style.height = "30px";
    document.getElementById("MI4").style.marginTop = "0px";

    document.getElementById("MI5").style.height = "30px";
    document.getElementById("MI5").style.marginTop = "0px";

tmpObjHeight = 31;
tmpObjTop = 0;
counter = 1;
state = 1;



clearInterval(menueSlide);
// slide effect
menueSlide = setInterval(function() { slideMenue(tmpObj); }, 4);
}


// slide effect - mouseover
function slideMenue(tmp) {
document.getElementById(tmp).style.height = tmpObjHeight + "px";
document.getElementById(tmp).style.marginTop = tmpObjTop + "px";
tmpObjHeight = tmpObjHeight+2;
tmpObjTop = tmpObjTop-1;
counter++;
if(counter == 129) {    
clearInterval(menueSlide);
}
}


// mouseout-Event
function dropup(closeItem) {
var i = 0;
var chCount = document.getElementById(closeItem).childNodes.length;
while(i != chCount) {
if(event.target == $('#' + closeItem).children().eq(i).attr('id')) {
alert("true"); // tritt niemals ein
return;
}
i++;
}




// standart wiederherstellen
state = 0;
document.getElementById(closeItem).style.height = "30px";
document.getElementById(closeItem).style.marginTop = "0px";
}

Alles anzeigen

Das ist eigentlich alles.
Klassenbibliothek von jQuery ist ebenfalls eingebunden (Version 1.7)..

Meine Güte das ist das Grundgerüst und ich stürz schon total ab xD

alxy

HTML

<div style="height: 30px; margin-top: 0px;" id="MI5" class="menue_item" onmouseover="dropdown(this.id); return false;" onmouseout="dropup(this.id); return false;">Login<br><br></div>

Das wird generiert... ist das richtig so? Oder sollte da wo this.id steht nicht die tatschliche id stehen?

Bleistift

ist ja eigentlich irrelevant ob da die id oder this.id steht. Kommt doch aufs gleiche hinaus und das funktioniert ja auch.

synaptic

hey bleistift, also ich bin heute abend noch nicht dazu gekommen dein script zu reviewen, aber was ich dir bisher mit sicherheit sagen kann ist dass "event" bei dir nicht bekannt ist

HTML

function dropup(closeItem) { var i = 0; var chCount = document.getElementById(closeItem).childNodes.length; while(i != chCount) { if(event.target == $('#' + closeItem).children().eq(i).attr('id')) { alert("true"); // tritt niemals ein return; } i++; }

du müsstest wenn das event als ersten funktionsparameter durchschleifen.

HTML

function dropup(e, closeItem)

dann kannste das mouse-event auch über den parameter auslesen..

sei bitte so gut und schreib mal in normalen worten auf, was du da vor hast also insgesamt bei deinem script (nicht nur in der funktion dort),
ich hab so das gefühl dass du nen dicken denkfehler hast.

dass du mit jquery noch nichts gemacht hast soll hier mal aussen vor bleiben, das wird schritt 2 oder 3

Bleistift

Ich find jQuery echt spannend und sieht sehr viel versprechend aus.
Habe mich dort mal etwas eingefunden aber funktionieren tut noch nicht viel Wird schon!

Also zu meiner Denkweise:

5 Elemente (MI1 bis MI5) im MainContainer "menue" welche per JavaScript (createMenue()) erstellt werden.
Diese 5 Elemente besitzen ein mouseover- und mouseoutEvent.
Beim mouseOverEvent soll sich das Element nach oben ziehen und nach unten ausklappen (funktioniert soweit!)
Wenn ich nun aber andere Objekte in den Elementen MI1 bis MI5 habe, erhalten diese die gleiche Eventfunktion vom Parent.
Sprich wenn man den Button für ein Menüpunkt hovert, wird dropup() ausgeführt, da das ParentElement ein mouseout-Event unterfällt.
Anschließend wird lustiger Weise dropdown() erneut ausgeführt und das ganze klappt sich wieder aus. Selbst wenn ich meinen Buttons beim mouseoverEvent null zuweise oder eine leere function.

Zum "event" - Parameter, das kann ich doch nicht einfach in der function als ersten Parameter benutzen, weil ich doch gar keinen 2. übergebe also sprich ich müsste dann immer die function dropdown() beim hovenr der 5 Elemente mit 2 Parametern aufrufen, also dropdown(e.currentTarget, this.id); return false; ?

Danke für deine Hilfe ich hoffe ich reiz deine Nerven nicht zu sehr

synaptic

ja das mit dem event haste richtig verstanden...
ich schau heut nach der versorgungsrunde meiner kaninchen mal drüber

edit:
hab schon angefangen, aber das bekomm ich heut nicht mehr fertig. hab bitte noch etwas geduld

synaptic

sorry stift, dass ich momentan so wenig zeit habe...
hab dir mal was vorbereitet, es ist nicht das ganze script, die hauptfunktion fürs dropping musste noch machen.
aber ich hab dir mal im jquery-style dein menü soweit mal vorbereitet.

eventuell hilft es dir ja mal nen anstoss zu finden

wollte dich jetzt nicht warten lassen, bis ich es fertig habe, sondern dir schomma nen zwischenstand bieten.
wenn du fragen hast nur raus damit

HTML

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Ninja at his best :o)</title>
  <script type='text/javascript' src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
  <script type='text/javascript'>
function createMenue() {


    var screenWidth = $(window).width()-440;
    var screenHeight = $(window).innerHeight();
    var docHeight = (screenHeight/2)-30;


    $('body').append('<div id="dropdown"></div>');
    var myMenu = $('body').children('#dropdown'); //ginge an der Stelle auch anders, aber ich habs mal so gemacht, damit du den werdegang nachvollziehen kannst
    var menuItems = new Array();
    menuItems.push('Home');
    menuItems.push('Übersicht');
    menuItems.push('Spiele');
    menuItems.push('Informationen');
    menuItems.push('Login');


    myMenu.css({
        width             : screenWidth + "px",
        height             : "30px",
        'margin-left'    : "220px",
        'margin-top'    : docHeight + "px",
        position        : 'relative'
    });


    for(index in menuItems){
        $('<div id="MI'+index+'" class="js_menuItem">'+menuItems[index]+'</div>').appendTo(myMenu);
        //wir registrieren an den neuen objkten hier noch keine weitere funktionalität, das gab bei mir bisher immer konflikte oder die funktion war nicht vorhanden
    }      
//    menuItems wird hier jetzt überschrieben, um ressourcen zu sparen
    var menuItems = myMenu.find('.js_menuItem');
    menuItems.each(function(){
        var aktitem = $(this);
        aktitem.mouseover(function(e){
            e.preventDefault();
            e.stopPropagation();
            var item = $(this);
            item.css('background', '#efefef');
        });
        aktitem.mouseout(function(e){
            e.preventDefault();
            e.stopPropagation();
            var item = $(this);
            item.css('background', '#000000');
        });
    });
}
$(document).ready(function(){
    createMenue();
});
  </script>
  <style type='text/css'>
html, body {
    background-color: #000;
    color: #fff;
    font: 12px arial;
}
div.menue_item
{
border: 1px solid #fff;
}


  </style>
</head>
<body>



5 Elemente (MI1 bis MI5) im MainContainer "menue" welche per JavaScript (createMenue()) erstellt werden.<br />
Diese 5 Elemente besitzen ein mouseover- und mouseoutEvent.<br />
Beim mouseOverEvent soll sich das Element nach oben ziehen und nach unten ausklappen (funktioniert soweit!)<br />
Wenn ich nun aber andere Objekte in den Elementen MI1 bis MI5 habe, erhalten diese die gleiche Eventfunktion vom Parent.<br />
Sprich wenn man den Button für ein Menüpunkt hovert, wird dropup() ausgeführt, da das ParentElement ein mouseout-Event unterfällt.<br />
Anschließend wird lustiger Weise dropdown() erneut ausgeführt und das ganze klappt sich wieder aus. Selbst wenn ich meinen Buttons beim mouseoverEvent null zuweise oder eine leere function.<br /><br />
</body>




</html>

Alles anzeigen

Tags