style div scroll bar in firefox

I'd like to be able to control the "look" of a div scrol

Page 1 of 1

3 Replies - 30269 Views - Last Post: 15 July 2008 - 08:43 AM

#1 sparkii428   User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 1
  • Joined: 23-December 07

style div scroll bar in firefox

Post icon  Posted 03 January 2008 - 01:22 PM

Is there any way to control the look of a div scrollbar in firefox? I do not want to control the browser scrollbar, just the div's scroll bar. I'm using Stu Nichols' css based scrolling image box (http://www.cssplay.co.uk/menu/scroll_gallery)

I'd like to be able to control the look of the scroll bar in firefox which apparently can not be achieved with css. I was thinking it might be possible to control via javascript. Any suggestions/ideas welcomed. I'm very very new to javascript so please explain to me like I was a fourth grader.

Thanks

P.S. Here is code I'm using:

<style>
	#holder {position:relative; margin-right:auto; margin-left:auto; width:243px; }
	#scrollbox {width:196px; height:98px; background:#ff9900; overflow:auto; border:1px solid #aaa;margin-top:8px;margin-right:auto; margin-left:auto; color: #990000;
	/* following works for IE only */
		scrollbar-face-color: #FFCC00; scrollbar-highlight-color: #666; scrollbar-3dlight-color: #fff; 
		scrollbar-darkshadow-color: #ff9900; scrollbar-shadow-color: #666; scrollbar-arrow-color: #000000; scrollbar-track-color: #990000; }
	a.gallery, a.gallery:visited {display:block; color:#000; text-decoration:none; border:1px solid #000; 
		width:61px; height:71px; margin:3px; float:left; font-size:11px;}
	a.slidea {background:url(images/gallery_01.jpg);}
	a.slideb {background:url(images/gallery_02.jpg);}
	a.slidec {background:url(images/gallery_03.jpg);}
	a.slided {background:url(images/gallery_04.jpg);}
	a.slidee {background:url(images/gallery_05.jpg);}
	a.slidef {background:url(images/gallery_06.jpg);}
	a.slideg {background:url(images/gallery_07.jpg);}
	a.slideh {background:url(images/gallery_08.jpg);}
	
	a.gallery span {display:block; position:absolute; left:0px; top:-1px; width:1px; height:1px; overflow:hidden; 
		background:#990000; z-index:100; font-size:11px; border: 1px dotted grey}
	a.gallery:hover {white-space:normal; border:1px solid #fff;}
	a.gallery:hover img {border:1px solid #000; z-index:100;}
	a.gallery:active img, a.gallery:focus img {border:1px solid #000; z-index:50;}
	
	a.gallery:hover span {display:block; position:absolute; width:102px; height:120px; top:-83px; 
		left:70px; /*controls pix from left for hovered image in FF */
		padding:5px; font-style:italic; color:#000; background:#990000; z-index:100; font-size:11px; border:0px solid purple;}
	* html a.gallery:hover span {left:70px;}/*controls pix from left for hovered image in IE6 */
	a.gallery:active {border:1px solid #eee;}
	a.gallery:active span, a.gallery:focus span {display:block; position:absolute; width:102px; height:120px; top:-83px; 
		left:70px; /* control position of clicked image in FF*/
		padding:5px; font-style:italic; color:#000; background:#fff; z-index:50; border:0px solid green}
	* html a.gallery:active span {left:70px;} /* control position of clicked image in IE6 */
	
	#thumbs {width:800px; height:71px; border:0px dashed #006600}
	#pad {height:45px; width:10px;}
	</style>
	<div id="holder">
		<div id="pad"></div>
		<div id="scrollbox">
			<div id="thumbs">
				<a class="gallery slidea" href="#thumb">
					<span>
						<img src="images/gallery_01.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slideb" href="#thumb">
					<span>
						<img src="images/gallery_02.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slidec" href="#thumb">
					<span>
					<img src="images/gallery_03.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slided" href="#thumb">
					<span>
					<img src="images/gallery_04.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slidee" href="#thumb">
					<span>
					<img src="images/gallery_05.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slidef" href="#thumb">
					<span>
					<img src="images/gallery_06.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slideg" href="#thumb">
					<span>
					<img src="images/gallery_07.jpg" alt="" />
					</span>
				</a>
				<a class="gallery slideh" href="#thumb">
					<span>
					<img src="images/gallery_08.jpg" alt="" />
					</span>
				</a>
				</div>
		</div><!-- end scrollbox -->
	</div>



Is This A Good Question/Topic? 1

Replies To: style div scroll bar in firefox

#2 44corners   User is offline

  • D.I.C Head
  • member icon

Reputation: 1
  • View blog
  • Posts: 243
  • Joined: 22-February 06

Re: style div scroll bar in firefox

Posted 12 February 2008 - 08:43 AM

I am also interested if anyone has a solution to this.

I am creating my scrollbars via styling a fixed height div with 'overflow:auto' and need a scroll bar that behaves exactly the way that the default scrollbars behave, i.e.:

work in most browsers (ie, safari and firefox a must)
react when the user changes their text size
work with inline anchor tags
support horizontal scrolling

Only difference is I would like to replace the default arrows and track with images...oh and when user has javascript disabled to display default scrollbars.

I came pretty close with Kevin Luck's JScrollPane:
http://kelvinluck.co...ScrollPane.html

...but it doesn't support horizontal scrolling and it's anchor tag behaviour is weird when you resize text, so if anyone has a genuine solution I'd be delighted.

Oh, and I can't go back to my boss with 'custom scroll bars are bad'.
Was This Post Helpful? 0
  • +
  • -

#3 namita   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 15-July 08

Re: style div scroll bar in firefox

Posted 15 July 2008 - 02:17 AM

View Postdanielle_1_uk, on 12 Feb, 2008 - 08:43 AM, said:

I am also interested if anyone has a solution to this.

I am creating my scrollbars via styling a fixed height div with 'overflow:auto' and need a scroll bar that behaves exactly the way that the default scrollbars behave, i.e.:

work in most browsers (ie, safari and firefox a must)
react when the user changes their text size
work with inline anchor tags
support horizontal scrolling

Only difference is I would like to replace the default arrows and track with images...oh and when user has javascript disabled to display default scrollbars.

I came pretty close with Kevin Luck's JScrollPane:
http://kelvinluck.co...ScrollPane.html

...but it doesn't support horizontal scrolling and it's anchor tag behaviour is weird when you resize text, so if anyone has a genuine solution I'd be delighted.

Oh, and I can't go back to my boss with 'custom scroll bars are bad'.

i also want a solution for this .
I have a div in which height is given in %.Scroll comes for Ie but not in firefox and Safari
can any one help?
Was This Post Helpful? 0
  • +
  • -

#4 BetaWar   User is offline

  • #include "soul.h"
  • member icon

Reputation: 1513
  • View blog
  • Posts: 8,290
  • Joined: 07-September 06

Re: style div scroll bar in firefox

Posted 15 July 2008 - 08:43 AM

FF and Safari don't support custom scrollbar colors, so you will have to make a custom psuedo-scrollbar and hope it works on al three.

Look at google:
http://www.google.co...ing+a+scrollbar

Here is one that looks promising:
http://gondo.webdesi...ript-scrollbar/

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1