PDA

Click to See Complete Forum and Search --> : Scroll bars

Griffo
12-22-2002, 03:05 AM
:confused: I have been trying to change the colour of the scroll bar in my web page with no luck. Can anyone help me?
ShrineDesigns
12-22-2002, 03:27 AM
this how you change the scrollbar color thru CSS

body {
scrollbar-face-color: #FF6600;
scrollbar-shadow-color: #BF4C00;
scrollbar-highlight-color: #FF8C40;
scrollbar-3dlight-color: #FF6600;
scrollbar-darkshadow-color: #963C00;
scrollbar-track-color: #424286;
scrollbar-arrow-color: #963C00;
}
Griffo
12-22-2002, 03:34 AM
Thank you....but Where do I paste the script
http://people.ozzienet.net/~wgg/

<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=3)">
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="100%">
<p align="center">
<img border="0" src="coollogo_com_44962445.jpeg" width="254" height="105"><img border="0" src="frosty-christmas.jpeg" width="349" height="107"><img border="0" src="candy_cane_swing_md_wht.gif" width="60" height="105"></td>
</tr>
</table>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}
// End -->
</SCRIPT>
</HEAD>


<BODY>

<center>
<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="">Go to....
<option value="http://people.ozzienet.net/~wgg/">Home
<option value="http://www.ozzienet.net/wgg">OzzieNet - Premium Internet provider
<option value="http://people.ozzienet.net/~wgg/webpages.htm">Homepages
<option value="http://people.ozzienet.net/~wgg/madcow.htm">Mad Cow
<option value="http://people.ozzienet.net/~wgg/buttons.htm">Buttons
<option value="http://people.ozzienet.net/~wgg/background.htm">Backgrounds
<option value="http://www.kaspersky.net.au">Anti-Virus - Protect your computer
<option value="mailto:wgg@ozzienet.net">Contact Me
<option value="http://www.AFL.com">Football
<option value="http://www.google.com">Google Search
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>
</center>


<BODY vlink="#0000FF" alink="#0000FF">


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="405">
<tr>
<td width="11%" bgcolor="#C0C0C0" height="405">
<a href="http://people.ozzienet.net/~wgg/">Home</a><p>
<a href="http://people.ozzienet.net/~wgg/webpages.htm">WebPages</a></p>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="javascript:Start('http://www.ozzienet.net/wgg')";>Ozzie Net</a>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="javascript:Start('http://javascriptsource.com')";>Javascripts</a>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="javascript:Start('http://www.google.com')";>Search</a>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", "toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="javascript:Start('http://www.kaspersky.net.au')";>Anti - Virus</a>

<p><a href="mailto:wgg@ozzienet.net">Contact Me</a></td>
<td width="75%" height="405">&nbsp;<p>Before you Email me to tell me this webpage has to many alerts
and gizmo's,&nbsp; The purpose of this webpage is just to experiment with<font color="#0000FF">
</font>JavaScript's<font size="4">. </font><span class="desc">
<a href="http://javascript.internet.com/">The JavaScript Source</a> is an
excellent JavaScript resource with tons of &quot;cut and paste&quot; JavaScript examples
for your Web pages. All for free!
<!-- New Scripts Pulldown Menu -->
<script language="JavaScript">
<!-- Begin
function formHandler(form) {
var URL = document.tennew.scripts.options[document.tennew.scripts.selectedIndex].value;
window.location.href = URL;
}
// End -->
</script>
</span>


<span style="position: absolute; left: 227; top: 164">
<img border="0" src="monitor_accessories_information_highway_md_wht.gif" width="110" height="120"></span></p>
<p align="center">
<applet code="fphover.class" codebase="./" width="120" height="35">
<param name="color" value="#000080">
<param name="textcolor" value="#FFFFFF">
<param name="text" value="Enter">
<param name="hovercolor" value="#FF0000">
<param name="effect" value="glow">
<param name="image" valuetype="ref" value="button.gif">
<param name="url" valuetype="ref" value="http://people.ozzienet.net/~wgg/webpages.htm">
</applet><p align="center">
&nbsp;</td>
<td width="11%" bgcolor="#C0C0C0" height="405">&nbsp;<script language='JavaScript'>
<!--
function submitVote() {
window.open('http://www.expresswebtools.com/pollvote.php','voteWindow', 'toolbar=no,scrollbars=2,directories=no, status=no,menubar=no,resizable=yes,width=555,height=555')
}
function viewResults() {
window.open('http://www.expresswebtools.com/pollresults.php?pollId=8774','voteWindow', 'toolbar=no,scrollbars=2,directories=no, status=no,menubar=no,resizable=yes,width=555,height=555')
}
// -->
</script>

<form target='voteWindow' onSubmit='submitVote()' name='frmVote' action='http://www.expresswebtools.com/pollvote.php' method='post'>
<input type='hidden' name='pollId' value='8774'>
<table border='0' cellpadding='0' cellspacing='0' bordercolor='#FF6D01' width='57'>
<tr>
<td style='padding-top:3; padding-bottom:3' width='161' bgcolor='#FFFF00' height='22'>
<p style='margin-left: 10; margin-right: 10'>
<b><font face='Verdana' size='2' color='#000000'>The size of my current monitor (not penis) is... </b>
</td>
</tr>
<tr>
<td width='161' bgcolor='#808080'>
<table width='1%' align='center' border='0' cellspacing='0' cellpadding='0'><tr><td width='100%'>
<p style='margin-left: 10; margin-right: 10' align='left'>
<br><font face='Verdana' size='2' color='#00C000'><input type='radio' name='vote[]' value='4719'> 15"<br>
<input type='radio' name='vote[]' value='4720'> 17"<br>
<input type='radio' name='vote[]' value='4721'> 19"<br>
<input type='radio' name='vote[]' value='4722'> 21"<br>
<br><input type='submit' value='Vote Now'><br>
<a href='javascript:viewResults()'>
<font face='Verdana' size='2' color='#00C000'><u>View Results</u></font>
</a><br><br> </font>
</td></tr></table></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3">
<tr>
<td width="100%" bgcolor="#C0C0C0">
<p align="center"><font color="#0000FF">&nbsp;<HEAD>


</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write("" +today+ ".");
// End -->
</script>

</font>

<p><center>
<font color="#0000FF">This page was updated </font><font color="#0000ff">Sunday,
December 22, 2002</font></center><p>

<!-- TWO STEPS TO INSTALL NO RIGHT CLICK:

1. Copy the coding into the HEAD of your HTML document
2. Add the last code into the BODY of your HTML document -->

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->

<HEAD>

<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Original: Martin Webb (martin@irt.org) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Sorry, you do not have permission to right click.");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End -->
swon
12-22-2002, 05:13 AM
In your CSS style. For example:

<style>

...put in the script here

</style>
</head>

or make external CSS.
Griffo
12-22-2002, 05:30 AM
Thank you both for your help.
I still cant do it...maybe I'm not as smart as I thought I was :D Ah well I will keep trying....LOL
swon
12-22-2002, 05:44 AM
I've put it in, if it not works, controll the lines (breaks in some functions)

<meta http-equiv="Page-Enter" content="revealTrans(Duration=5.0,Transition=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=5.0,Transition=3)">
<style fprolloverstyle>A:hover {color: #FF0000; font-weight: bold}
</style>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="100%">
<p align="center">
<img border="0" src="coollogo_com_44962445.jpeg" width="254" height="105"><img border="0" src="frosty-christmas.jpeg" width="349" height="107"><img border="0" src="candy_cane_swing_md_wht.gif" width="60" height="105"></td>
</tr>
</table>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

function formHandler(form){
var URL = document.form.site.options[document.form.site.selectedIndex].value;
window.location.href = URL;
}

</SCRIPT>
<style type="text/css">
<!--
body {
scrollbar-face-color: #FF6600;
scrollbar-shadow-color: #BF4C00;
scrollbar-highlight-color: #FF8C40;
scrollbar-3dlight-color: #FF6600;
scrollbar-darkshadow-color: #963C00;
scrollbar-track-color: #424286;
scrollbar-arrow-color: #963C00;
}

-->
</style>
</HEAD>


<BODY>

<center>
<form name="form">
<select name="site" size=1 onChange="javascript:formHandler()">
<option value="">Go to....
<option value="http://people.ozzienet.net/~wgg/">Home
<option value="http://www.ozzienet.net/wgg">OzzieNet - Premium Internet provider
<option value="http://people.ozzienet.net/~wgg/webpages.htm">Homepages
<option value="http://people.ozzienet.net/~wgg/madcow.htm">Mad Cow
<option value="http://people.ozzienet.net/~wgg/buttons.htm">Buttons
<option value="http://people.ozzienet.net/~wgg/background.htm">Backgrounds
<option value="http://www.kaspersky.net.au">Anti-Virus - Protect your computer
<option value="mailto:wgg@ozzienet.net">Contact Me
<option value="http://www.AFL.com">Football
<option value="http://www.google.com">Google Search
<option value="http://www.metacrawler.com">Metacrawler
<option value="http://www.altavista.digital.com">Altavista
<option value="http://www.webcrawler.com">Webcrawler
<option value="http://www.lycos.com">Lycos
<option value="http://javascript.internet.com">JavaScript Source
</select>
</form>
</center>


<BODY vlink="#0000FF" alink="#0000FF">


<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber2" height="405">
<tr>
<td width="11%" bgcolor="#C0C0C0" height="405">
<a href="http://people.ozzienet.net/~wgg/">Home</a><p>
<a href="http://people.ozzienet.net/~wgg/webpages.htm">WebPages</a></p>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", " toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="java script:Start('http://www.ozzienet.net/wgg')";>Ozzie Net</a>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", " toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="java script:Start('http://javascriptsource.com')";>Javascripts</a>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", " toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="java script:Start('http://www.google.com')";>Search</a>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function Start(page) {
OpenWin = this.open(page, "CtrlWindow", " toolbar=yes,menubar=yes,location=yes,scrollbars=yes,resizable=yes");
}
// End -->
</SCRIPT>

</HEAD>


<BODY>

<p><a href="java script:Start('http://www.kaspersky.net.au')";>Anti - Virus</a>

<p><a href="mailto:wgg@ozzienet.net">Contact Me</a></td>
<td width="75%" height="405"> <p>Before you Email me to tell me this webpage has to many alerts
and gizmo's, The purpose of this webpage is just to experiment with<font color="#0000FF">
</font>JavaScript's<font size="4">. </font><span class="desc">
<a href="http://javascript.internet.com/">The JavaScript Source</a> is an
excellent JavaScript resource with tons of "cut and paste" JavaScript examples
for your Web pages. All for free!
<!-- New Scripts Pulldown Menu -->
<script language="JavaScript">
<!-- Begin
function formHandler(form) {
var URL = document.tennew.scripts.options[document.tennew.scripts.selectedIndex].value;
window.location.href = URL;
}
// End -->
</script>
</span>


<span style="position: absolute; left: 227; top: 164">
<img border="0" src="monitor_accessories_information_highway_md_wht.gif" width="110" height="120"></span></p>
<p align="center">
<applet code="fphover.class" codebase="./" width="120" height="35">
<param name="color" value="#000080">
<param name="textcolor" value="#FFFFFF">
<param name="text" value="Enter">
<param name="hovercolor" value="#FF0000">
<param name="effect" value="glow">
<param name="image" valuetype="ref" value="button.gif">
<param name="url" valuetype="ref" value="http://people.ozzienet.net/~wgg/webpages.htm">
</applet><p align="center">
</td>
<td width="11%" bgcolor="#C0C0C0" height="405"> <script language='JavaScript'>
<!--
function submitVote() {
window.open('http://www.expresswebtools.com/pollvote.php','voteWindow', 'toolbar=no,scrollbars=2,directories=no, status=no,menubar=no,resizable=yes,width=555,height=555')
}
function viewResults() {
window.open('http://www.expresswebtools.com/pollresults.php?pollId=8774','voteWindow', 'toolbar=no,scrollbars=2,directories=no, status=no,menubar=no,resizable=yes,width=555,height=555')
}
// -->
</script>

<form target='voteWindow' onSubmit='submitVote()' name='frmVote' action='http://www.expresswebtools.com/pollvote.php' method='post'>
<input type='hidden' name='pollId' value='8774'>
<table border='0' cellpadding='0' cellspacing='0' bordercolor='#FF6D01' width='57'>
<tr>
<td style='padding-top:3; padding-bottom:3' width='161' bgcolor='#FFFF00' height='22'>
<p style='margin-left: 10; margin-right: 10'>
<b><font face='Verdana' size='2' color='#000000'>The size of my current monitor (not penis) is... </b>
</td>
</tr>
<tr>
<td width='161' bgcolor='#808080'>
<table width='1%' align='center' border='0' cellspacing='0' cellpadding='0'><tr><td width='100%'>
<p style='margin-left: 10; margin-right: 10' align='left'>
<br><font face='Verdana' size='2' color='#00C000'><input type='radio' name='vote[]' value='4719'> 15"<br>
<input type='radio' name='vote[]' value='4720'> 17"<br>
<input type='radio' name='vote[]' value='4721'> 19"<br>
<input type='radio' name='vote[]' value='4722'> 21"<br>
<br><input type='submit' value='Vote Now'><br>
<a href='java script:viewResults()'>
<font face='Verdana' size='2' color='#00C000'><u>View Results</u></font>
</a><br><br> </font>
</td></tr></table></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber3">
<tr>
<td width="100%" bgcolor="#C0C0C0">
<p align="center"><font color="#0000FF"> <HEAD>


</HEAD>
<BODY>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
// Get today's current date.
var now = new Date();

// Array list of days.
var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');

// Array list of months.
var months = new Array('January','February','March','April','May','June','July','August','September','October','Novem ber','December');

// Calculate the number of the current day in the week.
var date = ((now.getDate()<10) ? "0" : "")+ now.getDate();

// Calculate four digit year.
function fourdigits(number) {
return (number < 1000) ? number + 1900 : number;
}

// Join it all together
today = days[now.getDay()] + ", " +
months[now.getMonth()] + " " +
date + ", " +
(fourdigits(now.getYear())) ;

// Print out the data.
document.write("" +today+ ".");
// End -->
</script>

</font>

<p><center>
<font color="#0000FF">This page was updated </font><font color="#0000ff">Sunday,
December 22, 2002</font></center><p>

<HEAD>

<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Original: Martin Webb (martin@irt.org) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->


function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Sorry, you do not have permission to right click.");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End -->
</script>