Web Design Forums

apple · 27-01-2008, 20:30

well i want part of my site to drop down after i click on "show work", how can i d o this ?

eg:
xzs3.behosted.org/wdc/portfolio1.jpg
xzs3.behosted.org/wdc/portfolio2.jpg

herkalees · 27-01-2008, 20:50

Just a bit of JavsScript really - you put all the stuff you want hidden in a div, with an ID, and hide it with CSS. Then, you set an event handler on the tab that is to be clicked to show the originally hidden div. Another event handler will hide the div if the tab is clicked a second time.

illvibe · 27-01-2008, 21:50

Do you want to animate it (ie have it slide open) or do you just want it to change between pages? Is this HTML/Javascript or Flash?

illvibe · 27-01-2008, 21:52

This could be what you're after moo.fx - size does matter

pgo · 27-01-2008, 22:51

Quote:

Originally Posted by herkalees

Just a bit of JavsScript really - you put all the stuff you want hidden in a div, with an ID, and hide it with CSS. Then, you set an event handler on the tab that is to be clicked to show the originally hidden div. Another event handler will hide the div if the tab is clicked a second time.

This, but I wouldn't hide it with CSS directly. I'd make sure JavaScript is available first before diving in and hiding content!

One easy way to do this is through object detection. If the browser passes the tests, give the <body> a class name that indicates that JavaScript is available. A bit safer that way with little extra effort.

Code:

function hasJS() {
  if (!document.getElementById || !document.getElementsByTagName) {
    // If none of the DOM methods you need are available, then just forget it.
    return false;
  }
  // Browser passed object detection.  Hooray, give the body a class of "js".
  document.getElementsByTagName('body')[0].className = "js";
}

Something like that. It's probably wrong because I still have a little trouble with the syntax.

Then you can use CSS to set your default:

Code:

.js #your-element {
  display: none;
}

And, of course, that CSS property will only be applied if JavaScript is active (.js) and users without JavaScript (the few, the proud) will still see the content.

herkalees · 28-01-2008, 06:36

Quote:

Originally Posted by pgo

This, but I wouldn't hide it with CSS directly. I'd make sure JavaScript is available first before diving in and hiding content!

Yeah, admittedly, I'm not that great with JavaScript - Thank you, sir, for the correction

apple · 28-01-2008, 12:16

thank you guys

apple · 28-01-2008, 18:02

Quote:

Originally Posted by illvibe

This could be what you're after moo.fx - size does matter

mhh so i tried using that, however i cannot get it to work. Can you tell me what i am doing wrong ?

This is just a mock try to see how it looks :

webdevelopmentcorner.com/wdc

27-01-2008, 20:30	#1 (permalink)
apple Registered User Join Date: Jan 2008 Location: Scotland Posts: 32	Drop down when clicked... well i want part of my site to drop down after i click on "show work", how can i d o this ? eg: xzs3.behosted.org/wdc/portfolio1.jpg xzs3.behosted.org/wdc/portfolio2.jpg

27-01-2008, 20:50	#2 (permalink)
herkalees Semantics, yay. Join Date: Nov 2005 Location: Salem, Massachusetts Posts: 1,128	Just a bit of JavsScript really - you put all the stuff you want hidden in a div, with an ID, and hide it with CSS. Then, you set an event handler on the tab that is to be clicked to show the originally hidden div. Another event handler will hide the div if the tab is clicked a second time. __________________ Writing on markup, CSS, and other web geekery Professional, accessible, and search engine friendly web site development by Boston Web Studio

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

27-01-2008, 21:50	#3 (permalink)
illvibe say werd. Join Date: Oct 2004 Location: Japan Posts: 1,274	Do you want to animate it (ie have it slide open) or do you just want it to change between pages? Is this HTML/Javascript or Flash?

27-01-2008, 21:52	#4 (permalink)
illvibe say werd. Join Date: Oct 2004 Location: Japan Posts: 1,274	This could be what you're after moo.fx - size does matter

28-01-2008, 12:16	#7 (permalink)
apple Registered User Join Date: Jan 2008 Location: Scotland Posts: 32	thank you guys

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)