Hello all,

I am having some real issues with internet explorer.

I have created a jQuery image rotator (flick along a selection of images). Everything works on everything but internet explorer.

So much so that Internet Explorer doesn't even display the first image even before the transition. Instead I just get my arrows and an empty space.

The jQuery code is posted below allong with the HTML snippet:

// JavaScript Document

function logError(msg) {
	$("#logger").append("<p>" + msg + "</p>");
}

function changeElement( element ) {
	$("#service_selected").toggle()
	$("#service_selected").removeAttr("id")
	
	$(element).attr("id","service_selected");
	$(element).toggle();
	logError("Element changed");
}

function doChange( way ) {
	if( way == "backward" ) {
		if( $("#service_selected").attr("id") == $(".service_container:first").attr("id") ) {
			var nextElement = $(".service_container:last")
		} else {
			var stopLoop = false
			var elements = $(".service_container").size();
			var passes = 0;
			var count = elements;
			while( stopLoop == false ) {
				if( elements > 0 ) {
					logError( elements + " elements exist, scanning one.")	
				}
				
				if( count < 1 ) {
					count = elements
					passes++
				}
				if( $("#service_selected").attr("id") == $(".service_container:nth-of-type(" + count + ")").attr("id") ) {
					if( count == 1 ) {
						minus = elements
					} else {
						minus = count - 1
					}
					logError("Testing element " + count )
					var nextElement = $(".service_container:nth-of-type(" + ( minus ) + ")")
					logError( "Element Changed, new element ID: " + minus )
					stopLoop = true
				} else {
					count--;
					logError("scan failed, testing element " + count + " next.")
				}
			}
			}
		
		changeElement( nextElement )
	} else {
		if( $("#service_selected").attr("id") == $(".service_container:last").attr("id") ) {
			var nextElement = $(".service_container:first")
		} else {
			var stopLoop = false
			var elements = $(".service_container").size();
			var passes = 0;
			var count = 0;
			while( stopLoop == false ) {
				if( elements > 0 ) {
					logError( elements + " elements exist, scanning one.")	
				}
				
				if( count > elements ) {
					count = 0
					passes++
				}
				if( $("#service_selected").attr("id") == $(".service_container:nth-of-type(" + count + ")").attr("id") ) {
					if( count == elements ) {
						minus = 1
					} else {
						minus = count + 1
					}
					logError("Testing element " + count )
					var nextElement = $(".service_container:nth-of-type(" + ( minus ) + ")")
					logError( "Element Changed, new element ID: " + minus )
					stopLoop = true
				} else {
					count++;
					logError("scan failed, testing element " + count + " next.")
				}
			}
			}
		
		changeElement( nextElement )
	}
}
$(document).ready(function() {
	// Pre startup checks
	$(".javascript_message").toggle();
	$(".javascript_content").toggle();
	
	if( $("div#services_slide_show").length ) {
		logError("Services slide show element found.")
		$(".service_container:nth-of-type(1)").toggle()
		$(".service_container:nth-of-type(1)").attr("id" , "service_selected")
				
		
		$(".arrow_left a").click( function() {
			doChange("backward")
		})
	} else {
		logError("Services slide show element not found.");
	}
})
<div id="services_slide_show">

	<div class="javascript_message">
    
    	<p>Please wait for the javascript element to load, if this doesn't happen within the next few seconds please ensure you have JavaScript turned on and you have a JavaScript enabled browser.</p>
        
        <p>If this problem persits please contact an administrator.</p>
    
    </div>
    
    <div class="javascript_content">
    
        <div class="left_arrow">
        
        	<a href="javascript: doChange('backward'),void(0)"><img src="<?php echo $address; ?>/images/arrow_left.jpg" alt="&lt" /></a>
        
        </div>
        
        <div class="services_wrapper">
        
            <div class="service_container">
            
                <div class="service_image_container">
                
                    <a href="<?php echo $address; ?>/services/web-design/"><img src="<?php echo $address; ?>/images/web-design.jpg" alt="Website Design" /></a>
                
                </div>
                
                <div class="service_title_container">
                
                    <a href="<?php echo $address; ?>/services/web-design/">Website Design</a>
                
                </div>
            
            </div>
        
            <div class="service_container">
            
                <div class="service_image_container">
                
                    <a href="<?php echo $address; ?>/services/graphic-design/"><img src="<?php echo $address; ?>/images/graphic-design.jpg" alt="Graphic Design" /></a>
                
                </div>
                
                <div class="service_title_container">
                
                    <a href="<?php echo $address; ?>/services/graphic-design/">Graphic Design</a>
                
                </div>
            
            </div>
        
            <div class="service_container">
            
                <div class="service_image_container">
                
                    <a href="<?php echo $address; ?>/services/web-programming/"><img src="<?php echo $address; ?>/images/web-programming.jpg" alt="Website Programming" /></a>
                
                </div>
                
                <div class="service_title_container">
                
                    <a href="<?php echo $address; ?>/services/web-programming/">Website Programming</a>
                
                </div>
            
            </div>
        
        </div>
        
        <div class="right_arrow">
        
        	<a href="javascript: doChange('forward'),void(0)"><img src="<?php echo $address; ?>/images/arrow_right.jpg" alt="&gt" /></a>
        
        </div>
    
    </div>

</div>

All I get is IE throwing me JavaScript errors on the document load. It even flags errors in the jQuery.js document provided by the jQuery website.

Pleasse shed a little light on the situation.

Recommended Answers

All 11 Replies

If you give me a moment I'll upload it for ya.

The first thing I notice is that not all commands in w3hut.js end with a semi-colon. This is known to cause issues. So fix that first.

commented: Provided me with a possible solution and explained why this may be the cause, thanks buid! +1

Okay now I understand the problem, the issue is I've used CSS3 psuedo elements. What can I use to select the div that is nth in the position without using psuedo selectors?

Thanks for the help so far, you've let me know about an imporatant fact I didn't otherwise know about.

;) Rep Added

jquery has the :nth-child() selector. I'm unable to give a link to the api page, because it is not opening. But am sure you can find it. Unless you mean another one.

Yes but jQuery requires the browser to support the psuedo selector. Unfortunately IE doesn't support the nth-child or nth-of-type selector.

How else could I select the next and orevious element.

Hello all,

I am having some real issues with internet explorer.

I have created a jQuery image rotator (flick along a selection of images). Everything works on everything but internet explorer.

Hello,

I always say, if everyone would stop using Internet Explorer, life as a developer would get a lot easier.

After reviewing your code, I have determined that Internet Explorer will never work with your code as-is. You need to completely rework this.

Honestly, I suggest you go with a different route.

Here is a really good jQuery plugin that accomplishes the same thing and looks better:
http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

I tested it in ie7 and ie8 and it seemed to work fine.

Good luck.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.