iFrame vertical scroll bar

Discussion in 'Javascript' started by bulldog8@lycos.com, Mar 20, 2007.

  1. Guest

    I am working on a picture preview page ... some questions and
    suggestions have been incorporated already, but the 'user' (i.e.
    wife!) would like it to be more user friendly (if it isn't one thing,
    its another!!)

    The page is basic - a generic, blank page with navigation a picture
    presentation area, and a frame showing different thumbnails.

    Problem: Once the user has scrolled down the frame and selected a
    picture, the frame resets to the top.

    Question - How can I make the frames vertical scroll bar hold its
    position, or reset to the position last managed by the user?
    - I have tried modifying the coe in the parent that changes the
    picture, using scrollTop an pageYOffset, but IE complained about both
    (Although scrollTop did give me a value!) and scrollTo has no effect.

    ?? Should the vertical scroll code be placed on the pages being shown
    in the iframe?

    function ChgPic(ShowThis) {
    //Change the picture in the parent that the user is viewing. Called
    mainly by the clickable thumbnails
    xw = 500;
    window.document.getElementById("graphic").innerHTML = '<img
    src="../pics/' + ShowThis + '" width="' + xw + '"border="0">';
    }

    function ChangeList(oSel) {
    //Change frame source, showing different set of thumbnails
    parent.I1.location = oSel;
    }


    HTML:

    <p><div id="graphic">
    <script>ChgPic("family.gif")</script>
    </div></p>
    ....
    .... table formatting stuff
    ....
    <p>
    <select size="1" name="D1"
    onChange="ChangeList(this.options[ this.selectedIndex].value);" >
    <option selected value="PlayList2.htm">September 2003</
    option>
    <option value="PlayList1.htm">Urban Bistro X-Mas
    Dinner</option>
    </select></p>
    <p style="margin-top: 0; margin-bottom: 0">
    <iframe name="I1" id="I1" width="549" height="189" scrolling="AUTO"
    src="PlayList2.htm">
    Your browser does not support or is currently
    configured not to display inline frames.
    </iframe>

    Thanks!
    Jon
    , Mar 20, 2007
    #1
    1. Advertising

  2. ASM Guest

    a écrit :
    > I am working on a picture preview page ... some questions and
    > suggestions have been incorporated already, but the 'user' (i.e.
    > wife!) would like it to be more user friendly (if it isn't one thing,
    > its another!!)
    >
    > The page is basic - a generic, blank page with navigation a picture
    > presentation area, and a frame showing different thumbnails.
    >
    > Problem: Once the user has scrolled down the frame and selected a
    > picture, the frame resets to the top.


    <a href="big_view_1.jpg" target="myIframe">
    <img src="smal_view_1.jpg" alt=="thumbnail"
    title="1999 - Jany's anniversary">
    </a>


    > Question - How can I make the frames vertical scroll bar hold its
    > position, or reset to the position last managed by the user?


    use "normal" html as done above
    (your iframe must have a 'name' not an 'id')
    or if JS the onclick must return false.

    > - I have tried modifying the coe in the parent that changes the
    > picture, using scrollTop an pageYOffset, but IE complained about both
    > (Although scrollTop did give me a value!) and scrollTo has no effect.


    no need of all those complications ... !

    > function ChgPic(ShowThis) {


    have an image sized by css in your page
    then replace this image by the new image

    function showView(view) {
    parent.document.images['viewer'].src = view.href;
    return false;
    }

    Example :

    Main file :

    <html>
    <script type="text/javascript">
    function showView(view) {
    document.images['viewer'].src = view.href;
    return false;
    }
    function newDiaporama(url) {
    var target = document.getElementById('content');
    var o = document.createElement('OBJECT');
    o.data = url;
    o.width = '96%';
    o.height = '80%';
    o.border = 1;
    document.getElementById('diaporama').replaceChild(o, target);
    o.id = 'content';
    }
    </script>
    <div id="diaporama"
    style="width:200px; height:80%;text-align:center;">
    <select onchange="var k=this.options.selectedIndex;
    if(k==0) alert('choice in list');
    else newDiaporama(this.options[k].value);">
    <option>menu</option>
    <option value="diap1.htm">diap 1</option>
    <option value="diap2.htm">diap 2</option>
    </select>
    <object id="content" data="diap1.htm"
    width="96%"height="80%" border=1>
    </object>
    </div>
    <img name="viewer" src="screen.jpg" alt="big image" title=""
    style="position: absolute; left: 220px; top: 50px; width: 600px;">
    </html>


    file 'diap1.htm' :

    <html style="text-align:center">
    <a href="photos/1.jpg" onclick="return parent.showView(this);">
    <img src="diapos/1.jpg" alt="thumbnail" title="" width=150>
    </a>
    <a href="photos/2.jpg" onclick="return parent.showView(this);">
    <img src="diapos/2.jpg" alt="thumbnail" title="" width=150>
    </a>
    <a href="photos/3.jpg" onclick="return parent.showView(this);">
    <img src="diapos/3.jpg" alt="thumbnail" title="" width=150>
    </a>
    <a href="photos/4.jpg" onclick="return parent.showView(this);">
    <img src="diapos/4.jpg" alt="thumbnail" title="" width=150>
    </a>
    <a href="photos/5.jpg" onclick="return parent.showView(this);">
    <img src="diapos/5.jpg" alt="thumbnail" title="" width=150>
    </a>
    </html>


    You can also find much more ideas (without javascript) here :
    http://www.cssplay.co.uk/menu/mytv.html
    and hit button menu 'NEXT'

    --
    Stephane Moriaux et son (moins) vieux Mac déjà dépassé
    Stephane Moriaux and his (less) old Mac already out of date
    ASM, Mar 20, 2007
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Framework fan
    Replies:
    2
    Views:
    9,114
    Framework fan
    Dec 2, 2003
  2. bienwell
    Replies:
    8
    Views:
    13,828
    vabraham
    Dec 7, 2011
  3. Guy
    Replies:
    1
    Views:
    38,007
  4. David Pratt
    Replies:
    0
    Views:
    463
    David Pratt
    Jun 28, 2005
  5. Mircea Pleteriu

    How to set up a vertical scroll bar for my datagrid control?

    Mircea Pleteriu, Jul 15, 2003, in forum: ASP .Net Datagrid Control
    Replies:
    4
    Views:
    285
    Cristian Suazo
    Jul 17, 2003
Loading...

Share This Page