Two Scripts Seem Incompatible on One Page - What Can I Do?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • dickwhyte
    New Member
    • Feb 2010
    • 7
    #1

    Two Scripts Seem Incompatible on One Page - What Can I Do?

    Hi,

    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:

    Code:
    <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>
    But when I put the Javacript menu I want in it stops working (but the menu works fine on its own too). The coloured letters show up when I put the BODY information for the menu in (and the menu shows up, kinda, but without the dropdown effect) but when I put the HEAD information in (which gives it the dropdown effect) the coloured sentence vanishes and all I get is the menu. I can't for the life of me figure it out. Here is the full code for the HEAD:

    Code:
    <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>
    Any help would be appreciated. I have tried putting the menu HEAD info after the coloured letters, but it still breaks. And as I have said I tried removing the menu piece by piece and it is the HEAD info which crashes the coloured letters.

    Many thanks in advance for any help.

    All the best,
    Dick Whyte
    Tags: dropdown menu, incompatible scripts, javascript, rainbow letters
    • tpgames
      Contributor
      • Jan 2007
      • 783
      #2
      Usually, if you change the variable names in one script to be DIFFERENT from the other script, this solves the problem. For example, add zxc or some other letter combination to names in 1 script.
      Code:
      // var zxcColumns=4; // the default number of image display columns

var zxcHofFMax=10; // the maximum number of entries in the 'Hall of Fame'

// The Cookie Code
var zxcDays=90; // days before the cookie expires
var zxcCookie='GlobalWritersClubCookie'; // Your chosen cookie name


// Functional Code - No Need to Change

var zxcStdImg,zxcFnd,zxcAtp,zxcTme,zxcMin,zxcSImg,zxcNme,zxcHofF,zxcLast,zxcSec,zxcTO;
var zxcFndCnt=0;
var zxcAtpCnt=0;
var zxcClickAry=[];
var zxcRemAry=[];
var zxcHofFAry=[];
var zxcExp=new Date(new Date().getTime()+zxcDays*86400000).toGMTString();

function zxcMakePanel(){
 zxcNme=document.getElementById('zxcName').value;
 if (zxcNme.length<1){ zxcNme='No Name'; }
 document.getElementById('zxcStart').value='ReStart the Game';
 zxcSec=new Date().getTime();
zxcTO=setInterval('zxcTimer()',1000);
 var zxcpanel=document.getElementById('zxcImgPanel')
zxcFnd=document.getElementById('zxcFound');
zxcAtp=document.getElementById('zxcAttempts');
 zxcTme=document.getElementById('zxcTime');
 zxcMin=document.getElementById('zxcMinutes');
 document.getElementById('zxcDisplay').style.visibility='visible';
var zxcnuofimgs=document.getElementById('zxcNuofImgs');
zxcnuofimgs.value=zxcnuofimgs.value.replace(/\D/g,'');
var zxcnu=parseInt(zxcnuofimgs.value);
if (zxcnuofimgs.value.length<1){ zxcnu=zxcUseAry.length; zxcnuofimgs.value=zxcnu; }
 else if (zxcnu>1){ zxcnu=zxcnu/2; }
 else { zxcnu=1; zxcnuofimgs.value=2; }
 if (zxcnu>zxcUseAry.length){ zxcnu=zxcUseAry.length; }
  zxcFndCnt=zxcnu*2;
  zxcFnd.firstChild.data=zxcFndCnt;
  zxcAtpCnt=0;
  zxcAtp.firstChild.data=zxcAtpCnt;
  var zxcnewary=[];
  for (var zxc0=0;zxc0<zxcnu;zxc0++){
  zxcnewary.push(zxcUseAry[zxc0]);
 }
      Best wishes!

        Comment

        Previous template Next
        Working...