Solved

How to use Custom Graphical Scrollbars for a scrolling div, overflow:auto

Posted on 2004-09-29
6
28,703 Views
Last Modified: 2008-05-23
I am trying to use a scrolling div in a cell within a table on my site. It works fine, but wondered how to go about using a custom graphic scrollbar, explained as simply as possible, or code examples given. That is a custom bar as well as custom arrow-up and down.

I would also like the contents of the cell to start scrolling on mouseover the arrow-up or arrow-down but do not know what to look for in learning how to do so.

I have placed in between my HEAD tags:

<style type="text/css" media="screen">
<!--
.scroller {
  display:block;
  position:relative;
  width: auto;
  height: 50px;
  margin:0;
  padding:5px;
  background:inherit;
  color:inherit;
  overflow:auto;
}
-->
</style>

then

<div class="scroller"></div>  within the cell where I have placed the scrollable content (a table).

Any help would be more than welcome!
0
Comment
Question by:freespirit020199
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
6 Comments
 
LVL 5

Accepted Solution

by:
cristy56 earned 43 total points
ID: 12187618
You can try to use Javascript to do the " start scrolling on mouseover the arrow-up or arrow-down" effect.

go to http://www.dynamicdrive.com
there are lots of scripts teaching u how to use JS to made scrolling content effect.

Regards,
Cristy
0
 
LVL 5

Expert Comment

by:cristy56
ID: 12187645
I think this is what u need :
http://www.dynamicdrive.com/dynamicindex2/pagescroller.htm

Cristy
0
 
LVL 1

Assisted Solution

by:MMabatig
MMabatig earned 41 total points
ID: 12205723
Try the following CSS attributes in the CSS definition of the scrollable DIV. Not sure if it will work for a <div>, but it works with the body element in IE.  It doenst seem to work in Firefox, maybe it will set you on the right path.

      scrollbar-arrow-color:#00346b;
      scrollbar-base-color:#5c8cbf;
      scrollbar-3dlight-color:#00346b;
      scrollbar-darkshadow-color:#00346b;
      scrollbar-highlight-color:#c0c0c0;
      scrollbar-shadow-color:#5c8cbf;


Cheers!
-Mark
0
 
LVL 15

Assisted Solution

by:Daydreams
Daydreams earned 41 total points
ID: 12208138
Hi freespirit,

Take a look at this:

http://www.dyn-web.com/dhtml/scroll/  (vertical scroll available)

At that site, you can download all the code from a link on the left.

..they have instructions for onmouseover in a table cell:

http://www.dyn-web.com/dhtml/scroll/scroll-rel.html

(hover your mouse over the small arrows and see the scroll)
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Html using "Or" in condition 3 38
Ajax on ASP 2 65
Table header must be on top 2 55
Can't Find the Homepage on my site 4 42
Find out what you should include to make the best professional email signature for your organization.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

738 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question