IT Community - Software Programming, Web Development and Technical Support

Manipulating scrollbar colors using CSS and JavaScript

This is a discussion on Manipulating scrollbar colors using CSS and JavaScript within the HTML, CSS and Javascript Coding Techniques forums, part of the Web Development category; Manipulating scrollbar colors using CSS and JavaScript Hi friends this HTML code works fine in IE6+. but it does not ...


Go Back   IT Community - Software Programming, Web Development and Technical Support > Web Development > HTML, CSS and Javascript Coding Techniques

Register FAQ Members List Calendar Mark Forums Read
  #1  
Old 11-27-2007, 04:48 AM
santhakumar santhakumar is offline
D-Web Genius
 
Join Date: Mar 2007
Posts: 928
santhakumar is on a distinguished road
Default Manipulating scrollbar colors using CSS and JavaScript

Manipulating scrollbar colors using CSS and JavaScript

Hi friends

this HTML code works fine in IE6+. but it does not support other browser (Firefox and etc.,)
Please help thanks in advance

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">

.news
{
scrollbar-3dlight-color:#009900;
scrollbar-arrow-colorrange;
scrollbar-base-color:#00CC00;
scrollbar-darkshadow-color:#009900;
scrollbar-face-color:teal;
scrollbar-highlight-coloralegreen;
scrollbar-shadow-color:#000000;
color: #000;
background-color: #fff;
width: 100px;
height: 150px;
overflow: auto;
}

</style>
</head>

<body>

<div class="news">
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text
Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample textSample text Sample text Sample text Sample text Sample text Sample text
</div>

</body>

</html>
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
  #2  
Old 11-27-2007, 05:55 AM
kingmaker kingmaker is offline
D-Web Genius
 
Join Date: Jun 2007
Posts: 881
kingmaker is on a distinguished road
Send a message via MSN to kingmaker
Default Re: Manipulating scrollbar colors using CSS and JavaScript

<script language="JavaScript">
function scrollBar(line,face,theme)
{
if (!line||!face)
{
line=null;
face=null;
switch(theme)
{
case "blue":
var line="#78AAFF";
var face="#EBF5FF";
break;
case "orange":
var line="#FBBB37";
var face="#FFF9DF";
break;
case "red":
var line="#FF7979";
var face="#FFE3DD";
break;
case "green":
var line="#00C600";
var face="#D1EED0";
break;
case "neo":
var line="#BC7E41";
var face="#EFE0D1";
break;
}
}

with(document.body.style)
{
scrollbarDarkShadowColor=line;
scrollbar3dLightColor=line;
scrollbarArrowColor="black";
scrollbarBaseColor=face;
scrollbarFaceColor=face;
scrollbarHighlightColor=face;
scrollbarShadowColor=face;
scrollbarTrackColor="#F3F3F3";
}
}


function colorBar()
{
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var x = event.clientX;
var y = event.clientY;
if(x>w||y-3>h) scrollBar('#000080','#BFDFFF');
else scrollBar(null,null,"neo");
}

if (document.all)
{
scrollBar(null,null,"neo");
document.onmousemove=colorBar;
}

function offscreen(){
scrollBar(null,null,"neo");
}

document.onmouseout=offscreen;

</script>
Add Post to del.icio.usBookmark Post in TechnoratiFurl this Post!
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Manipulating in array Jeyaseelansarc HTML, CSS and Javascript Coding Techniques 15 06-02-2008 03:08 AM
Why the colors on my page look different when viewed on a Mac and a PC? oxygen HTML, CSS and Javascript Coding Techniques 1 07-27-2007 02:57 AM
How can I have two sets of links with different colors? oxygen HTML, CSS and Javascript Coding Techniques 1 07-27-2007 02:43 AM
Set Position of Browsers Scrollbar using Javascript ? kingmaker HTML, CSS and Javascript Coding Techniques 1 07-18-2007 11:33 PM
Colors and fonts sanray316 Web Design Help 4 03-25-2007 09:29 PM


All times are GMT -7. The time now is 07:51 AM.


Copyright ©2004 - 2007, DiscussWeb. All Rights Reserved.
Our Partners
One Way Moving Companies | Stamford Dentist | Euro Millions Lottery | Home Loans| Furniture

SEO by vBSEO 3.0.0