• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

JS problem mit Browserweiche

F

FSchoeppe

Neues Mitglied
Hallo,
ich habe ein Problem mit JS und unserem geliebten IE.
Im Kopf der Homepage ist ein JS eingebunden welcher einen Bilderwechsel macht.
Ich hab schon alles versucht und bin jetzt zu dem entschluss gekommen!
RAUS MIT DEM SCHEIß für den IE
icon_shot.gif
!
JETZT MEIN PROBLEM:
Ich habe eine Browserweiche eingebaut jedoch macht diese nicht das was sie soll!
Was mach ich falsch?
HTML: 
<div id="banner"> 
      <!-- Content slider -->       
                <div id="slider"> 
                <!--[if !IE]><!--> <script  type="text/javascript" src="js/easySlider1.5.js">// script //  </script> <!--<![endif]--> 
<!--[if IE]><!--> <img src="images/banner.jpg" title="banner" alt="" /> <!--<![endif]-->  
         <ul> 
            <li> 
               <img src="images/banner.jpg" alt="" /> 
               <div class="info"> 
                  <div> 
                     <h1>Silz die &quot;gr&uuml;ne&quot; Gemeinde</h1> 
                     <p>im Wald und am See.  
                     Geniesen Sie ein wenig Zeit im staatlich  anerkannten Erholungsort. Lassen Sie die Seele baumeln bei einer  Wanderung am Silzer See oder geniesen Sie ein sch&ouml;nes Essen 
                    von einem unserer lokalen Gastronomen.</p> 
                     <a href="#" class="more">mehr???</a> 
                  </div> 
               </div> 
            </li> 
            <li> 
               <img src="images/banner2.jpg" alt="" /> 
               <div class="info"> 
                  <div> 
                     <h1>Den Pf&auml;lzer Wald geniesen</h1> 
                     <p>Eine Wanderung durch den Pf&auml;lzer  Wald ist mehr als nur eine Alter-native. Nicht entlassen sollte man sich  auch nicht die Burgenwan-derung M&uuml;nz , oder zum Landeck. Egal  ob &quot;Kurzstrecke&quot; oder einen Tagesausflug der  Pf&auml;lzer Wald h&auml;llt f&uuml;r alle das Richtige  bereit.</p> 
                     <a href="#" class="more">mehr???</a> 
                  </div> 
               </div> 
            </li> 
            <li> 
               <img src="images/banner3.jpg" alt="" /> 
               <div class="info"> 
                  <div> 
                     <h1>Tiere ganz nah erleben</h1> 
                     <p>Auf Wanderwegen geht es durch die Gehege   der einheimischen Wild-tiere. Immer einen Besuch wert ist&nbsp; der  Wild und Wanderpark im Herbst, Brunftk&auml;mpfe austragen.  F&uuml;r die Kleinen ist auch gesorgt: Kinderspielplatz und  Streichelzoo sorgen f&uuml;r viel Spa&szlig;.</p> 
                     <a href="#" class="more">mehr???</a> 
                  </div> 
               </div> 
            </li> 
         </ul> 
      </div> 
   </div>

hier das JS

HTML: 
(function($) { 
 
   $.fn.easySlider = function(options){ 
      
      // default configuration properties 
      var defaults = {          
         prevId:       'prevBtn', 
         prevText:       'Zur&uuml;ck', 
         nextId:       'nextBtn',    
         nextText:       'Vor', 
         controlsShow:   true, 
         controlsBefore:   '<div id="controls">', 
         controlsAfter:   '</div>',    
         controlsFade:   true, 
         firstId:       'firstBtn', 
         firstText:       'First', 
         firstShow:      false, 
         lastId:       'lastBtn',    
         lastText:       'Last', 
         lastShow:      false,             
         vertical:      false, 
         speed:          600, 
         auto:         false, 
         pause:         5000, 
         continuous:      false 
      };  
       
      var options = $.extend(defaults, options);   
             
      this.each(function() {   
         var obj = $(this);              
         var s = $("li", obj).length; 
         var w = $("li", obj).width();  
         var h = $("li", obj).height();  
         obj.width(w);  
         obj.height(h);  
         obj.css("overflow","hidden"); 
         var ts = s-1; 
         var t = 0; 
         $("ul", obj).css('width',s*w);          
         if(!options.vertical) $("li", obj).css('float','left'); 
          
         if(options.controlsShow){ 
            var html = options.controlsBefore; 
            if(options.firstShow) html += '<span id="'+  options.firstId +'"><a href=\"javascript:void(0);\">'+  options.firstText +'</a></span>'; 
            html += ' <span id="'+ options.prevId +'"><a  href=\"javascript:void(0);\">'+ options.prevText  +'</a></span>'; 
            html += ' <span id="'+ options.nextId +'"><a  href=\"javascript:void(0);\">'+ options.nextText  +'</a></span>'; 
            if(options.lastShow) html += ' <span id="'+  options.lastId +'"><a href=\"javascript:void(0);\">'+  options.lastText +'</a></span>'; 
            html += options.controlsAfter;                   
            $(obj).after(html);                               
         }; 
    
         $("a","#"+options.nextId).click(function(){       
            animate("next",true); 
         }); 
         $("a","#"+options.prevId).click(function(){       
            animate("prev",true);             
         });    
         $("a","#"+options.firstId).click(function(){       
            animate("first",true); 
         });             
         $("a","#"+options.lastId).click(function(){       
            animate("last",true);             
         });       
          
         function animate(dir,clicked){ 
            var ot = t;             
            switch(dir){ 
               case "next": 
                  t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;                   
                  break;  
               case "prev": 
                  t = (t<=0) ? (options.continuous ? ts : 0) : t-1; 
                  break;  
               case "first": 
                  t = 0; 
                  break;  
               case "last": 
                  t = ts; 
                  break;  
               default: 
                  break;  
            };    
             
            var diff = Math.abs(ot-t); 
            var speed = diff*options.speed;                   
            if(!options.vertical) { 
               p = (t*w*-1); 
               $("ul",obj).animate( 
                  { marginLeft: p },  
                  speed 
               );             
            } else { 
               p = (t*h*-1); 
               $("ul",obj).animate( 
                  { marginTop: p },  
                  speed 
               );                
            }; 
             
            if(!options.continuous && options.controlsFade){                
               if(t==ts){ 
                  $("a","#"+options.nextId).hide(); 
                  $("a","#"+options.lastId).hide(); 
               } else { 
                  $("a","#"+options.nextId).show(); 
                  $("a","#"+options.lastId).show();                
               }; 
               if(t==0){ 
                  $("a","#"+options.prevId).hide(); 
                  $("a","#"+options.firstId).hide(); 
               } else { 
                  $("a","#"+options.prevId).show(); 
                  $("a","#"+options.firstId).show(); 
               };                
            };             
             
            if(clicked) clearTimeout(timeout); 
            if(options.auto && dir=="next" && !clicked){; 
               timeout = setTimeout(function(){ 
                  animate("next",false); 
               },diff*options.speed+options.pause); 
            }; 
             
         }; 
         // init 
         var timeout; 
         if(options.auto){; 
            timeout = setTimeout(function(){ 
               animate("next",false); 
            },options.pause); 
         };       
       
         if(!options.continuous && options.controlsFade){                
            $("a","#"+options.prevId).hide(); 
            $("a","#"+options.firstId).hide();             
         };             
          
      }); 
      
   }; 
 
})(jQuery);

eingebaut ist das JS in der HTML im Kopf
HTML: 
<head> 
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" /> 
  <title>Silz.de</title> 
  <style type="text/css"> 
	@import "layout.css"; 
  </style> 
  <link rel="stylesheet" href="jquery.twitter.css" type="text/css" media="all" /> 
  <meta name="keywords" content="" /> 
  <meta name="description" content="" /> 
    <!--[if IE]> 
	<style type="text/css"> 
		@import "ie_layout.css"; 
	</style> 
	<![endif]--> 
	<script type="text/javascript" src="js/jquery.js"></script> 
	<script type="text/javascript" src="js/easySlider1.5.js"></script> 
	<script type="text/javascript" src="js/jquery.twitter.js"></script> 
	<script type="text/javascript"> 
		$(document).ready(function(){	 
			$("#slider").easySlider({ 
				auto: true, 
				continuous: true 
			});		 
		});	 
	</script> 
	<script type="text/javascript"> 
		$(document).ready(function() { 
			$("#twitter").getTwitter({ 
				userName: "steveboiko", 
				numTweets: 2, 
				loaderText: "Loading tweets...", 
				slideIn: true, 
				slideDuration: 750, 
				showHeading: false, 
				headingText: "Latest Tweets", 
				showProfileLink: false, 
				showTimestamp: true 
			}); 
		}); 
	</script> 
</head> 
<body> 
<div id="centered"> 
	<div id="header"> 
		<a href="index-2.html"><img src="images/logo.gif" alt="" class="floatleft" /></a> 
		<ul id="navigation"> 
			<li class="active"><a href="index-2.html" class="active">Home</a></li> 
			<li><a href="ortsgemeinde.html">Ortsgemeinde</a></li> 
			<li><a href="tourismus.html">Tourismus</a></li> 
			<li><a href="soziales.html">Soziales</a></li> 
			<li><a href="vereine.html">Vereine</a></li> 
			<li><a href="contact.html">Kontakt</a></li> 
		</ul> 
	</div> 
	<div id="banner"> 
		<!-- Content slider -->		 
                <div id="slider">

Danke und Gruß FSchoeppe
 
Wozu brauchst Du eine Browserweiche? Sowas ist bei durchdachtem Code sehr selten nötig.
Wieso fehlt deinem HTML-Code ein Doctype?
Welchen IE meinst Du? 5.5?
 
Weil das JS mein Layout total verhaut im IE.
Deshalb wollte ich das JS durch ein statisches Bild ersetzen.

Unbenannt-1.jpgFirefox
Unbenannt-2.jpgIE

Selbst im IE 8 geht es nicht!
 
JavaScript ist nicht für Layout zuständig. Wenn Du ein Gestaltungsproblem hast, korrigiere das per CSS. Wenn CSS über JavaScript gesetzt wird, passe dein JavaScript entsprechend an. Um dir genauer helfen zu können wäre ein Link zur Webseite wichtig.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben