By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,273 Members | 1,032 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,273 IT Pros & Developers. It's quick & easy.

iFrame vertical scroll bar

P: n/a
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").innerHTM L = '<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 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
ASM
bu******@lycos.com 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
Mar 20 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.