Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems with IE...of course.

    So Im pretty new to jQuery and having major issues with getting some script to work in IE only.

    Any help would be most appreciated.

    You can check out the code at:

    http://www.uaf.com/default2.htm (jquery is in the head section)
    http://www.uaf.com/default2/includes/main.css

    or you can just check it out here...

    Code:
    <script type="text/javascript">
    
    	$(function(){
    		var thisInterval = setInterval("rotateSlides()", 5000);
    		$("#slide1").addClass('current');
    		
    		$("#Btn1").mouseover( function(){
    			
    			/*$("#slideshow > div").css({opacity:0.0});*/
    			clearInterval(thisInterval);
    			var $curPhoto1 = $("#slideshow div.current");
    			var $nxtPhoto1 = $("#slideshow #slide2");
    			
    			$curPhoto1.removeClass('current').addClass('previous');
    			
    			$nxtPhoto1.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 250,
    			function(){
    				$curPhoto1.removeClass('previous');
    			});
    		});
    		
    		$("#Btn2").mouseover( function(){
    			/*$("#slideshow > div").css({opacity:0.0});*/
    			clearInterval(thisInterval);
    			var $curPhoto2 = $("#slideshow div.current");
    			var $nxtPhoto2 = $("#slideshow #slide3");
    			
    			$curPhoto2.removeClass('current').addClass('previous');
    			$nxtPhoto2.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 250,
    			function(){
    				$curPhoto2.removeClass('previous');
    			});
    		});
    		
    		$("#Btn3").mouseover( function(){
    			/*$("#slideshow > div").css({opacity:0.0});*/
    			clearInterval(thisInterval);
    			var $curPhoto3 = $("#slideshow div.current");
    			var $nxtPhoto3 = $("#slideshow #slide4");
    			
    			$curPhoto3.removeClass('current').addClass('previous');
    			$nxtPhoto3.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 250,
    			function(){
    				$curPhoto3.removeClass('previous');
    			});
    		});
    		
    		$("#Btn4").mouseover( function(){
    			/*$("#slideshow > div").css({opacity:0.0});*/
    			clearInterval(thisInterval);
    			var $curPhoto4 = $("#slideshow div.current");
    			var $nxtPhoto4 = $("#slideshow #slide5");
    			
    			$curPhoto4.removeClass('current').addClass('previous');
    			$nxtPhoto4.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 250,
    			function(){
    				$curPhoto4.removeClass('previous');
    			});
    		});
    	
    	});
    	
    	function rotateSlides(){
    		var $curPhoto = $("#slideshow div.current");
    		var $nxtPhoto = $curPhoto.next();
    		if($nxtPhoto.length==0)
    			$nxtPhoto = $("#slideshow div:first");
    			
    		$curPhoto.removeClass('current').addClass('previous');
    		$nxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity: 1.0}, 500,
    			function(){
    				$curPhoto.removeClass('previous');
    			});
    	}
    	
    
    </script>
    html

    Code:
    <div id="slideshow">
              	<div id="slide1" class="slide">
                
                <div class="imgBG"><img src="default2/graphics/index/right_Col_Header1.jpg" width="754" height="420" /></div>
              	  <div class="imgTxt" style="top:185px; font:Verdana, Arial, Helvetica, sans-serif;">
              	    <h1>CUSTOMIZED FOR<br /> YOUR SUCCESS</h1>
              	    <p><span style="font-style:italic">For over 50 years</span> Universal Air Filter has designed and manufactured high-quality custom air filters for an array of electronics enclosure applications such as NEBS communications, industrial, and medical equipment.  Our superior, built-to-spec air filtration and EMI shielding products, meshed with prompt engineering design support have been making customers’ lives easier for the last half-century.</p></div>
           	    
              	
                </div>
                <div id="slide2" class="slide">
                <div class="imgBG"><img src="default2/graphics/index/right_Col_Header2.jpg" width="754" height="420" /></div>
              	  <div class="imgTxt" style="top:220px; font:Verdana, Arial, Helvetica, sans-serif;">
              	    <h1>FREE PROTOTYPES</h1>
              	    <p><span style="font-style:italic">UAF’s Quick Response Prototype Department</span> gives engineers the risk-free luxury of a built-to-spec air filter to satisfy the most ambitious new product development requirements.  Just send in your specs and within five days a custom air filter prototype will be shipped directly to your attention, providing a perfect demonstration of compatibility with your new equipment designs.</p></div>
           	    
              	
                </div>
                <div id="slide3" class="slide">
                <div class="imgBG"><img src="default2/graphics/index/right_Col_Header3.jpg" width="754" height="420" /></div>
              	  <div class="imgTxt" style="top:225px; font:Verdana, Arial, Helvetica, sans-serif;">
              	    <h1>3D CAD MODELING</h1>
              	    <p><span style="font-style:italic">Take things into your own hands</span> with your 3D CAD air filter design tools.  Design and personalize with your exact specifications to create a custom air filter that meets your needs precisely.</p></div>
           	    
              	
                </div>
                <div id="slide4" class="slide">
                <div class="imgBG"><img src="default2/graphics/index/right_Col_Header4.jpg" width="754" height="420" /></div>
              	  <div class="imgTxt" style="top:230px; font:Verdana, Arial, Helvetica, sans-serif;">
              	    <h1>APPLICATIONS</h1>
              	    <p><span style="font-style:italic">UAF caters to a litany of applications</span> including, but not limited to, industrial air filters, NEBS communications air filters, Medical air filters, Military air filters, and Computer Networking air filters.  Whatever environment your equipment resides in, our line of UL listed and CE certified air filters will keep it safe and sound.</p></div>
           	    
              	
                </div>
                
                <div id="slide5" class="slide">
                <div class="imgBG"><img src="default2/graphics/index/right_Col_Header5.jpg" width="754" height="420" /></div>
              	  <div class="imgTxt" style="top:225px; font:Verdana, Arial, Helvetica, sans-serif;">
              	    <h1>REPLACEMENT<br /> AIR FILTERS</h1>
              	    <p><span style="font-style:italic">Time for a change?</span> If your air filter needs to be changed, or you find out that your existing one has been discontinued, our Online Aftermarket Parts store is here to help.  Request a quote today to get your OEM approved, NEBS certified replacement air filter.</p></div>
           	    
              	
                </div>
              </div>
    css

    Code:
    #slideshow{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	position:relative;
    	width:755px;
    	height:420px;
    }
    
    #slideshow div{
    	position:absolute;
    	z-index:20;
    }
    
    #slideshow div.previous{
    	z-index:80;
    }
    
    #slideshow div.current{
    	z-index:90;
    }
    
    #slideshow .imgBG{
    	position:absolute;
    	top:0px;
    	left:0px;
    	
    }
    
    #slideshow .imgTxt{
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	position:absolute;
    	left:25px;
    	width:688px;
    	
    }
    Again I appreciate any and all help.

    Thanks

  • #2
    UE Antagonizer Fumigator's Avatar
    Join Date
    Dec 2005
    Location
    Utah, USA, Northwestern hemisphere, Earth, Solar System, Milky Way Galaxy, Alpha Quadrant
    Posts
    7,691
    Thanks
    42
    Thanked 637 Times in 625 Posts
    I really love that font you're using for your <h1> tags!

    Anyway... you need to state the specific problem you're seeing.

  • #3
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, I just recently found out about the @font-face style and how to use it correctly. I love it.

    Basically what the problem is with the addClass, removeClass, and the animate functions. None of them seem to be working correctly. The animations dont run and the <div>s dont seem to be getting the .current class added to them. IDK. It works beautifully in all browsers except IE.

  • #4
    New to the CF scene
    Join Date
    Mar 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Solved!

    Turns out the problem was with the css. The css was in an external file and apparently needed to be inline for ie to read it properly. I dont know if this is a known issue or if it is an issue at all, but thats how I ended up getting it to work.

    Thanks.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •