SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling iFrame content to the right with JS

    Hi I'm searching for a script to shift (scroll) the contents of an iFrame 50 pixels towards the right upon loading.

    In a nutshell the iFrame will be loading a 200x50px picture, the iFrame is only 150px wide with it's scrollbars disabled and I would like the pic to be showing it's right side (scrolled 50px to the right upon load).

    Here's how far I got (I know it's not much)

    <iframe src="http://www.mysite.com/weatherBox.htm" align="right" frameborder="0" marginwidth="1" marginheight="0" scrolling="No" width="150" height="50" ></iframe>

    I thought align="right" would do the trick but didn't work

    If anybody knows of a good tut or a code snippet that could help, I would greatly appreciate anything.

    Thanks in advance.

    Diego.-

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    • Place an identifier on the iframe
    • use document.getElementById('myIframe') to gain a reference to it
    • use the .style.scrollLeft property to control the scrolling
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for your reply, so I tried:
    Code:
    <body>
         <iframe id="pictureBox" src="http://www.mysite.com/pictureBox.htm" scrolling="no">
         </iframe>
         <script type="text/javascript">
              document.getElementById('pictureBox').style.scrollLeft= 40;
         </script>
    </body>
    with no results, perhaps I'm missing some onLoad event? I tried but didn't work either

    sombody suggested using this on the loaded html (pictureBox.htm):
    Code:
    <body onload="document.body.scrollLeft = 50;">
    </body>
    no results

    so then I tried this:
    Code:
    <body>
      <script type="text/javascript">
          document.body.onload.scrollLeft = 50;
      </script>
    </body>
    Am i missing something?

    Does anybody have any other ideas? no matter how faint they are I'm willing to give them a shot.

    Thnx.

    Diego.-

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,707
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Apparently with iframes you're supposed to use scrollTo and scrollBy instead.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •