Solved

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

Posted on 2004-09-29
6
28,693 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
  • 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS grid style change 2 33
SVG Star 4 33
TCPDF HTML Table of Contents how can I create leading dots 7 35
How can i modify my File download link ? 6 45
Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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 …

947 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now