Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Scrolling without a Scroll Bar

    I'm going to ask a question to which I'm sure the answer will be NO, but perhaps someone can suggest another solution.

    My page consists of two columns, each a separate frame. Actually the one on the left is narrow and used for Google ads; the one on the right fills most of the screen and contains a calculator coded in JavaScript.

    (Perhaps it's worth explaining... the calculator frame is re-drawn/re-created in JS with each calculation. I can't integrate the Google ad code into the JS code which re-creates the main frame, so that is why it is stuck off to the side in a separate, HTML frame.)

    The frame for the ads on the left has no scroll bar as that would look prohibitively ugly... having a scroll bar running down the middle of the page.

    It's kind of a nice feature that as you scroll down the main frame to look at the calculator, the ads on the left stay put rather than scrolling off the screen. However, to be sure they don't get cut off by a user's small display, they have to be very short and limited in content.

    So the question is... is there any way to force the frame on the left (which doesn't have a scroll bar) to scroll along with the frame on the right (which does have a scroll bar).

    Thanks, Peter

  • #2
    New Coder
    Join Date
    Oct 2005
    Location
    Camino, California.
    Posts
    70
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I can't think of any way. Please PM me if someone comes up with something.
    Currently designing and coding an entire RPG in VB

  • #3
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    you could stick both pages in frames
    Code:
    <html><body><iframe src="bannerads.htm"></iframe><iframe src="calculator.htm"></iframe></body></html>
    there are lots of ways to get there without script, scrolling divs for example - but perhaps those won't work for you. the js would be something like this
    Code:
    <html><body onscroll="document.getElementById('d').style.top=document.body.scrollTop"><iframe src="bannerads.htm" id="bannerads" style="position:absolute"></iframe>calculator stuff</body></html>

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Subhailc,

    Thanks! I don't understand your JS code at all, but I'm glad there's hope!

    When I have time I'll get out the books and try to figure it out and maybe post some questions. Maybe not till January as it will take some time.

    I'm self-taught in JS... a real novice. But I never copy code. I always want to understand it... so I have to break it down bit by bit.

    Thanks again,

    Peter

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    <html><body onscroll="document.getElementById('d').style.top=document.body.scrollTop"><iframe src="bannerads.htm" id="bannerads" style="position:absolute"></iframe>calculator stuff</body></html>

    Could someone please help me understand this code provided by subhailc nine months ago?

    I created a little button in the main frame on my screen that calls this code:

    parent.ads.document.body.scrollTop=parent.image.document.body.scrollTop;
    alert (parent.image.document.body.scrollTop);
    alert (parent.ads.document.body.scrollTop);

    If I scroll down a little before activating this code, the first alert tells me how far I scrolled down (in the "image" frame). But the second alert gives zero, instead of the same number.

    Obviously I don't have a clue what I'm doing... just playing around to try to figure things out. Again, my goal is that when I scroll down in the main frame (image) the little frame to the left (ads) which doesn't have scroll bars will scroll along with "image."

    Thanks so much,

    Peter

  • #6
    New to the CF scene
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Can you, instead of using frames, load the external html content into a div?

    You would remove the frame with the ads and instead place a div in your main page, with id="menuholder". The content will load inside there, and scroll with page. Like this:

    Code:
    <body onload="loadMenu();">
    <div id="menuholder"></div>
    </body>

    Javascript follows, of course, change "menu.html" to reference your html file instead:


    Code:
    function loadMenu () {
      url="menu.html";
      containerid="menuholder";
      var page_request = false;
      if (window.XMLHttpRequest) // if Mozilla, Safari etc
              page_request = new XMLHttpRequest();
      else if (window.ActiveXObject){ // if IE
           try {
              page_request = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
           try {
              page_request = new ActiveXObject("Microsoft.XMLHTTP");
           } catch (e) {}
           }
           } else return false
    
      page_request.onreadystatechange=function(){
              loadpage(page_request, containerid);
      }
    
      page_request.open('GET', url, true);
      page_request.send(null);
    }
    
    function loadpage(page_request, containerid){
      if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
      {
         document.getElementById(containerid).innerHTML=page_request.responseText;
      }
    }

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Vancouver, WA
    Posts
    233
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I will have to read up on div. Never used that before.

    One additional point is that I have to frequently reload/refresh the frame I want to scroll. This is easily done with a frame; not sure about using div.

    Thank you. I PMed you the website address so you can see what I'm talking about.


  •  

    Posting Permissions

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