[gregwhitworth]

Ok.

So here is the issue - I have a sliding navigation of a portfolio section. It works wonders in FF but breaks in IE. In IE 7 it will slide once, then no more. In IE 6 it won't slide at all. Any suggestions.

$(document).ready(function(){
						$(function() {
						$('a.nav').click(function() {
							$('#scrollingPort').switchClass($('#scrollingPort').attr('class'),$(this).attr('rel'), 1000);
							return false;
						});
					});
					
				});

==

Greg

[gregwhitworth]

Ok.

So here is the issue - I have a sliding navigation of a portfolio section. It works wonders in FF but breaks in IE. In IE 7 it will slide once, then no more. In IE 6 it won't slide at all. Any suggestions.

CODE

$(document).ready(function(){
						$(function() {
						$('a.nav').click(function() {
							$('#scrollingPort').switchClass($('#scrollingPort').attr('class'),$(this).attr('rel'), 1000);
							return false;
						});
					});
				   
				});

You can see a working/non-working version here: http://www.msialaska...olio/print.html

I am trying my best to understand the issue here - I have tested it by adding an alert to make sure that IE6 recognizes the .click function and it does, but there is no class set so I am assuming that the .switchClass is the issue.

I have tried looking through the jQuery User Interface code but it is a giant cube of code (not tabbed out) and I don't have the time to try and figure it out.

Please help.

Thanks.

==

Greg

[girasquid]

If someone hasn't responded to your topic in 2 days, chances are it's because they're not sure how to help you - reposting the same thing is unlikely to get you any better results.

When you first download the customized package of jQuery UI, the 'development-js' folder will have the non-minified code available for you to look through.

Are you sure that switchClass is the best way to achieve what you're looking for? If all you want is sliding, you can easily do the same thing using just animate, which is within the jQuery core.

[gregwhitworth]

No I'm not sure that it's the best option - what happens is when you click on the image it switches the class of the mother div to a class that has a negative margin, thus sliding it. If you have a better method to getting another div to move to the left -700px depending on which anchor is clicked - I AM ALL EARS.

Please, help, I am willing to learn new methods and appreciate you simply reading the message.

Thanks again.

--

Greg

[girasquid]

Unfortunately, it's been a while since I had to write code like this, so I'm a little fuzzy on how exactly I achieved it - but you can see a sliding effect that I built at http://enlighten.jeshderox.com. This is the code that does the sliding:

$(document).ready(function() {
	$('a.scroller').click(function() {
		var obj = $($(this).attr('rel'));	//	get target 'li' for y position
		var par = obj.parent().parent(); 	//	get containing 'li' for x positioning.
		$('#mainItems').animate({top:'-' + obj.css('top')},700,'easeInOutCubic', function(){
			$('#mainItems').animate({left:'-' + par.css('left')},700,'easeInOutCubic');
		}); 					
		location.hash = $(this).attr('href');
		return false;
	});

	if(location.hash) {
		$('a.scroller[href=' + location.hash + ']:first').click();		
	}
});

Essentially, every <a> tag with the class 'scroller' also has a rel attribute that is storing the ID of the element that we want to slide to. Then, we animate the container for all of the elements to a certain position, based on the left and top attributes of the element we're animating to.

This should get you started - if you're still having trouble, paste your code and I'll try to help you out.

[gregwhitworth]

Thanks for the reply - I unfortunately found something that works fine in all browsers in the forum lull, sorry about that. Just for other users and future reference check it out here:

http://jqueryfordesi...-slider-effect/

--

Greg