Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to float an object in scrollable div?

Status
Not open for further replies.
theniteowl

theniteowl

Programmer
May 24, 2005
1,975
US
Hi Everyone,
I need to float a small image over top of the up and down arrows of the scrollbar in a div.

I am using the overflow property in the div to give it the scrollbar but I want the arrows to be covered by another image.

I need to do this because it is impossible to capture the click of the arrows and I need to do this. The onscroll event has proved inadequate for what I need to do.

Can I use relative positioning to put the two graphics into their proper places or do I need to use absolute positioning to do it?
I am not experienced doing this and my attempts so far always end up with the relatively positioned item just to the left of the scrollbar so I think perhaps the scrollbar itself it not considered part of the block? Any way to address the scrollbar to do it or do I have to resort to absolute positioning?

Here is a simple script to show the box with scrollbar, if anyone can show me what to add to do the positioning I would be enormously grateful.

<html>
<head>
<style type="text/css">
<!--
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;}
-->
</style>
</head>
<body>
<table width="300" border="1" bgcolor="lightgrey">
<tr>
<td>
<div class="scroll" id="scrolldiv">
<p>Scrolling text box.</p>
<p><span style="color: red;">This is red color</span>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>This is a normal paragraph.
<span style="font-weight: bold; font-size: 22px;">This is big bold text</span>
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh.</p>
</div>
</td>
</tr>
</table>
</body>
</html>


TIA.
Nite
 
Sort by date Sort by votes
I'm not 100% on this but I would be very surprised if you could place content on top of scrollbars. They are part of the browser window, rather than the actual web page.

--James
 
Upvote 0 Downvote

One option would be to create your own "scroll up" and "scroll down" buttons and remove the scrollbar altogether... or write your own DHTML scrollbar.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
This is a scrollbar provided within a div using the overflow property. It is not the window scrollbar.
If it were that simple I would have no trouble as you can detect clicks of the arrows on the window scrollbar but not those on ones generated in DHTML.

I can put an image over them with absolute positioning but want to know if/how it would be done with relative positioning.
 
Upvote 0 Downvote
I am running into problems with positioning buttons and using those. The foremost is that the onclick event is too slow for this type of use.
1. I need to be able to click the button repeatedly with immediate response but the event does not trigger/execute fast enough.

2. If the button is held down I need it to automatically repeat relatively rapidly.

This is for a calendar and the scrolling should be much more responsive than I can get the onclick event to accomodate so this approach may not work for me.

Also, I want to have the drag bar available as well. The intent is to imitate the way an Outlook calendar behaves as closely as possible so that clients will be able to use the system with little/no difficulty.
I COULD do a fully manually generated scrollbar that I could control better but the code gets a lot heavier and the onclick event is still a problem.

If I had the time I would attempt to do the entire calendar as a java applet but I only know the rudiments of java and have done no actual programming in it yet and this would be a bit too large a first step. :)

Thanks.
 
Upvote 0 Downvote

If you really need to have good control, you will have to write you own scrollbar routines.

Drag routines really do not take up huge amounts of code, and are really easy to make cross-browser.

I'd give it some consideration, anyway.

Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
815
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
755
bdwilcox
bdwilcox
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
223
lmcate
lmcate
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top