472,364 Members | 2,286 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

controlling an overflow scroll bar

Hi,

Is it possible to use JavaScript to control how far down an overflowing
div is scrolled? The situation might be like the following.

<div style="overflow:scroll; height:3em;">
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
</div>

Thanks,
Peter

Mar 11 '06 #1
9 17570
pe**********@yahoo.com wrote:
Hi,

Is it possible to use JavaScript to control how far down an overflowing
div is scrolled? The situation might be like the following.

<div style="overflow:scroll; height:3em;">
<p>One</p>
<p>Two</p>
<p>Three</p>
<p>Four</p>
<p>Five</p>
<p>Six</p>
</div>

Thanks,
Peter


You can set the scrollTop property of the div. You'll need to identify
the div with an id, so that you can access it.
Mar 11 '06 #2
> You can set the scrollTop property of the div.

This works in all browsers? My 2002 book implies only in IE.

Thanks,
Peter

Mar 11 '06 #3
It seems to be working in Safari and Firefox.

The math seems strange. I can't seem to do things like

document.findElementById("of").scrollTop = "50%"
document.findElementById("of").scrollTop =
document.findElementById("of").scrollHeight/2

Any way to control by percentage?

Thanks,
Peter

Mar 11 '06 #4
pe**********@yahoo.com said the following on 3/11/2006 12:42 PM:
It seems to be working in Safari and Firefox.

The math seems strange. I can't seem to do things like

document.findElementById("of").scrollTop = "50%"
document.findElementById("of").scrollTop =
document.findElementById("of").scrollHeight/2

Any way to control by percentage?


Try turning error reporting on and use getElementById or do you have
findElementById defined somewhere?

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/
Mar 11 '06 #5
oops, sorry, I meant getElementById. Switching from Rails to JavaScript
can cause me some grief. Anyway I tried the example with
getElementById. I can do this

e = document.getElementById("of");
e.scrollTop = e.scrollHeight;

but actually that is way overkill. The scrollHeight is a number much
larger than necessary to scroll all the way to the bottom.

Any ideas about percentage control or something like it?

Thanks,
Peter

Mar 11 '06 #6
pe**********@yahoo.com wrote:
oops, sorry, I meant getElementById. Switching from Rails to JavaScript
can cause me some grief. Anyway I tried the example with
getElementById. I can do this

e = document.getElementById("of");
e.scrollTop = e.scrollHeight;

but actually that is way overkill. The scrollHeight is a number much
larger than necessary to scroll all the way to the bottom.

Any ideas about percentage control or something like it?


It's a pixel value, nothing like the CSS style values that take %ages.
You'll have to do the %age calculations yourself using scrollTop,
scrollHeight and clientHeight.
Mar 11 '06 #7
pe**********@yahoo.com wrote:
Is it possible to use JavaScript to control how far down an overflowing
div is scrolled? The situation might be like the following.


Yes. But if there was no client-side script support it would not work, so
you should try a different approach first. One may be to tell what your
problem is in the first place instead of asking how something can be done
that you think is the solution to the problem.
PointedEars
Mar 12 '06 #8
It's for drag and drop. I'm want to make a dragged item automatically
scroll down an overflowing div.

Are there situations where JavaScript is available but when the
suggested solutions would not be supported?

Peter

Mar 12 '06 #9
pe**********@yahoo.com wrote:
It's for drag and drop. I'm want to make a dragged item automatically
scroll down an overflowing div.

Are there situations where JavaScript is available but when the
suggested solutions would not be supported?


You should use the Yahoo UI to do that. It handles auto scrolling during
a drag operation.

http://developer.yahoo.net/yui/
Mar 12 '06 #10

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

Similar topics

15
by: Andrew Fedoniouk | last post by:
I have a simple test document which produce the following in Mozilla and Opera: http://terrainformatica.com/w3/p2/problem1.png Internet Explorer behaves as per recommendation (I guess) Did I...
3
by: Ingrid | last post by:
Dear group, I wanted to make a scrollable list-menu that is fixed in place and fitted to the height of the browser window, so I tried: ol#nav{ position: fixed; top: 2em; bottom: 0; height:...
1
by: ryan.champlin | last post by:
I've created a div tag that has overflow set to scroll in my css file. Now I've embedded a table inside of that div. However, a div always expands to the size of it's container. Here the whole...
1
by: ernond_paul | last post by:
Hi, I'm trying to have a box with "overflow: auto" in order to print only a few part of a text. I want to have a scroll for this box : that's work fine. But my problem is when I use the Wheel...
2
by: Martien van Wanrooij | last post by:
I have been using in a lot of websites a script that creates a menu bar but avoids that the button to the current page can be clicked. I am rather satisfied with it (although suggestions for better...
2
by: Jason Chu | last post by:
Simple compatibility question, I have this: <table height="100%" width="50%" border="1"> <tr height="50%"> <td> <asp:Panel id="Panel1" runat="server" Height="100%" Width="100%"...
4
by: reycri | last post by:
I have a page that works as I intend in IE but not in Firefox: <html> <head> <title>Overflow Test</title> </head> <body style='overflow:hidden; margin:0; padding:0;'> <table border='0'...
0
by: asnowfall | last post by:
I trying to use 'overflow-x: auto;' for my webpage. I based my work on a news group sample. On IE, I have a problem and that is as follows. I am applying 'overflow-x: to <DIVthat is inside the...
4
by: Matthew Cox | last post by:
Hi, I've been searching the net all day today trying to figure out how one would accomplish what I originally thought would be a fairly straight forward and simple thing. The problem I'm trying...
2
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
0
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was proposed, which integrated multiple engines and...
0
by: AndyPSV | last post by:
HOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and on my computerHOW CAN I CREATE AN AI with an .executable file that would suck all files in the folder and...
0
by: Arjunsri | last post by:
I have a Redshift database that I need to use as an import data source. I have configured the DSN connection using the server, port, database, and credentials and received a successful connection...
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...
0
BLUEPANDA
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
0
by: Rahul1995seven | last post by:
Introduction: In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...
1
by: Johno34 | last post by:
I have this click event on my form. It speaks to a Datasheet Subform Private Sub Command260_Click() Dim r As DAO.Recordset Set r = Form_frmABCD.Form.RecordsetClone r.MoveFirst Do If...
1
by: ezappsrUS | last post by:
Hi, I wonder if someone knows where I am going wrong below. I have a continuous form and two labels where only one would be visible depending on the checkbox being checked or not. Below is the...

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.