473,372 Members | 782 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,372 software developers and data experts.

iFrame vertical scroll bar

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
1 3534
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: alejandro.rivero | last post by:
In Mozilla, the following code seems to resize correctly the IFRAME, so no scroll bars: <iframe marginwidth=0 marginheight=0 src=text.html onload="this.height= this.contentDocument.height">...
3
by: Andres Mas Torrecillas | last post by:
Hi! I'm having a little trouble with an IFRAME added in an HTML page. IFRAME has a fixed size and it contains another HTML page, which only has some text paragraphs and a pair of images aligned...
6
by: gsb | last post by:
Don't know if this is the right place to post this JavaScript issue. If not, could someone point me in the right direction please. I am trying to make a "cross browser compliant" floating...
2
by: brett | last post by:
I have an iframe named previewError. The iframe tag attribute "src" references a webpage using <a name=1> tag. In the parent page of the iframe, I have <a href="./iframe.html#1"...
1
by: RJN | last post by:
Hi I'm using an iFrame to enclose another document. The iFrame width is sufficient to hold the enclosed document. When the enclosed document has more data and exceeds the height set for iFrame,...
6
by: PD | last post by:
I have a parent .Net page (http://mywebsite/project.aspx) that has an iframe (http://iframe/iframe.aspx) which are on seperate domains. I need to adjust the scrolling on the parent window due the...
0
by: punithaarumugam | last post by:
i want horizontal scroll bar in an iframe by default.i dont want vertical scroll bar. is there any possibility if so please send me sample coding
1
by: mastermindsro | last post by:
More detailed: I have a blogspot blog and i want to add a iframe after each post, where the comments will scroll vertical showing the last 5 comments of the respective post... Basically I want to...
1
by: John L. | last post by:
How do I invoke the scroll() method of a window object for a scrollable IFRAME element in an HTML document? I am using IE 7.0, and I thought the following would work: ...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.