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="<" /></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=">" /></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.
