Forums

magician

How is something like this acheived?
http://www.arcinspirations.com/kobe/#

Click on the yellow button at the top - Offers and Promos. Which specific js files would I need to pull this off? Any tutorials or advice would be greatly appreciated.

chazzwick

I've used Jquery to do this.
Download from here - http://docs.jquery.com/Downloading_jQuery#Download_jQuery

put this javascript in your header:

<script type=\"text/javascript\">
	$(document).ready(function() {
		$('div#xyz').hide();

		$('a#button').click(function() {
			$('div#xyz').slideToggle(400);
			return false;
		});
	});
</script>

Replace "div#xyz" with whatever you want to appear, and replace "a#button" with whatever you want the user to click to make it happen. You can change the speed of the transition by replacing where it says "400", with different numbers. I think that should do it.

daGUY

I use Adobe Spry Effects on my site for a similar effect: http://home.comcast.net/~daguy (click the Portfolio link).

chriscoyier

Check out the example here:
http://nettuts.com/javascript-ajax/buil ... /#more-291

You should be able to adapt that to work for ya. :D

magician

"chazzwick" said:
I've used Jquery to do this.
Download from here - http://docs.jquery.com/Downloading_jQuery#Download_jQuery

put this javascript in your header:
<script type=\"text/javascript\">
	$(document).ready(function() {
		$('div#xyz').hide();

		$('a#button').click(function() {
			$('div#xyz').slideToggle(400);
			return false;
		});
	});
</script>
Replace "div#xyz" with whatever you want to appear, and replace "a#button" with whatever you want the user to click to make it happen. You can change the speed of the transition by replacing where it says "400", with different numbers. I think that should do it.

So do i just download jquery 1.2.6 and then that is it? I have downloaded it and now how exactly do i put it in my header?Sorry to be a pain. How des the above code know to call on the jquery js file?

chazzwick

You must source the jquery javascript. There seem to be lots of versions but you should put in the header section, something like:

<script src=\"jquery-1.2.6.min.js\" type=\"text/javascript\"></script>

.

Hopefully, then it should work

treehouse : what would you like to learn today?

Forums

BEAUTIFUL DROP DOWN MENU