iFrame vertical scroll bar

B

bulldog8

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
 
A

ASM

(e-mail address removed) 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"
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'
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,899
Latest member
RodneyMcAu

Latest Threads

Top