Click to See Complete Forum and Search --> : Please Help -
MidnightKiss
12-22-2002, 02:57 AM
I am relatively new to website building and have the following problem.
I have posted some javascricpt to my site to create a firework effect source Dynamicdrive.com
My problem is that on the same page I wish to operate a scroll bar warning of adult content (supplied by Javascript.internet.com)
It would seem that the two scripts are conflicting in some way, if I remove the firework script.......the scroll bar script works just fine. With fireworks script in place the scroll bar is just left blank.
Any suggestions to have both happily working in harmony together........or have I got to remove fireworks scripy from Home page to have the scroll bar.........as I said in my opening I am relatively new to this so please excuse my naivete!
Midnight:confused:
Check the both scripts, if there are any variables or function with the same name change them, after I guess it will works.
MidnightKiss
12-22-2002, 05:34 AM
Thank you Swon for your rapid response,
I have changed what variables I can.............with still the same outcome.
I am now completely stumped, Midnight:(
Is the page online? Post the link, else post the whole code, maybe we'll find a solution!
MidnightKiss
12-22-2002, 11:29 AM
Hello again Swon,
Yes the page is online the url is http://xmoon-maidenx.tripod.com/
The code I was given for the fireworks is as follows:
Step 1: Add the following script and stylesheet code to the <head> section of your page:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/*
Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)
Permission granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//set Interval between each firework display,
var intervals=2000
var sparksOn = true;
var speed = 40;
var power = 3;
//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var ns6=(document.getElementById&&!document.all);
var sparksAflyin = false;
var allDivs = new Array(10);
var totalSparks = 0;
//-------------------------------
function initAll(){
if(!ns && !ie &&!ns6){
sparksOn = false;
return;
}
setInterval("firework()",intervals)
if (ns)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
for(dNum=0; dNum<7; ++dNum){
if(ie)
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else if (ns6)
allDivs[dNum]=document.getElementById('sDiv'+dNum).style;
else
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
}
}
function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns||ns6){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset
}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
if(sparksOn){
if(!sparksAflyin){
sparksAflyin=true;
totalSparks=0;
for(var spark=0;spark<=6;spark++){
dx=Math.round(Math.random()*50);
dy=Math.round(Math.random()*50);
moveTo(spark,randomx,randomy,dx,dy);
}
}
}
}
function moveTo(i,tempx,tempy,dx,dy){
if(ie){
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
tempy=document.body.offsetHeight+document.body.scrollTop-80;
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
tempx=document.body.offsetWidth+document.body.scrollLeft-80;
}
else if(ns6){
if(tempy+80>(window.innerHeight+pageYOffset))
tempy=window.innerHeight+pageYOffset-80;
if(tempx+80>(window.innerWidth+pageXOffset))
tempx=window.innerWidth+pageXOffset-80;
}
if(tempx>-50&&tempy>-50){
tempx+=dx;tempy+=dy;
allDivs[i].left=tempx;
allDivs[i].top=tempy;
dx-=power;dy-=power;
setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
}
else
++totalSparks
if(totalSparks==7){
sparksAflyin=false;
totalSparks=0;
}
}
window.onload=initAll
//End-->
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:orange; z-index:12;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}
</style>
Step 2: Add the below <div> tags to the <body> section of your document:
<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>
The code for the scroll is as follows
<!-- THREE STEPS TO INSTALL 1 COOL TEXTBOX SCROLLER:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- (c) http://www.wyka-warzecha.com -->
<!-- Begin
// THESE VARIABLES CAN BE CHANGED //
var myMainMessage=" Try this out! The message just keeps repeating. Use it for announcements, news and other items! ";
var speed=150;
var scrollingRegion=50;
// END CHANGEABLE VARIABLES //
var startPosition=0;
function mainTextScroller() {
var mainMessage=myMainMessage;
var tempLoc=(scrollingRegion*3/mainMessage.length)+1;
if (tempLoc<1) {tempLoc=1}
var counter;
for(counter=0;counter<=tempLoc;counter++)
mainMessage+=mainMessage;
document.mainForm.mainTextScroller.value=mainMessage.substring(startPosition,startPosition+scrolling Region);
startPosition++;
if(startPosition>scrollingRegion) startPosition=0;
setTimeout("mainTextScroller()",speed); }
// End -->
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="mainTextScroller()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<form name="mainForm">
<center>
<input type="text" name="mainTextScroller" size="40" value>
</center>
</form>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>
<!-- Script Size: 1.78 KB -->
any suggestions greatly appreciated, Midnight
aepstar
12-22-2002, 01:38 PM
well i found ur mistake.
the firework does this window.onload=initAll
and scroll script this: <body onload="mainTextScroller();">
so remove in the firework script this line:
window.onload=initAll
and make the body tag this:
<BODY onLoad="mainTextScroller(); initAll();">
now it works fine or if u r lazy heres the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
/*
Document firework script (By Matt Gabbert, mgabbert@usrtoday.com, http://www.nolag.com)
Permission granted to Dynamic Drive to feature script in archive
For full source and 100's more DHTML scripts, visit http://dynamicdrive.com
*/
//set Interval between each firework display,
var intervals=2000
var sparksOn = true;
var speed = 40;
var power = 3;
//Dont change these values-------
var documentWidth=documentHeight=randomx=randomy=leftcorner=topcorner=0
var ns=(document.layers);
var ie=(document.all);
var ns6=(document.getElementById&&!document.all);
var sparksAflyin = false;
var allDivs = new Array(10);
var totalSparks = 0;
//-------------------------------
function initAll(){
if(!ns && !ie &&!ns6){
sparksOn = false;
return;
}
setInterval("firework()",intervals)
if (ns)
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE);
for(dNum=0; dNum<7; ++dNum){
if(ie)
allDivs[dNum]=eval('document.all.sDiv'+dNum+'.style');
else if (ns6)
allDivs[dNum]=document.getElementById('sDiv'+dNum).style;
else
allDivs[dNum]=eval('document.layers["sDiv'+dNum+'"]');
}
}
function firework(){
//below code detects the browser dimenions
if (ie){
documentWidth=document.body.clientWidth
documentHeight=document.body.clientHeight
leftcorner=document.body.scrollLeft
topcorner=document.body.scrollTop
}
else if (ns||ns6){
documentWidth=window.innerWidth
documentHeight=window.innerHeight
leftcorner=pageXOffset
topcorner=pageYOffset
}
//below code randomly generates a set of coordinates that fall within the dimension
randomx=leftcorner+Math.floor(Math.random()*documentWidth)
randomy=topcorner+Math.floor(Math.random()*documentHeight)
if(sparksOn){
if(!sparksAflyin){
sparksAflyin=true;
totalSparks=0;
for(var spark=0;spark<=6;spark++){
dx=Math.round(Math.random()*50);
dy=Math.round(Math.random()*50);
moveTo(spark,randomx,randomy,dx,dy);
}
}
}
}
function moveTo(i,tempx,tempy,dx,dy){
if(ie){
if(tempy+80>(document.body.offsetHeight+document.body.scrollTop))
tempy=document.body.offsetHeight+document.body.scrollTop-80;
if(tempx+80>(document.body.offsetWidth+document.body.scrollLeft))
tempx=document.body.offsetWidth+document.body.scrollLeft-80;
}
else if(ns6){
if(tempy+80>(window.innerHeight+pageYOffset))
tempy=window.innerHeight+pageYOffset-80;
if(tempx+80>(window.innerWidth+pageXOffset))
tempx=window.innerWidth+pageXOffset-80;
}
if(tempx>-50&&tempy>-50){
tempx+=dx;tempy+=dy;
allDivs[i].left=tempx;
allDivs[i].top=tempy;
dx-=power;dy-=power;
setTimeout("moveTo("+i+","+tempx+","+tempy+","+dx+","+dy+")",speed)
}
else
++totalSparks
if(totalSparks==7){
sparksAflyin=false;
totalSparks=0;
}
}
window.onload=initAll
//End-->
</script>
<style>
#sDiv0 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:Aqua; z-index:9;}
#sDiv1 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:red; z-index:10;}
#sDiv2 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:blue; z-index:11;}
#sDiv3 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; colorrange; z-index:12;}
#sDiv4 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:yellow; z-index:13;}
#sDiv5 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:lightgreen; z-index:14;}
#sDiv6 {position:absolute; height:1; width:1; font-family:arial black; font-size:15px; color:silver; z-index:15;}
</style>
<SCRIPT LANGUAGE="JavaScript">
var myMainMessage="Try this out! The message just keeps repeating. Use it for announcements, news and other items!";
var speed=150;
var scrollingRegion=50;
var startPosition=0;
function mainTextScroller() {
var mainMessage=myMainMessage;
var tempLoc=(scrollingRegion*3/mainMessage.length)+1;
if (tempLoc<1) {tempLoc=1}
var counter;
for(counter=0;counter<=tempLoc;counter++)
mainMessage+=mainMessage;
document.mainForm.mainTextScroller.value=mainMessage. substring(startPosition,startPosition+scrollingRegion);
startPosition++;
if(startPosition>scrollingRegion) startPosition=0;
setTimeout("mainTextScroller()",speed); }
</script>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag -->
<BODY onLoad="mainTextScroller(); initAll();">
<form name="mainForm">
<center>
<input type="text" name="mainTextScroller" size="40" value>
</center>
</form>
<div id="sDiv0">*</div>
<div id="sDiv1">*</div>
<div id="sDiv2">*</div>
<div id="sDiv3">*</div>
<div id="sDiv4">*</div>
<div id="sDiv5">*</div>
<div id="sDiv6">*</div>
</BODY>
</HTML>
ur welcome :D :D :D
MidnightKiss
12-22-2002, 02:11 PM
aepstar, Thank you so very much I shall try it out straight away and report back on my sucess or not.
Many Thanks again, Midnight
MidnightKiss
12-22-2002, 02:26 PM
:( eapstar, thank you for your help but now nothing is working at all.
No I am not blonde, nor dumb.......much appreciation for your effort. Midnight
aepstar
12-22-2002, 03:23 PM
lol
jus gimme ur original page and i will make it work 4 u
eapstar, thank you for your help but now nothing is working at all.
Maybe the script has breaks on some lines which are made of the forum. For example:
document.mainForm.mainTextScroller.value=mainMessage. substring(startPosition,startPosition+scrollingReg
ion);
this works only if it's on the same line!
MidnightKiss
12-23-2002, 02:58 AM
aepstar and Swon thank you both,
I have found an alternative firework to place on the Home page which negates the need for any changes to the scroll bar scrip code.
Your time and patience with a "newbie" to all of this has been greatly appreciated, regards Midnight :)
aepstar
12-23-2002, 04:44 AM
as i said copy my script coz ur script has a number of linebreaks indeed, i was forgot to mention.