XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Javascript & Ajax (http://xhtmlforum.de/forumdisplay.php?f=83)
-   -   Responsive mobile Menu Text entfernen? (http://xhtmlforum.de/showthread.php?t=66761)

benzrecordings 30.01.2012 11:21

Responsive mobile Menu Text entfernen?
 
Hallo,
ich arbeite gerade an einer Website mit Wordpress bei der auf Handys und kleinen Endgeräten das Menu als Dropdown Auswahlliste dargestellt wird. Ich möchte gerne, dass im Dropdwon der Beschreibungstext verschwindet. Mein Menu ist wie folgt aufgebaut:

Code:

<ul id="menu-hauptmenu">
 <li><a href="#">Willkommen<span>Schön dass Sie zu mir gefunden haben</span></a></li>
</ul>

Ich habe also unter jedem Menupunkt eine kleine Beschreibung welche zwischen den <span> tags steht.

Für die Umwandlung dieses Menus in ein Dropdown Menu auf kleinen Geräten verwende ich folgendes Javascript:

Code:

    //create the mobile menu
    function createMenu($this){
      if(isList($this)){
               
        //generate select element as a string to append via jQuery
        var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';
       
        //create first option (no value)
        selectString += '<option value="">'+settings.topOptionText+'</option>';
       
        //loop through list items
        $this.find('li').each(function(){
         
          //when sub-item, indent
          var levelStr = '';
          var len = $(this).parents('ul, ol').length;
          for(i=1;i<len;i++){levelStr += settings.indentString;}
         
          //get url and text for option
          var link = $(this).find('a:first-child').attr('href');
          var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();
         
          //add option
          selectString += '<option value="'+link+'">'+text+'</option>';
        });
       
        selectString += '</select>';
       
        //append select element to ul/ol's container
        $this.parent().append(selectString);
       
        //add change event handler for mobile menu
        $('#mobileMenu_'+$this.attr('id')).change(function(){
          goToPage($(this));
        });
       
        //hide current menu, show mobile menu
        showMenu($this);
      } else {
        alert('mobileMenu will only work with UL or OL elements!');
      }
    }

Wie kann ich jetzt noch hinzufügen, dass der Beschreibungstext zwischen den <span> tags nicht verwendet wird. Ist es möglich den zu entfernen?

benzrecordings 30.01.2012 12:09

Ui habs doch hinbekommen.

Ich habe einfach dem <span> Element einen Klassennamen gegeben "descr" und entferne es dann in der Funktion über remove:

Code:

//loop through list items
        $this.find('li').each(function(){
                       
                        $('.descr').remove();

Vielleicht hilfst ja jemandem weiter.

Ich habe aber noch ein Problem mit ähnlichem Hintergrund. Und werden in der Seite die Bilder über Prettyphot angezeigt. Wenn man jetzt auf dem Handy die Bilder betrachtet, macht das keinen Sinn, weil diese dann quasi kleiner dargestellt werden als das thumbnail an sich ist. Ich würde halt gerne die Funktion dann auf Handys deaktivieren. Wie kann ich eine Funktion erstellen die bei einer Bestimmten Fenstergröße das "rel" attribut entfernt?

Ich dachte an so etwas, weiß aber nicht genau wie ich das ausformulieren muss:

Code:

function removelightbox() {
        if(screen.width < 500){
                entferne bei jedem Bild das "rel" attribut
        }
}


sorry für die andere Frage noch, aber ich wollte keinen extra Beitrag dafür erstellen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:04 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023