javascript question

Worker Joined: Jun 29, 2003 Posts: 146 Location: Oklahoma

I am running 7.0 with XPSilver theme. I want to add a javascript 1.2 that makes snow fall on the pages...where would I installl this and is there a specail way to have to install it? I have tried several times and either the snow don't show or it wipes out the top section of the page.

Site Admin/Owner Joined: Aug 27, 2002 Posts: 17088

Usually you can install all js code in includes/my_header.php. See this post also http://www.ravenphpscripts.com/postt28.html

Posted: Sat Jan 10, 2004 5:44 am

Ok here is what I am trying to add. It has a body tag of onload="preloadImages();" which I added in themes/mytheme/theme.php and then added this to my_header.php and i got a parse error every time :/ i even tried the \ before the " and all and it had a parse error at line 23 which was <SCRIPT LANGUAGE="JavaScript1.2"> and i even tried ."<SCRIPT LANGUAGE=\"JavaScript1.2\">" and \n" and \n"; at the end. Same results every time. The my_header.php says it adds its code in the <HEAD> </HEAD> Tags but this has to be in the <BODY></BODY> tags. And if I add it in theme.php it corrupts the whole page and when I edit it and get it to work. I don't see the snow falling and yes I have the gif loaded in images directory. hehe

Code:

<SCRIPT LANGUAGE="JavaScript1.2">





<!-- Begin


var no = 15; // snow number


var speed = 15; // smaller number moves the snow faster


var snowflake = "images/snow3.gif";





var ns4up = (document.layers) ? 1 : 0;  // browser sniffer


var ie4up = (document.all) ? 1 : 0;


var dx, xp, yp;    // coordinate and position variables


var am, stx, sty;  // amplitude and step variables


var i, doc_width = 800, doc_height = 600;


if (ns4up) {


doc_width = self.innerWidth;


doc_height = self.innerHeight;


} else if (ie4up) {


doc_width = document.body.clientWidth;


doc_height = document.body.clientHeight;


}


dx = new Array();


xp = new Array();


yp = new Array();


am = new Array();


stx = new Array();


sty = new Array();


for (i = 0; i < no; ++ i) {  


dx[i] = 0;                        // set coordinate variables


xp[i] = Math.random()*(doc_width-50);  // set position variables


yp[i] = Math.random()*doc_height;


am[i] = Math.random()*20;         // set amplitude variables


stx[i] = 0.02 + Math.random()/10; // set step variables


sty[i] = 0.7 + Math.random();     // set step variables


if (ns4up) {                      // set layers


if (i == 0) {


document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");


document.write("top=\"15\" visibility=\"show\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></layer>");


} else {


document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");


document.write("top=\"15\" visibility=\"show\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></layer>");


   }


} else if (ie4up) {


if (i == 0) {


document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");


document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");


document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></div>");


} else {


document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");


document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");


document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></div>");


      }


   }


}


function snowNS() {  // Netscape main animation function


for (i = 0; i < no; ++ i) {  // iterate for every dot


yp[i] += sty[i];


if (yp[i] > doc_height-50) {


xp[i] = Math.random()*(doc_width-am[i]-30);


yp[i] = 0;


stx[i] = 0.02 + Math.random()/10;


sty[i] = 0.7 + Math.random();


doc_width = self.innerWidth;


doc_height = self.innerHeight;


}


dx[i] += stx[i];


document.layers["dot"+i].top = yp[i];


document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);


}


setTimeout("snowNS()", speed);


}


function snowIE() {  // IE main animation function


for (i = 0; i < no; ++ i) {  // iterate for every dot


yp[i] += sty[i];


if (yp[i] > doc_height-50) {


xp[i] = Math.random()*(doc_width-am[i]-30);


yp[i] = 0;


stx[i] = 0.02 + Math.random()/10;


sty[i] = 0.7 + Math.random();


doc_width = document.body.clientWidth;


doc_height = document.body.clientHeight;


}


dx[i] += stx[i];


document.all["dot"+i].style.pixelTop = yp[i];


document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);


}


setTimeout("snowIE()", speed);


}


if (ns4up) {


snowNS();


} else if (ie4up) {


snowIE();


}


// End -->


</script>

Posted: Sat Jan 10, 2004 9:09 am

Since you are adding pure html/js code,you must place this code AFTER the closing ?> php tag in includes/my_header.php. Don't worry about it being in the body tag. It should work just fine in the my_header.php file.

Posted: Sat Jan 10, 2004 9:12 am

and what about the onload="preloadImages();" body tag

Posted: Sat Jan 10, 2004 9:17 am

Well, you said you already added that to your body onload tag, correct? That should work. You could also try adding that function call right above the

Code:

// End -->

tag in your script, but you'll have to experiment.

Posted: Sat Jan 10, 2004 9:21 am

i tried both ways....i added the code after the ?> tag and added the onload images in my_header.php and at the bottom of the script and same thing...nothin happens

Posted: Sat Jan 10, 2004 9:22 am

no errors or nothin...just not working Sad

Posted: Sat Jan 10, 2004 9:24 am

ahhh i do have one error

Line: 123
Char: 1
Error: Object expected
Code: 0
URL: http://www.hooked-on-scrappin.com

Posted: Sat Jan 10, 2004 9:26 am

Yep. This script isn't working stand alone. You are calling preloadImages() but I don't see it defined anywhere.

Posted: Sat Jan 10, 2004 9:26 am

the error is the </script>

Posted: Sat Jan 10, 2004 9:27 am

No, it's the preloadImages() function. It isn't defined anywhere.

Posted: Sat Jan 10, 2004 9:27 am

so should i take that out of the body tag?

Posted: Sat Jan 10, 2004 9:29 am

that may be for another script...there was 2 together...one was a bg script..

Posted: Sat Jan 10, 2004 9:29 am

You need to include that function in your js file. It is MISSING.

Posted: Sat Jan 10, 2004 9:31 am

js file? what is missing...can you explain a little?

Posted: Sat Jan 10, 2004 9:32 am

Here's the deal Laughing

. You need to get the script working as a stand-alone script, outside of nuke. Then, move the js code into includes/my_header.php and it should work just fine.

Posted: Sat Jan 10, 2004 9:34 am

dark-dude wrote:

js file? what is missing...can you explain a little?

The function preloadImages(), unless it is not needed. However, if you remove it, your script still has problems as a stand-alone. As I said, you need to get it working outside of nuke first.

Posted: Sat Jan 10, 2004 9:35 am

Code:

<!--


body { background: url(images/index/universal_bg.jpg) repeat-x scroll }


.footer   { padding-right: 10px; padding-left: 10px; border-top: 1px solid #d5dae0; border-right: 1px solid #d5dae0; border-bottom: 1px solid #d5dae0 }


.sidecontentarea { background-image: url(images/index/sc_bg.gif) }--></style>


      <csscriptdict import>


         <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script>


      </csscriptdict>


      <csactiondict>


         <script type="text/javascript"><!--


var preloadFlag = false;


function preloadImages() {


   if (document.images) {


      over_nav_main = newImage(/*URL*/'images/index/nav_main_over.jpg');


      over_nav_products = newImage(/*URL*/'images/index/nav_products_over.jpg');


      over_nav_forums = newImage(/*URL*/'images/index/nav_forums_over.jpg');


      over_nav_anonymity = newImage(/*URL*/'images/index/nav_anonymity_over.jpg');


      over_nav_news = newImage(/*URL*/'images/index/nav_news_over.jpg');


      over_nav_help = newImage(/*URL*/'images/index/nav_help_over.jpg');


      over_nav_contact = newImage(/*URL*/'images/index/nav_contact_over.jpg');


      over_pagenav_main = newImage(/*URL*/'images/index/pagenav_main_over.gif');


      over_pagenav_top = newImage(/*URL*/'images/index/pagenav_top_over.gif');


      over_pagenav_back = newImage(/*URL*/'images/index/pagenav_back_over.gif');


      over_nvm = newImage(/*URL*/'images/index/nvm_over.gif');


      preloadFlag = true;


   }


}





// --></script>


      </csactiondict>


   </head><a name="top"></a>





   <body onload="preloadImages();" bgcolor="#cd0000" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">





<SCRIPT LANGUAGE="JavaScript1.2">

thats what is before the java code

Posted: Sat Jan 10, 2004 9:44 am

Move this code to my_header.php after the other.

Code:

      <csscriptdict import> 


         <script type="text/javascript" src="GeneratedItems/CSScriptLib.js"></script> 


      </csscriptdict> 


      <csactiondict> 


         <script type="text/javascript"><!-- 


var preloadFlag = false; 


function preloadImages() { 


   if (document.images) { 


      over_nav_main = newImage(/*URL*/'images/index/nav_main_over.jpg'); 


      over_nav_products = newImage(/*URL*/'images/index/nav_products_over.jpg'); 


      over_nav_forums = newImage(/*URL*/'images/index/nav_forums_over.jpg'); 


      over_nav_anonymity = newImage(/*URL*/'images/index/nav_anonymity_over.jpg'); 


      over_nav_news = newImage(/*URL*/'images/index/nav_news_over.jpg'); 


      over_nav_help = newImage(/*URL*/'images/index/nav_help_over.jpg'); 


      over_nav_contact = newImage(/*URL*/'images/index/nav_contact_over.jpg'); 


      over_pagenav_main = newImage(/*URL*/'images/index/pagenav_main_over.gif'); 


      over_pagenav_top = newImage(/*URL*/'images/index/pagenav_top_over.gif'); 


      over_pagenav_back = newImage(/*URL*/'images/index/pagenav_back_over.gif'); 


      over_nvm = newImage(/*URL*/'images/index/nvm_over.gif'); 


      preloadFlag = true; 


   } 


} 





// --></script> 


      </csactiondict>

And delete this

Code:

   </head><a name="top"></a>

After that, make sure the images are being called correctly, meaning the script is finding them.

Posted: Sat Jan 10, 2004 9:48 am

well I edited it in editplus2 and this is what I have and the snow is falling on a blank page

Code:

<html>





   <head>


      


      </head>





   <body onload="preloadImages();">





<SCRIPT LANGUAGE="JavaScript1.2">





<!-- Begin


var no = 15; // snow number


var speed = 15; // smaller number moves the snow faster


var snowflake = "images/snow3.gif";





var ns4up = (document.layers) ? 1 : 0;  // browser sniffer


var ie4up = (document.all) ? 1 : 0;


var dx, xp, yp;    // coordinate and position variables


var am, stx, sty;  // amplitude and step variables


var i, doc_width = 800, doc_height = 600;


if (ns4up) {


doc_width = self.innerWidth;


doc_height = self.innerHeight;


} else if (ie4up) {


doc_width = document.body.clientWidth;


doc_height = document.body.clientHeight;


}


dx = new Array();


xp = new Array();


yp = new Array();


am = new Array();


stx = new Array();


sty = new Array();


for (i = 0; i < no; ++ i) {  


dx[i] = 0;                        // set coordinate variables


xp[i] = Math.random()*(doc_width-50);  // set position variables


yp[i] = Math.random()*doc_height;


am[i] = Math.random()*20;         // set amplitude variables


stx[i] = 0.02 + Math.random()/10; // set step variables


sty[i] = 0.7 + Math.random();     // set step variables


if (ns4up) {                      // set layers


if (i == 0) {


document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");


document.write("top=\"15\" visibility=\"show\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></layer>");


} else {


document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");


document.write("top=\"15\" visibility=\"show\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></layer>");


   }


} else if (ie4up) {


if (i == 0) {


document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");


document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");


document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></div>");


} else {


document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");


document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");


document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");


document.write(snowflake + "\" border=\"0\"></div>");


      }


   }


}


function snowNS() {  // Netscape main animation function


for (i = 0; i < no; ++ i) {  // iterate for every dot


yp[i] += sty[i];


if (yp[i] > doc_height-50) {


xp[i] = Math.random()*(doc_width-am[i]-30);


yp[i] = 0;


stx[i] = 0.02 + Math.random()/10;


sty[i] = 0.7 + Math.random();


doc_width = self.innerWidth;


doc_height = self.innerHeight;


}


dx[i] += stx[i];


document.layers["dot"+i].top = yp[i];


document.layers["dot"+i].left = xp[i] + am[i]*Math.sin(dx[i]);


}


setTimeout("snowNS()", speed);


}


function snowIE() {  // IE main animation function


for (i = 0; i < no; ++ i) {  // iterate for every dot


yp[i] += sty[i];


if (yp[i] > doc_height-50) {


xp[i] = Math.random()*(doc_width-am[i]-30);


yp[i] = 0;


stx[i] = 0.02 + Math.random()/10;


sty[i] = 0.7 + Math.random();


doc_width = document.body.clientWidth;


doc_height = document.body.clientHeight;


}


dx[i] += stx[i];


document.all["dot"+i].style.pixelTop = yp[i];


document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);


}


setTimeout("snowIE()", speed);


}


if (ns4up) {


snowNS();


} else if (ie4up) {


snowIE();


}


// End -->


</script>





      


   </body>





</html>

Posted: Sat Jan 10, 2004 9:50 am

Ok that was it...had to add the <html></html> tags in my_header.php and its working

Thanks my man!

Posted: Sat Jan 10, 2004 9:54 am

stand alone...it wouldn't work without <body onload="preloadImages();"> so that had to be the call tag

Hangin' Around Joined: Aug 11, 2005 Posts: 26

Any ideas how to get this to show with Firefox, works fine with ie!

Cheers