SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 26
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    SitePoint Addict markchivs's Avatar
    Join Date
    Oct 2004
    Location
    Malvern Hills, UK
    Posts
    233
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>



  3. #3
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    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]

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <snip />

    [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?

  6. #6
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ... 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?

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  8. #8
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    SitePoint Member QuasiEvil's Avatar
    Join Date
    Nov 2004
    Location
    SF Bay Area
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  12. #12
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, sorry. I missed your replies. I'll try to take a look later today.

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  14. #14
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I played around with these ideas a little - it was very similar to something else I had lying around - here's my toy.

  15. #15
    SitePoint Member QuasiEvil's Avatar
    Join Date
    Nov 2004
    Location
    SF Bay Area
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    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

  16. #16
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mike Foster is Amazing!

    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/

  17. #17
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  18. #18
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks clintonG Let us know how it goes.

    Your definition of "gotcha" is right-on

  19. #19
    SitePoint Member
    Join Date
    Nov 2004
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb me too looking... everything i have found

    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

  20. #20
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  21. #21
    SitePoint Member
    Join Date
    Nov 2004
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  22. #22
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  23. #23
    SitePoint Member
    Join Date
    Nov 2004
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow 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

  24. #24
    SitePoint Enthusiast
    Join Date
    May 2003
    Location
    METROmilwaukee
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  25. #25
    SitePoint Member
    Join Date
    Nov 2004
    Location
    London
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow 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 12:04. Reason: found another example


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •