I am trying to make a page which has both a javascript dropdown menu and a javascript rainbow coloured sentence on it. The sentence works fine on its own, but when I add the menu the whole thing crashes. I am VERY new to javascript and am not a programmer, but an artist using Javascript to explore certain concepts. If you help me with this program I would give full credit to you of course.
Here is the rainbow coloured sentence on its own, which works fine:
Expand|Select|Wrap|Line Numbers
- <head>
- <!-- [Part 1] - Paste this into <HEAD> of your HTML . -->
- <script type="text/javascript">
- /* Color Change Text
- This script and many more sourced from -
- http://rainbow.arch.scriptmania.com/scripts/
- */
- // Change next line for your text msg.
- var msg = 'thirtyone letters changing colours'
- var colorTimer = null;
- // Color can be altered below - eg. remove - ABCDEF = darker
- function toHex(n){
- var hexChars = '0123456789ABCDEF';
- if (n == 0) return n;
- var j, k;
- var temp = '';
- while (n != 0){
- j = n % 16;
- n = (n - j)/16;
- temp = hexChars.charAt(j) + temp;
- }
- return temp;
- }
- function colorize(){
- if (!document.getElementById) return;
- for (i=0; i<msg.length; i++){
- k = Math.round(Math.random() * 16777215);
- k = toHex(k);
- while (k.length < 6){
- k = k + '0';
- }
- document.getElementById('colorizer' + i).style.color = '#' + k;
- }
- // Speed change below - Default = 200 - Lower = Faster
- colorTimer = window.setTimeout('colorize()', 200);
- }
- </script>
- </head>
- <!-- [Part 2] Add onload to <BODY> tag.-->
- <BODY onload='colorize();'>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <br>
- <!-- [Part 3] Paste this where you wish text to appear. -->
- <!-- Change style to your choice -->
- <div id="text" style="font-size:large; font-family: 'Helvetica', Courier, monospace; font-size:30; letter-spacing:+1; font-style:normal; text-align:center; padding-top:15px;">
- <script>
- for (var i=0; i<msg.length; i++){
- document.write("<span id ='colorizer" + i + "'>" + msg.charAt(i) + "</span>");
- }
- </script></div>
Expand|Select|Wrap|Line Numbers
- <head>
- <meta content="text/html; charset=ISO-8859-1"
- http-equiv="content-type">
- <title>Thirty One Letters Changing Colours</title>
- <!-- HERE IS THE MENU HEAD INFORMATION - THIS IS WHAT STOPS THE COLOURED LETTERS FROM WORKING -->
- <script type="text/javascript" src="jquery.min.js"></script>
- <link rel="stylesheet" type="text/css" href="jkoutlinemenu.css" />
- <script type="text/javascript" src="jkoutlinemenu.js">
- /***********************************************
- * Animated Outline Menu- by JavaScript Kit (www.javascriptkit.com)
- * This notice must stay intact for usage
- * Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
- ***********************************************/
- <!-- HERE IS THE COLOURED LETTERS HEAD CODE -->
- <!-- [Part 1] - Paste this into <HEAD> of your HTML . -->
- <script type="text/javascript">
- /* Color Change Text
- This script and many more sourced from -
- http://rainbow.arch.scriptmania.com/scripts/
- */
- // Change next line for your text msg.
- var msg = 'thirtyone letters changing colours'
- var colorTimer = null;
- // Color can be altered below - eg. remove - ABCDEF = darker
- function toHex(n){
- var hexChars = '0123456789ABCDEF';
- if (n == 0) return n;
- var j, k;
- var temp = '';
- while (n != 0){
- j = n % 16;
- n = (n - j)/16;
- temp = hexChars.charAt(j) + temp;
- }
- return temp;
- }
- function colorize(){
- if (!document.getElementById) return;
- for (i=0; i<msg.length; i++){
- k = Math.round(Math.random() * 16777215);
- k = toHex(k);
- while (k.length < 6){
- k = k + '0';
- }
- document.getElementById('colorizer' + i).style.color = '#' + k;
- }
- // Speed change below - Default = 200 - Lower = Faster
- colorTimer = window.setTimeout('colorize()', 200);
- }
- </script>
- </head>
Many thanks in advance for any help.
All the best,
Dick Whyte