0

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.

3
Contributors
11
Replies
12
Views
7 Years
Discussion Span
Last Post by kflorida78
Featured Replies
  • 1

    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. Read More

1

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.

Edited by pritaeas: n/a

Votes + Comments
Provided me with a possible solution and explained why this may be the cause, thanks buid!
0

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

0

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.

0

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.

0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.