473,396 Members | 2,039 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,396 software developers and data experts.

scroll two layers together

Hi

I have two layers contain two images (with different sizes), the second
layer is positioned exactly over the other one.

can I find a way to scroll both of them together (to keep them
positioned the way they were)?

Sep 1 '06 #1
3 2138

ma*****@hotmail.com написав:
Hi

I have two layers contain two images (with different sizes), the second
layer is positioned exactly over the other one.

can I find a way to scroll both of them together (to keep them
positioned the way they were)?
Here the short sample of problem solution. Place the top layer into the
bottom layer with "position:relative" in style definition. Then place
bottom layer in the scrollable div ("overflow:auto").
Try, maybe it is that you looking for.

<html>
<body>
<div style="overflow:auto;width:300px;height:300px">
<div style="width:500px;height:500px;background-color:red">bottom
layer
<div
style="position:relative;left:80;top:70;width:100p x;height:50px;background-color:blue">top
layer</div>
</div>
</div>
</body>
</html>

Sep 1 '06 #2
Yeah it's working.. that's exactly what I was looking for.

but now how do I use the "scrollTo()" method to scroll this div? (not
the whole window)?

I appreciate your help. thanks alot

Sep 2 '06 #3

ma*****@hotmail.com написав:
Yeah it's working.. that's exactly what I was looking for.

but now how do I use the "scrollTo()" method to scroll this div? (not
the whole window)?

I appreciate your help. thanks alot
Method scrollTo applies for window only.
I think you can try next scenario (not tested):

Use iframe instead of top div and place inner layers in the separate
page:
<iframe id="frm" scrolling="yes" src="innerlayers.htm" .....
and then call document.getElementById("frm").contentWindow.scrol lTo()

Sep 5 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

13
by: Simon Wigzell | last post by:
Can I trap when the scroll is ended? This is what I want - the calculator disapears when the site visitor starts scrolling the main page. I'm doing that with an "onScroll()" function. I'm bringing...
2
by: Nick | last post by:
Hi, I've got some browser compatibility issues with the following page: http://www.iclc-group.com/hspv1/testi.htm It's a straightforward show/hide layer layout with images on the left and linked...
2
by: Matt Rapoport | last post by:
If you open a new spreadsheet in Excel and click on cell B1 and then go to Windows -> Freeze Panes it will create something similar to 4 frames. There will be a horizontal pane that contains 2...
1
by: sravkum | last post by:
Hi, I have tried many options for this, let me explain ma problem first Think that we have got two Layers <Div id="layer1"with some horizontal scrolled content </div> <Div id="layer1"with...
1
by: buggtb | last post by:
Hi Guys, I'm writing a little webbased application for my bosses at work which utilises PHP, Javascript and HTML. I have very little knowledge of javascript itself but I found a script that...
3
by: rampal | last post by:
Hello All, i am making a diff program and i want to scroll to two listbox together.So please any one help me to syncronize two listbox scroll event together in C#. Thanks. ...
8
by: dougawells | last post by:
I am having issues using layers due to the different ways that different browsers display them. I need to be able to layer some images together as they work independently of each other. For example...
3
by: bgold12 | last post by:
How can I test if a vertical scroll bar is at the bottom of the range? I know that... document.getElementById('mydiv').scrollHeight ....returns the range, and... ...
3
by: PrabodhanP | last post by:
I have CSS based mouseover scrolling for divContent embeded in my webpage.It works fine in IE,but not working in mozilla-FF. It is located at the location.....
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...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development projectplanning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new...

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.