SitePoint.com

clintonG · Jan 23, 2005, 17:58

I need a solution that will allow me to use link text in the header to raise an event that will push the content in the area below the header down as would a collapsible list type of construct. I want to display a login and registration fieldset, dynamic help, and validation response in the expanded area.

I have been searching high and low for DHTML or CSS solutions that will allow me to use collapsible content with both IE and Firefox. Not one of the many very well-known CSS gurus has any solution that I have discovered yet.

Any solutions that meet the requirement?

markchivs · Jan 24, 2005, 04:42

Is this the sort of thing your after mate:

HTML Code:

<html>
<head>
	<title>Hide/Show DIV</title>
	<script>
		function toggleDiv(){
			var ndDiv = document.getElementById('divContent1')
			alert(ndDiv.className);
			if(ndDiv.className == 'divHide'){
				ndDiv.className = 'divShow';
				alert(ndDiv.className);
				}
			else{
				ndDiv.className = 'divHide'
				alert(ndDiv.className);
				}
			}
	</script>
	<style>
		.divHide	{display:none}
		.divShow	{display:block;}
	</style>
</head>
<body>
<div>
	<div style='background:#ffccff;width:200px;'>Header - <a href='#' onClick='toggleDiv();'>Show Content 1</a>
	<div class='divHide' style='background:#ffffcc;width:200px;height:200px;' id='divContent1'>Content 1</div>
	<div class='divShow' style='background:#ccffff;width:200px;height:200px;'>Content 2</div>
</div>
</body>
</html>

clintonG · Jan 24, 2005, 13:12

Thanks Mark,

I'll see what I can get done with that solution noting I have to devise or find a solution that actually pushes the content down when expanded rather than toggle display on and off (I'll have to use toggle display if I have to but it can be distracting when the bottom of the div is displayed over some content that is not completly covered.

So far it seems Firefox does not support collapsible elements but does support toggling the display attribute.

MikeFoster · Jan 24, 2005, 19:53

Quote:

it can be distracting when the bottom of the div is displayed over some content that is not completly covered

It's either going to do that or it's going to push all following content down (perhaps I'm starting to understand your question). This is not a function of the collapsible list object, this is dependant on your html/css design.

Quote:

So far it seems Firefox does not support collapsible elements but does support toggling the display attribute.

Perhaps I don't understand your question.

[shameless plug]Here's my demo (very experimental at the momment

)[/shameless plug]

clintonG · Jan 25, 2005, 13:41

Quote:

[shameless plug]Here's my demo (very experimental at the momment

)[/shameless plug]

That demo has it going on all right Mike. I think it's the xCollapsible library I need and only one branch of functionality for the moment. If a page header for example is 150px high I want to use a link in the header to raise an event that will take about 5px of the bottom edge of the header and expand down creating a 'white space' area within which I would like to run wizards for step-by-step processes such as logins, theme building and so on. Clear as mud?

MikeFoster · Jan 26, 2005, 06:31

Quote:

... Clear as mud?

Not really. Actually it's starting to sound like markchivs solution may be more appropriate - xCollapsible might be overkill for this. Mark's and mine basically do the same thing, but mine applies the effect to all nested elements.

Are you sure a "collapsible" effect is what you want? Your previous posts seem to imply that you want this "'white space area" to slide down into view, that is, an animation effect.

Please note that when this area comes into view it will cover whatever was below it. Or do you want it to push everything below it down as well?

clintonG · Jan 26, 2005, 09:55

Quote:

Originally Posted by MikeFoster

<snip />
Or do you want it to push everything below it down as well?

Yes, I want to push everything down Mike. An example of how I would like the entire header to function is expressed by the sample Flash component seen at [http://ghostwire.com/go/204].

I only need one level of expansion and within that area I intend to make account login and other wizards available.

I also want to say thank you for discussing this with me...

MikeFoster · Jan 26, 2005, 10:14

You're very welcome

Do you already have the basic page done? If so, give us a link so we can suggest how to implement this within that page.

markchivs, I hope I didn't run you off by me jumping in here. Feel free to jump back in - I think your suggestion is the best solution so far.

QuasiEvil · Jan 26, 2005, 10:47

I've had similar problems but I finally figured out a solution. not sure if this would apply to you but here's my code and discussion string

http://www.sitepoint.com/forums/showthread.php?t=226912

something to note. If you're toggling divs at the block level, they need to be displayed by default first, and then turned off after the page has been loaded as in

<body onload="turnoffmydiv('mydiv');">

then you set the div to redisplay in block level by changing the display attribute to "", not 'block"

also, if you've got a float in there somewhere, make sure whatever sits underneath your div has a 'clear' attribute set.

just some things I noticed.

Happy coding
QE

clintonG · Jan 26, 2005, 21:44

Quote:

Originally Posted by MikeFoster

You're very welcome

Do you already have the basic page done? If so, give us a link so we can suggest how to implement this within that page.
<snip />

All I can show at the moment is an image of the conceptual design. I'm still writing the CSS and other code for the header and fieldsets for the account login. That said, I'm also rethinking this entire methodology.

SEE: http://metromilwaukee.com/test/header.ascx.plan01.gif

Zone b is the area to be expanded.
Zone c is the page content that is pushed down.
It is within Zone b that I want to load the account login and various other similar types of processes.

Zone a is a .NET user control and as such will be shared in all pages; the fact that the user can raise any number of events from the header is why I am fixated on using this collapsible content concept. It makes accessing what has become the need for a rather large area of a page given over to an account login a compact and elegant user interface. The read arrows indicate linked elements which would raise events to expand Zone b.

I'm now wondering if expanding Zone b and loading an iFrame within it may be the most optimal approach as it seems one way or the other I am giving up browser support, accessibility or both if I use block elements.

I'm thinking it may be better to give up support for a browser than accessibility. At the moment I don't even have no clue if collapsible content that contains an iFrame would even be accessible. Comments?

clintonG · Jan 26, 2005, 21:51

Quote:

Originally Posted by QuasiEvil

I've had similar problems but I finally figured out a solution...

http://www.sitepoint.com/forums/showthread.php?t=226912

something to note. If you're toggling divs at the block level, they need to be displayed by default first, and then turned off after the page has been loaded as in

<body onload="turnoffmydiv('mydiv');">

then you set the div to redisplay in block level by changing the display attribute to "", not 'block"

also, if you've got a float in there somewhere, make sure whatever sits underneath your div has a 'clear' attribute set.
<snip />

Your comments are very helpful. The insight into the gotchas is going to be very helpful. It sounds as if you are explaining how to ensure a zone may be displayed collapsed on an initial page load. I have observed many pages with expandable content that appears expanded on the initial page load and I'm wondering "this seems bass ackwards." So thanks.

Do you have any comments regarding the image I posted in reply to Mike Foster?

MikeFoster · Jan 27, 2005, 11:09

Oops, sorry. I missed your replies. I'll try to take a look later today.

clintonG · Jan 27, 2005, 14:01

SitePoint sends the following in its email alert...

There may be other replies also, but you will not receive any more notifications until you visit the forum again.

Which is OT of me to say so but to stay alerted next time somebody responds to this thread and perhaps explains to me that it does not mean what I think it means...

MikeFoster · Jan 27, 2005, 19:32

I played around with these ideas a little - it was very similar to something else I had lying around - here's my toy.

QuasiEvil · Jan 28, 2005, 20:49

Quote:

Originally Posted by clintonG

Your comments are very helpful. The insight into the gotchas is going to be very helpful. It sounds as if you are explaining how to ensure a zone may be displayed collapsed on an initial page load. I have observed many pages with expandable content that appears expanded on the initial page load and I'm wondering "this seems bass ackwards." So thanks.

Do you have any comments regarding the image I posted in reply to Mike Foster?

Hi, you got it. If you set a zone to display:none by default, then you won't get it to display again (in some browsers at least). So, my solution is to just run the script that turns em off after they've all loaded. Most times, the script runs so quickly that you don't even see them turn off (unless there's some nifty code to animate the collapse). as for the example you have, yeah it sounds like my code would work just fine for that. Wrap the controls with the code that is my "tabs." and set the zones to the appropriate identifiers. Oh yeah, also, refer back to the original thread about the naming convention that is hard-coded into the javascript. Without it, it won't work.

Anyway, if you want to apply it to some large humongoid project, the same code will work unaltered as long as you A) give all zones/page unique ids and B) follow the naming convention between the zone and the control button/tab/link/whever for their respective ids. I guess that's what I meant by extensible :]

I dunno what a gotcha or iframe or all that stuff is... so I can't really help out with that.

cheers,
QE

clintonG · Feb 2, 2005, 14:19

Quote:

Originally Posted by MikeFoster

I played around with these ideas a little - it was very similar to something else I had lying around - here's my toy.

Thank you for all of your support Mike. I am overwhelmed with solutions from the newsgroups and from this amazing forum used by amazing people. I hate to quote a guy who we now know for a fact is an evil neo-nazi politician [1] but as he once said in the movies, "I'll be back..."

[1] http://www.arnoldexposed.com/

clintonG · Feb 2, 2005, 14:32

Quote:

Originally Posted by QuasiEvil

<snip />
I dunno what a gotcha or iframe or all that stuff is... so I can't really help out with that.
<snip />

Thanks QE. A 'gotcha' (get you > get ya > gotcha) is one of those sneaky little things that comes up all of a sudden to f*ck things up

An iFrame [1],[2] is an 'inline frame' and is analogous to cutting a hole in the page somewhere allowing another page to be loaded and accessible through the hole.

[1] http://www.w3.org/TR/REC-html40/pres...es.html#h-16.5
[2] http://www.w3schools.com/tags/tag_iframe.asp

MikeFoster · Feb 2, 2005, 15:11

Thanks clintonG

Let us know how it goes.

Your definition of "gotcha" is right-on

carlos2004 · Feb 3, 2005, 13:21

Quote:

Originally Posted by clintonG

I need a solution that will allow me to use link text in the header to raise an event that will push the content in the area below the header down as would a collapsible list type of construct. I want to display a login and registration fieldset, dynamic help, and validation response in the expanded area.
....
Any solutions that meet the requirement?

Hello clintonG,
I have been searching for a similar solution, and would like to share my finds, please check this code I came accross:
demo:
http://slayeroffice.com/code/scroll_menu/
info:
http://slayeroffice.com/?c=/content/...roll_menu.html
If you manage to disect this, please let me know, as the best attempt/hack version i have only expands the control div, and doesn't push the divs next to it (as in the above example):
http://www.vfx101.com/sideexp/exp.htm

Regards,
Carlos

clintonG · Feb 3, 2005, 16:28

Quote:

Originally Posted by carlos2004

I have been searching for a similar solution, and would like to share my finds, please check this code I came accross:

demo:
http://slayeroffice.com/code/scroll_menu/
<snip />

Hello Carlos,

Hooboy. The slayeroffice website is dangerously

All I could do is click like a mesmerized monkey obsessed with the DHTML implementations. I'm sure glad you brought it to our attention.

carlos2004 · Feb 6, 2005, 17:59

Hello CintonG,

Slayers office is pretty awesome..
Have you had any luck getting the expanding/collapsing div that pushes/pulls content div?

Regards,
Carlos

clintonG · Feb 6, 2005, 18:34

Quote:

Originally Posted by carlos2004

Hello CintonG,

Slayers office is pretty awesome..
Have you had any luck getting the expanding/collapsing div that pushes/pulls content div?

Regards,
Carlos

Nope. I'm now trying to determine how to load a default.aspx page and detect if cookies are enabled using server-side classes that require default.aspx to redirect back to itself if cookies are enabled. The question being would Google or another search engine consider the redirection without penalty as a 'doorway' page?

If cookies are enabled I can use the collapsible content. If not I have to determine how to degrade gracefully.

carlos2004 · Feb 14, 2005, 05:13

here is an example that works in IE:

http://www.quirksmode.org/dom/toc.html
just press the blue contents bar, to see it expand and push the div below down.
Hope it helps..

Does anyone know how to achieve the same in mozilla?

thanks,

carlos

clintonG · Feb 14, 2005, 07:13

Quote:

Originally Posted by carlos2004

here is an example that works in IE:

http://www.quirksmode.org/dom/toc.html
just press the blue contents bar, to see it expand and push the div below down.
<snip />

Carlos,

In this very topic MikeFoster (crossbrowser.com) provided all of us with an example [1] that functions in IE and with the Mozilla browsers. (Thanks again Mike).

BTW -- for any still reading -- what is the most commonly understood method to discuss browsers such as FireFox, Netscape and Mozilla all built from a single engine? Would it be correct to say 'Gecko-Powered' or 'Mozilla-Powered' or what?

[1] http://www.sitepoint.com/forums/show...8&postcount=14

carlos2004 · Feb 14, 2005, 07:33

Hello clintonG, MikeFoster, & All,
Is it possible that any of the examples could work with left or right sidebar?
So that when a sidebar is 'hidden' or 'collapsed' or 'contracted' the 'content' would expand to fill the void left.
The only example i have to explain the sidebar issue, is this modded stuff from slayers office:
http://www.vfx101.com/sideexp/exp.htm

...The full layout that I would like to achieve is 'content' surrounded by 'header', 'footer', 'sidebarleft', 'sidebarright'. Utimately I would like these "surrounding" divs to be collapsible, with the 'content' expanding to fill the space/void.
here is the layout I would like to add this function to:
http://www.rootscript.com/

Do you think this is possible? or am I chasing the impossible?

thanks all,

carlos

clintonG ?i think gecko based is what you were after?
-----------------------------------
edited=> found another example (i just don'y understand how it works yet)
http://phptools.de/

Jan 23, 2005, 17:58	#1
clintonG SitePoint Enthusiast Join Date: May 2003 Location: METROmilwaukee Posts: 40	Collapsible Content For Firefox? I need a solution that will allow me to use link text in the header to raise an event that will push the content in the area below the header down as would a collapsible list type of construct. I want to display a login and registration fieldset, dynamic help, and validation response in the expanded area. I have been searching high and low for DHTML or CSS solutions that will allow me to use collapsible content with both IE and Firefox. Not one of the many very well-known CSS gurus has any solution that I have discovered yet. Any solutions that meet the requirement?

Jan 26, 2005, 10:14	#8
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	You're very welcome Do you already have the basic page done? If so, give us a link so we can suggest how to implement this within that page. markchivs, I hope I didn't run you off by me jumping in here. Feel free to jump back in - I think your suggestion is the best solution so far. __________________ Cross-Browser.com, Home of the X Library

Jan 27, 2005, 11:09	#12
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	Oops, sorry. I missed your replies. I'll try to take a look later today. __________________ Cross-Browser.com, Home of the X Library

Jan 27, 2005, 19:32	#14
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	I played around with these ideas a little - it was very similar to something else I had lying around - here's my toy. __________________ Cross-Browser.com, Home of the X Library

Feb 2, 2005, 15:11	#18
MikeFoster I'll take mine raw Join Date: Dec 2002 Location: Alabama, USA Posts: 2,562	Thanks clintonG Let us know how it goes. Your definition of "gotcha" is right-on __________________ Cross-Browser.com, Home of the X Library

Jan 24, 2005, 13:12	#3
clintonG SitePoint Enthusiast Join Date: May 2003 Location: METROmilwaukee Posts: 40	Thanks Mark, I'll see what I can get done with that solution noting I have to devise or find a solution that actually pushes the content down when expanded rather than toggle display on and off (I'll have to use toggle display if I have to but it can be distracting when the bottom of the div is displayed over some content that is not completly covered. So far it seems Firefox does not support collapsible elements but does support toggling the display attribute.

Jan 26, 2005, 10:47	#9
QuasiEvil SitePoint Member Join Date: Nov 2004 Location: SF Bay Area Posts: 14	I've had similar problems but I finally figured out a solution. not sure if this would apply to you but here's my code and discussion string http://www.sitepoint.com/forums/showthread.php?t=226912 something to note. If you're toggling divs at the block level, they need to be displayed by default first, and then turned off after the page has been loaded as in <body onload="turnoffmydiv('mydiv');"> then you set the div to redisplay in block level by changing the display attribute to "", not 'block" also, if you've got a float in there somewhere, make sure whatever sits underneath your div has a 'clear' attribute set. just some things I noticed. Happy coding QE

Jan 27, 2005, 14:01	#13
clintonG SitePoint Enthusiast Join Date: May 2003 Location: METROmilwaukee Posts: 40	SitePoint sends the following in its email alert... There may be other replies also, but you will not receive any more notifications until you visit the forum again. Which is OT of me to say so but to stay alerted next time somebody responds to this thread and perhaps explains to me that it does not mean what I think it means...

Feb 6, 2005, 17:59	#21
carlos2004 SitePoint Member Join Date: Nov 2004 Location: London Posts: 7	any progress? Hello CintonG, Slayers office is pretty awesome.. Have you had any luck getting the expanding/collapsing div that pushes/pulls content div? Regards, Carlos

Feb 14, 2005, 05:13	#23
carlos2004 SitePoint Member Join Date: Nov 2004 Location: London Posts: 7	a div pushing another div IE example here is an example that works in IE: http://www.quirksmode.org/dom/toc.html just press the blue contents bar, to see it expand and push the div below down. Hope it helps.. Does anyone know how to achieve the same in mozilla? thanks, carlos

Feb 14, 2005, 07:33	#25
carlos2004 SitePoint Member Join Date: Nov 2004 Location: London Posts: 7	taking it further - horizontal & vertical - is it possible? Hello clintonG, MikeFoster, & All, Is it possible that any of the examples could work with left or right sidebar? So that when a sidebar is 'hidden' or 'collapsed' or 'contracted' the 'content' would expand to fill the void left. The only example i have to explain the sidebar issue, is this modded stuff from slayers office: http://www.vfx101.com/sideexp/exp.htm ...The full layout that I would like to achieve is 'content' surrounded by 'header', 'footer', 'sidebarleft', 'sidebarright'. Utimately I would like these "surrounding" divs to be collapsible, with the 'content' expanding to fill the space/void. here is the layout I would like to add this function to: http://www.rootscript.com/ Do you think this is possible? or am I chasing the impossible? thanks all, carlos clintonG ?i think gecko based is what you were after? ----------------------------------- edited=> found another example (i just don'y understand how it works yet) http://phptools.de/ Last edited by carlos2004; Feb 14, 2005 at 10:04.. Reason: found another example

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode