Anzeige

jQuery special slide down (in WP)

jQuery special slide down (in WP) | PSD-Tutorials.de

Erstellt von LRG, 09.03.2010.

  1. LRG

    LRG StyleIkone

    Dabei seit:
    02.03.2008
    Beiträge:
    159
    Geschlecht:
    männlich
    Ort:
    Kempten
    Software:
    Photoshop CS4 u. Aptana
    Kameratyp:
    Canon EOS 350D
    jQuery special slide down (in WP)
    nabend allerseits,

    ich habs wiedermal ne ganze weile mit blindem rumprobieren versucht, komm aber nichtmehr weiter :p

    Ziel: ich möchte für WordPress eine Slide Down Navi in JavaScript/jQuery.

    Wordpress is aufgesetzt und bis zu nem gewissen Punkt läuft das mit der Navi auch schon wie ich das möchte, nur das einklappen geht nicht ?!

    hier mal der direkte link auf die Seite (es bleibt bei drei Hauptmenüpunkten und nur bei "Portfolio" wirds mehrere Unterseiten geben)

    Mia Portfolio

    ich hab die Up/Down - Buttons deshalb reingemacht, da ich diese "unsichtbar" über die Überpunkte legen möchte, sobald alles läuft, um nur eine Seite zu laden wenn denn ein Name ausgewählt wird und nicht schon wenn ein Jahr angeklickt wird.

    Problem is nun wie gesagt das er mir das nichtmehr schließt und ich komm nicht drauf warum...bzw. ich seh in firebug das er mir die class einfach nicht wechselt...aber ich weiß nicht wieso...normal sollte es so funktionieren (also so les ich den code) wenn der open button geklickt wird, wird erstmal alles geschlossen an <ul>s und dann die jeweilige <ul> geöffnet. Funkioniert auch nur soweit, das er die jeweilige öffnet, er schließt aber nichts anderes...und umgekehrt, also mit dem close button geht mal gleich gar nix...aber seht selbst ;-)

    achja und vll bin ich auch ganz auf dem holzweg, denn der erste punkt (in dem fall portfolio) bekommt auch einen button (oben rechts in der ecke von der seite)...weil die funktion ja wohl iwie vor jede ul einen hinstöpselt was im ersten fall aber nicht nötig bzw. nicht gewünscht is...

    hier extra nochmal die einzelnen code snippets

    JS im Head-Bereich meiner Header.php
    Code (Text):
    1.  
    2. <script type="text/javascript" charset="utf-8">
    3.     $(document).ready(function() {
    4.         $(".page_item ul").hide();
    5.         $(".current_page_item").parents("ul").show();
    6.         $(".current_page_item ul:first").slideDown();
    7.  
    8.         $(".page_item > ul:hidden").before('<a href="#" class="menuToggle menuToggleOpen">v</a>');
    9.         $(".page_item > ul:visible").before('<a href="#" class="menuToggle menuToggleClose">^</a>');
    10.         a = function(){
    11.             $(this).text("^").next("ul").slideDown();
    12.         };
    13.         b = function(){
    14.             $(this).text("v").next("ul").slideUp();
    15.         };
    16.         $(".menuToggleClose").toggle(b,a);
    17.         $(".menuToggleOpen").toggle(a,b);    
    18.     });    
    19. </script>
    20.  

    Navigation im Body meiner Header.php
    Code (Text):
    1.  
    2. <div id="nav" class="clearfix">
    3.     <ul>
    4.         <?php wp_list_pages('title_li='); ?>
    5.     </ul>
    6. </div>
    7.  

    Der möglicherweiße relevante CSS-Teil für die Navi
    Code (Text):
    1. #nav{
    2.     background:#fff;
    3.     font-size:1.2em;
    4.     margin-bottom:30px;
    5.     padding:0;
    6.     width:350px;
    7.     height:300px;
    8.     z-index:1;
    9. }
    10.  
    11. #nav ul{
    12.     list-style-type:none;
    13. }
    14. #nav ul li{
    15.     font-weight:bold;    
    16.     float:left;
    17.     letter-spacing:1px;
    18.     margin-bottom:-3px;
    19.     margin-right:10px;
    20.     padding:2px 5px;
    21. }
    22. #nav ul li a{
    23.     color:#000;
    24.     font-family: Verdana, Arial, Helvetica, sans-serif;
    25. }
    26. #nav ul li a:hover{
    27.     color:#E0EEE5;
    28. }
    29. #nav ul li ul{
    30.     position:relative;
    31.     width:50px;
    32. }
    33. #nav ul li ul li{
    34.     position:relative;
    35.     width:100px;
    36. }
    37. #nav li ul {
    38.     margin-left: 1em;
    39. }
    40. #nav .menuToggle {
    41.     position: absolute !important;
    42.     top: 0px !important;
    43.     right: 0px !important;
    44.     color: #397388;
    45.     padding: 2px 7px 4px 7px !important;    
    46.     background: #F0F0F0 !important;
    47.     border-width: 0 !important;
    48.     margin: 0 !important;
    49.     font-weight: bold !important;
    50. }
    51. #nav .menuToggle:hover {
    52.     color: #fff;
    53.     background: #DDD !important;
    54. }
    55. .current_page_item>a {
    56.     font-weight: bold;
    57. }
    Ich hoffe ich habs verständlich rüber gebracht und mir kann jemand weiterhelfen :)

    Danke im Voraus,

    LRG
     
    #1      
  2. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    Hi,

    also zum einen - warum setzt du parent/s ein, wenn du per click das children (ul-tag) ansprechen kannst?
    sieht wie folgt aus:
    Code (Text):
    1.  
    2. $('#id > li').click(function() {
    3.     // falls bereits irgendwo geöffnet - löschen
    4.     $('#id > li').removeClass('active');
    5.     // setze klasse für den aktuell angeklicken li-tag
    6.     $(this).addClass('active');
    7.     // nimm display: block aus ul-tags raus
    8.     $('#id > li > ul').removeAttr('style');
    9.     // prüfe ob children ul vorhanden
    10.     if($(this).children('ul')) {
    11.         // zeige ul, welcher per CSS zuvor display: none; erhalten hat
    12.         $(this).children('ul').show();
    13.     }
    14. });
    15.  
    Das ganze ist ungetestet und muss noch bzgl. ID und evtl. die ein oder andere Korrektur angepasst werden. Alles in allem sollte es dennoch laufen.
     
    #2      
  3. LRG

    LRG StyleIkone

    Dabei seit:
    02.03.2008
    Beiträge:
    159
    Geschlecht:
    männlich
    Ort:
    Kempten
    Software:
    Photoshop CS4 u. Aptana
    Kameratyp:
    Canon EOS 350D
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    ich komm leider kein zentimenter damit klar, sorry...bei mir tut sich da gar nichts mehr an slide effekt o.ä....hab #id gegen mein .current_page_item getauscht.

    ich bin leider nicht ganz so bewandert in js/jQuery :(
     
    #3      
  4. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    Du meinst aber nicht slider aus der UI von jQuery?

    Ansonsten teste mal folgendes als Vorlage (html):
    Code (Text):
    1.  
    2.     <ul>
    3.         <li>test
    4.             <ul>
    5.                 <li>test 1</li>
    6.                 <li>test 1</li>
    7.             </ul>
    8.         </li>
    9.         <li>
    10.             test 2
    11.             <ul>
    12.                 <li>t2</li>
    13.                 <li>t2</li>
    14.             </ul>
    15.         </li>
    16.     </ul>
    17.  
    jQuery:
    Code (Text):
    1.  
    2. $(document).ready(function() {
    3.  
    4.     $('ul li').click( function() {
    5.         $(this).addClass('actiev');
    6.        
    7.         $('ul > li > ul').hide('slow');
    8.        
    9.         if($(this).children('ul')) {
    10.             $(this).children('ul').show('slow');
    11.         }
    12.     });
    13. });
    14.  
    Wenn es das nicht ist, was du suchst, dann beschreibe genauer was du suchst.
     
    #4      
  5. LRG

    LRG StyleIkone

    Dabei seit:
    02.03.2008
    Beiträge:
    159
    Geschlecht:
    männlich
    Ort:
    Kempten
    Software:
    Photoshop CS4 u. Aptana
    Kameratyp:
    Canon EOS 350D
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    da konnt ich nun schon was mit anfangen ;-)

    hab mal die struktur nachgebaut die Wordpress mir ausgibt und das ist das ergebnis:

    Geteilte Navigationsleisten

    geplant hatte ich das schon mit dem slideDown() von JQuery...aber viel unterschied ist wohl vom effekt her nicht, ich weiß nicht wie aufwändig das mit JQuery und der slideDown() methode wäre ??

    jetzt hat sich nur gleich das nächste problem aufgetan, WP gibt mir jeden Listenpunkt als <a> tag aus...sprich ich klicke 2009 und er läd mir die seite 2009 was den effekt zerstört...

    wenn du mir dafür vll auch noch nen tip parad hast...ich such schon nach "link tag entfernen mit js" aber iwie scheint mir das nicht so einfach...der text soll ja stehen bleiben...nur der <a> tag bei eben paar bestimmten <li> tags soll weg...
    bei den untersten soll er bleiben (also bei den namen der frauen) damit die galerien bei klick laden.

    Vielen Dank schonmal bis hierher für deine hilfe!!!

    EDIT: zu dem SlideDown(), hab eben einfach mal testhalber "hide" und "show" gegen "slideup" bzw. "slidedown" getauscht. Würde dann auch so klappen, wenn der <a> tag weg ist :D

    EDIT2: Habs iwie hinbekommen, auch wenn er beim "verstecken" den slideup() nicht nimmt ?!...habs mal mit hide() gelöst und gut is...läuft jetzt mal so wie gewünscht, danke nochmal ;-)
     
    Zuletzt bearbeitet: 10.03.2010
    #5      
  6. saila

    saila Moderatorle

    Dabei seit:
    21.06.2006
    Beiträge:
    2.239
    Geschlecht:
    männlich
    Ort:
    50°48'23.69" N 7°14'22.19" O
    Software:
    Eclipse, PHP5 OO, MySQL5, CSS(auch Barrierefrei), JS, Symfony
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    Hi,

    ich versteh nicht ganz, was im Listenmenü so schlimm ist wenn da ein a-tag enthalten ist. Ist doch für ein Menü üblich ;)

    Das ganze bzgl. für jQuery zerstört im Grunde nichts. Problem was sich ergibt, die Seite wird neu geladen - also die per Link aufgerufene Seite. Somit ist das Menü nicht über den Browser zu steuern, sondern wiederum von WP (php).

    Wenn du html innerhalb html ändern möchtest, wäre das folgender Ansatz (anhängend an dem Beispiel von oben und innerhalb der gleichen funktion (jQuery):
    Code (Text):
    1.  
    2. var atagText = $(this).children('a').text();
    3. $(this).children('a').remove();
    4. $(this).text(atagText);
    5.  
    Was passiert: Aus dem li-tag wird das Kindelement angesprochen per children und daraus wird der Text (Linktext) herausgenommen und in einer Variablen gespeichert. Danach wird der a-tag gelöscht per remove und in den li-tag der vorhergehende Linktext wieder eingefügt.

    Bzgl. dem remove müsstest du noch mal evtl. bei jQuery Doku nachlesen, falls es nicht korrekt funktioniert.
     
    #6      
  7. LRG

    LRG StyleIkone

    Dabei seit:
    02.03.2008
    Beiträge:
    159
    Geschlecht:
    männlich
    Ort:
    Kempten
    Software:
    Photoshop CS4 u. Aptana
    Kameratyp:
    Canon EOS 350D
    jQuery special slide down (in WP)
    AW: jQuery special slide down (in WP)

    Code (Text):
    1. <script type="text/javascript" charset="utf-8">
    2.     $(document).ready(function() {
    3.         // die Unterseiten der Jahreszahlen anzeigen, denn im Portfolio wird gestartet
    4.         $('ul li ul').show();
    5.         $('ul li ul li ul').hide();
    6.         // --------------------------------------------------------------------------------------
    7.         // bei allen <a>-Tags, die mit '20' beginnen (ersten beiden Zahlen des Jahres)
    8.         // das Attribute 'href' entfernen damit beim Klick die jeweilige Seite nicht geladen wird
    9.         // --------------------------------------------------------------------------------------
    10.         var links = document.getElementsByTagName('a');
    11.         for (i = 0; i < links.length; i++) {
    12.             if(links[i].title.substr(0,2) == '20') {
    13.                 links[i].removeAttribute('href');
    14.                 }
    15.             }
    16.         // ----------------------------------------------------
    17.         // Funktion um ein Element anhand der "class" zu finden
    18.         // notwendig um den Portfolio-Firs-Click abzufangen!
    19.         // ----------------------------------------------------
    20.         var allHTMLTags = new Array();
    21.         function getElementByClass() {
    22.             //Create Array of All HTML Tags
    23.             var allHTMLTags=document.getElementsByTagName('li');
    24.             //Loop through all tags using a for loop
    25.             for (i=0; i<allHTMLTags.length; i++) {
    26.                 //Get all tags with the specified class name.
    27.                 if (allHTMLTags[i].className=='page_item page-item-20') {
    28.                 return true;    
    29.                 }
    30.             }
    31.         }
    32.         // --------------------------------------------------------------------
    33.         // Wenn "Kontakt" oder "Partner" geklickt wurde, Unterseiten verstecken
    34.         // --------------------------------------------------------------------
    35.         if(document.URL == 'http://netcurve.de/wp_mia/?page_id=21' || document.URL == 'http://netcurve.de/wp_mia/?page_id=22' ) {
    36.             $('ul li ul').hide();
    37.         }
    38.         // ------------------------
    39.         // First-Click auf die Navi
    40.         // ------------------------
    41.         $('ul li').click( function() {
    42.             // Is es das Portfolio ?
    43.             if(getElementByClass() == true) {
    44.                 // Wenn JA, dann nur eine Schicht drunter (Child) aufklappen
    45.                 $(this).addClass('active');
    46.                 // Die gewünschte Liste mit Unterpunkten anzeigen
    47.                 if($(this).children('ul')) {
    48.                     $(this).children('ul').slideDown('slow');
    49.                 }
    50.             }
    51.         });
    52.         // -----------------------------------
    53.         // Click auf die Ebenen mit Jahreszahl
    54.         // -----------------------------------
    55.         $('ul li ul li').click( function() {
    56.             $(this).addClass('active');
    57.             // Alle evtl. offenen Unterpunkte schließen
    58.             $('ul > li > ul > li > ul').hide();
    59.             // Die gewünschte Liste mit Unterpunkten anzeigen
    60.             if($(this).children('ul')) {
    61.                 $(this).children('ul').slideDown('slow');
    62.             }            
    63.         });    
    64.     });
    65. </script>
    ich hab da jetzt einfach mal mit meim Unwissen freestyle reingecodet...funktioniert auch soweit wie ichs will nur flackert das ganze noch wenn ich einen listenpunkt der untersten eben anklicke...der läd das wohl kurz nochmal bevor er dann den neuen content läd...

    gibts denn ne möglichkeit, das ich mir merken kann welcher listenpunkt zuletzt angeklickt wurde und das ich mich nach laden des content wieder drauf positionieren kann..sprich die liste soweit aussliden lassen kann bis ich wieder da steh wo ich zuletzt geklickt hab ?

    hier mal mein bisheriger "saustall"...effekt mit dem "flackern" sieht man da auch:

    Mia
     
    #7      
Seobility SEO Tool
x
×
×