Member Avatar for mikulucky

Hi my problem is that I have a slider that is triggered on an onlick event, on document ready. In all other browsers this works great. However in IE, you click the link and it turns to visited, then click it again and it works. After this it works first time all the time, it only seems to do this on first view of a the page, hence refreshing the page causes the problem again. I am really stuck on this one :(

This is the jQuery:

$(document).ready(function() {
	$('#bottomright a').click(function() {
		
		var $left = $('#content .inner2');
		$left.animate({
			marginLeft: parseInt($left.css('marginLeft'),10) == 0 ?
					$left.outerWidth() :
						0
		});
		
	});
	
	return true;
});
  • 2 Contributors
  • 2 Replies
  • 207 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by @developer

Dani AI

Generated

Good catch from @developer — this is a common IE/computed-style quirk. When jQuery returns a computed margin-left of "auto" (IE will do that), parseInt("auto", 10) becomes NaN, so the ternary test you were using doesn't see the element as “0” on the first click. The first click therefore just normalises the style to a numeric 0 and the visual slide only happens on the second click. The simplest, most robust fix is to give the element an explicit starting margin in CSS rather than relying on JavaScript to set it on document ready:

#content .inner2 {
  margin-left: 0;
}

A better long-term approach is to stop reading the computed margin as your source of truth and store state in the DOM (class or data-attribute). Toggle a class and let CSS handle the motion — this avoids browser inconsistencies and is smoother:

#content .inner2 { transition: margin-left .3s; margin-left: 0; }
#content .inner2.open { margin-left: 300px; /* or set via JS to match width */ }
$('#bottomright a').on('click', function(e){
  e.preventDefault();            // avoid link navigation/jump
  $('#content .inner2').toggleClass('open');
});

Troubleshooting notes: check the anchor's href (use e.preventDefault() if it's #), remove the useless return true in the ready handler, and if you must read the computed value use a fallback (var ml = parseInt(cssVal,10); if (isNaN(ml)) ml = 0;). Setting the initial margin in CSS is usually the cleanest fix.

Recommended Answers

All 2 Replies

Member Avatar for @developer

Hi mikulucky,

It seems the IE assigns 'Auto' as the default margin for the div. You could set the default margin-left as 0. The script would look like.

$(document).ready(function() {
var $left = $('#content .inner2');
	$left.css('marginLeft',0);
	
	$('#bottomright a').click(function() {
		$left.animate({
			marginLeft: parseInt($left.css('marginLeft'),10) == 0?$left.outerWidth():0
		});
	});
	return true;
});

Hope that works.

Cheers :)

Edited by @developer because: n/a
Member Avatar for @developer

:)

Edited by @developer because: n/a
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.