Leiste auf und zuklappen

Vorerst möchte ich kurz sagen, das diese Themas nur auf freiwilliger Basis bearbeitet werden soll. ich möchte Links und Bilder in einen Code einbinden den ich auf und zuklappen kann.

Die Leiste sieht so aus:

Code:

http://www.abload.de/img/sidebar3wcu9o.png

Die Links kommen vor die Leiste. Nun habe ich bereits den ganzen morgen mit unterschiedlichen Scripts versucht, diese Leiste zu installieren. Ein Beispiel habe ich mir auch an der Chatbox-Leiste genommen sowie viele Scripts die ich in der Suchfunktion gefunden habe.

Gibt es einen Code den ich generell nutzen kann? Ich brauche 1 Button mit dem ich die Bar auf und zuklappen kann.... am besten mit Cookies..
Den Script von den Bildern und Links gebe ich hier nicht an, wichtig ist nur das ich den richtigen Code für mein Forum bekomme.

Es gibt hier ein Tuto, wie du die Chatbox auch mit einem Cookie der den Zusatnd speichert einsetzt.
Anstelle der Chatbox kannst du dein Modul dort einsetzen.
Nur wie ich dir in deinem anderen Thread schon gesagt habe, gehst du an die Gestaltung deines Moduls vollkommen falsch ran.
So wie du das hier umsetzen willst, wirst du es nicht hinbekommen.

Mhh, also im Prinzip möchte ich einfach, das die Leiste auf und zugeklappt wird... und das mit allen Links und Variabeln die ich eingebaut habe. Wie wäre denn der richtige weg, dort ran zu gehen?

Ich habe es dir doch schon versucht zu erklären.
Aber am Beten machst du es so, wie es -->hier<-- erklärt wird.
Dort wo in der Beschreiibung der Iframe für den Chat eingesetzt ist, setzt du einfach deinen kompletten Code für deine Liste ein.
Das sollte Funktionieren.

<TABLE style="Z-INDEX: 10000; POSITION: fixed; BOTTOM: 10px; LEFT: 0px">
<TBODY>
<TR>
<TD><IFRAME

id="popup_chatbox" style="WIDTH: 600px; HEIGHT: 300px"

src="/chatbox/index.forum?" frameBorder=0

scrolling=no></IFRAME></TD>
<TD
style="VERTICAL-ALIGN: bottom"><div id="chatbox_button"
style="height: 1px; width: 1px;"
onClick="my_setcookie('chatbx',(my_getcookie('chatbx')=='1'?'0':'1'),1,0);updateChatbx();"></div></TD></TR></TBODY></TABLE>
<script type="text/javascript">
function updateChatbx() {
if(my_getcookie('chatbx')&& my_getcookie('chatbx')=='1') {
jQuery('#popup_chatbox').parent().css('display', 'none');
jQuery('#chatbox_button').css("background-image", "url('BILDURL CHATBOX EINBLENDEN')");
}
else {
jQuery('#popup_chatbox').parent().css('display', '');
jQuery('#chatbox_button').css("background-image", "url('BILDURL CHATBOX AUSBLENDEN')");
}
};
updateChatbx();
</script>

Der rot markierte Bereich muss also ersetzt werden? Mhh... habs jetzt so:

Code:

    <TABLE style="Z-INDEX: 10000; POSITION: fixed; BOTTOM: 10px; LEFT: 0px">
    <TBODY>
    <TR>
    <TD><div style="position: absolute; top: 40px; left: -3px; z-index: 10000; position: fixed">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <img src="http://abload.de/img/sidebar3e9xae.png" />
            </td>
            
         </tr>
         
      </tbody>
   </table>
</div>
<div style=" top: 85px; left: 80px; z-index: 10001;font-size: 16px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 2px 2px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span>Willkommen</span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
 
<div style=" top:219px; left: 40px; z-index: 10001;font-size: 9px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 1px 1px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=preferences">Einstellungen</a></span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
 
<div style=" top:242px; left: 40px; z-index: 10001;font-size: 9px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 1px 1px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=avatars">Avatar</a></span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
<div style=" top:257px; left: 40px; z-index: 10001;font-size: 9px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 1px 1px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=signature">Signatur</a></span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
<div style=" top:272px; left: 40px; z-index: 10001;font-size: 9px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 1px 1px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span><a href="http://tivo.forumieren.com/faq">Tutorials</a></span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
 
<div style=" top:290px; left: 40px; z-index: 10001;font-size: 9px; position: fixed; font-weight: normal; color:#fbf5e9; text-shadow:#000000 1px 1px; font-size: big; font-family:Verdana ">
   
   <table>
      
      <tbody>
         <tr>
            
            <td>
                <span><a href="http://tivo.forumieren.com/memberlist">Mitgliederliste</a> </span>
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</div>
      </TD>
    <TD style="VERTICAL-ALIGN: bottom"><div id="chatbox_button" style="height: 30px; width: 30px;" onClick="my_setcookie('chatbx',(my_getcookie('chatbx')=='1'?'0':'1'),1,0);updateChatbx();"></div></TD></TR></TBODY></TABLE>
    <script type="text/javascript">
    function updateChatbx() {
    if(my_getcookie('chatbx')&& my_getcookie('chatbx')=='1') {
    jQuery('#popup_chatbox').parent().css('display', 'none');
    jQuery('#chatbox_button').css("background-image", "url('http://www.pflegewiki.de/images/thumb/6/64/Ordner.png/120px-Ordner.png')");
    }
    else {
    jQuery('#popup_chatbox').parent().css('display', '');
    jQuery('#chatbox_button').css("background-image", "url('http://www.pflegewiki.de/images/thumb/6/64/Ordner.png/120px-Ordner.png')");
    }
    };
    updateChatbx();
    </script>

push#

Hallo,

du hast in deinem Code immer noch Positionierungen vorgenommen (position: absolute/fixed, left/top, z-index ...), die in diesem Fall nicht mehr nötig sind und den Code stören.

Mit der aufklappbaren Chatbox passiert Folgendes:
Es wird eine "Box" generiert, die fix auf der Seite positioniert ist, so wie du es ja möchtest. Daneben befindet sich noch ein Button, mit dem du die Box ein-/ausklappen kannst, sodass man sie nur bei Bedarf sieht und sie nicht ständig Teile der Seite überlappt.

Der Bereich, den Frank dir rot markiert hat, musst du durch das ersetzen, was angezeigt werden soll, wenn die Box ausgeklappt ist.
Der Punkt ist: Du musst keinerlei Positionierungen mehr vornehmen, weil diese ja bereits im Grundgerüst der Box vorhanden sind.

Stattdessen erstellst du am besten eine ganz normale, einfache HTML-Tabelle. Ihr fügst du passende Spalten und Zeilen hinzu und füllst diese mit den gewünschten Links. Anschließend kannst du noch ein Hintergrundbild zur Tabelle hinzufügen (das aber auch dazupasst, denn bei deinem aktuellen passen die Relationen überhaupt nicht zum Inhalt ) oder du formatierst die Tabelle mit CSS, sodass sie wie gewünscht aussieht.
Aber du darfst in diesem Fall nur ganz simple HTML-Strukturen ohne Positionierungen verwenden. Ich hoffe, du hast verstanden, in welche Richtung du jetzt gehen musst?

Günther schrieb:Hallo,

du hast in deinem Code immer noch Positionierungen vorgenommen (position: absolute/fixed, left/top, z-index ...), die in diesem Fall nicht mehr nötig sind und den Code stören.

Mit der aufklappbaren Chatbox passiert Folgendes:
Es wird eine "Box" generiert, die fix auf der Seite positioniert ist, so wie du es ja möchtest. Daneben befindet sich noch ein Button, mit dem du die Box ein-/ausklappen kannst, sodass man sie nur bei Bedarf sieht und sie nicht ständig Teile der Seite überlappt.

Der Bereich, den Frank dir rot markiert hat, musst du durch das ersetzen, was angezeigt werden soll, wenn die Box ausgeklappt ist.
Der Punkt ist: Du musst keinerlei Positionierungen mehr vornehmen, weil diese ja bereits im Grundgerüst der Box vorhanden sind.

Stattdessen erstellst du am besten eine ganz normale, einfache HTML-Tabelle. Ihr fügst du passende Spalten und Zeilen hinzu und füllst diese mit den gewünschten Links. Anschließend kannst du noch ein Hintergrundbild zur Tabelle hinzufügen (das aber auch dazupasst, denn bei deinem aktuellen passen die Relationen überhaupt nicht zum Inhalt ) oder du formatierst die Tabelle mit CSS, sodass sie wie gewünscht aussieht.
Aber du darfst in diesem Fall nur ganz simple HTML-Strukturen ohne Positionierungen verwenden. Ich hoffe, du hast verstanden, in welche Richtung du jetzt gehen musst?

Also Praktisch eine Tabelle mit Hintergrund erstellen, diese mit den Links etc füllen, das in den Code zwischen dem Chatbox Script setzen, und fertig ?!

Ganz genau!

Günther schrieb:Ganz genau!

Soooo Günther! Auch wenn die Leiste noch weit weit weit bearbeitet werden muss, hier einmal die Codes. Wie muss ich das nun so schlau einfügen, das der Code nachher auch funktioniert?

Code für Hintergrund schrieb:
<div style="position: absolute; top: 40px; left: -3px; z-index: 999; position: fixed"><img src="http://abload.de/img/sidebar32mr40.png" /></div>

Code für Tabelle schrieb:<div style="position: absolute; top: 250px; left: 20px; z-index: 1000; position: fixed ">
<table border="0" bordercolor="#transp" style=width="50%">
    <tr>
        <td><span><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=preferences">Einstellungen</a></span> </td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
</table>

</div>

Code für Chatbox schrieb:<TABLE style="Z-INDEX: 10000; POSITION: fixed; BOTTOM: 10px; LEFT: 0px">
<TBODY>
<TR>
<TD><

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

</TD>
<TD
style="VERTICAL-ALIGN: bottom"><div id="chatbox_button"
style="height: 1px; width: 1px;"
onClick="my_setcookie('chatbx',(my_getcookie('chatbx')=='1'?'0':'1'),1,0);updateChatbx();"></div></TD></TR></TBODY></TABLE>
<script type="text/javascript">
function updateChatbx() {
if(my_getcookie('chatbx')&& my_getcookie('chatbx')=='1') {
jQuery('#popup_chatbox').parent().css('display', 'none');
jQuery('#chatbox_button').css("background-image", "url('http://icdn.pro/images/en/2/1/21-icone-5401-64.png')");
}
else {
jQuery('#popup_chatbox').parent().css('display', '');
jQuery('#chatbox_button').css("background-image", "url('http://icdn.pro/images/en/2/1/21-icone-5401-64.png')");
}
};
updateChatbx();
</script>

Jetzt hast du ja schon wieder divs mit Positionierungen erstellt...
Genau das solltest du doch nicht mehr machen. Und das Hintergrundbild fügst du direkt der Tabelle hinzu, also:

Code:

<table style="background-image: ('http://abload.de/img/sidebar32mr40.png'); border: 0;">
    <tr>
        <td><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=preferences">Einstellungen</a></td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
    <tr>
        <td>Table Cell</td>
    </tr>
</table>

Ich habe dir gleich noch ein paar Fehler ausgebessert. Wenn du dir deinen Code im Vergleich mit diesem ansiehst, wirst du sehen, was ich daran verändert habe.

Außerdem hast du bei "Code für die Chatbox" vor den XXX... noch ein < stehen, das zuviel ist. Das würde einen Fehler hervorrufen, wenn du die Tabelle statt der XXX... dort einsetzt.

Ja dankeschön, sieht alles top aus!

Nur leider sehe ich mein Bild nicht und die Leiste lässt sich nicht aufklappen
Ich habe den Sript übrigens im Over-all header.

Code:

  <TABLE style="Z-INDEX: 10000; POSITION: fixed; BOTTOM: 10px; LEFT: 0px">
    <TBODY>
    <TR>
    <TD>    <table style="background-image: ('http://abload.de/img/sidebar32mr40.png'); border: 0;">
        <tr>
            <td><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=preferences">Einstellungen</a></td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
    </table></TD>
    <TD style="VERTICAL-ALIGN: bottom"><IMG onclick="document.getElementById('chatboxpop').style.display=(this.src=='http://i48.servimg.com/u/f48/15/88/93/41/chat11.png')?'block':'none';this.src=(this.src=='http://i48.servimg.com/u/f48/15/88/93/41/chat11.png')?'http://i48.servimg.com/u/f48/15/88/93/41/chat10.png':'http://i48.servimg.com/u/f48/15/88/93/41/chat11.png';" src="http://i48.servimg.com/u/f48/15/88/93/41/chat11.png"></TD></TR></TBODY></TABLE>




Weil der Code wieder nicht richtig war. Ich habe ihn jetzt korrigiert, du kannst ihn so einsetzen und die Tabelle dann weiter ausbauen:

Code:

<TABLE style="Z-INDEX: 10000; POSITION: fixed; BOTTOM: 10px; LEFT: 0px">
<TBODY>
<TR>
<TD><table id="popup_chatbox" style="background-image: url(http://abload.de/img/sidebar32mr40.png); border: medium none;">
        <tr>
            <td><a href="http://tivo.forumieren.com/profile?mode=editprofile&page_profil=preferences">Einstellungen</a></td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
        <tr>
            <td>Table Cell</td>
        </tr>
    </table></TD><TD valign="bottom"><img src="http://i48.servimg.com/u/f48/15/88/93/41/chat10.png" onClick="my_setcookie('chatbx',(my_getcookie('chatbx')=='1'?'0':'1'),1,0);updateChatbx();"></TD></TR></TBODY></TABLE>
<script type="text/javascript">
function updateChatbx() {
if(my_getcookie('chatbx')&& my_getcookie('chatbx')=='1') {
jQuery('#popup_chatbox').parent().css("display", "none");
}
else {
jQuery('#popup_chatbox').parent().css("display", "");
}
};
updateChatbx();
</script>

jany schrieb:Ich habe den Sript übrigens im Over-all header.

Das ist der falsche Platz. Optimalerweise setzt du den Code dort ein:
https://hilfe.forumieren.com/t35360-phpbb2problem-popup-chatbox#232469

Und wie bereits gesagt, wirst du sehen, dass das Hintergrundbild von der Struktur her nicht dazu passt. Du wirst dir nach Fertigstellung der Tabelle wohl noch ein passendes designen (lassen) müssen.

Ich denke, damit ist dein Anliegen jetzt erledigt?

Perfekt! 

Ich baue die Tabelle mal aus, und schicke dir dann das fertige Ergebnis einmal die Tage oder Wochen via PN! Danke, das war echt super von dir!

Gerne.

Du musst mir deshalb keine PN senden, ich behalte das selber im Auge.
Viel Spaß beim Ausbauen!
-closed-