SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Resident OCD goofball! bronze trophy Serenarules's Avatar
    Join Date
    Dec 2002
    Posts
    1,911
    Mentioned
    26 Post(s)
    Tagged
    0 Thread(s)

    Scrollbar Weirdness...

    I have a framed index much like the below, stripped down for clarity:

    ... = other attributes or HTML

    [index.html]
    Code:
    ...
    <FRAMESET ...>
    <FRAME name="Menu" src="/menu.html" scrolling="auto" noresize ...>
    <FRAME name="Main" ...>
    </FRAMESET>
    ...
    Now, the menu.html is kind of long and sometimes forces the frame to show the scrollbar. This is by design, hence the "auto". However, some users of my site do not like that scrollbar appearing and thinks it breaks up the continuity of the site. Therefore, I want the user to be able to turn it off. I have tried many variation of the script below in menu.html to no avail. The bars never dissapear from the screen, although the code "seems" to recognize the fact that they've been turned off and on.

    [menu.html]
    Code:
    ...
    <SCRIPT language="javascript">
    
    function toggleBars(){
    
    if(top.document.all.Menu.scrolling == "auto" ){
    
    if(confirm("Turn off scrollbars?" ) == true){
    
    top.document.all.Menu.scrolling = "no";
    
    }
    
    } else {
    
    if(confirm("Turn on scrollbars?" ) == true){
    
    top.document.all.Menu.scrolling = "auto";
    
    }
    
    }
    
    }
    
    </SCRIPT>
    ...
    <BODY ... ondblclick="toggleBars();">
    Why does this "seem" to work, but not remove currently displayed scrollbars? I have tried other variations as well such as giving the frame an id attribute and using getElementById, using top.document.frames, and just about everything else. Is there some other function I need to cal to re-render that frame to make the changes show?

    Thanks in advance.

  2. #2
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Who knows?

    Good answer, huh...but I have no idea. Got some IE-specific code in there, not so hot. Try:

    top.menu.document.getElementsByTagName('body').item(0).style.overflow='hidden'

    Long enough?
    ::: certified wild guess :::

  3. #3
    Resident OCD goofball! bronze trophy Serenarules's Avatar
    Join Date
    Dec 2002
    Posts
    1,911
    Mentioned
    26 Post(s)
    Tagged
    0 Thread(s)
    Yes I'm aware of overflow, overflow-x and overflow-y, but I don't want to rely on a CSS definition as not all browsers will recognize it. What I am trying to do is simply update the frames scrolling attribute, which if you run the code, works, the script knows it's been turn off or on. The display itself just isn't being adjusted.

  4. #4
    Resident OCD goofball! bronze trophy Serenarules's Avatar
    Join Date
    Dec 2002
    Posts
    1,911
    Mentioned
    26 Post(s)
    Tagged
    0 Thread(s)
    I got the following to work correctly with IE but as I expected does not completely work with NS.

    Code:
     if(document.getElementsByTagName('body').item(0).style.overflow == "" ){
      if(confirm("Turn off scrollbars?" ) == true){
       document.getElementsByTagName('body').item(0).style.overflow = "hidden";
      }
     } else {
      if(confirm("Turn on scrollbars?" ) == true){
       document.getElementsByTagName('body').item(0).style.overflow = "";
      }
     }

  5. #5
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Serenarules....

    Found a thread.

    Try setting overflow explicitly to 'auto'.
    ::: certified wild guess :::

  6. #6
    Resident OCD goofball! bronze trophy Serenarules's Avatar
    Join Date
    Dec 2002
    Posts
    1,911
    Mentioned
    26 Post(s)
    Tagged
    0 Thread(s)
    Thanks! It works great in IE, but still not in NS.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, no time to test this. First: make sure you have this doctype in the frame/frameset pages:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
    "http://www.w3.org/TR/html401/frameset.dtd">

    Try this in the 'Menu' frame:
    Code:
    <script type="text/javascript" language="javascript">
    
    function toggleScrollbars(oButton)
    {
    	var bWhich = (oButton.value == 'Scrollbars Off');
    	if (bWhich && confirm('Turn off scrollbars?'))
    	{
    		document.getElementsByTagName('html').item(0).style.overflow = 'hidden';
    		document.getElementsByTagName('body').item(0).style.overflow = 'hidden';
    		oButton.value = 'Scrollbars On';
    	}
    	else if (!bWhich && confirm('Turn on scrollbars?'))
    	{
    		document.getElementsByTagName('html').item(0).style.overflow = 'auto';
    		document.getElementsByTagName('body').item(0).style.overflow = 'auto';
    		oButton.value = 'Scrollbars Off';
    	}
    }
    
    </script>
    </head>
    <body>
    <input type="button" value="Scrollbars Off" onclick="return toggleScrollbars(this)">
    With a strict DOCTYPE (standards mode) the <html> element is the outermost container, and so needs its overflow adjusted. Doctype sensing is a little too iffy. Might work.

    Yet another unsettling faq.
    ::: certified wild guess :::


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
  •