CSS blockiert Accordion?

nordi

nordi

Erfahrenes Mitglied
Hallo,

ich habe ein seltsames Problem. Ich habe mir ein jQuery Accordion-Skript gebastelt aber es will nicht ausfahren. Ich habe die Vermutung, dass eine oder mehrere CSS-Eigenschaften im Konflikt stehen, komme aber nicht drauf?! Hier ist der Link: http://www.hckoelnwest.de/neu/

Bei den News der Link "mehr.." soll das Accordion ansteuern. Bin dankbar für Tipps!!
 
Und was führt dich zu der Annahme, die Blockade sei in einem "Konflikt" zwischen deinen CSS-Regeln zu suchen? Welche hast du denn im Auge, Verdacht? Ich find da nix, wo miteinander kollidieren könnte ;-)

Und in der naheliegenden Gegenprobe ohne jegliche CSS-Formatierung (stylomat.css, fancybox.css) kann die Funktionalität deines Scripts ebenso wenig überzeugen.

Für den IE (einschließlich 7) solltest du in seinem eigenen CSS für etwas Ordnung sorgen, damit er dir keinen Bug produziert, wenngleich ich hier nicht den Sinn verstehe, was IE7 damit beladen werden soll, der gegenüber IE6 u. älter mit semitransparenten PNGs umzugehen weiß.

CSS: 
div.band {
	position:absolute;
	width:840px;
	left:-20px;
	height:50px;
	top:250px;
	z-index:100;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='content/bilder/bannerbackground.png');
    div.container { /* Die Verschachtelung von Regelmengen ist syntaktisch falsch */
   height: 100%;
}
}
 
Zuletzt bearbeitet:
Nimm stattdessen dieses Javascript aus deinem Quellcode:

HTML: 
<script type="text/javascript" src="content/js/jquery.nivo.slider.pack.js"></script>

Bingooo! ;-)

Würdest du deinen Patienten bitte per "Beitrag melden"-Funktion dem Team ankündigen, ihn in die Fachklinik zu überweisen? Danke :)
 
Zuletzt bearbeitet:
Hi, danke schon mal für die Anmeldung. Habe die Regelmengen korrigiert, denke ich. Wenn ich den Javascript-Code herausnehme, den du angegeben hast, dann funktioniert die Slideshow der Bilder oben nicht mehr?

Ich bin davon ausgegangen, dass das CSS Schwierigkeiten macht, da ich stückweise Elemente aus der Seite rausgenommen habe um zu gucken, woran es liegt. Nach dem ich das Menü oben herausgenommen hatte, funktioniert das Accordion Skript siehe http://www.hckoelnwest.de/neu/test.php
 
Zuletzt bearbeitet:
nordi hat gesagt.:
Hi, danke schon mal für die Anmeldung. Habe die Regelmengen korrigiert, denke ich. Wenn ich den Javascript-Code herausnehme, den du angegeben hast, dann funktioniert die Slideshow der Bilder oben nicht mehr?
Zum Vergrößern anklicken....
Jo, dafür werden aber die Toggle-Boxen ausgefahren. Folglich liegt hier ein "Konflikt" zwischen diesen beiden Javascripts vor.

nordi hat gesagt.:
Nach dem ich das Menü oben herausgenommen hatte, funktioniert das Accordion Skript siehe http://www.hckoelnwest.de/neu/test.php
Zum Vergrößern anklicken....
Findest du?

Alle Toggle-Boxen sind schon beim Seitenaufruf geöffnet, und beim Klick auf "mehr..." geschieht nichts weiter, als dass der Browser zum Seitenanfang springt (wegen href="#" im <a>-Element, was einem Ankerverweis gleichkommt).
 
Zuletzt bearbeitet:
Hi, sorry - hatte wohl eine Version online gelassen, die garnicht funktionierte ;) Also die test.php ist wieder im Ursprungszustand und funktioniert mit dem Javaskript der Slideshow! Also das Ausklappen des Container klappt nun, aber wie gesagt nur auf der test.php. Zudem fahren auf einmal alle Container auf. Ich denk mal, dass ich den jeweiligen DIVs eine ID zuweisen muss. Bin mir aber auch nicht sicher, wie das geht? Bin um Tipps dankbar!

beim Klick auf "mehr..." geschieht nichts weiter, als dass der Browser zum Seitenanfang springt (wegen href="#" im <a>-Element, was einem Ankerverweis gleichkommt).
Zum Vergrößern anklicken....

habe dafür in die Funktion ein return false; eingebaut:

HTML: 
$("div.komplett").hide(); 
	$(".oeffne").click(function () { 
	$("div.komplett").slideToggle("slow");
	return false;
 
Zuletzt bearbeitet:
Ich poste dir mal den Quellcode aus der vergangenen Nacht, mit dem die Toggle-Container beim Seitenaufruf versteckt sind, und sich wie gewünscht einblenden lassen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/hauptseite.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />

<meta name="title" content="HC Köln West - RHEINOS" />
<meta name="Description" content="Offizielle Hompage der HC Köln West Rheinos - Rollhockey" />
<meta name="language" content="de" />
<meta name="author" content="HC Köln West - RHEINOS" />
<meta name="copyright" content="HC Köln West - RHEIOS" />
<meta name="robots" content="INDEX, NOFOLLOW" />
<meta name="document-classification" content="Sports" />
<meta name="Keywords" content="hc köln west, rheinos, hockey, rollhockey, inlinehockey, köln, club, sport, training, turnier, meister, koeln, spass" />

<link rel="copyright" title="Copyright" href="/impressum.php" />
<link rel="index" title="Startseite" href="/index.php" />

<!-- InstanceBeginEditable name="doctitle" -->
<title>HC Köln West - RHEINOS</title>
<!-- InstanceEndEditable -->
<link href="http://www.hckoelnwest.de/neu/content/css/stylomat.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="http://www.hckoelnwest.de/neu/content/js/fancybox/jquery.fancybox-1.3.2.css" media="screen" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<!-- das nachfolgende Script ist auskommentiert -->
<!--<script type="text/javascript" src="content/js/jquery.nivo.slider.pack.js"></script>-->
<script type="text/javascript" src="http://www.hckoelnwest.de/neu/content/js/fancybox/jquery.fancybox-1.3.2.js"></script>
<!--[if lte IE 7]>
<script type="text/javascript" src="content/js/jquery.pngFix.pack.js"></script>
<script type="text/javascript"> 
//<![CDATA[
    $(document).ready(function(){ 
        $(document).pngFix(); 
    }); 
//]]>
</script> 
<style type="text/css">
div.band {
	position:absolute;
	width:840px;
	left:-20px;
	height:50px;
	top:250px;
	z-index:100;
	background-image: none;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale, src='content/bilder/bannerbackground.png');
}
div.container {
   height: 100%;
}
</style>
<![endif]-->
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
	$(".toggle_container").hide(); 
	$(".trigger").click(function(){
		$(this).toggleClass("active").next().slideToggle("slow");
		return false; //Prevent the browser jump to the link anchor
	});
	$("a#nextevent").fancybox({
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});
	
	});
$(window).load(function() {
	var total = $('#hckoelnwestslider img').length;
	var rand = Math.floor(Math.random()*total);
	$('#hckoelnwestslider').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
		slices:15,
		animSpeed:800, //Slide transition speed
		pauseTime:5000,
		startSlide:rand, //Set starting Slide (0 index)
		directionNav:false, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:false, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:false, //Use left & right arrows
		pauseOnHover:false, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
	var lis = document.getElementById('menu').getElementsByTagName('li'); 
    for(i = 0; i < lis.length; i++) 
    { 
      var li = lis[i]; 
      if (li.className == 'menu') 
      { 
        li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; } 
        li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
      } 
    } 
	$('a[href*=#]').click(function() {
 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        && location.hostname == this.hostname) {
 
            var $target = $(this.hash);
 
            $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
 
            if ($target.length) {
 
                var targetOffset = $target.offset().top;
 
                $('html,body').animate({scrollTop: targetOffset}, 1000);
 
                return false;
 
            }
 
        }
 
    });
});
//]]>
</script>
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->

</head>

<body>
<a name="top"></a>
<div class="container">
<div class="logo"></div>
<div class="socialmedia"><a href="http://www.youtube.com/results?search_query=hc+köln+west&amp;aq=f" target="_blank"><img src="content/bilder/youtube.png" alt="Rheinos bei YouTube" width="32" height="32" /></a><a href="http://www.facebook.com/pages/Rock-RHEINO/170324466920" target="_blank"><img src="content/bilder/facebook.png" alt="RHEINOS bei Facebook" width="32" height="32" /></a></div>

<div class="navi"><!-- InstanceBeginEditable name="Navigation" -->
  <ul id="menu">
    <li><a href="index.php"><span class="navi_aktiv">Home</span></a></li>
    <li><a href="verein.php">Verein</a>

      <ul id="Verein">
        <li> <img class="corner_inset_left" alt="" src="content/bilder/corner_inset_left.png"/> <a href="vorstand.php">Vorstand</a> <img class="corner_inset_right" alt="" src="content/bilder/corner_inset_right.png"/> </li>
        <li><a href="erfolge.php">Erfolge</a></li>
        <li><a href="sponsoren.php">Sponsoren</a></li>
        <li><a href="rockrheino.php">RockRheino</a></li>

        <li class="last"> <img class="corner_left" alt="" src="content/bilder/corner_left.png"/> <img class="middle" alt="" src="content/bilder/dot.png"/> <img class="corner_right" alt="" src="content/bilder/corner_right.png"/> </li>
      </ul>
    </li>
    <li><a href="mannschaften.php">Mannschaften</a>
      <ul id="Mannschaften">
        <li> <img class="corner_inset_left" alt="" src="content/bilder/corner_inset_left.png"/> <a href="herren.php">Herren</a> <img class="corner_inset_right" alt="" src="content/bilder/corner_inset_right.png"/> </li>

        <li><a href="nachwuchs.php">Nachwuchs</a></li>
        <li class="last"> <img class="corner_left" alt="" src="content/bilder/corner_left.png"/> <img class="middle" alt="" src="content/bilder/dot.png"/> <img class="corner_right" alt="" src="content/bilder/corner_right.png"/> </li>
      </ul>
    </li>
    <li><a href="media.php">Media</a>
    <ul id="Media">

        <li> <img class="corner_inset_left" alt="" src="content/bilder/corner_inset_left.png"/> <a href="bilder.php">Bilder</a> <img class="corner_inset_right" alt="" src="content/bilder/corner_inset_right.png"/> </li>
        <li><a href="video.php">Video</a></li>
        <li><a href="links.php">Links</a></li>
        <li><a href="downloads.php">Downloads</a></li>
        <li class="last"> <img class="corner_left" alt="" src="content/bilder/corner_left.png"/> <img class="middle" alt="" src="content/bilder/dot.png"/> <img class="corner_right" alt="" src="content/bilder/corner_right.png"/> </li>

      </ul></li>
    <li><a href="sonstiges.php">Sonstiges</a>
      <ul id="Sonstiges">
        <li> <img class="corner_inset_left" alt="" src="content/bilder/corner_inset_left.png"/> <a href="turnier.php">Pfingsturnier</a> <img class="corner_inset_right" alt="" src="content/bilder/corner_inset_right.png"/> </li>
         <li><a href="fanartikel.php">Fanartikel</a></li>

        <li class="last"> <img class="corner_left" alt="" src="content/bilder/corner_left.png"/> <img class="middle" alt="" src="content/bilder/dot.png"/> <img class="corner_right" alt="" src="content/bilder/corner_right.png"/> </li>
      </ul>
    </li>
    <li><a href="kontakt.php">Kontakt</a>
     <ul id="Kontakt">
        <li> <img class="corner_inset_left" alt="" src="content/bilder/corner_inset_left.png"/> <a href="#">Anfragen</a> <img class="corner_inset_right" alt="" src="content/bilder/corner_inset_right.png"/> </li>

        <li><a href="anfahrt.php">Anfahrt</a></li>
        <li><a href="gaestebuch.php">Gästebuch</a></li>
        <li class="last"> <img class="corner_left" alt="" src="content/bilder/corner_left.png"/> <img class="middle" alt="" src="content/bilder/dot.png"/> <img class="corner_right" alt="" src="content/bilder/corner_right.png"/> </li>
      </ul></li>
    <li><a href="impressum.php">Impressum</a></li>

  </ul>
<!-- InstanceEndEditable --></div>

<div class="band_ecke_links"></div>
<div class="band_ecke_rechts"></div>
<div class="koelnwest">HC K&Ouml;LN WEST - RHEINOS</div>
<div class="band"></div>
<div class="bandschatten"></div>

<div id="hckoelnwestslider">
<img src="content/bilder/slider/start.png" alt="" />
<img src="content/bilder/slider/1.png" alt="" />
<img src="content/bilder/slider/2.png" alt="" />
<img src="content/bilder/slider/3.png" alt="" />

<img src="content/bilder/slider/4.png" alt="" />
<img src="content/bilder/slider/5.png" alt="" />
</div>

<div class="nextevent"><a href="content/bilder/slider/1.png" id="nextevent"><img src="content/bilder/nextevent.png" width="250" height="56" alt="Next Event Klick!" /></a></div>
<div class="scores"><!-- InstanceBeginEditable name="SCORES" -->
  <p class="box_aktiv">Termine &amp; Ergebnisse</p>
  <p class="text_subhead">Nächster Termin:</p>
  <p class="ergebnis">06.11.10 19:00 Uhr - 1. Bundesliga<br />

    Rheinos vs.Bissendorfer Panther </p>
  <p class="ergebnis"><em>Termin-Datenbankabfrage hier (Backend)</em></p>
  <p class="text_subhead">Ergebnisse:</p>
  <p class="ergebnis"><em>Ergebnis-Datenbankabfrage hier (Backend)</em></p>
<!-- InstanceEndEditable --></div>
<div class="inhalt"><hr />
<div class="news"><!-- InstanceBeginEditable name="NEWS" -->
 <p class="header">Test</p><span class="datum">Verfasst am: 4. November 2010, 10:01 Uhr</span><p>Bei der diesjährigen Herren EM in Lugano, die Dänemark für sich entscheiden konnte, erreichten Paul Bankewitz, Kai Esser sowie David und Robin Weisheit mit der deutschen Nationalmannschaft den dritten Rang. Im Halbfinale musste man sich dem späteren Sieger aus Dänemark mit 1:4 geschlagen geben. Im Spiel um Platz drei traf man auf das Team aus Großbritannien, in dem mit Steven Dickinson ebenfalls ein Vertreter aus Köln auflief und nachher mit seiner Mannschaft den vierten Platz erringen konnte. Matthias Skomerski, der für Polens Nationalmannschaft das Tor hütete, belegte am Ende den siebten Rang.</p><span class="trigger"><a href="#">mehr..</a></span><div class="toggle_container"><div class="block"><p>uch wenn es leider für keinen der Rheino-Spieler zum ganz großen Wurf gereicht hat, beglückwünscht und bedankt sich der 
HC Köln-West bei allen "seinen" Spielern, die an der EM 2010 teilgenommen haben!

</p></div></div><p class="header">ädas</p><span class="datum">Verfasst am: 4. November 2010, 9:01 Uhr</span><p>ääüä</p><span class="trigger"><a href="#">mehr..</a></span><div class="toggle_container"><div class="block"><p>äüäüä</p></div></div><p class="header">ädas</p><span class="datum">Verfasst am: 4. November 2010, 8:58 Uhr</span><p>ääüä</p><span class="trigger"><a href="#">mehr..</a></span><div class="toggle_container"><div class="block"><p>äüäüä</p></div></div><p class="header">Wir haben gewonnen</p><span class="datum">Verfasst am: 4. November 2010, 8:44 Uhr</span><p>Bei der diesjährigen Herren EM in Lugano, die Dänemark für sich entscheiden konnte, erreichten Paul Bankewitz, Kai Esser sowie David und Robin Weisheit mit der deutschen Nationalmannschaft den dritten Rang. Im Halbfinale musste man sich dem späteren Sieger aus Dänemark mit 1:4 geschlagen geben. Im Spiel um Platz drei traf man auf das Team aus Großbritannien, in dem mit Steven Dickinson ebenfalls ein Vertreter aus Köln auflief und nachher mit seiner Mannschaft den vierten Platz erringen konnte. Matthias Skomerski, der für Polens Nationalmannschaft das Tor hütete, belegte am Ende den siebten Rang.</p><span class="trigger"><a href="#">mehr..</a></span><div class="toggle_container"><div class="block"><p>Auch wenn es leider für keinen der Rheino-Spieler zum ganz großen Wurf gereicht hat, beglückwünscht und bedankt sich der 
HC Köln-West bei allen "seinen" Spielern, die an der EM 2010 teilgenommen haben!</p></div></div><p class="header">titel</p><span class="datum">Verfasst am: 4. November 2010, 8:02 Uhr</span><p>dasdas</p><!-- InstanceEndEditable --></div>

<div class="footer">Copyright &copy; 2010 - 2010 HC K&ouml;ln West - Rheinos. Alle Rechte vorbehalten.</div>
</div>
</div>


</body>
<!-- InstanceEnd --></html>
 
Hi, danke! Ich weiß nicht, ob wir aneinander vorbei reden. Das Ausklappen der Boxen funktioniert auch auf der test.php aber nicht auf der Hauptseite, wo es funktionieren sollte ;) Also hier der Link wo es nicht funktioniert:

http://www.hckoelnwest.de/neu/
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück