BUG: Problem mit JS im IE6 & IE7

[naggison]

Hallo zusammen,

ich habe da ein kleines Problem und bin bei meiner Recherche auf dieses Forum gestoßen wo ich mir doch direkt zu meinem Problem etwas Hilfe erhoffe

Ich habe einen Carousel erstellt (basierend auf jquery und www.bxcarousel.com). Das ganze wird mit PHP gefuellt etc. Nun habe ich gerade feststellen muessen, dass alles super im IE8, FF, Safari, Chome laeuft... nur nicht im IE6 & IE7. Also die Darstellung ist korrekt, die Daten werden korrekt aus der Datenbank transportiert aber das JS funktioniert nicht.

Hier mal ein Auszug aus dem Script:

<script>
 $(document).ready(function(){
 $('.example2').bxCarousel({
  display_num: 1, // number of elements to be visible
  move: 1, // number of elements to the shift the slides
  speed: 500, // number in milliseconds it takes to finish slide animation
  margin:0, // right margin to be applied to each <li> element (in pixels, although do not include "px")
  auto: false, // automatically play slides without a user click
  auto_interval: 5000, // the amount of time in milliseconds between each auto animation
  auto_hover: true, // determines if the slideshow will stop when user hovers over slideshow
 });
});

Vielleicht kann mir ja jemand helfen und sagen wo der Fehler ist und wie ich diesen beheben kann.
Ich bin nicht so sicher im Umgang mit javascript. - d.h. man muesste mir das echt fuern doofen erklaeren. (natuerlich weiss ich was variablen, funktionen und classen sind )


Gruß

naggison

[mikdoe]

...aber das JS funktioniert nicht.

Vielleicht hilft es, wenn Du das etwas genauer beschreibst.

[Albu]

Also die Darstellung ist korrekt, die Daten werden korrekt aus der Datenbank transportiert aber das JS funktioniert nicht.

Wenn das Skript nicht funktioniert, dann erzeugt es wohl einen Fehler. Wie lautet die Fehlermeldung?

[naggison]

Stimmt wohl...

Beispiel Firefox:
Die verschiedenen Eintraege laufen fluessig und ohne weitere Probleme von rechts rein, bleiben stehen und fahren nach links wieder raus und der naechste Eintrag kommt von rechts.

Beispiel IE6/ 7:
Ich sehe einen Eintrag und darunter den Eintrag der danach folgen sollte. Es ist keine Bewegung da. Alsob ich die Eintraege einfach simpel untereinander gesetzt haette und es kein js gibt.

Hier mal ein kleines Beispiel wie es funktionieren soll und wie es im IE aussieht:

FIREFOX, SAFARI ETC.


IE6 / 7


Die Scripts werden nachher in der PHP via include reingeladen!

	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
	<script src="http://naggison.de/slider/js/jquery.bxcarousel.min.js" type="text/javascript"></script> 
	<script src="http://naggison.de/slider/js/scripts.js" type="text/javascript"></script> 

	<script>
	$(document).ready(function(){
	$('.example2').bxCarousel({
		display_num: 1,       // number of elements to be visible
		move: 1,              // number of elements to the shift the slides
		speed: 500,           // number in milliseconds it takes to finish slide animation
		margin:0,             // right margin to be applied to each <li> element (in pixels, although do not include "px")
		auto: false,          // automatically play slides without a user click
		auto_interval: 5000,  // the amount of time in milliseconds between each auto animation
		auto_hover: true,    // determines if the slideshow will stop when user hovers over slideshow
	});
});
</script>

// Einbindung der Dateinsaetze aus der Datenbank - braucht verbindung zur db_connect.php
echo '<div id="example2_wrap" style="width: 300px; height: 300px; margin-left: 0px;">'; 
      echo '<ul id="example2" style="width: 200px; height: 300px; float: left;">';                     
$result = mysql_query("SELECT * FROM slider WHERE status='1' ORDER BY sort ASC LIMIT 10");
while ($row = mysql_fetch_array($result)) {
                            
                            $slider['title'] = $row['title'];
                            $slider['img'] = $row['image'];
                            $slider['disc'] = $row['disc'];
                            $slider['link'] = $row['link'];
                            $slider['alias'] = $row['alias'];
                            
echo '<li style="width: 500px; height: 350px; float: left;">';
echo '<a href="'.$row['link'].'" style="text-decoration: none;" target="_top">';
echo '<span style="font-weight: bold; color: #ff0000;">'.$row['title'].'</span><br /><br />';
echo '<img src="http://forum.jswelt.de/images/'.$row['image'].'" /><br /><br />';
echo '</a>';
echo '<div style="width: 200px">'.$row['disc'].'</div><br /><br />';
echo '</li>';
}
echo '</ul>';  
    echo '</div>';
                
?> 

// EDIT

Hier die Fehlermeldungen vom Browser
http://www.naggison.de/slider/js/error1.png
http://www.naggison.de/slider/js/error2.png
http://www.naggison.de/slider/js/error3.png


Gruß

Andre

[Albu]

Beispiel IE6/ 7:
Ich sehe einen Eintrag und darunter den Eintrag der danach folgen sollte. Es ist keine Bewegung da. Alsob ich die Eintraege einfach simpel untereinander gesetzt haette und es kein js gibt.

Sieht jetzt zwar nicht aus, wie eine Fehlermeldung, aber ich habe trotzdem eine Theorie:
Das Skript funktioniert wunderbar.
Dein Problem ist, dass das Skript guckt, wie breit Dein Content ist und ob es Scrollen muss. An Deinem Bild erkennt man deutlich, dass es nicht scrollen muss, weil (horizontal) alles im sichtbaren Bereich ist.
Du hast also kein Problem mit dem Script, sondern Du hast ein Problem mit Deinem CSS.

[naggison]

Klingt gut verstehe aber nicht wo das Problem sein soll.
Die width & height ist ja fuer die Darstellung korrekt eingestellt und bietet nicht genug platz damit alles dargestellt wird.
Daher verstehe ich nicht genau wieso es so ist. Ich habe der DIV eine Breite & eine Hoehe gegeben sowie der ul.
Moeglicherweise uebersehe ich da was entscheidendes?

[Albu]

// EDIT

Hier die Fehlermeldungen vom Browser
http://www.naggison.de/slider/js/error1.png
http://www.naggison.de/slider/js/error2.png
http://www.naggison.de/slider/js/error3.png

Also doch Fehlermeldungen. Die wirst Du schon beseitigen müssen, sonst kann das nix werden.

[naggison]

kleine & doofe Frage... Um welche Datei handelt es sich denn bei dem Fehler? Bei URL wird mir ja nur die URL angezeigt die ich gerade aufgerufen habe.

[Albu]

kleine & doofe Frage... Um welche Datei handelt es sich denn bei dem Fehler? Bei URL wird mir ja nur die URL angezeigt die ich gerade aufgerufen habe.

Bei Javascript-Fehlern zählen erstmal nicht Dateien, sondern das, was im Browser ankommt. Deswegen ist Dein PHP Code vorerst irrelevant.

[naggison]

ja, das ist aeußerst schade... ich persoenlich finde den Fehler nicht und verstehe die Fehlermeldung auch nicht so wirklich...
Koennte moeglicherweise einer hier im Forum mal ueber die Dateien schauen die ich oben geschrieben habe?! Waere euch echt sehr verbunden!

Gruß

naggison!

[Albu]

ja, das ist aeußerst schade... ich persoenlich finde den Fehler nicht und verstehe die Fehlermeldung auch nicht so wirklich...
Koennte moeglicherweise einer hier im Forum mal ueber die Dateien schauen die ich oben geschrieben habe?! Waere euch echt sehr verbunden!

Hast Du denn das, was im Browser ankommt, hier schonmal gezeigt? Bislang bis Du der Einzigste, der da reinschauen kann, denn mit PHP-Code und irgendwelchen Ausschnitten kann man da keine Aussage treffen. Also liefere entweder den Code oder einen Link.

[naggison]

Hallo hier der Code der Seite:

JS -> http://naggison.de/jquery.bxcarousel.min.js
JS -> http://naggison.de/scripts.js

<!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" xml:lang="de" lang="de">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2008 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.com/ and http://typo3.org/
-->

	<link rel="shortcut icon" href="http://xxxxx-werbeagentur.de/fileadmin/template/gfx/favicon.ico" />
	<link rel="icon" href="http://xxxxx-werbeagentur.de/fileadmin/template/gfx/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_219aa77045.css" />
	<link rel="stylesheet" type="text/css" href="typo3conf/ext/rgmoodalbox/res/css/moodalbox.css" />
	<script src="typo3conf/ext/rgmoodalbox/res/js/mootools.js" type="text/javascript"></script>
	<script src="typo3conf/ext/rgmoodalbox/res/js/moodalbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="fileadmin/template/css/menus.css" type="text/css" /><link rel="stylesheet" href="fileadmin/template/css/basic.css" type="text/css" /><link rel="stylesheet" href="fileadmin/template/css/page_config.css" type="text/css" />
	<title>xxxxx – Innovative Kommunikation aus dem Ruhrgebiet </title>
	<meta name="generator" content="TYPO3 4.2 CMS" />
	<script type="text/javascript" src="typo3temp/javascript_93077bb238.js"></script>


</head>
<body>


<div id="hp_border">
  <div id="content_box_links_L1">
    <div id="logo">
	<!--  CONTENT ELEMENT, uid:1085/image [begin] -->
		<a id="c1085"></a>
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-left csc-textpic-above csc-textpic-equalheight"><div class="csc-textpic-imagewrap"><dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:152px;"><dt><a href="index.php?id=xxxxxwerbeagentur" title="Unternehmenskommunikation: Werbung und PR."><img src="typo3temp/pics/b72c59ec98.jpg" width="152" height="47" border="0" alt="Unternehmenskommunikation: Werbung und PR." /></a></dt></dl></div></div><div class="csc-textpic-clear"><!-- --></div>
		<!--  Image block: [end] -->
			
	<!--  CONTENT ELEMENT, uid:1085/image [end] -->
		</div>
    <div id="content_box2_L10">
	<!--  CONTENT ELEMENT, uid:2370/page_php_content_pi1 [begin] -->
		<a id="c2370"></a>
<head><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"></head>	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
	<script src="http://xxxxx-werbeagentur.de/slider/js/jquery.bxcarousel.min.js" type="text/javascript"></script> 
	<script src="http://xxxxx-werbeagentur.de/slider/js/scripts.js" type="text/javascript"></script> 

	<script>
	$(document).ready(function(){
	$('.example2').bxCarousel({
		display_num: '1',       // number of elements to be visible
		move: '1',              // number of elements to the shift the slides
		speed: '500',           // number in milliseconds it takes to finish slide animation
		margin: '0',             // right margin to be applied to each <li> element (in pixels, although do not include "px")
		auto: false,          // automatically play slides without a user click
		auto_interval: '5000',  // the amount of time in milliseconds between each auto animation
		auto_hover: true,    // determines if the slideshow will stop when user hovers over slideshow
	});
});
</script><div id="example2_wrap" style="width: 300px; #height: 150px; height: 300px; #background-color: #ff0000; margin-left: 0px;"><ul id="example2" style="width: 200px; #height: 150px; height: 300px; float: left;"><li style="width: 500px; #height: 150px; height: 350px; float: left;"><a href="http://xxxxx-werbeagentur.de/index.php?id=551" style="text-decoration: none;" target="_top"><span style="font-weight: bold; color: #ff0000;">Erdgas</span><br /><br /><img src="http://xxxxx-werbeagentur.de/slider/images/teaser_eundp_01.jpg" /><br /><br /></a><div style="width: 200px">EON Ruhrgas E&P zeigt sich mit einer klaren Positionierung im Markt. Zusammen mit den Verantwortlichen für die Kommunikation haben wir die neue Unternehmensbroschüre gestaltet.</div><br /><br /></li><li style="width: 500px; #height: 150px; height: 350px; float: left;"><a href="http://xxxxx-werbeagentur.de/index.php?id=549" style="text-decoration: none;" target="_top"><span style="font-weight: bold; color: #ff0000;">Katalogsoftware</span><br /><br /><img src="http://xxxxx-werbeagentur.de/slider/images/teaser_cx30_katalogdesigner_01.jpg" /><br /><br /></a><div style="width: 200px">Der Bochumer Software Hersteller MP Digital entwickelte zusammen mit uns die Werbung zur neuen Produktlinie.</div><br /><br /></li><li style="width: 500px; #height: 150px; height: 350px; float: left;"><a href="http://xxxxx-werbeagentur.de/index.php?id=552" style="text-decoration: none;" target="_top"><span style="font-weight: bold; color: #ff0000;">Edelstahlfertigung</span><br /><br /><img src="http://xxxxx-werbeagentur.de/slider/images/teaser_carl_hamm_edelstahl_01.jpg" /><br /><br /></a><div style="width: 200px">Die Carl Hamm Gruppe, Essen, erweitert Leistungsportfolio.
Zusammen mit uns wurde dazu eine kompakte Kundeninformation entwicklet.</div><br /><br /></li><li style="width: 500px; #height: 150px; height: 350px; float: left;"><a href="http://xxxxx-werbeagentur.de/index.php?id=448" style="text-decoration: none;" target="_top"><span style="font-weight: bold; color: #ff0000;">Sägen aus Skandinavien</span><br /><br /><img src="http://xxxxx-werbeagentur.de/slider/images/teaser_gjerde_web_01.jpg" /><br /><br /></a><div style="width: 200px">Für den norwegische Gerätehersteller ERNEX - mit seiner Marke  Gjerde-Sägen Marktführer in Skandinavien - entwickelten wir den neuen Auftrit in deutschen Markt.</div><br /><br /></li><li style="width: 500px; #height: 150px; height: 350px; float: left;"><a href="http://xxxxx-werbeagentur.de/index.php?id=597" style="text-decoration: none;" target="_top"><span style="font-weight: bold; color: #ff0000;">Bildung</span><br /><br /><img src="http://xxxxx-werbeagentur.de/slider/images/teaser_immobilie_vor_ort_01.jpg" /><br /><br /></a><div style="width: 200px">Die TU Dortmund stellt ihr Projekt "Immobilie-Vor-Ort" vor. Wir entwickelten den Internetauftritt und die Infobroschüre.</div><br /><br /></li></ul></div>
	<!--  CONTENT ELEMENT, uid:2370/page_php_content_pi1 [end] -->
		</div>
    
  </div>
  <div id="content_box_rechts_L1">
    <div id="menu"><ul id="nav"><li class="ebene1_no"><a href="index.php?id=70" title="Wissenswertes über die xxxxx werbeagentur.">Wissenswertes</a></li><li class="ebene1_no"><a href="index.php?id=126" title="Unsere Leistungsspektrum.">Kompetenzen</a></li><li class="ebene1_no"><a href="index.php?id=413" title="Menschen">Menschen</a></li><li class="ebene1_no"><a href="index.php?id=3" title="Beispiele unserer Leistungen.">Referenzen</a></li><li class="ebene1_no"><a href="index.php?id=241" title="Allgemeines">Allgemeines</a></li></ul></div>
    <div id="content_box1_L10">
	<!--  CONTENT ELEMENT, uid:2355/image [begin] -->
		<a id="c2355"></a><div class="csc-frame csc-frame-frame1">
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-left csc-textpic-above"><div class="csc-textpic-imagewrap"><dl class="csc-textpic-image csc-textpic-lastcol" style="width:177px;"><dt><a href="index.php?id=17"><img src="uploads/pics/anke_startseite_04.jpg" width="177" height="470" border="0" alt="" /></a></dt></dl></div></div><div class="csc-textpic-clear"><!-- --></div>
		<!--  Image block: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:2355/image [end] -->
		
	<!--  CONTENT ELEMENT, uid:2354/image [begin] -->
		<a id="c2354"></a><div class="csc-frame csc-frame-frame1">
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-left csc-textpic-above"><div class="csc-textpic-imagewrap"><dl class="csc-textpic-image csc-textpic-lastcol" style="width:167px;"><dt><a href="index.php?id=631" title="" entscheidungen="" werden="" von="" menschen="" getroffen=""><img src="uploads/pics/karsten_startseite_03.jpg" width="167" height="470" border="0" alt="&quot;Entscheidungen werden von Menschen getroffen. ... &quot;" /></a></dt></dl></div></div><div class="csc-textpic-clear"><!-- --></div>
		<!--  Image block: [end] -->
			</div>
	<!--  CONTENT ELEMENT, uid:2354/image [end] -->
		</div>
    <div id="content_box3_L10">
	<!--  CONTENT ELEMENT, uid:2408/textpic [begin] -->
		<a id="c2408"></a>
		<!--  Image block: [begin] -->
			<div class="csc-textpic csc-textpic-intext-left"><div class="csc-textpic-imagewrap"><dl class="csc-textpic-image csc-textpic-firstcol csc-textpic-lastcol" style="width:74px;"><dt><a href="http://www.aika.de" target="_blank"><img src="typo3temp/pics/113534b9f3.gif" width="74" height="55" border="0" alt="" /></a></dt></dl></div><div class="csc-textpic-text">
		<!--  Text: [begin] -->
			<p class="bodytext">xxxxx ist Mitglied <br />der Allianz inhabergeführter <br />Kommunikationsagenturen.<br /><br /><br /></p>
		<!--  Text: [end] -->
			</div></div>
		<!--  Image block: [end] -->
			
	<!--  CONTENT ELEMENT, uid:2408/textpic [end] -->
		
	<!--  CONTENT ELEMENT, uid:2364/text [begin] -->
		<a id="c2364"></a>
		<!--  Text: [begin] -->
			<p class="bodytext"><br /><b>Innovative Kommunikation <br />aus dem im Ruhrgebiet. <br /><br /></b>xxxxx&nbsp;ist ein inhabergeführtes, mittelständische Unternehmen mit einer ausgeprägten Full-Service-Einstellung und Kundenorientierung.<br /><br />Sie erhalten bei uns Leistungen aus einer Hand. Gerne lösen wir auch für Sie Aufgaben. Bevorzugt unlösbare. Wir verfügen über die notwendige Bandbreite an Möglichkeiten, mit denen wir Ihre Anforderungen erfolgreich, kreativ und wirtschaftlich sinnvoll realisieren können. <br /><br />Gemeinsam mit&nbsp;unseren Mitarbeitern „leben“ wir Kommunikation. Als Geschwister stehen wir für Innovation und Tradition. Wir betreuen dabei Kunden, die vertrauen unserer Agentur seit über 42 Jahren.<b> </b>Wann vertrauen Sie uns? &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /><br /><b>Anke und Karsten xxxxx</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />Geschäftsführende Gesellschafter<br /><br /><br /><br /><br /></p>
		<!--  Text: [end] -->
			
	<!--  CONTENT ELEMENT, uid:2364/text [end] -->
		</div>
  </div>
  <div id="footer">
    <div class="footer_lo"></div>
    <div class="footer_ro"></div>
    <div class="footer_lu">
	<!--  CONTENT ELEMENT, uid:1100/text [begin] -->
		<a id="c1100"></a>
		<!--  Text: [begin] -->
			<p class="bodytext"><b>[werbeagentur</b>    | <b><a href="index.php?id=170" title="xxxxx-fotodesign – Konzeptionelle     Fotografie" target="_blank" class="internal-link">fotodesign</a>] </b>&nbsp;<b><a href="index.php?id=289" title="xxxxx-cgi – Animationen und  3D" target="_blank" class="internal-link">cgi</a></b>   | <b><a href="index.php?id=287" title="xxxxx-event –  Veranstaltungen" target="_blank" class="internal-link">event</a></b>&nbsp;|&nbsp;<b><a href="index.php?id=301" title="xxxxx-map – Grafiische Karten" target="_blank" class="internal-link">map</a></b> |<b>  <a href="index.php?id=xxxxxnet" title="xxxxx-net – Webdesign und Programmierung" target="_blank" class="internal-link">net</a></b>  </p>
		<!--  Text: [end] -->
			
	<!--  CONTENT ELEMENT, uid:1100/text [end] -->
		</div>
    <div class="footer_ru"><ul id="menu2"><li>&nbsp;<a href="index.php?id=104" title="Ihre Ansprechpartner in unserer Agentur.">Kontakt</a>&nbsp;<font color="#999999">|</font>&nbsp;</li><li><a href="index.php?id=15" title="Impressum">Impressum</a></li></ul></div>
  </div>
</div>

</body>
</html>

[Albu]

1. Validator!
2. Der IE kann es nicht leiden, wenn nach einem Komma nix mehr kommt.

Den Rest habe ich nicht getestet, weil zu lang und zu aufwändig das Ding zum Laufen zu bringen.

[naggison]

Danke, Problem scheint behoben zu sein! Es lag tatsaechlich an dem Komma.

Besten Dank