mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 11:02 Benutzername: Passwort: Auto-Login

Thema: Brauche Unterstützung bei JS Accordion vom 27.08.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Brauche Unterstützung bei JS Accordion
Autor Nachricht
Benutzer 43188
Account gelöscht Threadersteller


Ort: -

Verfasst Do 27.08.2009 10:28
Titel

Brauche Unterstützung bei JS Accordion

Antworten mit Zitat Zum Seitenanfang

Hallo Zusammen,

ich bin eigentlich nicht der Coder *zwinker*

Dennoch befasse ich mich in letzter Zeit viel mit CSS. Nun baue ich grad eine Seite auf. Und wollte für das (sehr simple) menü ein "Accordion-Script" benutzen. Nun hab ich auch eins gefunden ...

Ähnlich diesem hier:
http://www.solutoire.com/experiments/mootools/acc_ex3.html

Das Problem. Ich möchte, dass sich pro Kategorie im "Kategoriekopf" der Hintergrund ändert ... bzw. die einzelnen "Themen-Balken" zu beginn ne unterschiedlich graue Farbe und wenn diese ausgewählt sind dann rot haben. ich hab mal n bild als Hilfe angefügt. (siehe weiter unten)

Hier der HTML-Code:
Code:

<body>
    <div id="page">
      <div id="page-header">
        &nbsp;
      </div>
         <img src="LOGO_SOURCE" alt="Logo" id="logo" />
          <div id="content">
            <div id="accordion2">
                <dl class="accordion2" id="slider2">
<dt><img src="BILDLINK" alt="Begleiter" id="begleiter" /></dt>
                </dl>
            </div>
          </div>

      <div id="page-footer">
        <div id="footer-content">
          <ul class="nav">
            <p><a href="#" title="">Seite</a> | <a href="#" title="">IMPRESSUM</a> | <a href="#" title="">DATENSCHUTZ</a> | <a href="#" title="">KONTAKT</a></p>
          </ul>
        </div>
      </div>
    </div>
   
<script type="text/javascript">

var slider2=new accordion.slider("slider2");
slider2.init("slider2",0,"open");

</script>
</body>


Hier das Java-Script:
Code:

var accordion=function(){
   var tm=sp=10;
   function slider(n){this.nm=n; this.arr=[]}
   slider.prototype.init=function(t,c,k){
      var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
      h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
      for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
      l=s.length;
      for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
   }
   slider.prototype.pro=function(d){
      for(var i=0;i<this.l;i++){
         var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
         if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
         else if(s.style.display==''){su(s,-1); h.className=''}
      }
   }
   function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
   function sl(c,f){
      var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
      c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
      if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
   }
   return{slider:slider}
}();


Und hier die CSS:
Code:

dt {margin:0px; font-weight:bold; cursor:pointer; font-size:60px; font-family:Arial, Helvetica, sans-serif}

#accordion2 {width:900px; margin:0px auto; border-top:none}

.accordion2 {width:897px; font:12px Verdana,Arial; color:#000000}

.accordion2 dt {width:887px; padding:4px 6px; height:70px; font-weight:bold; cursor:pointer; font-size:60px; background-color:#666; background-position:right center; background-repeat:no-repeat; color:#fff; font-family:Arial, Helvetica, sans-serif}

/*.accordion2 dt:hover {background-color:#843435}*/

.accordion2 .open {background-color:#ac0724; background-image:url(...link/bilder/arrow_up.gif)}

.accordion2 dd {overflow:hidden; background:#fff; margin-left: 20px}

.accordion2 span {display:block; width:800px; border-top:none; padding:15px; line-height: 16px}


Und hier das Bild, wie es aussehen soll ("ZIEL" wäre hier angeklick und würde sich raktisch aufscrollen)




Kann mir jemand helfen?

Gruß,
Chris
 
ApfelQFeierabend

Dabei seit: 05.04.2008
Ort: Regensburg
Alter: 36
Geschlecht: Männlich
Verfasst Do 27.08.2009 22:12
Titel

Antworten mit Zitat Zum Seitenanfang

dein html sieht total überladen aus, für dein layout recht einfache dl
Code:
<dl>
   <dt>Ziel</dt>
   <dd>text über ziele</dd>
   <dt>Orientierung</dt>
   <dd>usw</dd>
</dl>

und einbischen jquery js:
Code:
$("dt").click(function(){
   $(this).next("dd").slideToggle("slow").siblings("dd:visible").slideUp("slow");
});

dann musst du das ganze nur noch mit css schöner machen.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Benutzer 43188
Account gelöscht Threadersteller


Ort: -

Verfasst Fr 28.08.2009 08:23
Titel

Antworten mit Zitat Zum Seitenanfang

ApfelQFeierabend hat geschrieben:
dein html sieht total überladen aus, für dein layout recht einfache dl
Code:
<dl>
   <dt>Ziel</dt>
   <dd>text über ziele</dd>
   <dt>Orientierung</dt>
   <dd>usw</dd>
</dl>

und einbischen jquery js:
Code:
$("dt").click(function(){
   $(this).next("dd").slideToggle("slow").siblings("dd:visible").slideUp("slow");
});

dann musst du das ganze nur noch mit css schöner machen.


Danke für die schnelle Antwort ...

Wenn ich das richtig sehe, dann vereinfacht das nur den Grundcode, oder? Wie kann ich ihm denn sagen, dass die einzelnen Balken jeweils ein unterschiedlichees Grau haben sollen und wennsie "onklick" sind, halt rot?

Zudem muss ich noch nachträglich beifügen, dass "dd" bei meinem Code für den Inhalt geplant ist. Sprich den Text, wenn sich das dingaufgescrollt hat!

Hat jemand ne Lösung? ... ich verzweifle langsam

Lieben Gruß,
Chris
 
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 28.08.2009 09:40
Titel

Antworten mit Zitat Zum Seitenanfang

Hi,
am besten du vergibst zusätzlich eine class="selected" dann
Also in etwa dann so:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Accordion</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
<!--
   DT.toggle1 {
      background:grey;
   }
   DT#toggle1.selected {
      background:black;
   }
   DT.toggle2 {
      background:lightblue;
   }
   DT#toggle2.selected {
      background:blue;
   }
   DT.toggle3 {
      background:pink;
   }
   DT#toggle3.selected {
      background:red;
   }
   DT.toggle4 {
      background:lightgreen;
   }
   DT#toggle4.selected {
      background:green;
   }
-->
</style>
</head>

<body>
<dl>
   <dt id="toggle1" class="toggle1">Ziel</dt>
   <dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</dd>
   <dt id="toggle2" class="toggle2">Orientierung</dt>
   <dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</dd>
   <dt id="toggle3" class="toggle3">Weg</dt>
   <dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</dd>
   <dt id="toggle4" class="toggle4">Begleiter</dt>
   <dd>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</dd>
</dl>
<script type="text/javascript">
<!--
// alle unsichtbar für js-User:
$("dd").css('display','none');
// events attachen
$("dt").click(function(){
   $(this).next("dd").slideToggle("slow").siblings("dd:visible").slideUp("slow");
   // alle highlights wech
   $("dt.selected").removeClass("selected");
   // hier dazu
   $(this).addClass("selected");
});
-->
</script>
</body>
</html>


Gruß

zweitaccount
  View user's profile Private Nachricht senden
Benutzer 43188
Account gelöscht Threadersteller


Ort: -

Verfasst Fr 28.08.2009 09:48
Titel

Antworten mit Zitat Zum Seitenanfang

Danke ... ich glaube, dass geht in die richtige richtung. Habe nun den Code Copy -> Paste mäßig in ne index kopiert ... leider wirde das script nicht ordnungsgemäß ausgeführt ... ist das n bug?

Lieben Gruß
Chris
 
zweitaccount

Dabei seit: 25.01.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Fr 28.08.2009 11:00
Titel

Antworten mit Zitat Zum Seitenanfang

Code:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

haste aber runterladen?
http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js

?
  View user's profile Private Nachricht senden
 
Ähnliche Themen Ist das mit Accordion möglich?
[jquery] accordion
Hilfe bei MOO.FX accordion menü?
Suche horizontales Accordion
Javascript Problem mit Dragdealer im Accordion
[SOLVED] jQuery: Accordion und Div overflow style
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.