Comments on: Slide Elements in Different Directions

By: Indialike

Indialike — Fri, 12 Mar 2010 06:30:11 +0000

Very nice and useful tutorials for web designers,
Thanks for posting.

By: max2474

max2474 — Sat, 06 Mar 2010 17:45:54 +0000

Very peculiar. Seems to be an issue with Internet Explorer 8, although some odd effects on some others. “Opera” + “Google Chrome” worked perfectly. Firefox cant load the video, Safari cant load the music, and IE8 you have to click twice on.

Not worried about the video or music ATM as this wont be end content, but if you can help with the double click on IE8, would be a huge help.

Which browser do you usually use btw?

By: Karl Swedberg

Karl Swedberg — Sat, 06 Mar 2010 02:09:16 +0000

So sorry you were having problems posting your comments! They didn’t even arrive as spam on my end. Probably stopped by the web host. They’re ultra-tight on security, so they sometimes lock down stuff that should be let through.

Anyway, I went to the page you referred to in your comment, but I didn’t experience the same problem as you. The slide worked on the first click for me. Which browser (and version) are you using? Maybe that has something to do with it.

By: max2474

max2474 — Sat, 06 Mar 2010 01:11:15 +0000

ok….seems to be when you post site info..odd. anyhow….

Just wanted to say thanks for the info, has managed to get me further than any similar tutorial.

Have come across an oddity though. lmao – trying to eplain without giving site info will be interesting.

In the last example on this page (slide right), using the code given in the reply to comment 9 –
http examples learningjquery com slide – (insert as needed) you need to click twice to get the slide to work. Not much to look at, but you can see here – max2474 DOT pcriot DOT com SLASH slide DOT htm – no www’s.

Hope this makes sence, is my 9th attempt to comment!

Please help if you can, either way, thanks for helping me get this far :)

By: max2474

max2474 — Sat, 06 Mar 2010 00:53:28 +0000

hmm…cant post

By: adrianaleites

adrianaleites — Tue, 02 Mar 2010 03:27:28 +0000

Problem solved! Isn't the perfect transition i was expecting for but at least it works.


	jQuery(document).ready(function() {

	var showText="SHOW IMAGE";
	var hideText="HIDE IMAGE";
	
	jQuery('#column0').hide();

	jQuery("#link").click(function(){
  	jQuery("#column0").animate( { width:"toggle"}, 1500 );
	jQuery("#columns").animate( {width:"toggle"}, 1500);
  
	if (jQuery('#link').text()==showText) {
	jQuery('#link').text(hideText);
	}
	else {
	jQuery('#link').text(showText);
	}

	});
	
});

By: adrianaleites

adrianaleites — Mon, 01 Mar 2010 23:59:06 +0000

hi! my page have a main div with width:960px. This div contains 5 divs (columns) with float:left... the first one is hidden. And i want to slide this hidden div when click a link. It works fine using this script:

jQuery.noConflict();
jQuery(document).ready(function() {

	var showText="Show image";
	var hideText="Hide image";
	
	jQuery('#column1').hide();

	jQuery("#link").click(function(){
  	jQuery("#column1").animate( { width:"toggle"}, 1500 );
	
	if (jQuery('#link').text()==showText) {
	jQuery('#link').text(hideText);
	}
	else {
	jQuery('#link').text(showText);
	}

	});
	
});

The problem is that when i click the link "Show image", the rest of the columns are pushed down to the page bottom. I just want the others divs to slide out of the page to right, or hide or something! I already tried it to hide the other columns, but with no results:


	jQuery.noConflict();

	jQuery(document).ready(function() {

	var showText="Show image";
	var hideText="Hide image";
	
	jQuery('#column1').hide();

	jQuery("#link").click(function(){
  	jQuery("#column1").animate( { width:"toggle"}, 1500 );
	jQuery("#column2", "#column3", "#column4", "#column5").hide();
	
	if (jQuery('#link').text()==showText) {
	jQuery('#link').text(hideText);
	}
	else {
	jQuery('#link').text(showText);
	}

	});
	
});

If anyone got any idea to put this working fine, please give me some tips. Thanks in advance.

By: Deepak

Deepak — Tue, 09 Feb 2010 05:39:10 +0000

Hi Karl,

Great post . . . thanks a lot.
I implemented the same thing, but instead of a button to trigger the slide, i have used an image with the onClick event, calling a javascript function to change the image on click . The image shown is to be toggled on every click to indicate the change in direction . . . It works great in firefox… The problem i am facing is that in IE6 , the first time i click the image , the image changes indicating change of direction, but the slide doesnt work. From the second click onwards, the slide starts working fne, but because it failed for the first click, the image shown is each time the opposite of what it needs to be . . . . any idea how this could be fixed.
I alos used a button instead of an image as you have shown, , and the even the first button click doesnt make it slide . . .

By: Karl Swedberg

Karl Swedberg — Mon, 18 Jan 2010 13:46:50 +0000

As long as you have the CSS defined correctly (using the bottom property and setting position to relative or absolute), all you need to do is use the .slideUp() method. Just don't hide it initially.

By: Karl Swedberg

Karl Swedberg — Mon, 18 Jan 2010 13:44:15 +0000

Make an image slide the same way you make a div slide. Just change the selector.