Willkommen auf dem Portal für Mediengestalter
|
|
Autor |
Nachricht |
Benutzer 43188
Account gelöscht Threadersteller
Ort: -
|
Verfasst Do 27.08.2009 10:28
Titel Brauche Unterstützung bei JS Accordion |
|
|
Hallo Zusammen,
ich bin eigentlich nicht der Coder
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">
</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:
|
Verfasst Do 27.08.2009 22:12
Titel
|
|
|
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.
|
|
|
|
|
Anzeige
|
|
|
Benutzer 43188
Account gelöscht Threadersteller
Ort: -
|
Verfasst Fr 28.08.2009 08:23
Titel
|
|
|
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
|
|
|
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
|
|
|
|
|
Benutzer 43188
Account gelöscht Threadersteller
Ort: -
|
Verfasst Fr 28.08.2009 09:48
Titel
|
|
|
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: -
|
|
|
|
|
|
|
|
Ä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
|
|
|
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.
|
|