div ein-/ausblenden

[schwubbe]

Moin moin

Ich habe folgendes Problem:
Ich will auf meine HP eine Seite mit folgenden Eigenschaften einbauen:

• am oberen Rand ein fixiertes div mit dem Menü (läuft soweit bereits)
• Überschrift Seitenmittig
• links eine Liste Tag 01 bis Tag 15
• mittig ein div in dem etwas angezeigt wird, wenn man auf eine der "Tage" klickt.
  Bei erstem Seitenaufruf soll dort eine Beschreibung des ganzen stehen welche dann ersetzt wird
• rechts eine Liste mit Tag 16 bis Tag 30

Angezeigt werden soll folgender Inhalt:
a) Überschrift
b) eine kleine Beschreibung
c) ein eingebettetes Video (meist youtube)

Ich habe schon gelesen, das ich aufgrund des fixierten Menüs bei den Videos auf wmode="transparent" und <param name="wmode" value="transparent" /> achten muss. Ob das läuft konnte ich noch nicht testen.
Ich kann leider noch keine Links für Beispiele posten, das ich das ganze auf einem LapTop mit XAMPP aber ohne Internetverbindung schreibe.

Der gesamte hier erwähnte Seiteninhalt kommt in ein div mit folgenden Eigenschaften:
width=800px
margin-top=135px (das klappt bei mir irgendwie noch nicht. margin-top wird nicht vom browser beachtet)
margin left & right = auto (das aber wird richtig dargestellt)

Meine Kenntnisse in HTML sind gut, die in css sind mittelprächtig, da ich zB Vererbung einfach noch nicht kapiere.
Meine Seite läuft unter .php-Endungen, da ich das Menü per include einfüge, und das Gästebuch ebenfalls auf php läuft.
Meinen CSS-Code lagere ich in der externen css.css (ich weiß, einfallsloser Name ^^ )
Schreiben möchte ich das ganze ohne Javascript, sondern rein in HTML, CSS und (hierfür wohl nicht notwendig) PHP.

Wo hapert es bei mir genau:
Ich habe keine Ahnung, wie ich es am besten anstelle. Soll ich 30 divs mit Attribut hidden und dem jeweiligen Inhalt schreiben? Wohl ja, woher soll der Browser sonst wissen was in die Box soll. Aber wie mache ich es, das die jeweilige Box angezeigt wird, und bei Klick auf einen anderen "Tag" die alte aus- und die neue eingeblendet wird?


Wäre super wenn mir da jemand helfen könnte.

Falls noch Angaben oder so fehlen, so reiche ich diese gerne nach.

Liebe Grüße
schwubbe

[Azra]

Zwei Attribute bei einem Klick gleichzeitig zu verändern ist meines Wissens nicht möglich.
Der Aufwand mit JavaScript wäre hier minimal, vielleicht 3 Zeilen.

[schwubbe]

2 Attribute = einblenden & ausblenden?
Ich hatte sowas schon befürchtet. Es würde mich allerdings auch nicht stören wenn sich der Ihnalt des neu gewählten "Tages" vor den alten legt, ähnlich wie mit z-index, ähnlich weil: Tag 1 muss sich ebebso vor Tag 4 legen wie auch Tag 30.

Nur etwa 3 Zeilen JS?
Eigentlich meide ich JS wie der Teufel das Weihwasser (zwielichtige Technik, nicht jeder hats aktiviert, etc...), aber ich gebe zu, ein wenig neugierig bin ich. Magst es näher ausführen?

[Azra]

Ja, an z-index hatte ich auch gedacht. Aber das funktioniert nur einmal da sich CSS nicht selbstständig zurücksetzen kann.
CSS ist keine "berechnerische" Sprache wie du weißt, es guckt also nicht:"Oh der hat geklickt, dann muss ich jetzt etwas anderes ausführen!".

Das geht mit JavaScript - würde jQuery benutzen da es sehr viel einfacher gestrickt ist. Du bindest einmal eine Bibliothek mit Berechnungen ein und kannst mit wenigen Zeilen sehr viel mehr erreichen. Das originale JavaScript benötigte etwa 3mal so viel Code für die selben Funktionen.
http://jquery.com/

Hier der Code für dich - so habe ich es zumindest verstanden:

HTML

Code: Alles auswählen

   <ul id="dayone">
      <li><a href="javascript:void();" title="Informationen zu Tag 1">Tag 1</a><span>Information zu Tag 1</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 2">Tag 2</a><span>Information zu Tag 2</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 3">Tag 3</a><span>Information zu Tag 3</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 4">Tag 4</a><span>Information zu Tag 4</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 5">Tag 5</a><span>Information zu Tag 5</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 6">Tag 6</a><span>Information zu Tag 6</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 7">Tag 7</a><span>Information zu Tag 7</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 8">Tag 8</a><span>Information zu Tag 8</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 9">Tag 9</a><span>Information zu Tag 9</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 10">Tag 10</a><span>Information zu Tag 10</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 11">Tag 11</a><span>Information zu Tag 11</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 12">Tag 12</a><span>Information zu Tag 12</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 13">Tag 13</a><span>Information zu Tag 13</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 14">Tag 14</a><span>Information zu Tag 14</span></li>
      <li><a href="javascript:void();" title="Informationen zu Tag 15">Tag 15</a><span>Information zu Tag 15</span></li>
   </ul>


CSS

Code: Alles auswählen

#dayone span{position:absolute;left:300px;padding:5px;background:white;border:1px solid gray;}


Innerhalb von <head> bindest du folgenden Code ein:

Code: Alles auswählen

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function initMenu(){
   $('#dayone > li > span').hide();
   $('#dayone > li > a').click(function(){
      if($('#dayone > li > span').attr('class') != 'active'){
         $('#dayone > li > span').hide();
         $(this).next().show();
         $('#dayone li span').removeClass('active');
         $(this).addClass('active');
      }
   });
}
$(window).load(function(){
   initMenu();
});
</script>


//Edit
Heute haben vielleicht 2% der Benutzer JavaScript deaktiviert, schreib einfach ins Impressum dass deine Webseite JavaScript Elemente nutzt. Ich weiß, es sind mehr als 3 Zeilen - früher hätte man aber einiges mehr an Code verwenden müssen.

[schwubbe]

Danke dir. Ich hab mir das bewusst 2-3 Mal angeschaut bevor ich reagiere, und siehe da: Es hat gewirkt, ich hab das Prinzip dahinter verstanden.
Ich habe mir die Site auch mal aufn Stick gezogen und an diesme PC hochgeladen, so kannst du dir das erste Test-Resultat auch anschauen:
http://boardsteinschwubbe.de/test/30_da ... llenge.php

Das ganze jetzt noch etwas mit divs und css hingetrimmt und es passt denke ich. Ich sollte problemlos anstelle oder mit Hilfe des von dir verwendeten "span" ein div einbauen können, welcher dann zwischen den beiden Listen Platz hat.

Was den Scriptcode angeht: ok, sind mehr als drei Zeilen, aber ist ja noch aushaltbar, zumal ich die Liste von dir kopieren konnte ^^

Ich werde mich die Tage noch ausführlicher dem Projekt widmen und mich ggf noch mal hier melden falls ich Probleme haben sollte.

Bis jetzt erst einmal vielen Lieben Dank für deine Hilfe Azra

Liebe Grüße
schwubbe

[Azra]

Hier ich habs überarbeitet.
Die <span>-Tags in der Liste sind nun Container, du musst das in deiner CSS anpassen. Darüber hinaus ist die Seite so gut wie valide (Syntax nach W3C Richtlinien), eine ID darf nie mit einer Zahl beginnen - ändere also deine ID 30days in HTML und CSS damit die Seite komplett valide wird.

Zudem habe ich für dich den Doctype geändert, XHTML ist beliebter bei Suchmaschinen - eine Änderung in der Programmierung gibt es nur bei alleinstehenden Tags wie <br/>, <meta/> oder <img/>. Die müssen wie du siehst in sich selber mit einem Slash geschlossen werden. Ansonsten ist das vokabular zwischen HTML 4 und XHTML 1.0 dasselbe.

Hier kannst du deine Seite (Validität) prüfen:
http://validator.w3.org/

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Seitentitel</title>
<meta name="title" content="Seitentitel"/>
<meta name="description" content="Beschreibung der Einzelseite"/>
<meta http-equiv="content-language" content="de"/>
<meta http-equiv="expires" content="1209600"/>
<link href="css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script type="text/javascript">function initMenu(){$('#dayone > li > div, #daytwo > li > div').hide();$('#dayone > li > a, #daytwo > li > a').click(function(){if($('#dayone > li > div, #daytwo > li > div').attr('class') != 'active'){$('#dayone > li > div, #daytwo > li > div').hide();$(this).next().show();$('#dayone li div, #daytwo > li > div').removeClass('active');$(this).addClass('active');}});}$(window).load(function(){initMenu();});</script>
</head>
<body>
   <table width="800" border="0" align="center" cellspacing="3">
   <tr align="center">
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/index.php" target="_top" title="Zur&uuml;ck zur Startseite">Home</a></td>
   
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/ueber_mich.php" target="_top" title="Was ich &uuml;ber mich zu erz&auml;hlen habe">&Uuml;ber mich</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/galerie.php" target="_top" title="Bilder von mir und meinem Leben">Galerie</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/hobbys.php" target="_top" title="Von mir zu meinen Hobbys">Hobbys</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/my_way.php" target="_top" title="Was ist mir wichtig auf dieser Welt?">My Way</a></td>
      <td nowrap="nowrap">&nbsp;</td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/gb/gastbuch.php" target="_top" title="Hinterlasse mir einen G&auml;stebucheintrag">G&auml;stebuch</a></td>
   
   </tr>
   <tr>
     <td colspan="7" nowrap="nowrap"><img src="http://boardsteinschwubbe.de/bg_menue.jpg" width="800" height="94" border="0" alt="Menü Hintergrundbild"/></td>
   </tr>
   <tr align="center">
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/lyrik.php" target="_top" title="Gedichte und Songtexte">Lyrik</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/lyrik/warum_mami.php" target="_top" title="Ein sehr sch&ouml;nes Gedicht zum verbreiten">Warum Mami</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/lyrik/realsatire.php" target="_top" title="Eine sch&ouml;ne Geschichte &uuml;ber Herrn M&uuml;ller">Realsatire</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/schwulenchronic/Schwulenchronic.php" target="_top" title="Kleine &Uuml;bersicht über das Schwul sein bis Ende des 20ten Jahrhundert">Gayhistory</a></td>
   
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/stuff/fun.php" target="_top" title="F&uuml;r den kleinen Zeitvertreib zwischendurch">Spiel &amp; Spa&szlig;</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/stuff/stuff.php" target="_top" title="Diverse Bilder und Programme f&uuml;r euch">Stuff</a></td>
      <td nowrap="nowrap"><a href="http://boardsteinschwubbe.de/impressum.php" target="_top" title="Impressum">Impressum</a></td>
   </tr>
   </table>
<div id="content">
   <h2><u>30 day song chellenge</u></h2>
   <div id="30days" style="float:left; text-decoration:none; font-size:small; list-style-image:none;">

      <div id="days_1" style="float:left">
         <ul id="dayone">
            <li><a href="javascript:void();" title="Informationen zu Tag 1">Tag 1</a>
               <div>
               <h3>Tag 01</h3>
               Mein Lieblingslied<br/>
               Hier kommen dann noch ein paar Worte zum jeweiligen Video und wieso gerade dies auf den jeweiligen Tag zutrifft<br/>
               Hier kommen dann noch ein paar Worte zum jeweiligen Video und wieso gerade dies auf den jeweiligen Tag zutrifft<br/>
               Hier kommen dann noch ein paar Worte zum jeweiligen Video und wieso gerade dies auf den jeweiligen Tag zutrifft<br/>
               Hier kommen dann noch ein paar Worte zum jeweiligen Video und wieso gerade dies auf den jeweiligen Tag zutrifft<br/>
               <object data="http://www.youtube-nocookie.com/v/dKzz8psgaPY?fs=1&amp;hl=de_DE&amp;rel=0" type="application/x-shockwave-flash" width="425" height="349">
                  <param name="allowFullScreen" value="true"/>
                  <param name="allowscriptaccess" value="always"/>
                  <param name="wmode" value="transparent"/>
               </object>
               </div>
            </li>
            <li><a href="javascript:void();" title="Informationen zu Tag 2">Tag 2</a><div>Information zu Tag 2</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 3">Tag 3</a><div>Information zu Tag 3</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 4">Tag 4</a><div>Information zu Tag 4</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 5">Tag 5</a><div>Information zu Tag 5</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 6">Tag 6</a><div>Information zu Tag 6</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 7">Tag 7</a><div>Information zu Tag 7</div></li>
            
            <li><a href="javascript:void();" title="Informationen zu Tag 8">Tag 8</a><div>Information zu Tag 8</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 9">Tag 9</a><div>Information zu Tag 9</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 10">Tag 10</a><div>Information zu Tag 10</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 11">Tag 11</a><div>Information zu Tag 11</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 12">Tag 12</a><div>Information zu Tag 12</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 13">Tag 13</a><div>Information zu Tag 13</div></li>
            
            <li><a href="javascript:void();" title="Informationen zu Tag 14">Tag 14</a><div>Information zu Tag 14</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 15">Tag 15</a><div>Information zu Tag 15</div></li>
         </ul>
      </div>
      <div id="day_content"></div>
      <div id="days_2" style="float:right">
         <ul id="daytwo">
            <li><a href="javascript:void();" title="Informationen zu Tag 16">Tag 16</a><div>Information zu Tag 16</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 17">Tag 17</a><div>Information zu Tag 17</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 18">Tag 18</a><div>Information zu Tag 18</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 19">Tag 19</a><div>Information zu Tag 19</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 20">Tag 20</a><div>Information zu Tag 20</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 21">Tag 21</a><div>Information zu Tag 21</div></li>
            
            <li><a href="javascript:void();" title="Informationen zu Tag 22">Tag 22</a><div>Information zu Tag 22</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 23">Tag 23</a><div>Information zu Tag 23</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 24">Tag 24</a><div>Information zu Tag 24</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 25">Tag 25</a><div>Information zu Tag 25</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 26">Tag 26</a><div>Information zu Tag 26</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 27">Tag 27</a><div>Information zu Tag 27</div></li>
            
            <li><a href="javascript:void();" title="Informationen zu Tag 28">Tag 28</a><div>Information zu Tag 28</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 29">Tag 29</a><div>Information zu Tag 29</div></li>
            <li><a href="javascript:void();" title="Informationen zu Tag 30">Tag 30</a><div>Information zu Tag 30</div></li>
         </ul>
      </div>
   </div><!-- id => 30days -->
</div><!-- id => content -->
</body>
</html>


[schwubbe]

Ui, besten Dank für deine Mühe Azra. Den Doytype werde ich aber vorerst so lassen, sonst würde ich mich nötigen ihn auf jeder einzelnen Seite anzupassen, dafür aber fehlen die Zeit und die Geduld. Zudem versuche ich mit bzgl. HTML immer fitter zu kriegen, sodaß ich irgendwann gar HTML4 strict hinbekomme.
Ich plane aber irgendwann wie du jetzt mehr meta-Daten einzufügen und den head dann weitestgehend zu includieren, aber auch das kommt dann irgendwann einmal wenn ich mir mehr Zeit dafür nehmen kann. Vorerst haben meine Arbeiten nur die Ziele a) die 30 Day Song Challenge online zu stellen b) das Menü oben zu fixieren und c) den Seiten-bg mal wieder zu ändern (wird jetzt wohl gräulich).
Das eine id nicht mit einre Zahl anfangen darf wusste ich noch gar nicht, ist bei mir aber wniger tragisch, die id "30days" hat keine weitere Verwendung, ist lediglich Erkennungsmerkmal für mich.

Liebe Grüße
schwubbe

[safari]

Hallo hier der Komplette JS-Code welchen du brauchst
Hoffe konnt dir helfen

Code: Alles auswählen

<body onload="setVisibility()"> /* muss im body sein */
<div id="gallery" style="display:block;"> /* auf deine div anpassen */
<a onclick="toggleElementDisplay('gallery');"></a> /*aktivierung des scirpts per klick */

         <script type= "text/javascript">
               /* Hier wird die Funktion definiert welche den Div Ausblendet und ein Cookie schreibt */
               
               function toggleElementDisplay(id) {
                  var element = document.getElementById(id);
                  var css     = element.style;
                  if (css.display == 'block') {
                  css.display = 'none';
                  setCookie('isHidden','1','','/');
                  return;
                  }
                  setCookie('isHidden','0','','/');
                  css.display = 'block';
               }       
               /*Das Cookie wird hier ausgelesen und nimmt den entsprechenden Status ein*/
               
               function setVisibility()
               {
                 if (getCookie('isHidden') == 1)
                 {document.getElementById('gallery').style.display='none';}
               }
               
               /* Hier wird das ganze Cookie definiert*/
               
               function setCookie( name, value, expires, path, domain, secure )
            {
            var today = new Date();
            today.setTime( today.getTime() );
            
            if ( expires )
            {
            expires = expires * 1000 * 60 * 60 * 24;
            }
            var expires_date = new Date( today.getTime() + (expires) );

            document.cookie = name + "=" +escape( value ) +
            ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
            ( ( path ) ? ";path=" + path : "" ) +
            ( ( domain ) ? ";domain=" + domain : "" ) +
            ( ( secure ) ? ";secure" : "" );
            }
               /*Hier wird definiert wie das Cookie ausgelesen wird*/
               
               function getCookie(name)
               {
                 var dc = document.cookie;
                 var prefix = name + "=";
                 var begin = dc.indexOf("; " + prefix);
                 if (begin == -1)
                 {
                    begin = dc.indexOf(prefix);
                    if (begin != 0) return null;
                 }
                 else
                 {
                    begin += 2;
                 }
                 var end = document.cookie.indexOf(";", begin);
                 if (end == -1)
                 {
                    end = dc.length;
                 }
                 return unescape(dc.substring(begin + prefix.length, end));
               }
         </script>

[Azra]

Hallo hier der Komplette JS-Code welchen du brauchst
Hoffe konnt dir helfen

Code: Alles auswählen

<body onload="setVisibility()"> /* muss im body sein */
<div id="gallery" style="display:block;"> /* auf deine div anpassen */
<a onclick="toggleElementDisplay('gallery');"></a> /*aktivierung des scirpts per klick */

         <script type= "text/javascript">
               /* Hier wird die Funktion definiert welche den Div Ausblendet und ein Cookie schreibt */
               
               function toggleElementDisplay(id) {
                  var element = document.getElementById(id);
                  var css     = element.style;
                  if (css.display == 'block') {
                  css.display = 'none';
                  setCookie('isHidden','1','','/');
                  return;
                  }
                  setCookie('isHidden','0','','/');
                  css.display = 'block';
               }       
               /*Das Cookie wird hier ausgelesen und nimmt den entsprechenden Status ein*/
               
               function setVisibility()
               {
                 if (getCookie('isHidden') == 1)
                 {document.getElementById('gallery').style.display='none';}
               }
               
               /* Hier wird das ganze Cookie definiert*/
               
               function setCookie( name, value, expires, path, domain, secure )
            {
            var today = new Date();
            today.setTime( today.getTime() );
            
            if ( expires )
            {
            expires = expires * 1000 * 60 * 60 * 24;
            }
            var expires_date = new Date( today.getTime() + (expires) );

            document.cookie = name + "=" +escape( value ) +
            ( ( expires ) ? ";expires=" + expires_date.toGMTString() : "" ) +
            ( ( path ) ? ";path=" + path : "" ) +
            ( ( domain ) ? ";domain=" + domain : "" ) +
            ( ( secure ) ? ";secure" : "" );
            }
               /*Hier wird definiert wie das Cookie ausgelesen wird*/
               
               function getCookie(name)
               {
                 var dc = document.cookie;
                 var prefix = name + "=";
                 var begin = dc.indexOf("; " + prefix);
                 if (begin == -1)
                 {
                    begin = dc.indexOf(prefix);
                    if (begin != 0) return null;
                 }
                 else
                 {
                    begin += 2;
                 }
                 var end = document.cookie.indexOf(";", begin);
                 if (end == -1)
                 {
                    end = dc.length;
                 }
                 return unescape(dc.substring(begin + prefix.length, end));
               }
         </script>

Das Problem ist schon gelöst, aber vielen Dank für die Oldschool-Variante.
Das meinte ich übrigens mit 3mal so viel Code für die selben Funktionen.

[safari]

kein problem, ich hoffe du kannst mir aber bei meinem problemchen mit der navigation helfen...