SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict ownersite's Avatar
    Join Date
    Jul 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hide / show layer - rest of page positioned dynamically?

    Hopefully the subject made sense. Basically I have a page with three areas of the page. Each consists of a number of html, form elements, images (perhaps) and Javascript.

    1) Simple Information
    2) Detailed Information
    3) Submit Button

    When the user clicks on a button labeled Simple << I want the content from section 2 to disappear and the content from section 3 to move upward on the page so it is now below section 1.

    I have found it very easy to hide/display section 2 using the visibility attribute, but when it is hidden, it still takes up space on the page, so section 3 is essentially below a large whitespace.

    Any thoughts on how to approach this? IE5 and up solutions are great. Thanks!!
    F150online- 102,000 users strong and growing...
    Ownersite.com
    - tools to enhance vehicle ownership

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    instead of using document.all.obj.visibility etc use

    this.style.display ='none'

    or

    document.all.obj.style.display = 'none';

    change the highlighted to the object that your referencing

  3. #3
    SitePoint Addict theGuest's Avatar
    Join Date
    Jun 2002
    Location
    Vancouver, BC Canada
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    First off... sorry for this funky message formatting.
    The code formatting did that.

    If you like, i have here a full script, that will show/hide textual content within the same space.
    This has been tested functional in both IE & NN4+.
    There's a browser detection and ALERT{} script included for older browsers and the 'Opera' browser; since it doesn't understand the DHTML being used. But it won't ruin the page layout, it just won't show the dynamic content.

    Hope this will work for you.
    Just extract the working/applicable parts from the code below. This effect is used a lot by MS within their "KnowledgeBase" pages. It's a great space-saver.

    toNote: The ILAYER/LAYER/DIV tags can be put (as a group) within their own <TD> cell; anywhere on the page; in case you want the dynamic content to appear beside your links, and not below them.
    toNote: I left the "onMousOut" sections empty. If you want to, remove them, or make them functional. Your choice.
    toNote: Change the ALERT{} function messages to whatever you like.

    Code:
    <HTML>
    <HEAD>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    	<TITLE>Untitled</TITLE>
    
    <SCRIPT LANGUAGE="JavaScript">
    <!--//
    // BROWSER DETECTION -- optional
    browserName = navigator.appName; 
    browserVer = parseInt(navigator.appVersion); 
    
    if (browserName == "Opera")
    {alert("You are using the Opera browser. This page will not function correctly for you. Please revisit using either Internet Explorer or Netscape versions 4 or newer.")}; 
    
    if (browserName == "Netscape" || "Microsoft Internet Explorer" && browserVer <= 3)
    {alert("You are not using a version 4 browser, or newer. This page will not function correctly for you. Please upgrade your browser.")}; 
     
    
    var content=new Array()
    //change the array below to the text associated with your links.
    //Expand or contract the array, depending on how many links you have.
    
    content[0]='<big><b>Default Information:</b></big><br>This is where the default page load content goes. Leave this empty if you want no text to appear when the page first loads in.'
    <!-- /separator/ -->
    content[1]='<big><b>Simple Information</b></big><br>This is where  content for link 1 goes.'
    <!-- /separator/ -->
    content[2]='<big><b>Detailed Information</b></big><br>This is where content for link 2 goes.'
    
    
    function regenerate(){
    window.location.reload()
    }
    function regenerate2(){
    if (document.layers)
    setTimeout("window.onresize=regenerate",500)
    }
    
    function changetext(whichcontent){
    if (document.all)
    link_info.innerHTML='<font face="Arial,Helvetica" SIZE="2" color="#333333">'+whichcontent+'<font>'
    else if (document.layers){
    document.iLayerID.document.layerID.document.write('<font face="Arial,Helvetica" SIZE="2" color="#333333">'+whichcontent+'</font>')
    document.iLayerID.document.layerID.document.close()
    }
    }
    //-->
    </SCRIPT>
    
    </HEAD>
    
    <BODY ONLOAD="changetext(content[0])" BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
    
    <BR><BR><BR>
    <CENTER>
    <TABLE CELLSPACING=0 CELLPADDING=5 BORDER=0 WIDTH="600">
    <TR>
    	<TD VALIGN="TOP">
    <FONT SIZE="2" FACE="Arial,Verdana,Helvetica,sans-serif">
    <A HREF="Javascript:void();" STYLE="cursor:hand;"
    onClick="changetext(content[1]);return false"
    onMouseOut=""
    onFocus="this.blur()">Simple Information</A><BR>
    
    <A HREF="Javascript:void();" STYLE="cursor:hand;"
    onClick="changetext(content[2]);return false"
    onMouseOut=""
    onFocus="this.blur()">Detailed Information</A></FONT><BR>
    
    	<ILAYER ID="iLayerID" WIDTH="600" HEIGHT="100" STYLE="background:f9f9f9; padding:5px;">
    	<LAYER ID="layerID" WIDTH="600" HEIGHT="100" STYLE="background:f9f9f9; padding:5px;">
    	<DIV ID="link_info" ALIGN="left" STYLE="background:f9f9f9; padding:5px;"></DIV>
    	</LAYER>
    	</ILAYER></TD>
    </TR>
    </TABLE>
    </CENTER>
    
    </BODY>
    </HTML>
    PS: The original form of this script is from DynamicDrive.com. I do not take any credit for originally writing this; only for the mods i made to it.
    Last edited by theGuest; Jun 15, 2002 at 04:24.

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if (browserName == "Netscape" || "Microsoft Internet Explorer" && browserVer <= 3)
    Don't you mean
    if ((browserName == "Netscape" || "Microsoft Internet Explorer") && browserVer <= 3) ?

    Anyway, the hide/show-script doesn't work in Netscape 6.2 so "This page will not function correctly" is right but "You are not using a version 4 browser, or newer" is wrong

    See Expand-Collapsible DHTML Example for a script that works in IE/NS 4+ and NS6

  5. #5
    SitePoint Addict theGuest's Avatar
    Join Date
    Jun 2002
    Location
    Vancouver, BC Canada
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hey cool, thanks for those tips jofa. Much appreciated.

    I've never claimed to be or though of myself as a Javascript guru or even close. So i appreciate the tech notes you've made here.

    Thanks again.

    PS: oversite noted that an IE5.5+ solution was wanted, so sorry, i don't have NS6 installed yet, and i never even thought about it not working with this specific script/dhtml. I'm a bit surprised it doesn't though. But thanks for pointing that out.

    PPS: that link you posted is a little confusing to follow, and it's ended me up at a few non-english pages. But i'm very interested in persuing the script you mentioned.
    Last edited by theGuest; Jun 15, 2002 at 17:30.


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
  •