JavaScript - Javascript; Change Picture Based On Date

Why can I not change the initial picture from the menu?
If I remove the initial image, the menu works as needed.

However, when the initial image is used the script will not work.
I desperately need the help of a real JS Guru.

Frank

Sorry. Here it is.

Hi, I'm trying to get the pic to change when the mouse rolls over the button. I used this template of code and it works:

Code:

<A HREF="http://www.cnn.com" 
onMouseOver="document.pic1.src='menu1on.gif'"
onMouseOut="document.pic1.src='menu1off.gif'">
<IMG SRC="menu1off.gif" BORDER=0 NAME="pic1">
</a>

The problem occurs when I attempt to change a *second button* to have two buttons change on the same page. Here is how the code for two buttons looks side by side while it works:

Code:

	<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />

Here is the code after I add the javascript to two buttons. When I do this the buttons *do not* change (switch images), but do display one image properly on the site:

Code:

<a href="development.html">
		<img height="20" src="http://mywebsite.com/SIDE4H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a><br />
		<a href="exhibitions.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE5H2.png'"onMouseOut="document.pic1.src='SIDE5H.png'"><IMG SRC="http://mywebsite.com/SIDE5H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
<a href="careers.html">
		<A HREF="" onMouseOver="document.pic1.src='SIDE6H2.png'"onMouseOut="document.pic1.src='SIDE6H.png'"><IMG SRC="http://mywebsite.com/SIDE6H.png" BORDER=0 NAME="pic1" style="margin-top: 2px; margin-bottom: 2px"></a><br />
		<a href="contactus.html">
		<img height="20" src="http://mywebsite.com/SIDE7H.png" style="border-width: 0px; margin-top: 2px; margin-bottom: 2px" width="185" /></a></td>
		<td colspan="2" style="height: 148px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
		<td style="width: 148px; height: 148px">

Any ideas? I hope the code displays ok on your screen.

Hi,

I've inherited a Form which calculates a future date based on a calculation and then inserts today's date and the future date into a database. The day part of the date is formatted as a number. This is fine, but up to 9 the numbers display in single figures with no leading zeros. I want them to display leading zeros (e.g. 01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11... 30, 31)

So;
1/12/2010 is NOT wanted
01/12/2010 IS wanted

The inherited code originally set the Month names as "Jan", "Feb" etc, and it was easy to kludge these to 01, 02... 12, but I suspect there's a more elgant solution to this as well, this bit of the code works so it's not as vital to neaten this but my database needs dd/mm/yyyy format (it's a third party email program).

Code:

 </script>

<script type="text/javascript">
var todaysDate = new Date();

function updateExpiryDate(){

	var weeklyMileage = document.getElementById('AvWeeklyMileage').value;
	var expiryDate;
	var weeks = 0;
	var expiryDateString = '';

	if (!isNaN(parseInt(weeklyMileage))){
		weeks = 700/weeklyMileage;
		expiryDate = new Date(todaysDate.getTime() + (1000 * 3600 * 24 * 7 * weeks));

		var expiryDateString = expiryDate.getDate() + '/' + getMonthString(expiryDate.getMonth()+1) + '/' + expiryDate.getFullYear();

		document.getElementById('expiryDate').innerHTML = expiryDateString;
		document.getElementById('ShoeExpiryDate').value = expiryDateString;
	} else {
		document.getElementById('ShoeExpiryDate').value = '';
		document.getElementById('expiryDate').innerHTML = 'Please enter a valid weekly average mileage'
	}

}

function getMonthString(monthNumber){
	var monthString = "";
	switch(monthNumber){
		case 1:
			monthString = "01";
			break;
		case 2:
			monthString = "02";
			break;
		case 3:
			monthString = "03";
			break;
		case 4:
			monthString = "04";
			break;
		case 5:
			monthString = "05";
			break;
		case 6:
			monthString = "06";
			break;
		case 7:
			monthString = "07";
			break;
		case 8:
			monthString = "08";
			break;
		case 9:
			monthString = "09";
			break;
		case 10:
			monthString = "10";
			break;
		case 11:
			monthString = "11";
			break;
		case 12:
			monthString = "12";
			break;
		default:
			// do nothing;
	}
	return monthString;
}

function setTodaysDate(){
	var todaysDateString = todaysDate.getDate() + '/' + getMonthString(todaysDate.getMonth()+1) + '/' + todaysDate.getFullYear();
	document.getElementById('todaysDate').innerHTML =todaysDateString;
	document.getElementById('DateOfPurchase').value = todaysDateString;

}

Can someone point me in the right direction please?

Javascript novice here looking to create a dynamic dropdown based on date.
It's a list of preset prices that will change each month to reflect a pro-rated system. Any thoughts/examples on how I would go about setting this up using javascript would be much appreciated.
Thanks.

Here's what I need:

In September, the dropdown will display these prices
Code:

<option value="100">Product 1</option>
<option value="150">Product 2</option>
<option value="200">Product 3</option>

In October, the dropdown will display these prices
<option value="50">Product 1</option>
<option value="100">Product 2</option>
<option value="150">Product 3</option>

Hi guys. I am kind of new to javascript, and was hoping that someone here could help out on a problem I have been having.

What I am trying to do is to make a page which will redirect to three diffrent sites, based on date. I want it to change to diffrent sites during the time before summer to summer, the time before xmas till xmas and from before easter till easter.
A bit more spesific this would be:

From 29. march --> 22. july (summer)
From 22. august --> 24. december (xmas)
From 3. january --> 22. march (easter)

Could you help me out? I have tried lots of diffrent ways to do this with javascripts if...else statements, but I havent yet found a way to make it work properly.

Really thankful for answers!

I have this script that I got from some site. When you click on a link tied to a div it hides all other divs and displays just that one. Well, that works, but I want it to display one of the divs on page load based on today's date.

For example, it will display the "summer" div if today's date is anywhere between June 1 and August 31. When links to other divs are clicked that div will disappear and other ones will appear in its place. Anyway, here's the code, and I don't know anything about javascript so I have no idea where to even start editing it. Please help

Code:

<script type="text/javascript">
<!-- Layer Show/Hide Script
last=""
function changeDiv(the_div,the_change)
{
	var the_style = getStyleObject(the_div);
	
	if (the_style != false)
	{
		the_style.display = "block"
	
		if(last!="")
		{
			last.display = "none"
		}
	}
	
	last=the_style
}
	
function getStyleObject(objectId) 
{
	if (document.getElementById && document.getElementById(objectId)) 
	{
		return document.getElementById(objectId).style;
	} 
	
	else if (document.all && document.all(objectId)) 
	{
		return document.all(objectId).style;
	} 
	
	else 
	{
		return false;
	}
}

//-->
</script>

Hello all.
I have created a 2 frame site where I want the top frame (header) to redirect the other frame (main) to a different page depending on the date, time, and second.
For example, on 12 FEB at 07:00:00, I would like the header frame to redirect the main frames page to EmmasBday.html; in which I would be alerted of my little sisters Birthday.

This is for personal use and isn't going to be hosted online so I will just use JavaScript, it's basically a simple system to remind me of crucial events at certain times and dates so I don't forget them.
The same events will apply every year, so there is no need to programme in specific years although having the option could prove useful.
I am aware of other alternatives to achieve this, but would very much like to work with JavaScript; as I can expand it.

As I state, this is for personal use and therefore won't be hosting it; I will use JavaScript throughout and cannot use anything else like PHP, Perl, etc.
I am aware JavaScript takes the time & date from the computer hosting it (unlike PHP), which is fine.

So, for example; at 14:30:00 I will be informed to get dinner; and at 15:00:45 I'll be informed to study.

The knowledge you guys have presented so far is phenomenal, and I couldn't think of anybody better to ask for assistance.
Anyway, I hope you can resolve my problem and I'm looking forward to a response!

Thanks for your concern, you brain Gods you! AHa.

I am trying to change a character limit based on items changed in a drop down menu. To do this I have one function that will change the posted count based on the currently selected option and another function that is a commonly used char count with a few tweaks.

The main issue is getting the value of the currently selected option. I know that selectedIndex will return the position of the selected element rather than the actual value. I tried to code around that. I've tried every method I could find on google and nothing works. So, I may have a bigger problem on a higher level that I just don't understand. If any of you can take a look at my code and give me your thoughts I would be most appreciative. Thanks!

Code:

<!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" xml:lang="en" lang="en">
<head>
  <title></title>
 <script type="text/javascript"> 
function checkTextArea(fromto){

var textstring = "textarea";
var id = textstring + fromto;
var destination = document.forms["form1"].[id.selectedIndex].text;

if (destination=="1") {
var limit = "500";

}
else {
var limit = "1000";

}


     if (document.getElementById(id)){
         var txt = document.getElementById(id).value;
         if (txt.length>limit){
             document.getElementById(id).value = txt.substr(0,limit);
         }
         len = document.getElementById(id).value.length;
         span_id = "span" + id;
         if (document.getElementById(span_id)){
           document.getElementById(span_id).innerHTML = (limit-len);
         } // if
     } //if
} //function


function chardisplay(fromto) {

var deststring = "dest";
var identifier = deststring + fromto;

// no idea how to make this work...seems to stop working whenever I try to assign it to any kind of variable
// I have also tried assigning .value and .text
// I have also tried naming it with document.forms["form1"].[identifier.selectedIndex]
   // also using .value and .text
var harmless = document.getElementById('identifier').selectedIndex;
alert("value="+document.getElementById('identifier').value);
alert("text="+document.getElementById('identifier').options.[harmless].text);

var spanstring = "spantextarea";
var spanidentifier = spanstring + fromto;

if (harmless=="1") {
document.getElementById(spanidentifier).innerHTML = "500";
}

else {
document.getElementById(spanidentifier).innerHTML = "1000";
}

}
</script>
  
</head>
<body>

<form id="form1" name="form1" method="POST" action="myurl">

<p><span id="spantextareafrSOMENUMBER">500</span> characters left </p>

<select name="destfrSOMENUMBER" onchange="javascript:chardisplay('frSOMENUMBER');\" onfocusout="javascript:chardisplay('frSOMENUMBER');\" onblur="javascript:chardisplay('frSOMENUMBER');\">
<option value="opt1">display option 1</option>
<option value="opt2">display option 2</option>
<option value="opt3">display option 3</option>
</select>

<textarea onkeyup="checkTextArea('textareafrSOMENUMBER');" name="mesgfrSOMENUMBER" id="textareafrSOMENUMBER" cols=50 rows=4></textarea>
</form>
</table>
</body>
</html>

Hi Guys,

I am looking for a script to change text on a page based on the time of day. From 9am - 5pm weekdays I would like the page to display 'Open', and outside of that window to display 'Closed'. I am using HTML & PHP.

Any help would be greatly appreciated.

Thanks,
Matt

Hello, I am trying to change the value of #name and #category inputs based on the value of select. A friend gave me the code below, but I can't get it to work. Thanks so much for your help

Code:

     
<script type="text/javascript">  
$('#Gift_Type').change(function(){
if ($(this).val() == 'Monthly'){
$('#name').val('Partnership')
$('#category').val('Partnership')
} else {
$('#name').val('Donation')
$('#category').val('Donations')
}
})
</script>

Code:

<SELECT NAME="sub_frequency" ID="Gift_Type" onchange="OnSelectionChanged (this)">
<OPTION VALUE="1m">Monthly</OPTION>
<OPTION VALUE="">One Time</OPTION>
</SELECT>

Code:

<input type="text" id="name" name="name" value="Partnership" />
<input type="text" id="category" name="category" value="Partnership" />

I have a list of thumbnails generated by Wordpress. I've been trying to piece together a script that would change the ID of the parent element based on the image inside of it I can't seem to get anywhere, does anyone have a simple solution?

I need the id of the li to be "sm" or "smp" depending on the width of the image inside of it (landscape or portrait)

Code:

 <li class="frame" id="sm"> 
      <div class="frm" id="frame1">
	   <img src="image.jpg">
      </div>
</li>

Hello,
I've been trying to figure this script out for awhile and I've hit a wall. Basically, what I want to do for my organization's website is to use JS to display an image containing our hours and have it change each day of the week.

The hard part (for me) is that there are certain days we're closed. Ideally, I'd like a separate "We're Closed" message to overwrite the image carrying our hours on specific days (major holidays like Xmas, New Years, Vet's Day, furlough periods, etc. etc.).

Here's the code I've managed to cobble together (I have a real basic understanding of JS, so I've been pulling scripts from sites offering free copy/pastecode):

[CODE]
<script language="javascript">

mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
myday=mytime.getDay();
arday = new Array("sunday.png", "monday.png", "tuesday.png",
"wednesday.png", "thursday.png", "friday.png", "saturday.png");

document.write("<img src='" + arday[myday] + "'>");
if (mymonth==12 && mydate==24){document.write("<img src='closure.png'>");
}

</script>
[CODE]

For the most part, this code works just fine. However, if I jump my system clock to December 24, the "closure.png" comes up appears ALONGSIDE the hours image for that day of the week. In other words, I've got two images appearing right next to each other - that's not what I want.

How can I work the code in such a way that when a closure date comes up (in this case, 12/24), just the "closure.png" image shows up by itself?

Thank you all so much for your time and patience.

thanks anyway

Hi guys

I have a little problem. I have 2 textfields and I need to change a link href based on whatever is in those textfields.

The link has to be in this format:
Code:

<a class="display" href="test.php?test1=textfield1&test2=textfield2">test</a>

The reason for this is I need to launch fancybox and as far as im aware this is the best way to call it.

So what im hoping is when I add type something in textfield1 this will be reflected in the url. And same for textfield2. I know this can be done easily if I submit the page but I dont want that. Hopefully some javascript/ajax can help me out?

I hope im being clear but let me know if im not.

Thanks so much!