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 strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

External Scrollbar.js

Status
Not open for further replies.
nchan

nchan

Programmer
Jan 9, 2001
40
CA
Hello,

This is the code I'm using. Is there a way to change it so it only displays the vertical scrollbar?

Thank you!


browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4))
{
document.write('<style type="text/css">');
document.write('html ');
document.write('{scrollbar-arrow-color: #FF9900;scrollbar-base-color: #000000;scrollbar-dark-shadow-color: #DDDDDD;');
document.write('scrollbar-track-color: #DDDDDD;scrollbar-face-color: #DDDDDD;scrollbar-shadow-color: #DDDDDD;');
document.write('scrollbar-highlight-color: #DDDDDD;scrollbar-3d-light-color: #DDDDDD;}');
document.write('</style>');
}

 
Sort by date Sort by votes
why's this JavaScript? This is pure vanilla css (although proprietary to Microsoft - so has to be hidden to be valid code):
Code: 
  <html>
  <head>
    <title>foo</title>
    [COLOR=red]
    <!--[if IE]>
    <style type="text/css">
    html {
      scrollbar-arrow-color: #FF9900;
      scrollbar-base-color: #000000;
      scrollbar-dark-shadow-color: #DDDDDD;
      scrollbar-track-color: #DDDDDD;
      scrollbar-face-color: #DDDDDD;
      scrollbar-shadow-color: #DDDDDD;
      scrollbar-highlight-color: #DDDDDD;
      scrollbar-3d-light-color: #DDDDDD;
    }
    </style>
    <![endif]-->[/color]
  </head>

Scrollbars are determined by the overflow attribute. I'm not sure how you could allow vertical scrolling but prevent horizontal scrolling. Could you post a link - there may be an alternative solution which achieves the same goal.

<marc>
New to Tek-Tips? Get better answers - faq581-3339
 
Upvote 0 Downvote
Since you're using IE proprietary code, you could use [tt]overflow-x[/tt] and [tt]overflow-y[/tt] to set specific overflows (scrollbars) for vertical and horizontal.
 
Upvote 0 Downvote
Vragabound ! Manarth !
Thank you for your suggestions.

I understand that colored scrollbars are only specific to IE. Just something I wanted to try and at the same time keep my code valid by using an external .js file.

nchan
 
Upvote 0 Downvote
The page in question uses an iframe. It is that iframe that shows both scrollbars. I wish to hide the horizontal scrollbar.

Thanks
nchan
 
Upvote 0 Downvote
Addng the if statements to the iframes did it!

Thanks a mil
nchan
 
Upvote 0 Downvote
Hmmm.. .. no actually this doesn't work either.
 
Upvote 0 Downvote
Hi Dan,

I don't know what happened but the problem seemed to right itself. Maybe for now. Browser glitch or whatever the horizontal scrollbar on the iframe page in question has disappeared.

The code as it stands is shown above as a scrollbars.js file.
The doc type is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I haven't been able to work on this in the last couple of days and I'm off running about for a few days more.

'Making an Impression' great stuff.

thanks
nchan
 
Upvote 0 Downvote
Note: coloured scrollbars are not specific to I.E. they work in Netscape and Opera

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Note: coloured scrollbars are not specific to I.E. they work in Netscape and Opera
Click to expand...

The code above didn't seem to work for me in Netscape. What code do you use to get coloured scrollbars in Opera and Netscape? I'd be interested in seeing it.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I would say that they might work in Netscape 8 if it is using IE engine. I don't know if the same is the case for Opera though. I do know that not even IE supports coloured scrollbars with proper doctype.
 
Upvote 0 Downvote
here you go this works for me in everything but Firefox for coloured scroll bars...

Code: 
<div style="overflow:auto; overflow-y:scroll;  border:none; width:299px; height:485px; font-family:Georgia; font-size:10pt; color:#FF3399; background:#66FF33; scrollbar-base-color:#66FF33; scrollbar-shadow-color:#FF3399;"></div>

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
V8

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Vragabond (Programmer) 8 Dec 05 5:13
I would say that they might work in Netscape 8 if it is using IE engine.
Click to expand...

does that mean it's pointless me testing with my current install of NNv8, as it's no different than me testing with IE.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Netscape 8 has both a Gecko engine and an IE engine and switches dynamically between those. I usually don't test in Netscape, since it uses engines that I test with other browsers. I have not tried the N8 to see if its IE rendering engine works exactly the same as the one in IE, but I am willing to believe it.

That said, I guess I should correct my initial statement.

Coloured scrollbars are not part of web standards for css but were developed as a proprietary css for IE. One should not expect this effect to be visible in standards-compliant browsers and one should not expect the css of such a page to validate.
 
Upvote 0 Downvote
so what browsers do you use to test

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.
 
Upvote 0 Downvote
Personally, I usually test most of my code in:

(for Windows):
IE 5.0, IE 5.5, IE 6.0, NN 7.0, NN 7.2, Opera 7.54, Opera 8, Firefox 1.0.7, Firefox 1.5

(for Mac):
IE 5.22, Safari (1.3 and 2), Firefox 1.0.7, Firefox 1.5

Sometimes I skip the Mac testing, but most of the time that's my test matrix.

I don't test in NN 8 for several reasons:

1. When in IE rendering mode, it should render as IE anyway, and I doubt that the user-base for NN 8 in NN mode is very high at all.

2. It would mean I'd have to download and install it :)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

peterd51
  • Locked
  • Question
HTML External Links Fail
Replies
15
Views
193
peterd51
peterd51
1DMF
  • Locked
  • Question
How do you widgetise templated content and still use external CSS files? 1
Replies
5
Views
127
1DMF
1DMF
rrmcguire
  • Locked
  • Question
external style sheet
Replies
1
Views
45
datamasher
datamasher
acent
  • Locked
  • Question
External JS File Problem
Replies
2
Views
33
acent
acent
k4ghg
  • Locked
  • Question
Multiple External CSS Files 3
Replies
8
Views
54
jstreich
jstreich

Part and Inventory Search

Sponsor

Back
Top