JavaScript - Help With Click To Show Script

Hi,

I'm very new to coding Javascript, so have no idea what I'm doing, so sorry

What I'm trying to do is, on my Wordpress Blog I have a button/Image: Code:

src="http://Mysite.com/Images/Button.png"

I would like for when a user Clicks this Image/button, 2 things to happen - 1. For my Content Locker to pop up, I believe that i already have the correct code for that?:

Code:

onclick="var fileref=document.createElement('script');fileref.setAttribute('type','text/javascript'); fileref.setAttribute('src', 'http://MYCONTENTLOCKER.com/guid?:1234567890')

For this content locker to trigger, The whole action needs to have a ID e.g. 'ID="button1'?

And 2. For a timer to start for say 30 Seconds.

When that timer ends, i would like the original button/image to be replaced with a different button/image. And when that New button is clicked i would like a text string to appear below the button - saying something e.g. 'You've completed this part'

I know that this is a lot to ask, and I will be so very grateful if someone helps me out here!

Thanks!
Harry.

Hey all

I am not that much good in JS and J* kind of thigs ..
help me out on this ..
I am opening a Dhtmml poopup ,and it's having two buttons
say YES and NO

if user click on YES
(mysql table) field say Yes should increse
else if No
(mysql table) field No should increse

I hope understand the problem
bascically on onclick I m using "window.open "
a phpFile which is updating this all ..

but I dont want to do this with window.open


any help would be appreciated
Thanks
ayiamas

Hey everybody. I have this code that disables right clicking on a page. It works fine, but I'd like to tweak it a little bit if possible. When trying to right click on a page, the script will pop up an alert message. If you try right clicking a second time, you receive an option to disable the alert message. I want to disable this option so that the alert pops up every single time, but I have no idea how to actually do this. Can anybody help me out? Thanks.

Code:

<script type="text/javascript" language="javascript">
var message="ALERT MESSAGE";
function click(e)
{
  if (document.all)
  {
    if (event.button==1||event.button==2)
    {
      alert(message);
      return false;
    }
  }
  else
  {
    if (e.button==1||e.button==2)
    {
      e.preventDefault();
      e.stopPropagation();
      alert(message);
      return false;
    }
  }
}

if (document.all){
  document.onmousedown=click;
}
else{
  document.onclick=click;
}
</script>

What is best for creating a PTC script

Hi all,

I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml

It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard.

This is the code I currently have for the checkbox:
Code:

function playSound() {
    if (document.getElementById('sound').checked){
        -something needs to be added here to make it work?-
    }
}

Anyone have an idea how to make this work?

Many thanks

Hey there. I'm creating my web-site now. I'm planing to have some slide/object change by itself. I know Java Script perform this task. I have get the code and apply to the image I want. It works. My idea is each of my image upper left corner have the representative number of the slide. When the slide1 go to slide 2 automatically, the number will change colour from 1 to 2. When the user click the number, the slide will change according to the number. Let said I have 3 slide. Each slide and have no 1 ,2 ,3 move forward, move backward icon on the upper left corner. I have slide1 ,slide2, slide3 change by itself within 2.5 second. When the user go thru slide 1, slide 2 and till slide3, user find out he/she interested on slide 1 and by clicking 1 on the upper left corner, the slide will change back to slide 1. Something like showing on the home page at www.easyjet.com.EN or http://www.thomascook.com/ . Both home page show a slide. This is what exactly I want. I learn HTML code before but not Java Script. I have borrow many Java Script reference book. but no idea how to inside the number on the upper left corner on each slide and how the number work accordingly with the slide.

So sorry if you can't understand what I was talking about. But, anyone who understand me or have any idea how can I mortify the Java script to what I want. Just answer or email me to trista_soo@yahoo.com or facebook me on sym107@hotmail.com.

Thanks for your time and efforts. Your help I really appreciate. Cheers!

Hey everyone. I have a simple hide/show script that is doing what I want, but I was wondering if there is an easier way around having to specify show and hide requirements "onclick" each time. Here is what I've got:

Javascript:
Code:

<script type="text/javascript">
function show(boxid) {
   document.getElementById(boxid).style.display="block";
}

function hide(boxid) {
   document.getElementById(boxid).style.display="none";
}
</script>

HTML:
Code:

<body onload="hide('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); ">

<div id="homePoster1"><img src="img/posters/babystory.gif" width="419" height="419" /></div>
<div id="homePoster2"><img src="img/posters/converse.gif" width="419" height="419" /></div>
<div id="homePoster3"><img src="img/posters/cookingchannel.jpg" width="419" height="419" /></div>
<div id="homePoster4"><img src="img/posters/culturesofresistance.jpg" width="419" height="419" /></div>

<div class="filmDescAll">
    <h2>Film 1 title</h2>
    <div id = "filmDesc1">Film 1 description</div>
    <div class="more"><a href="#" onclick="show('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); hide('filmDesc4'); 
    show('homePoster1'); hide('homePoster2'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
    
<div class="filmDescAll">
    <h2>Film 2 title</h2>
    <div id="filmDesc2">Film 2 description</div>
    <div class="more"><a href="#" onclick="show('filmDesc2'); hide('filmDesc1'); hide('filmDesc3'); hide('filmDesc4'); 
    show('homePoster2'); hide('homePoster1'); hide('homePoster3'); hide('homePoster4');">+ more info</a></div>
</div>
    
<div class="filmDescAll">
    <h2>Film 3 title</h2>
    <div id="filmDesc3">Film 3 description</div>
    <div class="more"><a href="#" onclick="show('filmDesc3'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc4'); 
    show('homePoster3'); hide('homePoster1'); hide('homePoster2'); hide('homePoster4');">+ more info</a></div>
</div>
    
<div class="filmDescAll">
    <h2>Film 4 title</h2>
    <div id="filmDesc4">Film 4 description</div>
    <div class="more"><a href="#" onclick="show('filmDesc4'); hide('filmDesc1'); hide('filmDesc2'); hide('filmDesc3'); 
    show('homePoster4'); hide('homePoster1'); hide('homePoster2'); hide('homePoster3');"class="more4">+ more info</a></div>
</div>

Hello,

I have very little knowledge of javascript, other than modifying existing scripts, and I can't find anything about this particular problem. I need some help on creating a simple script that will display a div ONLY if the user comes from a certain page within the same site.

Not sure if that was clear, but let me try with specifics. There is a link to a page called 'Clients' on the 'About Us' page. If a user goes directly to 'Clients', they should have a normal experience. If, however, they come via the 'About Us' page, I want to display a div at the bottom of the page that will take them back to the 'About Us' page.

I know how to get a referrer, and I know how to show/hide divs. I just don't know how to combine the two. Can anyone help?

Hi, I'm trying to use the code from DHTMLGoodies' show/hide script, from he

http://www.dhtmlgoodies.com/index.ht..._content_slide

but I want to use it for two different classes in my HTML, as I have two sizes of header buttons (I have a taller button to cope with text that is too long to fit in one line, as it wraps around).

I have created the CSS styles as given on the website, but I have made a second style, to display the taller button, but I would like to know how to make the javascript work with it.

Currently I have:

Code:

/*********** DHTML_GOODIES SLIDING TEXT START ***********/
div#thincolumn .dhtmlgoodies_question, div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue.jpg) no-repeat top left;height: 32px;color:#FFFFFF;padding:8px 14px 0 14px;font:bold 1.1em Arial, sans-serif;overflow:hidden;cursor:pointer;}

div#thincolumn .dhtmlgoodies_question_big {background: url(images/thincolblue2.jpg) no-repeat top left;height:50px;}

div#thincolumn .dhtmlgoodies_answer{	/* Parent box of slide down content */
	/* Start layout CSS */
	width:150px;
	/* End layout CSS */
	
	visibility:hidden;
	height:0px;
	overflow:hidden;
	position:relative;

}
div#thincolumn .dhtmlgoodies_answer_content, .dhtmlgoodies_answer_content_big {	/* Content that is slided down */
	padding:1px;
	font-size:1em;	
	position:relative;
}
/*********** DHTML_GOODIES SLIDING TEXT END ***********/

(div#thincolumn is the column that I place the buttons in).

I added a new style, .dhtmlgoodies_question_big, to style the taller buttons, but I don't know how to change the Javascript so that it works on these divs as well as the normal, dhtmlgoodies_question divs.

Near the end of the Javascript it says:

Code:

if(divs[no].className=='dhtmlgoodies_question'){

Is it possible to put an "or" in there and have something like

Code:

if(divs[no].className=='dhtmlgoodies_question')or(divs[no].className=='dhtmlgoodies_question_big'){

Please forgive my ignorance, I am fine with CSS and HTML, but I have never used Javascript before, and searching for "Javascript" and "or" on Google obviously didn't produce the result I was looking for! I don't even know if it's possible to use "or" in Javascript.

I have tried duplicated the entire Javascript like this:

Code:

<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var dhtmlgoodies_slideSpeed = 60;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;

	if(!answerDiv.style.display || answerDiv.style.display=='none'){
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{

			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';

			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}
}

function slideContent(inputId,direction)
{

	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none';
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
			contentDiv.className='dhtmlgoodies_answer_content';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}
	}
}
window.onload = initShowHideDivs;




</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->

and


Code:

<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, November 2005

This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.

Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.

Thank you!

www.dhtmlgoodies.com
Alf Magne Kalleland

************************************************************************************************************/

var dhtmlgoodies_slideSpeed = 60;	// Higher value = faster
var dhtmlgoodies_timer = 10;	// Lower value = faster

var objectIdToSlideDown = false;
var dhtmlgoodies_activeId = false;
var dhtmlgoodies_slideInProgress = false;
function showHideContent(e,inputId)
{
	if(dhtmlgoodies_slideInProgress)return;
	dhtmlgoodies_slideInProgress = true;
	if(!inputId)inputId = this.id;
	inputId = inputId + '';
	var numericId = inputId.replace(/[^0-9]/g,'');
	var answerDiv = document.getElementById('dhtmlgoodies_a' + numericId);

	objectIdToSlideDown = false;

	if(!answerDiv.style.display || answerDiv.style.display=='none'){
		if(dhtmlgoodies_activeId &&  dhtmlgoodies_activeId!=numericId){
			objectIdToSlideDown = numericId;
			slideContent(dhtmlgoodies_activeId,(dhtmlgoodies_slideSpeed*-1));
		}else{

			answerDiv.style.display='block';
			answerDiv.style.visibility = 'visible';

			slideContent(numericId,dhtmlgoodies_slideSpeed);
		}
	}else{
		slideContent(numericId,(dhtmlgoodies_slideSpeed*-1));
		dhtmlgoodies_activeId = false;
	}
}

function slideContent(inputId,direction)
{

	var obj =document.getElementById('dhtmlgoodies_a' + inputId);
	var contentObj = document.getElementById('dhtmlgoodies_ac' + inputId);
	height = obj.clientHeight;
	if(height==0)height = obj.offsetHeight;
	height = height + direction;
	rerunFunction = true;
	if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	}
	if(height<=1){
		height = 1;
		rerunFunction = false;
	}

	obj.style.height = height + 'px';
	var topPos = height - contentObj.offsetHeight;
	if(topPos>0)topPos=0;
	contentObj.style.top = topPos + 'px';
	if(rerunFunction){
		setTimeout('slideContent(' + inputId + ',' + direction + ')',dhtmlgoodies_timer);
	}else{
		if(height<=1){
			obj.style.display='none';
			if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.display='block';
				document.getElementById('dhtmlgoodies_a' + objectIdToSlideDown).style.visibility='visible';
				slideContent(objectIdToSlideDown,dhtmlgoodies_slideSpeed);
			}else{
				dhtmlgoodies_slideInProgress = false;
			}
		}else{
			dhtmlgoodies_activeId = inputId;
			dhtmlgoodies_slideInProgress = false;
		}
	}
}



function initShowHideDivs()
{
	var divs = document.getElementsByTagName('DIV');
	var divCounter = 1;
	for(var no=0;no<divs.length;no++){
		if(divs[no].className=='dhtmlgoodies_question_big'){
			divs[no].onclick = showHideContent;
			divs[no].id = 'dhtmlgoodies_q'+divCounter;
			var answer = divs[no].nextSibling;
			while(answer && answer.tagName!='DIV'){
				answer = answer.nextSibling;
			}
			answer.id = 'dhtmlgoodies_a'+divCounter;
			contentDiv = answer.getElementsByTagName('DIV')[0];
			contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
			contentDiv.className='dhtmlgoodies_answer_content_big';
			contentDiv.id = 'dhtmlgoodies_ac' + divCounter;
			answer.style.display='none';
			answer.style.height='1px';
			divCounter++;
		}
	}
}
window.onload = initShowHideDivs;




</script>
<!-- END OF SLIDING TEXT JAVASCRIPT -->

but now it only works for the taller buttons (which the second piece of Javascript refer to). I think it might be possible to just use one instance of the original code, and some "or" operators, but I'm not sure.

Any help would be very much appreciated.

Greetings!

I'm not a huge javascript person, I barely know enough php to get by. I struggle and I learn. I have this page that take a while to load and I really don't want it to show the results in the browser before the php script finishes. So I was hoping that somebody could point me to a way to either give some sort of wait indicator (i.e. a bar, the trendy twrilling circle thingy) or just hide the everything till the page is completely loaded.

Below this sentence is the original post I left in the PHP forum.

Since the birth of CSS3 you can easily use fonts that are NOT on the local users PC. This is the best! Although some fonts do not render through the browser. I wrote this script (for personal use) which is pretty elementary which reads fonts in a directory (without installing them in windows) and then lets you display them in various web aspects.

In the script I pick a random background color and calculate a contrast color and then determine if the text color should be black or white depending on the color of the background.

What's happening is that if I pile a bunch of fonts in the fonts directory when the script executes it displays the contents until it 100% complete. Basically I'd like it NOT to do that. I was looking around a progress bars but .. they don't seem to do much. I couldn't find one that would either give you that twrilling circle while it loads or something to that nature.

**Is you test this script you MUST create a folder named 'fonts' in the root of where you put the script!

***If you find ways that I can make this more effecient or any tips or tricks that'd be great and constructive criticism is always appreciated!

Thanks so much for any help or advice given!

You'll need the javascript file animatedcollapse.js from my site http://handlersspot.net/css3font/animatedcollapse.js

There's are three images:
http://handlersspot.net/css3font/slantdivider.gif
http://handlersspot.net/css3font/minus.png
http://handlersspot.net/css3font/plus.png

I tried to post the source here but it seems that I used up my allotment of 20K characters I tried to use the attachments feature but it doesn't work for me for some reason so I posted all the source here on my website: http://handlersspot.net/css3font/source.html

Whew! That's allot of stuff!

Again .. thanks for the effort/advice/help way in advance!

Oh! Sorry! Meant to put the actual working version of this here --> http://handlersspot.net/css3font

Hi, I am new to javascript so any help would be much appreciated.

I found the following script online to show/hide a login div.

<script language="JavaScript" type="text/javascript">
function login(showhide){
if(showhide == "show"){
document.getElementById('popupbox').style.visibility="visible";
}else if(showhide == "hide"){
document.getElementById('popupbox').style.visibility="hidden";
}
}
</script>

It works really well but I have other div I would also like to show/hide. Is it possible to have a variable in the function that I could pass the name of the div to show/hide.

I have a ul list that I am using for a navigation menu and I would like to be able to click on items in the list to show different div's. I assume this is possible, so could someone please give me an indication of how to do it as I have been trying for a few days now and no joy.

Thanks, James

Helloo

Im new to javascript.. I need help badly... here are two tabless.
1. information of a friend.
2nd table i get when i click da image (ADD ANOTHER FRIEND)

but, on validation and submission.. the second table is not showing upp...

When i once click ADD FRIEND.. i want the table to show up on reload and validation....

Thanks

Here is my code

<?
if (isset($_POST['submit'])) {
if (!$frndname) {
$frndname_error = 1;
$problems=1;
}
if (!$frndcity) {
$frndcity_error = 1;
$problems=1;
}
///doo db stuff insertion

}

?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function showTable() {
var table = document.getElementById("myTable");
if (table)
table.style.display = "block";
var div = document.getElementById("frndimg");
if(div)
div.style.display = "none";



}
</script>
</head>

<body>
<form action="" method="POST" name="form1">
<?php if(!isset($_POST['submit']) or $problems) {


?>
<table>


<tr> <td colspan="2"> <table width="21%">
<tr> <td width="3%" align="left" valign="top">&nbsp;</td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="3%" align="left" valign="top">&nbsp;</td>
<td width="16%"><? if ($frndname_error) {

echo ("<font color='#FF0000'>Name:</font>");

} else {

echo ("Name:");

}?> <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frndname" id ="frndname" value="<?php echo $frndname; ?>" maxlength=45 size=25></td>
<td width="81%" colspan="3">City:
<b><font color="#FF0000">*</font></b><br><input type="text" id="frndcity" name="frndcity" value="<?php echo $frndcity; ?>" maxlength=45 size=25> </td>
</tr>



</table></td></tr>
<tr> <td width="4%" align="left" valign="top">&nbsp;</td> <td > <div style="float:left;cursorointer;">
<img src="images/referral_add_friend.jpg" width="190" height="28" onClick="showTable()" title="Click to add another friend" id="frndimg">
</div> </td></tr>


<tr> <td colspan="2">
<table width="100%" id="myTable" style="display:none;">
<tr> <td width="4%" align="left" valign="top">&nbsp;</td> <td colspan="2"> <b class="referralheading"> YOUR FRIEND'S INFORMATION: </b> </td></tr>
<tr>
<td width="4%" align="left" valign="top">&nbsp;</td>
<td width="53%"> NAme: <b><font color="#FF0000">*</font></b><br>
<input type="text" name="frnd1name" id ="frnd1name" value="<?php echo $frnd1name; ?>" maxlength=45 size=25></td>
<td width="47%" colspan="3">City:
<b></b><br><input type="text" id="frnd1city" name="frnd1city" value="<?php echo $frnd1city; ?>" maxlength=45 size=25> </td>
</tr>
<tr>
<td width="4%" align="left" valign="top">&nbsp;</td>
<td>Phone Number: <b></b><br>
<input type="text" name="frnd1phone" id ="frnd1phone" value="<?php echo $frnd1phone; ?>" maxlength=45 size=25></td>
<td colspan="3">Email: <br><input type="text" id="frnd1email" name="frnd1email" value="<?php echo $frnd1email; ?>" maxlength=45 size=25> </td>
</tr>
<tr><td>&nbsp; </td></tr>
</table>
</td></tr>

<tr> <td><input type="image" src="images/submit_referral.jpg" height="30" width="173" border="0" alt="Submit Form" value="submit"></td></tr>
<tr><td> </td><td align="center" class="referralheading"> Fields Marked With * Are Required</td></tr>
</table>
<? } ?>
</form>
</body>
</html>

I have been using the following script for some time and it has only just been made known to me that it fails on todays date ! not sure if this is the case for other days but the days of the week are all messed up and do not show correctly for a date in June 2011.


Code:

var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();

// Get Element By Id
function ds_getel(id) {
	return document.getElementById(id);
}

// Get the left and the top of the element.
function ds_getleft(el) {
	var tmp = el.offsetLeft;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetLeft;
		el = el.offsetParent;
	}
	return tmp;
}
function ds_gettop(el) {
	var tmp = el.offsetTop;
	el = el.offsetParent
	while(el) {
		tmp += el.offsetTop;
		el = el.offsetParent;
	}
	return tmp;
}

// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');

// Output Buffering
var ds_ob = ''; 
function ds_ob_clean() {
	ds_ob = '';
}
function ds_ob_flush() {
	ds_oe.innerHTML = ds_ob;
	ds_ob_clean();
}
function ds_echo(t) {
	ds_ob += t;
}

var ds_element; // Text Element...

var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.

var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.

// Calendar template
function ds_template_main_above(t) {
	return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
	     + '<tr>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_py();">&lt;&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();">&lt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">&gt;</td>'
		 + '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">&gt;&gt;</td>'
		 + '</tr>'
	     + '<tr>'
		 + '<td colspan="7" class="ds_head">' + t + '</td>'
		 + '</tr>'
		 + '<tr>';
}

function ds_template_day_row(t) {
	return '<td class="ds_subhead">' + t + '</td>';
	// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}

function ds_template_new_week() {
	return '</tr><tr>';
}

function ds_template_blank_cell(colspan) {
	return '<td colspan="' + colspan + '"></td>'
}

function ds_template_day(d, m, y) {
	return '<td class="ds_cell" onMouseout="this.style.background=\'#EEE\';" onMouseover="this.style.background=\'#999\';" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
	// Define width the day row.
}

function ds_template_main_below() {
	return '</tr>'
	     + '</table>';
}

// This one draws calendar...
function ds_draw_calendar(m, y) {
	// First clean the output buffer.
	ds_ob_clean();
	// Here we go, do the header
	ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
	for (i = 0; i < 7; i ++) {
		ds_echo (ds_template_day_row(ds_daynames[i]));
	}
	// Make a date object.
	var ds_dc_date = new Date();
	ds_dc_date.setMonth(m - 1);
	ds_dc_date.setFullYear(y);
	ds_dc_date.setDate(1);
	if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
		days = 31;
	} else if (m == 4 || m == 6 || m == 9 || m == 11) {
		days = 30;
	} else {
		days = (y % 4 == 0) ? 29 : 28;
	}
	var first_day = ds_dc_date.getDay();
	var first_loop = 1;
	// Start the first week
	ds_echo (ds_template_new_week());
	// If sunday is not the first day of the month, make a blank cell...
	if (first_day != 0) {
		ds_echo (ds_template_blank_cell(first_day));
	}
	var j = first_day;
	for (i = 0; i < days; i ++) {
		// Today is sunday, make a new week.
		// If this sunday is the first day of the month,
		// we've made a new row for you already.
		if (j == 0 && !first_loop) {
			// New week!!
			ds_echo (ds_template_new_week());
		}
		// Make a row of that day!
		ds_echo (ds_template_day(i + 1, m, y));
		// This is not first loop anymore...
		first_loop = 0;
		// What is the next day?
		j ++;
		j %= 7;
	}
	// Do the footer
	ds_echo (ds_template_main_below());
	// And let's display..
	ds_ob_flush();
	// Scroll it into view.
	//ds_ce.scrollIntoView();
}

// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
	// Set the element to set...
	ds_element = t;
	// Make a new date, and set the current month and year.
	var ds_sh_date = new Date();
	ds_c_month = ds_sh_date.getMonth() + 1;
	ds_c_year = ds_sh_date.getFullYear();
	// Draw the calendar
	ds_draw_calendar(ds_c_month, ds_c_year);
	// To change the position properly, we must show it first.
	ds_ce.style.display = '';
	// Move the calendar container!
	the_left = ds_getleft(t);
	the_top = ds_gettop(t) + t.offsetHeight;
	ds_ce.style.left = the_left + 'px';
	ds_ce.style.top = the_top + 'px';
	// Scroll it into view.
	//ds_ce.scrollIntoView();
}

// Hide the calendar.
function ds_hi() {
	ds_ce.style.display = 'none';
}

// Moves to the next month...
function ds_nm() {
	// Increase the current month.
	ds_c_month ++;
	// We have passed December, let's go to the next year.
	// Increase the current year, and set the current month to January.
	if (ds_c_month > 12) {
		ds_c_month = 1; 
		ds_c_year++;
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous month...
function ds_pm() {
	ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
	// We have passed January, let's go back to the previous year.
	// Decrease the current year, and set the current month to December.
	if (ds_c_month < 1) {
		ds_c_month = 12; 
		ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	}
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the next year...
function ds_ny() {
	// Increase the current year.
	ds_c_year++;
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Moves to the previous year...
function ds_py() {
	// Decrease the current year.
	ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
	// Redraw the calendar.
	ds_draw_calendar(ds_c_month, ds_c_year);
}

// Format the date to output.
function ds_format_date(d, m, y) {
	// 2 digits month.
	m2 = '00' + m;
	m2 = m2.substr(m2.length - 2);
	// 2 digits day.
	d2 = '00' + d;
	d2 = d2.substr(d2.length - 2);
	// YYYY-MM-DD
	return d2 + '-' + m2 + '-' + y;
}

// When the user clicks the day.
function ds_onclick(d, m, y) {
	// Hide the calendar.
	ds_hi();
	// Set the value of it, if we can.
	if (typeof(ds_element.value) != 'undefined') {
		ds_element.value = ds_format_date(d, m, y);

				// this part is a personal bit of code to allow my page to update correctly and in time.
				if("fireEvent" in ds_element)
					ds_element.fireEvent("onChange");
				else
				{
					var evt = document.createEvent("HTMLEvents");
					evt.initEvent("change", false, true);
					ds_element.dispatchEvent(evt);
				}
				//

	// Maybe we want to set the HTML in it.
	} else if (typeof(ds_element.innerHTML) != 'undefined') {
		ds_element.innerHTML = ds_format_date(d, m, y);
	// I don't know how should we display it, just alert it to user.
	} else {
		alert (ds_format_date(d, m, y));
	}
}

I found this script on a tutorial site but it had no summary of browser compatibility or any other issues. I know absolutely nothing about javascript and, although it works fine when I test it, I would appreciate it very much if someone else would review this page and give me feedback.

Code:

<head>
<script type="text/javascript">
lastone='empty'; 
function showIt(lyr) 
{ 
if (lastone!='empty') lastone.style.display='none'; 
lastone=document.getElementById(lyr); 
lastone.style.display='block';
}
</script>
</head>
<body>
<!--links-->
<a href="JavaScript:;" onClick="showIt('divID1')" ">link1</a>
<a href="JavaScript:;" onClick="showIt('divID2')" ">link2</a>
<a href="JavaScript:;" onClick="showIt('divID3')" ">link3</a>
<a href="JavaScript:;" onClick="showIt('divID4')" ">link4</a>
<!--layers-->
<div id="divID1" style="display:none;">content1</div>
<div id="divID2" style="display:none;">.content2</div>
<div id="divID3" style="display:none;">..content3</div>
<div id="divID4" style="display:none;">...content4</div>
</body>

Here is a demo of it in action:
http://www.mousegrey.com/layers.html

Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it...

is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors?