situational Javascript based on body ID

Posted by: atom, 2008 03.03

I know that this is not anything revolutionary or anything, but I found it very helpful when making this site, so I thought I would share.

By assigning the body element an ID, you can check it with Javascript, and then execute what you need to based on this condition, like so(wordpress example):

Some php, for the Wordpress template (in header.php):

code!

<?php
 
if(is_home()) //if we are at the wordpress "home"
	$location = 'home';
elseif(is_single() || is_page()) // if it is a single post or page
	$location = 'single';
elseif(is_some_strange_situation()) // a user function that test for something strange
	$location = 'strange';
else // otherwise, nothing special
	$location = 'default';
 
?>
<body id="<?php echo $location ?>">

Then some Javascript:

code!

<script type="text/javascript">
	switch(document.body.id){
		case 'home':
			runAtHomeOnly();
			break;
		case 'single':
			runOnSingleOnly();
			break;
		case 'strange':
			runOnStrangeOnly();
		default:
			runOtherwise();
			break;
	}
	runThisAlways();
 
	function runAtHomeOnly(){
		alert('You are home.');
	}
 
	function runOnSingleOnly(){
		alert('You are on a single post or page.');
	}
 
	function runOnStrangeOnly(){
		alert('You are somewhere strange.');
	}
 
	function runOtherwise(){
		alert('You are not home, at a single post or page, and you are not somewhere strange.');
	}
 
	function runThisAlways(){
		alert('I always run.');
	}
</script>

The example is a little verbose I know, but wanted to make sure my point was gotten ;-)

addthis

trackback

Tags: , ,

Leave a Reply

ok to use:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

bonus!

If you want to post code, you can use:

<pre lang="[language]">[code]</pre>

Where [language] is a valid geshi language type, and where [code] is your code.