Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „bestimmten Tag abprüfen/ansprechen“

LRG

StyleIkone

schön guten tag allerseits,

ich häng mal wieder (immernoch) an nem javascript problem.

ich hab mir eine navi gebaut, die auch so funktioniert wie ich das möchte (slide down effekt), NUR wird der 'click' auf die einzelnen listenpunkte zu oft ausgelöst, sprich auch beim untersten listenpunkt wird der 'click' abgefeuert und es entsteht ein hässlicher ruckel-effekt (denn der listenpunkt slidet sich selbst nochmal runter und dann erst läd er den neuen content)

ich bin in dem ganzen noch nicht so bewandert und muss mich nach stundenlanger Suche und etlichen vergeblichen Versuchen irgendwas ranzucoden vonwegen '.nodeName' etc. an euch wenden...wie sprech ich den expliziet meine listenpunkte an...oder von 'closest' hab ich auch mal was gelesen aber bin auch nicht weitergekommen...das ich im click-event dann sagen kann "if nächster tag/node/wasauchimmer not = 'li' or 'ul' or XX dann führ den click aus, ansonsten mach nix" ??

hier mal mein bisheriger, hart zusammengesuchter und ausgefeilter, wobei wahrscheinlich immernoch schlecht programmierter (wegen direkter bezugnahme auf die seiten URL :() code:

Code:
    $(document).ready(function() {
        // die Unterseiten der Jahreszahlen anzeigen, denn im Portfolio wird gestartet
        $('ul li ul').show();
        $('ul > li > ul > li > ul').hide();
        // --------------------------------------------------------------------------------------
        // bei allen <a>-Tags, die mit '20' beginnen (ersten beiden Zahlen des Jahres)
        // das Attribute 'href' entfernen damit beim Klick die jeweilige Seite nicht geladen wird
        // --------------------------------------------------------------------------------------
        var links = document.getElementsByTagName('a');
        for (i = 0; i < links.length; i++) {
            if(links[i].title.substr(0,2) == '20') {
                links[i].removeAttribute('href');
                }
            }
        // -----------------------------------------------------
        // Wenn "Kontakt" geklickt wurde, Unterseiten verstecken
        // -----------------------------------------------------
        if(document.URL == 'http://netcurve.de/wp_mia/?page_id=21') {
            $('ul li ul').hide();
        }        
        // -----------------------------------
        // Click auf die Ebenen mit Jahreszahl
        // -----------------------------------
        $('ul li ul li').click( function() {
            $(this).addClass('active');
            // Alle evtl. offenen Unterpunkte schliessen
            $('ul > li > ul > li > ul').hide();
            // Die gewuenschte Liste mit Unterpunkten anzeigen
            if($(this).children('ul')) {
                $(this).children('ul').slideDown('slow');
            }        
        });    
    });

hier wär auch die seite, da sieht man den effekt wenn man die navi aufschiebt (auf jahreszahlen klickt und dann nochmal auf eine eben tiefer)



hoff man hat verstanden was ich suche/brauche...ich bekomms einfach nicht hin...hab auch mit 'alert' mir versucht so sachen wie 'children.titel' oder so auszugeben, jedes mal 'undifined' :(

wär sehr dankbar um eure hilfe!!!

LRG
 

sokie

Mod | Web

AW: bestimmten Tag abprüfen/ansprechen

Am besten Schaust du dir mal den Bereich Selectors, der jQuery Dokumentation an, dort kannst du genau erfahren, wo du was exakt auswählen, oder von der Auswahl ausschliessen kannst.
Konstrukte wie
// --------------------------------------------------------------------------------------
// bei allen <a>-Tags, die mit '20' beginnen (ersten beiden Zahlen des Jahres)
// das Attribute 'href' entfernen damit beim Klick die jeweilige Seite nicht geladen wird
// --------------------------------------------------------------------------------------
var links = document.getElementsByTagName('a');
for (i = 0; i < links.length; i++) {
if(links.title.substr(0,2) == '20') {
links.removeAttribute('href');
}
sind ja nicht notwendig, weil getElementsByTagName("a") sich ja einfach per $("a") ausdrücken lässt, und das Vorhandensein von "20*" im title sich mit
Code:
$("a[title^='20']")
filtern lässt.
so kannst du für alle 'a' elemente die unterpunkte einer untergeordneten ul sind zusammenfassen:
Code:
  $("a[title^='20']").click(function(e){e.preventDefault()});
  //also das aufrufen der url nicht ausführen.
genauso für alle anderen a elemente danach selektieren ob das element ein attribut hat/nicht hat (has Attribute), es gleich einem bestimmten wert ([attr=value])hat oder nicht hat[attr!=value] etc...

der letzte Teil mit dem Schliessen der Unterpunkte, und dem Vergeben der Class="active" ist sowieso hinfällig, da nach dem klick auf ein Item die Seite ohnehin neu geladen wird, und somit die Navigation wieder im "Urzustand" geladen wird.

http://api.jquery.com/category/selectors/

p: wenn du das hover der listenpunkte der jahreszahlen auch mit jQuery machst, funktioniert der Teil auch im IE6.
 
Zuletzt bearbeitet:

LRG

StyleIkone

AW: bestimmten Tag abprüfen/ansprechen

danke dir soweit, hab mich jetzt echt lang hingesessen und probiert und getan und hin und her nur bekomm ichs einfach nicht hin!

ich bekomm diesen flacker effekt nicht weg...egal was ich mach...ich habs mit nem counter versucht, nur dann kann ich eine eben aufschieben und danach muss die seite neu laden bevor wieder was funktioniert...ich habs mit class-name abprüfen versucht, wollt auch nicht klappen :(

ich weiß jetzt wirklich nichtmehr wie ich den effekt wegbekomm den man auf der seite sieht wenn man die navi bedient -.-




ich wills ja normal selbst lernen etc. aber ich hab da jetzt so viele stunden rein gesteckt, in ein wahrscheinlich so simples problem nur kann ichs einfach ned und ich weiß jetzt keinen lösungsansatz mehr...

vll könnte mir da jemand direkt helfen und nicht "nur" 'schau dir das und das mal an' wobei ich um diese hilfestellungen wirklich sehr dankbar bin ;-)

gruß,

lrg
 

Duddle

Posting-Frequenz: 14µHz

AW: bestimmten Tag abprüfen/ansprechen

Ich hab folgende Änderungen gemacht und es funktioniert wohl soweit:

HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8"> 
	$(document).ready(function() {
			// die Unterseiten der Jahreszahlen anzeigen, denn im Portfolio wird gestartet
			$('ul li ul').show();
			$('ul > li > ul > li > ul').hide();
			// bei allen <a>-Tags, die mit '20' beginnen (ersten beiden Zahlen des Jahres)
			// das Attribute 'href' entfernen damit beim Klick die jeweilige Seite nicht geladen wird
			$("a[title^='20']").removeAttr("href");

			// Wenn "Kontakt" geklickt wurde, Unterseiten verstecken
			if(document.URL == 'http://netcurve.de/wp_mia/?page_id=21') {
				$('ul li ul').hide(); 
			}	    

			// zeigt nach dem neu Laden der Seite die akt. Galerie an bzw. klappt diese auf
			$("li[class*='current_page_item']").parent('ul').show();
			// Click auf die Ebenen mit Jahreszahl
			$('ul li ul li:visible').click(function() {
				$(this).siblings().children("ul").hide();
				$(this).children("ul").slideDown("slow");
			});
	});
</script>

  1. jQuery auf 1.4.2 gestellt (das sollte aber nicht wichtig sein)
  2. deine Kommentare etwas entschlackt, damit ich es besser lesen kann ;)
  3. die von sokie genannte "a[title^='20']"-Geschichte eingebaut
  4. die Listeneinträge soweit gefiltert, dass nur die beim Seitenaufbau sichtbaren <li>, das sind dann die Menüoberpunkte, an die click()-Funktion gebunden werden
Die click()-Funktion sollte selbsterklärend sein. Verstecke alle Sub-Listen der Menüpunkte, auf die nicht geklickt wurde, dann zeige die eigene an.

Falls es damit Probleme gibt, immer raus damit.


Duddle
 

LRG

StyleIkone

AW: bestimmten Tag abprüfen/ansprechen

Der Lösungsansatz mit dem - nur die, die zu beginn sichtbar sind in den Klick einbinden - scheint mir durchaus einleuchtend und nachvollziehbar hehe...peinlich das ich selbst nicht drauf gekommen bin...aber fehlt mir wohl noch die erfahrung ;-)

vielen vielen dank auf jeden fall!!! endlich ist das aus der welt geschafft!!!

Achja, es funktioniert natürlich soweit alles ;-)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.880
Mitglieder
67.226
Neuestes Mitglied
Alec168
Oben