SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2003
    Location
    App State University
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Manual Scrolling iFrame help

    On my website (http://www.xstatics.com), I'm trying to use multiple iFrames on the index page to deliver content. However, for soem reason, I cannot make the up and down options independant of one another and when you hover over one up or down, every iFrame on the page begins to scroll.

    I got the code off of DynamicDrive.com (http://www.dynamicdrive.com/dynamici...ramescroll.htm), however, they is no mention of what parameter to change to ensure that each iFrame is independant from one another. I did atleast give each of them their own name, but nothing seems to work.

    Please visit www.xstatics.com and look at the right column to better understand what I am talking about. Hover over the up or down links and watch as both iFrames scroll together! Please help me fix this by emailing me at xstatics518@yahoo.com. Thanks!

    Ryan

  2. #2
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    effectively, the dynamicdrive script uses a variable, scrollspeed, in the parent window to determine if an iframe should scroll or not. you need to keep and reference multiple variables in order to have the iframes work independently. e.g., for two iframes, you could have scrollspeedone and scrollspeedtwo....

    Code:
    <iframe id="datamain" src="external1.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
    
    <layer visibility=hide>
    <div style="width:150px;" align="right">
    <a href="#" onMouseover="scrollspeedone=-2" onMouseout="scrollspeedone=0">Up</a> | <a href="#" onMouseover="scrollspeedone=2" onMouseout="scrollspeedone=0">Down</a>
    </div>
    </layer>
    
    <iframe id="datamain" src="external2.htm" width=150 height=150 marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=1 scrolling=no></iframe>
    
    <layer visibility=hide>
    <div style="width:150px;" align="right">
    <a href="#" onMouseover="scrollspeedtwo=-2" onMouseout="scrollspeedtwo=0">Up</a> | <a href="#" onMouseover="scrollspeedtwo=2" onMouseout="scrollspeedtwo=0">Down</a>
    </div>
    </layer>
    and change any reference to window.parent.scrollspeed in external1.html and external2.html to window.parent.scrollspeedone and window.parent.scrollspeedtwo respectively.

    and so on for multiple iframes.

    you could probably use an array to keep all these scrollspeeds, but this is just an initial troubleshoot to give you an idea...
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  3. #3
    SitePoint Member
    Join Date
    May 2003
    Location
    App State University
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help. Works fine now!
    ---------------
    xStatics.com
    Pure Adrenaline
    ---------------


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
  •