Advance dynamic background...my code needs a little tweaking

Abvex · 04-30-2008, 02:53 AM

Hello, I am stuck with a little problem here.
I got this JavaScript code from googling, which basically change a sites background per page refresh.

There are a couple of things I like to do to this code.

Code:

// JavaScript Document
<script language="JavaScript" type="text/javascript">
<!--
var BGImgAry=new Array('ut1.png','ut2.png','ut3.png','ut4.png','ut5.png','ut6.png','ut7.png','ut8.png','ut9.png','ut10.png','ut11.png','ut12.png','ut13.png','ut14.png','ut15.png','ut16.png','ut17.png','ut18.png','ut19.png','ut20.png','ut21.png','ut22.png');
 function BBG(){
 R=Math.floor(Math.random()*10)%BGImgAry.length
 BG=document.getElementsByTagName('BODY')[0];
 BG.style.backgroundImage="url('http://shadmansamad.com/ning/"+BGImgAry[R]+"')";
 BG.style.backgroundPosition='0px 0px';
 BG.style.backgroundRepeat='no-repeat';
 BG.style.backgroundAttachment='fixed';
}
//-->
</script></head>

<body onload="BBG();" >
</body>

I am applying this JavaScript in a template for a CMS, it will apply the effect on all the pages. However there are a few directories (ex: homepage.com/profile/username/) which I don’t want this code to run.

How do I accomplish this? A friend of mine said I need to add a “if” condition to the script; but I don’t even know where to start. I am newbie. Can anyone show me? Please.

Another thing I am curious about is how do I tell the script to load a specific background hex color based on the image it shows? For example if the script choose ut01.png, and I want a specific background color assign to that. Then when you refresh the page and it loads another random image such as ut11.png---it will display another hex color based on ut11.png.

Stooshie · 04-30-2008, 10:06 AM

The easiest way is don't put the onload event into the body tag on pages you don't want the script to run.

With the background problem, create another array with the colours you want for each background e.g.

Code:

var BGColAry = new Array("#FFCC00", "#CCDDCC", ...);

then add the line

Code:

BG.style.backgroundColor = var BGColAry[R];

Abvex · 05-01-2008, 12:54 AM

Hey Stooshie

Thanks for the reply.

Unfortunately I cannot do this the easy way by taking out the onload event in the body tag. In my case I have no choice but to actually disable the js without messing with the body tag. Can you direct me to a harder method since I can't change the body tag.

And thanks a million for background color! Now I take it I have to input the color value in the same order as the background images? ex: so the 3rd hex color correspond with the 3rd background?

Stooshie · 05-01-2008, 10:11 AM

You would have to put an if statement, using window.location inside the BBG function.

Code:

function BBG()
{
	if(window.location.pathname.indexOf("pathnametolookfor", 0) != -1)
	{
		.
		... your code here ...
		.
	}
}

Yes, put the background colours at the same position in the array.

Abvex · 05-02-2008, 09:52 PM

I am surely doing something wrong here, this is my code so far, nothing works. I get a blank page.

I probably place the BGColAry wrong.

Also even without the BGColAry array (only the original code with the if statement) the page renders blank. Any ideas? or I am doing something wrong...

Code:

</head>
<body onload="BBG();" >
<script language="JavaScript" type="text/javascript">
function BBG()
{
	if(window.location.pathname.indexOf("http://sosreach.ning.com/profiles/", "http://sosreach.ning.com/xn/" 0) != -1)
	{
var BGImgAry=new Array('ut1.png','ut2.png','ut3.png','ut4.png','ut5.png','ut6.png','ut7.png','ut8.png','ut9.png','ut10.png','ut11.png','ut12.png','ut13.png',	'ut14.png','ut15.png','ut16.png','ut17.png','ut18.png','ut19.png','ut20.png','ut21.png','ut22.png');
 function BBG(){
 R=Math.floor(Math.random()*10)%BGImgAry.length
 BG=document.getElementsByTagName('BODY')[0];
 BG.style.backgroundImage="url('http://shadmansamad.com/ning/"+BGImgAry[R]+"')";
 BG.style.backgroundPosition='0px 0px';
 BG.style.backgroundRepeat='no-repeat';
 BG.style.backgroundAttachment='fixed';

var BGColAry = new Array("#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000","#CCCCCC", "#000000",);
BG=document.getElementsByTagName('BODY')[0];
BG.style.backgroundColor = var BGColAry[R];
	}
}
</script>

</body>

Arbitrator · 05-04-2008, 01:29 AM

Quote:

Originally Posted by Abvex

I am surely doing something wrong here, this is my code so far, nothing works.

You might want to use an error console of some sort to troubleshoot your code. Your script doesn’t appear to even be well‐formed; it looks like you’re missing a closing curly bracket and a comma between the parameters of the indexOf method, you have an extra comma at the end of the BGColAry array constructor, and I don’t think that the var keyword is allowed on the right side of an assignment operator. Also, you didn’t declare all of your variables or end all of your statements with a semicolon; neither of these two things are errors, but, in my opinion, they are bad practice. Note that I didn’t actually examine your script to see if it would work were those things fixed.

Quote:

Originally Posted by Abvex

Any ideas?

I wrote two scripts that do what you seem to be looking for. Hopefully, you’ll learn something from them. I haven’t actually tested the URI blacklisting parts of the scripts to see if they work, but I expect that they should.

Live HTML: http://www.jsgp.us/demos/cf138696-ba...andomizer.html
Live XHTML: http://www.jsgp.us/demos/cf138696-ba...ndomizer.xhtml

HTML

Code:

<!doctype html public "-//W3C//DTD HTML 4.01//EN">

<html lang="en-Latn">
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Demo for CodingForums.com Thread 138696 (HTML)</title>
		<meta name="Author" content="Patrick Garies">
		<meta name="Created" content="2008-05-03">
		<meta name="Revised" content="2008-05-03">
		<style type="text/css" media="all">
			* { margin: 0; padding: 0; }
			html, h1 { background: white; color: black; font: 16px/1.2 sans-serif; }
			h1 { opacity: 0.8; padding: 2em; font-weight: bolder; }
			a { color: black; }
		</style>
		<!--[if IE]>
			<style type="text/css" media="all">
				h1 { zoom: 1; filter: alpha(opacity=80); }
			</style>
		<![endif]-->
		
	</head>
	<body>

		<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=138696">CodingForums.com Thread 138696</a></h1>
		
		<!--[if !IE]>-->
		<script type="application/ecmascript">
			var d = document;
			function set_random_background() {
				var backgrounds = [
					["article_a.png", "#9a0000"],
					["article_b.png", "#001f82"],
					["article_c.png", "#ffb900"],
					["article_d.png", "#19d600"]
				];
				var index = Math.floor(Math.random() * backgrounds.length);
				var style_element = d.createElement("style");
				style_element.setAttribute("type", "text/css");
				style_element.setAttribute("media", "all");
				d.getElementsByTagName("head").item(0).appendChild(style_element);
				style_element.sheet.insertRule("html { background: " + backgrounds[index][1] + " url(\"" + backgrounds[index][0] + "\") center no-repeat fixed; }", 0);
			}
			(function verify_URI() {
				var ignore = false;
				var directory_blacklist = [
					"profile\/username\/",
					"profiles\/",
					"xn\/"
				];
				for (var i = 0; i < directory_blacklist.length; i++) {
					if (new RegExp("^http:\/\/www\.example\.org\/" + directory_blacklist[i]).test(d.URL)) {
						ignore = true;
					}
				}
				if (ignore === false) {
					set_random_background();
				}
			})();
		</script>
		<!--<![endif]-->
		
		<!--[if IE]>
			<script type="text/ecmascript">
				var d = document;
				function set_random_background() {
					var backgrounds = [
						["article_a.png", "#910000"],
						["article_b.png", "#001879"],
						["article_c.png", "#ffb300"],
						["article_d.png", "#13d100"]
					];
					var index = Math.floor(Math.random() * backgrounds.length);
					var style_element = d.createElement("style");
					style_element.setAttribute("type", "text/css");
					style_element.setAttribute("media", "all");
					d.getElementsByTagName("head").item(0).appendChild(style_element);
					style_element.styleSheet.addRule("html", "background: " + backgrounds[index][1] + " url(\"" + backgrounds[index][0] + "\") center no-repeat fixed;");
				}
				(function verify_URI() {
					var ignore = false;
					var directory_blacklist = [
						"profile\/username\/",
						"profiles\/",
						"xn\/"
					];
					for (var i = 0; i < directory_blacklist.length; i++) {
						if (new RegExp("^http:\/\/www\.example\.org\/" + directory_blacklist[i]).test(d.URL)) {
							ignore = true;
						}
					}
					if (ignore === false) {
						set_random_background();
					}
				})();
			</script>
		<![endif]-->

	</body>
</html>

XHTML

Code:

<?xml version="1.0" encoding="utf-8"?>

<html xml:lang="en-Latn" xmlns="http://www.w3.org/1999/xhtml">
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
		<title>Demo for CodingForums.com Thread 138696 (XHTML)</title>
		<meta name="Author" content="Patrick Garies"></meta>
		<meta name="Created" content="2008-05-03"></meta>
		<meta name="Revised" content="2008-05-03"></meta>
		<style type="text/css" media="all">
			* { margin: 0; padding: 0; }
			html, h1 { background: white; color: black; font: 16px/1.2 sans-serif; }
			h1 { opacity: 0.8; padding: 2em; font-weight: bolder; }
			a { color: black; }
		</style>
		
	</head>
	<body>

		<h1>Demo for <a href="http://www.codingforums.com/showthread.php?t=138696">CodingForums.com Thread 138696</a></h1>
		
		<script type="application/ecmascript">
			// <![CDATA[
			var d = document;
			var XHTML_ns = "http://www.w3.org/1999/xhtml";
			function set_random_background() {
				var backgrounds = [
					["article_a.png", "#9a0000"],
					["article_b.png", "#001f82"],
					["article_c.png", "#ffb900"],
					["article_d.png", "#19d600"]
				];
				var index = Math.floor(Math.random() * backgrounds.length);
				var style_element = d.createElementNS(XHTML_ns, "style");
				style_element.setAttributeNS(XHTML_ns, "type", "text/css");
				style_element.setAttributeNS(XHTML_ns, "media", "all");
				d.getElementsByTagNameNS(XHTML_ns, "head").item(0).appendChild(style_element);
				style_element.sheet.insertRule("html { background: " + backgrounds[index][1] + " url(\"" + backgrounds[index][0] + "\") center no-repeat fixed; }", 0);
			}
			(function verify_URI() {
				var ignore = false;
				var directory_blacklist = [
					"profile\/username\/",
					"profiles\/",
					"xn\/"
				];
				for (var i = 0; i < directory_blacklist.length; i++) {
					if (new RegExp("^http:\/\/www\.example\.org\/" + directory_blacklist[i]).test(d.URL)) {
						ignore = true;
					}
				}
				if (ignore === false) {
					set_random_background();
				}
			})();
			// ]]>
		</script>

	</body>
</html>

Abvex · 05-06-2008, 06:03 AM

Wow! thank you for taking the time and doing this. This is great, I am studying the script now.

brien · 10-26-2008, 01:44 AM

The XHTML script generates an error, can someone tell me how to fix it so it works, I would love to find a working XHTML script.

Arbitrator · 10-27-2008, 08:34 AM

Quote:

Originally Posted by brien

The XHTML script generates an error, can someone tell me how to fix it so it works, I would love to find a working XHTML script.

The script is not generating an error; that’s an XML well‐formedness error that you’re seeing. Unfortunately, my host is inserting malformed advertisement code into all of my pages that end with an *.xhtml file extension (despite the fact that I paid them to do otherwise).

Since this issue doesn’t affect pages with the PHP extension, I’ve simply changed the extension rather than go through the trouble of asking customer service to fix it. (I’ll get around to it eventually.) The new file locations are as follows:

Energy Recruitm · 10-31-2008, 10:31 PM

hi
After listening to Brendan talk about typing on the latest Open Web Podcast episode on ECMAScript Harmony it got me thinking again about optional typing.
It has always bugged me a little to think of type information in my nice clean dynamic languages (Ruby, JavaScript, Python, Perl, etc.).

Looking at even the simplest of code like this (taken from Mike Chamber’s XMPP server in ActionScript 3)
var room:Room = new Room(connection);
It irks me. Just work out that it is a room already won’t you? I know you can do it? You CAN do it. So, leave it out in this case.

Although the type information is optional, it seems that a lot of the code that I have seen in AS3 puts types in all over the place. I somewhat like the idea of using types when you really need them, such as for clear documentation of a core library, or some performance issue that you find is an issue (note: that becomes an issue, not one that is assumed!)

04-30-2008, 02:53 AM	PM User \| #1
Abvex New to the CF scene Join Date: Apr 2008 Posts: 8 Thanks: 4 Thanked 0 Times in 0 Posts	Advance dynamic background...my code needs a little tweaking Hello, I am stuck with a little problem here. I got this JavaScript code from googling, which basically change a sites background per page refresh. There are a couple of things I like to do to this code. Code: // JavaScript Document <script language="JavaScript" type="text/javascript"> <!-- var BGImgAry=new Array('ut1.png','ut2.png','ut3.png','ut4.png','ut5.png','ut6.png','ut7.png','ut8.png','ut9.png','ut10.png','ut11.png','ut12.png','ut13.png','ut14.png','ut15.png','ut16.png','ut17.png','ut18.png','ut19.png','ut20.png','ut21.png','ut22.png'); function BBG(){ R=Math.floor(Math.random()*10)%BGImgAry.length BG=document.getElementsByTagName('BODY')[0]; BG.style.backgroundImage="url('http://shadmansamad.com/ning/"+BGImgAry[R]+"')"; BG.style.backgroundPosition='0px 0px'; BG.style.backgroundRepeat='no-repeat'; BG.style.backgroundAttachment='fixed'; } //--> </script></head> <body onload="BBG();" > </body> I am applying this JavaScript in a template for a CMS, it will apply the effect on all the pages. However there are a few directories (ex: homepage.com/profile/username/) which I don’t want this code to run. How do I accomplish this? A friend of mine said I need to add a “if” condition to the script; but I don’t even know where to start. I am newbie. Can anyone show me? Please. Another thing I am curious about is how do I tell the script to load a specific background hex color based on the image it shows? For example if the script choose ut01.png, and I want a specific background color assign to that. Then when you refresh the page and it loads another random image such as ut11.png---it will display another hex color based on ut11.png.

04-30-2008, 10:06 AM	PM User \| #2
Stooshie Regular Coder Join Date: Mar 2008 Location: Dundee, Scotland Posts: 241 Thanks: 6 Thanked 28 Times in 28 Posts	The easiest way is don't put the onload event into the body tag on pages you don't want the script to run. With the background problem, create another array with the colours you want for each background e.g. Code: var BGColAry = new Array("#FFCC00", "#CCDDCC", ...); then add the line Code: BG.style.backgroundColor = var BGColAry[R]; __________________ Regards, Stooshie O

05-01-2008, 10:11 AM	PM User \| #4
Stooshie Regular Coder Join Date: Mar 2008 Location: Dundee, Scotland Posts: 241 Thanks: 6 Thanked 28 Times in 28 Posts	You would have to put an if statement, using window.location inside the BBG function. Code: function BBG() { if(window.location.pathname.indexOf("pathnametolookfor", 0) != -1) { . ... your code here ... . } } Yes, put the background colours at the same position in the array. __________________ Regards, Stooshie O

10-31-2008, 10:31 PM	PM User \| #10
Energy Recruitm New to the CF scene Join Date: Oct 2008 Location: pakistan Posts: 1 Thanks: 0 Thanked 0 Times in 0 Posts	Advance dynamic background...my code needs a little tweaking hi After listening to Brendan talk about typing on the latest Open Web Podcast episode on ECMAScript Harmony it got me thinking again about optional typing. It has always bugged me a little to think of type information in my nice clean dynamic languages (Ruby, JavaScript, Python, Perl, etc.). Looking at even the simplest of code like this (taken from Mike Chamber’s XMPP server in ActionScript 3) var room:Room = new Room(connection); It irks me. Just work out that it is a room already won’t you? I know you can do it? You CAN do it. So, leave it out in this case. Although the type information is optional, it seems that a lot of the code that I have seen in AS3 puts types in all over the place. I somewhat like the idea of using types when you really need them, such as for clear documentation of a core library, or some performance issue that you find is an issue (note: that becomes an issue, not one that is assumed!)

Thread Tools
Show Printable Version Email this Page
Rate This Thread
Rate This Thread:

05-01-2008, 12:54 AM	PM User \| #3
Abvex New to the CF scene Join Date: Apr 2008 Posts: 8 Thanks: 4 Thanked 0 Times in 0 Posts	Hey Stooshie Thanks for the reply. Unfortunately I cannot do this the easy way by taking out the onload event in the body tag. In my case I have no choice but to actually disable the js without messing with the body tag. Can you direct me to a harder method since I can't change the body tag. And thanks a million for background color! Now I take it I have to input the color value in the same order as the background images? ex: so the 3rd hex color correspond with the 3rd background?

05-06-2008, 06:03 AM	PM User \| #7
Abvex New to the CF scene Join Date: Apr 2008 Posts: 8 Thanks: 4 Thanked 0 Times in 0 Posts	Wow! thank you for taking the time and doing this. This is great, I am studying the script now.

10-26-2008, 01:44 AM	PM User \| #8
brien New to the CF scene Join Date: Sep 2008 Posts: 5 Thanks: 1 Thanked 0 Times in 0 Posts	The XHTML script generates an error, can someone tell me how to fix it so it works, I would love to find a working XHTML script.