Elemente mit Jquery AB EINER BEST.HÖHE hiden

[kcd]

Hallo,
ich habe folgenden Code mit Jquery gebastelt:

  
$(document).ready(function(){  
    $("ul#nav > *").mouseover(function () {  
      $('select').css("display","none");  
    });  
    $("ul#nav > *").mouseout(function () {  
      $('select').css("display","inline");  
    });  
})

Damit will ich sobald die Navi gehovert wird, die Select-Boxen ausblenden.

Nun will ich aber nur alle Boxen innerhalb von bspw. 250px ausblenden.
wie mache ich das?

Danke, vg kcd

[Struppi]

ich habe folgenden Code mit Jquery gebastelt:

Ich vermute das Framework hat bestimmt eine Funktion, mit dem du die Höhe oder die Maße eines Elementes ermitteln kannst.

Vielleicht mal einen Blick in die Doku werfen.

Struppi.

[kcd]

Naja, dass es in der doc das Thema Mouse-Position gibt ist klar.
Mir ist aber grundsätzlich nicht klar, wie die Abfrage aussehen soll, unabhängig von der Syntax in Jquery.

kcd

[Struppi]

Naja, dass es in der doc das Thema Mouse-Position gibt ist klar.

wieso Mausposition? Ich dachte dir ging es um die Höhe des Elements.

Wobei, ich hab mir noch mal deine Frage durchgelesen und habe sie offensichtlich falsch verstanden.

Nun will ich aber nur alle Boxen innerhalb von bspw. 250px ausblenden.

wie mache ich das?

Nur ich verstehe diese Frage auch beim mehrmaligen lesen nicht. innerhalb von wo? welche Boxen?

Struppi.

[kcd]

ok, dann nochmal von vorne;-)

Ich will, dass innerhalb margin-top:500px alle select-elemente ausgeblendet werden, wenn ich mouseover ein bestimmtes Element gehe.
ist das jetzt verständlich?;-)

danke, gruß kcd

[Struppi]

Ich will, dass innerhalb margin-top:500px alle select-elemente ausgeblendet werden, wenn ich mouseover ein bestimmtes Element gehe.
ist das jetzt verständlich?;-)

Nein, was heißt innerhalb margin-top? Worin innerhalb?

Struppi.

[kcd]

Oberer Rand der Seite.
Von da an soll alles verschwinden was innerhalb y=+500px ist...

____________________________________________

|
|
|
|
|    [Hier steht bspw. ne Selectbox, die dann verschwinden soll...]
|
|
v
(500px)
-----------------------------------------

Hier steht bspw.  eine Selectbox, die bleiben soll...

jetzt verständlich?

[Struppi]

jetzt verständlich?

Ja, aber sowas gibt es nicht. D.h. du musst alle Elemente die in diesem Bereich sind einzeln überprüfen ob die innerhalb oder ausserhalb deiner Grenzen sind.

Struppi.

[kcd]

das ist es ja.
ich will ja nur die selectboxen überprüfen...
da fehlt mir aber irgendwie der Ansatz.
irgendne Idee?

danke

[LX]

Diese Aufgabe ist mit jQuery leicht zu bewältigen - Du mußt im mouseover nur folgendes aufrufen:

$('select').each(function() {  
  if ($(this).offset().top < 500) { $(this).hide(); }  
});

Wie man das beim mouseout wieder rückgängig macht, solltest Du schon selbst rausfinden.

Gruß, LX

[kcd]

Genau der Ansatz fehlte mir.
Danke.
Jetzt habe ich nur das Problem, dass die select-Boxen flackern, wenn ich von einem Menüpunkt auf den anderen gehe, weil ich mich dazu entschieden hatte, über

  
$("ul#em_nav > *").mouseout(function () {  
               $('select').each(function() {  
          if ($(this).offset().top < 450) { $(this).show(); }  
       });  
           });  

auch das Einblenden zu machen.
Gibts ne Möglichkeit das verzögert zu machen?
Hatte auch schon alle Zwischenabstände beim Mouseover mit eingebunden, da die auch ne klasse haben. Allerdings funzte das auch nicht...

Noch nen Tipp?

kcd

[LX]

Noch nen Tipp?

Aber nur einen ganz kleinen:

mouseover
 - window.isMouseOverMenu = true
 - select-hide

mouseout
 - window.isMouseOverMenu = false
 - window.setTimeout(if (!window.isMouseOverMenu) { select-show }, zeit)

Das ist natürlich nur Pseudo-JavaScript-Code, aber ich bin ganz zuversichtlich, dass Du das umsetzen kannst.

Gruß, LX

[kcd]

ne, das geht irgendwie nicht...

das Problem ist immer noch, dass das Menü keinen allgemeines übergeordnetes Div, hat, welches greifen kann.

Da hilft mir auch kein timeout, weil das Ganze dann nur zeitverzögert eingeblendet wird...

[ChrisB]

Hi,

ne, das geht irgendwie nicht...

Tja, da hat LX wieder mal einen jQuery-Frickler ueberschaetzt.

das Problem ist immer noch, dass das Menü keinen allgemeines übergeordnetes Div, hat, welches greifen kann.

Warum sollte es eins haben, in wie fern sollte dadurch dein Vorhaben leichter zu realisieren sein?

Da hilft mir auch kein timeout, weil das Ganze dann nur zeitverzögert eingeblendet wird...

Dann blende sie erst dann wieder ein, wenn das Menue als ganzes verlassen wird.
Dazu musst du abfragen, ob das Zielelement des mouseout-Events des Menues ein Nachfahrenelement von diesem ist, oder nicht - wenn jQuery dafuer nichts fertiges bietet, dann mit eigenem Code.

MfG ChrisB

[kcd]

Dazu musst du abfragen, ob das Zielelement des mouseout-Events des Menues ein Nachfahrenelement von diesem ist, oder nicht - wenn jQuery dafuer nichts fertiges bietet, dann mit eigenem Code.

Das ist ein netter Ansatz mit dem ich nun wieder was anfangen kann.danke

Auch wenn Sprüche wie: "Tja, da hat LX wieder mal einen jQuery-Frickler ueberschaetzt." wohl eher als überflüssig und möchtegernarrogant einzuschätzen sind...

trotzdem danke, vor allem an LX!

gruß kcd

[molily]

Dazu musst du abfragen, ob das Zielelement des mouseout-Events des Menues ein Nachfahrenelement von diesem ist, oder nicht

Das wäre arg kompliziert, würde es nicht reichen, zu prüfen, ob das Zielelement das verarbeitende Element ist?

if (e.currenTarget == e.target) {
   alert("Event genau bei diesem Element, nicht ein aufgestiegener Event");
}

wenn jQuery dafuer nichts fertiges bietet

Bei der Benutzung von mouseenter/mouseleave fällt diese Abfrage weg bzw. jQuery macht sie halt intern, wenn der Browser den Event nicht selbstständig feuert.

Mathias

[molily]

Aber nur einen ganz kleinen:

mouseover

• window.isMouseOverMenu = true
• select-hide

mouseout

• window.isMouseOverMenu = false
• window.setTimeout(if (!window.isMouseOverMenu) { select-show }, zeit)

Äh, suchst du vielleicht die Events mouseenter und mouseleave anstelle von mouseover und mouseout?

.bind("mouseenter", handler)
.bind("mouseleave", handler)

Diese Ereignisse steigen nicht auf (Bubbling), daher gibt es kein "Flackern", weil mouseover-Events von Kindelementen nicht gefährlich werden.

Mathias