Indexmodule Ein- und Ausblenden mehrmals möglich?

Hallo, momentan verwende ich diese beiden Codes um meine Indexleiste ein und aus zu blenden:
Modul Oben

Code:

<div id="forum-widget" style="height: 13px; width: 13px; border-radius: 4px; -webkit-border-radius: 3px; -moz-border-radius: 4px; cursor: pointer; position: absolute; background: #f5ebf7 url(http://i42.tinypic.com/vg54yu.png) no-repeat 0 -13px;" onClick="jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},1000); if(my_getcookie('forum-widget')=='0') { my_setcookie('forum-widget','1',0,0); jQuery('#forum-widget').css('background-position','0 -13px'); } else { my_setcookie('forum-widget','0',1,0); jQuery('#forum-widget').css('background-position','0 0px'); }"></div>

Modul Unten

Code:

<script type="text/javascript"> jQuery('#forum-widget').insertBefore('#left'); if(my_getcookie('forum-widget')=='0') {jQuery('#left').animate({width:'toggle',height:'toggle',opacity:'toggle'},0); jQuery('#forum-widget').css('background-position','0 0px'); } </script>

Jedoch funktioniert es nicht, diese Codes mehrmals im Index einzufügen, damit zum Beispiel zwei verschiedenen Module unabhängig von einander Ein und Ausgeblendet werden.
Ich wollte deswegen fragen, ob und wie man das ganze verändern muss, damit es geht.

Liebe Grüße
Ishiki

hallöchen.

soweit es aus dem code möglich ist zuerfahren ist das nicht möglich werde aber gleich mal in mein test forum und mir das ganze mal angucken melde mich gleich wieder hier.

Edit: Ach da is ja die zuckerpuppe gut denn brauch ich es nicht merh testen

Lach ok ich werde doch mal gucken

Hallo

nein, das ist nicht möglich....entweder wird die komplette Modulreihe ausgeblendet oder nicht. Für einzelne Module geht das nicht.

edit: o.k., steive guckt dann mal...


kleiner Tipp noch von mir: Du solltest die Maße der aufklappbaren Chatbox vielleicht verkleinern, denn ich (mit einer kleinen Auflösung) sehe bei einer Breite von 1000Px nicht mehr den Button zum Schliessen und kann das Forum so nicht nutzen. Auch der Wechselbanner auf der linken Seite überdeckt die Module bei einer kleinen Auflösung, sodass ich diese nur zur Hälfte sehe...

was zuckerpuppe geschriebe hat kann ich nur noch bestätigen das ist nicht möglich.

Sorry, dass ich wiederspreche, aber es ist (midestens bei BB3) möglich

Ist dann aber mit etwas aufwand verbunden

Ich schreib dann mal ne kleine anleitung, in der Hoffnung, dass es dann nicht nur wieder bei mir funktioniert

dann sind wir mal auf deine Erklärung gespannt

Eine erste Version kann man sich hier schon mal anschauen, ich bin aber noch nicht zufrieden damit und werde noch weiter tüfteln. Es kann aber noch 1-2 Tage dauern, bis ich endgültig zufrieden bin

Das sieht doch schon einmal gut aus, muß ich jedenfalls sagen.
Viel Glück und Spaß weiterhin und nicht hetzen, in der Ruhe und Zeit liegt die Kraft, bin sehr auf das Endergebnis gespannt.

lg. Happy

Also das mit dem Chat habe ich geändert und ihn etwas kleiner Gemacht.
Das mit dem Wechselbanner ist aber nicht ganz so einfach. Hatte hier im Forum ach schon einmal gefragt, ob am das Banner automatisch an die entrechtende Auflösung anpassen lassen kann, mir aber gesagt wurde, das es nicht geht.

Ishiki schrieb:Also das mit dem Chat habe ich geändert und ihn etwas kleiner Gemacht.
Das mit dem Wechselbanner ist aber nicht ganz so einfach. Hatte hier im Forum ach schon einmal gefragt, ob am das Banner automatisch an die entrechtende Auflösung anpassen lassen kann, mir aber gesagt wurde, das es nicht geht.

ja, damals hatte ich dir auch eine Antwort, bzw. Lösung geschrieben....
http://hilfe.forumieren.com/t25470-logo-automatisch-skalieren#159840

anders geht es leider nicht..aber es ist doch leicht umsetzbar

Habe mir das noch einmal angesehen und ich glaube, jetzt funktioniert es doch!
Hatte da einen kleinen Fehler, den ich bisher nicht gesehen habe!
Danke noch mal!

So, bei BB2 funktioniert es auch, habe aber im Moment leider keine Zeit mehr, das Script zu veröffentlichen. Mache das ganze also morgen.

Gruß, TOBBE

Edit: Dauert doch noch einen Tag länger. Sorry.

Super

Was lange währt wird (hoffentlich) endlich gut Hier die Anleitung für das Ein- und Ausblenden einzelner Module bei BB2:

------------------------------------------

Um die Indexmodule ein und auszublenden verwenden wir ein Script sowie eine kleine Änderung an den Templates.

Anleitung für das Script:

Wir erstellen ein neues Modul, indem wir unter Adminbereich -> Module -> Index-Module auf Ein persönliches Modul erstellenKlicken.

Dort nehmen wir folgende Einstellungen vor:

• Bei Quelle des Moduls * : fügen wir dieses Script ein (dabei darauf achten, dass der HTML-Editor aktiviert ist ):
  

  Code:

  <div class='moduleEinAusNot'>
<script type="text/javascript">
const pic = {
   height:            '13px',
   width:            '13px',
   borderRadius:      '4px',
   webkitBorderRadius: '3px',
   mozBorderRadius:   '4px',
   cursor:            'pointer',
   backgroundColor:   '#F5EBF7',
    backgroundImageUrl:   'http://i45.servimg.com/u/f45/15/05/45/90/r1010.png',
    backgroundPosition:   '0 -13px'
};

const settings = {
   speed:            1000,
   showHideCal:      true,
   showHideGallery:   true
};

function main() {
   checkCal();
   checkGallery();
   insertOpenClose();
}

function gEBCN(name) {
   return document.getElementsByClassName(name);
}

function insertOpenClose() {
   var moduleEinAus = gEBCN('moduleEinAus');
   
   for(var i = 0; i < moduleEinAus.length; i++) {
      var module = moduleEinAus[i];
      
      module.id = 'module' + i;
      var div = document.createElement('div');
      div.title = module.title;
      div.innerHTML = '<div id="forum-widget' + i + '" style="height: ' + pic.height + '; width: ' + pic.width + '; border-radius: ' + pic.borderRadius + '; -webkit-border-radius: ' + pic.webkitBorderRadius + '; -moz-border-radius: ' + pic.mozBorderRadius + '; cursor: ' + pic.cursor + '; background: ' + pic.backgroundColor + ' url(' + pic.backgroundImageUrl + ') no-repeat ' + pic.backgroundPosition + ';" onClick="toggleShowHide(' + i + ')" ></div>';
      
      tmp = module.firstChild;
      while(tmp.firstChild) {
         tmp = tmp.firstChild;
         if(tmp.className == 'moduleEinAusNot') {
            div.innerHTML = '';
         }
      }

      module.parentNode.insertBefore(div, module);
      checkHide(i);
   }
}

function checkCal() {
   if(document.getElementById('calendar_container') && settings.showHideCal) {
      var cal = document.getElementById('calendar_container');
      
      var container = document.createElement('div');
      container.className = 'moduleEinAus';
      container.title = 'Kalender';

      cal.parentNode.insertBefore(container, cal);
      container.appendChild(cal);
   }
}

function checkGallery() {
   if(document.getElementById('gallery_container') && settings.showHideGallery) {
      var gallery = document.getElementById('gallery_container');
      
      var container = document.createElement('div');
      container.className = 'moduleEinAus';
      container.title = 'Galerie';

      gallery.parentNode.insertBefore(container, gallery);
      container.appendChild(gallery);
   }
}

function toggleShowHide(nr) {
   jQuery('#module' + nr).animate({width:'toggle',height:'toggle',opacity:'toggle'},settings.speed);

   if(my_getcookie('forum-widget' + nr)=='0') {
      my_setcookie('forum-widget' + nr,'1',0,0);
      jQuery('#forum-widget' + nr).css('background-position',pic.backgroundPosition);
   } else {
      my_setcookie('forum-widget' + nr,'0',1,0);
      jQuery('#forum-widget' + nr).css('background-position','0 0px');
   }
}

function checkHide(nr) {
   var fw = 'forum-widget' + nr;

   if(my_getcookie(fw)=='0') {
      jQuery('#module' + nr).animate({width:'toggle',height:'toggle',opacity:'toggle'},0);
      jQuery('#forum-widget' + nr).css('background-position','0 0px');
   }
}

main();
</script>
</div>

  
  
• Über folgenden Code-Teil können wir einige Anzeigeeinstellungen ändern (diesen müssen wir im oben angegebenen Code suchen):
  

  Code:

  const settings = {
   speed:            1000,
   showHideCal:      true,
   showHideGallery:   true
};

  • Wenn ihr das Ein-und Ausblenden des Kalender-Moduls deaktivieren wollt ersetzt ihr das true hinter showHideCal durch ein false. Achtet dabei darauf, dass das Komma vorhanden bleibt!
    
  • Zum deaktivieren der Ein- und Ausblendefunktion des Galerie-Moduls müsst ihr das true hinter showHideGallery durch ein false ersetzen. Achtung: Hier darf kein Komma folgen!
    
  • Über die Option speed können wir die Geschwindigkeit, mit der Ein- oder Ausgeblendet wird in Millisekunden eingeben. Hier muss ein Komma hinter der Zahl stehen!
• Bei Die Standardaufstellung nutzen : machen wir den Haken bei Nein.
  
• Als Name des Moduls : suchen wir uns einen Namen aus.
  
• Titel des Moduls : können wir leer lassen.
  
• Absenden und zur Index-Modulverwaltung zurückkehren.

Jetzt müssen wir das Modul als letztes Modul in der rechten Spalte einsetzen (wenn man rechts keine Module hat reicht auch die linke Spalte).
Dazu scrollen wir auf der Seite ganz nach unten, bis wir Einfügen/Löschen persönlicher Module erreichen.
Dort wählen wir

• bei Widgets : den Namen aus, den wir unserem Modul verpasst haben.
  
• bei Ort : 3.Kolonne für rechts oder 1.Kolonne für links aus.
  
• bei Befugnisse : wählen wir aus, wer später Module anzeigen und verstecken darf.
  
• Auf Das Modul einfügen klicken.

Anleitung für die Templates:

Für die Änderungen an den Templates wechseln wir nach Adminbereich -> Anzeige -> Templates -> Portal.



Dort fügen wir bei den Modulen, die Ein- und Ausgeblendet werden sollen, den zugehörigen Code zu Beginn/Ende des Templates ein.

Modulname	Templatename	Zu Beginn einzufügender Code	Am Ende einzufügender Code
Chatbox	mod_chatbox	Code: <div class='moduleEinAus' title='Chatbox'>	Code: </div>
Kalender	-	Code: Wird im Script geändert.	Code: -
Galerie	-	Code: Wird im Script geändert.	Code: -
Schlüsselwörter	mod_keywords	Code: <div class='moduleEinAus' title='{L_KEYWORDS}'>	Code: </div>
Login	mod_login	Code: <div class='moduleEinAus' title='{L_LOGIN}'>	Code: </div>
News	mod_news	Code: <div class='moduleEinAus' title='News'>	Code: </div>
Ähnliche Themen	-	Code: Ist mir leider nicht bekannt.	Code: -
Neue Themen	mod_recent_topics	Code: <div class='moduleEinAus' title='{L_RECENT_TOPICS}'>	Code: </div>
RSS Feeds	mod_rss_feeds	Code: <div class='moduleEinAus' title='RSS-Feeds'>	Code: </div>
Suchen	mod_search	Code: <div class='moduleEinAus' title='{L_SEARCH}'>	Code: </div>
Internet- dienstfavoriten (social bookmarking)	mod_social_bookmarking	Code: <div class='moduleEinAus' title='{L_SOCIAL_BOOKMARKING}'>	Code: </div>
Umfrage	mod_poll	Code: <div class='moduleEinAus' title='{L_POLL}: {POLL_QUESTION}'>	Code: </div>
Statistik	mod_statistics	Code: <div class='moduleEinAus' title='{L_STATISTICS}'>	Code: </div>
Die aktivsten Beitragsschreiber	mod_top_posters	Code: <div class='moduleEinAus' title='{L_TOP_POSTERS}'>	Code: </div>
Wer ist online?	mod_whoisonline	Code: <div class='moduleEinAus' title='{L_WHO_IS_ONLINE}'>	Code: </div>
Vorlage für alle selbsterstellten Module	standard	Code: <!-- BEGIN table_row --><div class='moduleEinAus' title='{table_row.L_TITRE}'><!-- END table_row --><!-- BEGIN not_table_row --><div class='moduleEinAus' title=''><!-- END not_table_row -->	Code: </div>

Zum aktivieren des Templates müssen wir unter Adminbereich -> Anzeige -> Templates -> Portal das grüne Plus anklicken.



Falls wir später das Ein- und Ausblenden bei einem selbst erstelltem Modul deaktivieren wollen müssen wir folgenden Code zu Beginn/Ende des Moduls einsetzen:
Beginn:

Code:

<div class='moduleEinAusNot'>

Ende:

Code:

</div>

Dabei ist es vollkommen egal, welchen Titel wir dem Modul geben und ob wir die Standardaufstellung nutzen oder nicht.

Also, ich hab das jetzt mal getestet, aber bei mir klappt das nicht :/

Ich hab das Script so übernommen, und an die letzte Steller meiner rechten Kolonne reingesetzt, aber es passiert gar nichts :/

Hallo Count of Nin,

dass bei dir nichts passiert liegt daran, dass die Anleitung für Foren geschrieben wurde, die die Version BB2 verwenden. Du verwendest aber BB3! Für dich müsste also ein anderes Script verwendet werden, das ich aber noch nicht fertig entwickelt habe.

Gruß, TOBBE

Aso, ja dann hab ich dich falsch verstanden, mein Fehler ^^

Mit Hilfe von Count of Nin habe ich auch den Code für BB3 fertig entwickelt (Danke für das Testen und die Fehlermeldung). Es können allerdings nur Module ausgeblendet werden, die die Klasse "module" haben. Also nur die Module, bei denen das Standardlayout genutzt wurde.

Die Vorgehensweise ist bei BB3 viel einfacher als bei BB2. Einfach den Code unten kopieren und in ein neues Modul einsetzen. Dieses Modul dann als letztes Modul in der rechten Spalte (bzw. der linken, wenn ihr die rechte nicht nutzt) einfügen. Fertig. Als Tipp: bei der erstellung des Moduls solltet ihr bei Nein ankreuzen.

Wie erstelle ich ein Modul: Lexi Help

Der Code:

Code:

<script type="text/javascript">
const pic = {
   height:            '13px',
   width:            '13px',
   borderRadius:      '4px',
   webkitBorderRadius: '3px',
   mozBorderRadius:   '4px',
   cursor:            'pointer',
   backgroundColor:   '#F5EBF7',
    backgroundImageUrl:   'http://i45.servimg.com/u/f45/15/05/45/90/r1010.png',
    backgroundPosition:   '0 -13px'
};

const settings = {
   speed: 1000
};

function main() {
   checkNews();
   insertOpenClose();
}

function gEBI(id) {
   return document.getElementById(id);
}

function gEBCN(className) {
   return document.getElementsByClassName(className);
}

function insertOpenClose() {
   var allModule = gEBCN('module');
   var j = 0;

   for(var i = 0; i < allModule.length; i++) {
      var module = allModule[i];
      
      if(!(module.parentNode.id == 'main-content' || module.className == 'module mod_news')) {
         module.id = 'module' + j;
         var div = document.createElement('div');
         div.innerHTML = '<div id="forum-widget' + j + '" style="height: ' + pic.height + '; width: ' + pic.width + '; border-radius: ' + pic.borderRadius + '; -webkit-border-radius: ' + pic.webkitBorderRadius + '; -moz-border-radius: ' + pic.mozBorderRadius + '; cursor: ' + pic.cursor + '; background: ' + pic.backgroundColor + ' url(' + pic.backgroundImageUrl + ') no-repeat ' + pic.backgroundPosition + ';" onClick="toggleShowHide(' + j + ')" ></div>';
         
         module.parentNode.insertBefore(div, module);
         checkHide(j);
         j++;
      }
   }
}

function toggleShowHide(nr) {
   jQuery('#module' + nr).animate({width:'toggle',height:'toggle',opacity:'toggle'},settings.speed);

   if(my_getcookie('forum-widget' + nr)=='0') {
      my_setcookie('forum-widget' + nr,'1',0,0);
      jQuery('#forum-widget' + nr).css('background-position',pic.backgroundPosition);
   } else {
      my_setcookie('forum-widget' + nr,'0',1,0);
      jQuery('#forum-widget' + nr).css('background-position','0 0px');
   }
}

function checkHide(nr) {
   var fw = 'forum-widget' + nr;

   if(my_getcookie(fw)=='0') {
      jQuery('#module' + nr).animate({width:'toggle',height:'toggle',opacity:'toggle'},0);
      jQuery('#forum-widget' + nr).css('background-position','0 0px');
   }
}

function checkNews() {
   var modNewsModule = gEBCN('module mod_news');
   if(modNewsModule[1]) {
      var module = modNewsModule[0];
      
      var container = document.createElement('div');
      module.parentNode.insertBefore(container, module.previousSibling);
      
      var news = container.nextSibling;
      while(news.nextSibling) {
         if(news.nextSibling.className == 'module') {
            break;
         }
         container.appendChild(news);
         news = container.nextSibling;
      }
      
      container.className = 'module';
      container.innerHTML = '<div class="inner"><span class="corners-top"><span></span></span><div style="height: 4px;"></div><div class="module mod_news"><div class="inner"><span class="corners-top"><span></span></span><div class="h3"><center>News</center></div><span class="corners-bottom"><span></span></span></div></div>' + container.innerHTML + '<div style="height: 4px;"></div><span class="corners-bottom"><span></span></span></div>';
   }
}

main();
</script>