JavaScript - Make Traffic Light Change Colours Based On Dates

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!

I'm new to coding and recently undertook the position as my school district's webmaster. We use a six day schedule where the days are labeled A-F. I want to be able to display the Today is...A graphic based on the date. I tried some scripts from other forums, but it does not appear to be working. Any suggestions? TY
<code>
<script language="javascript">
<!--
var picture='';
mytime=new Date();
mymonth=mytime.getMonth()+1;
mydate=mytime.getDate();
if (mymonth==9 && mydate==13){picture="<img src=/images/d.gif>";
}
if (mymonth==9 && mydate==14){picture="<img src=/images/e.gif width=150 height=150 alt=E>";
}
if (mymonth==9 && mydate==15){picture="<img src=/images/f.gif width=150 height=150 alt=F>";
}
if (mymonth==9 && mydate==16){picture="<img src=/images/A.gif width=150 height=150 alt=A>";
}
if (mymonth==9 && mydate==19){picture="<img src=/images/B.gif width=150 height=150 alt=B>";
}
if (mymonth==9 && mydate==20){picture="<img src=/images/c.gif width=150 height=150 alt=C>";
}
//-->
</script></code>

thanks anyway

Hello, I just joined the forum. I'm hoping someone could help me out or point me in the right direction.

I am trying to set up a simple interaction for users. The user would be required to select a width then height from two separate drop down menus. I used this as an example to work from: http://www.w3.org/TR/WCAG20-TECHS/wo...dynselect.html

The list of heights would not be available until the user selects a width.(similar to the example link above). Each width would have slightly different heights associated with it. After the user selects a width then height an image would be displayed based on that combination. So for example if the user selects 12w/30h they would see "01.jpg" if the user selects 12w/36h they would see "02.jpg". This would all be done on the same page. The user should be able to update the image by combining the different width/height options indefinitely.

If anyone has a link to an example or can provide a basic structure I could build of off I would be extremely grateful, thanks.

Hi All,

I have a form that captures member registration details. In the admin section .. I would like to change the Status field of a record/s from NEW to PAYMENT DUE after 14 days from the data of submission. The status change should automatically trigger on the 15th day. So when the admin checks the list page he/she should be able to view the updated status field.

Any pointers how to accomplish this?

Thanks in advance.

Vinny

Hi friends,
What I have been trying to achieve is,

On my index.htm, I have a horizontal cell named "memberarea" which originally shows username & password input fields. After the user logs in, this area changes itself to a "Welcome Name, Lastname" field.

I want that this cell displays again the username and password input fields in case of the session of the user has expired.

I have tried it with the following code (within the Iframe in index.htm):
-----------------------------------------

<script>
if ("<%=session("LoginFirstName")%>" == "")
{
var m = " <p align="center">
<font style="font-size: 8pt; font-weight: 700" face="arial">&nbsp;&nbsp;Username:</font>
<span style="font-size: 1pt">
<input type="text" name="uid" id="uid" size="14" style="width: 65; height: 17; font-size: 8pt"></span><font face="arial" style="font-size: 8pt">
</font><font style="font-size: 8pt; font-weight: 700" face="arial">Password:</font><font face="arial" style="font-size: 8pt">
</font><span style="font-size: 1pt">
<input type="password" name="pwd" id="pwd" maxlength="10" size="14" style="width: 65; height: 17; font-size: 8pt"></span><span style="font-size: 1px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span>
<input type="submit" value="Enter" name="B1" style="width: 35; height: 17; font-size:9px" onclick="return login()">";

window.parent.document.getElementById('memberarea').innerHTML=m;
}
</script>
--------------------------------------------------

This code gives me the error that on the 12xx'the line (which does not exist-the whole code is 5xx lines). there is a ";" missing which I could not found.

Any ideas how to achieve this?

Thank you for your comments

Hi, what would be the best way to have a hidden array of possible text directed at a textarea and then if something is not within that array "onfocus", a certain select option is chosen within that form?

Thanks

I asked a question a while ago about this box that changes content but i didn't say i wanted it to start automatically.

Code:

  <script type="text/javascript">
// The stuff the box will say
var content = [
"<a href='www.url.com'> link 1 </a>",
"<a href='www.url2.com'> link 2 </a>",
"insert html content"
];
var msgPtr = 0;
var stopAction = null;
function change() {
var newMsg = content[msgPtr];
document.getElementById('change').innerHTML = ''+msgPtr+'<p>'+newMsg;
msgPtr++; msgPtr = (msgPtr % content.length);
}
function startFunction() { change(); stopAction = setInterval(change, 5000); }
function stopFunction() { clearInterval(stopAction); }
  </script>
</head>
<body>
<button onclick="startFunction()">Start</button>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button
 onclick="stopFunction()">Stop</button>
<div id="change"
 style="border: 5px solid rgb(136, 136, 136); width: 200px; height: 100px; background-color: rgb(221, 221, 221); color: white;"></div>
</body>

Could someone make this so that it starts automatically when the page loads? Like with a time out?

Hi firstly, Hi im new and i know very little Javascript. i know a little html/css.

I want to have javascript use an array and show a quote on a website for one week and then change to another quote a week later, say every Monday it changes? I have 52 quotes for the year. Im not sure how to write it up? Someone helped me with this but this way just changes random when the page is refreshes. not really what I want.

<script type="text/javascript">
verses =
[
"quote 1",
"quote 2",
"quote 3",
"quote 4",
"quote 5",
]
var keyword = verses[Math.floor(Math.random()*verses.length)]

document.write(keyword);
</script>

thanks

Im doing a project for college and on my website im trying to install lightbox on this page

www.corkbouncingcastles.com/castles.html

Can anyone help me out?

in the image.xml file i have this code..

do i need to change the part where it says target="_self" ??

PHP Code:
<photo image="images/small/02.jpg" bigimage="images/big/02.jpg" url="javascript:GroupDelegate('img2')" target="_self" lightboxInfo="Optional description for image 2"><![CDATA[Super Slide Bouncing Castle]]></photo> 

Hello

I have a primitive Web page he

http://stevehigham59.7host.com/final...u//index4.html

At the very bottom there is a blue link labelled 'Demo' which, when clicked loads a light-box. The script behind this 'Demo' link is simply:

Code:

<div id="contact-form">
       <a class="contact" href="#">Demo</a></div>

This references a JS file (contact.js) which I am pasting below this message.

What I would like to do is load the light-box into a simple list (the menu tab) which appears on the same page as the URL I have posted above.

The script behind the menu tab was something like:

<li><a href="http://www.mysite.com">Contact</a></li>

but I changed it to:

<li><a class="contact" href="#">Contact</a></li>

This didn't work because it is not speaking to the JS file (I presume).

How can I achieve what I am after, please?

Thanks.

Steve

contact.js

Code:

$(document).ready(function () {
	$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
		e.preventDefault();
		// load the contact form using ajax
		$.get("data/contact.php", function(data){
			// create a modal dialog with the data
			$(data).modal({
				closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
				position: ["15%",],
				overlayId: 'contact-overlay',
				containerId: 'contact-container',
				onOpen: contact.open,
				onShow: contact.show,
				onClose: contact.close
			});
		});
	});

	// preload images
	var img = ['cancel.png', 'form_bottom.gif', 'form_top.gif', 'loading.gif', 'send.png'];
	$(img).each(function () {
		var i = new Image();
		i.src = 'img/contact/' + this;
	});
});

var contact = {
	message: null,
	open: function (dialog) {
		// add padding to the buttons in firefox/mozilla
		if ($.browser.mozilla) {
			$('#contact-container .contact-button').css({
				'padding-bottom': '2px'
			});
		}
		// input field font size
		if ($.browser.safari) {
			$('#contact-container .contact-input').css({
				'font-size': '.9em'
			});
		}

		// dynamically determine height
		var h = 280;
		if ($('#contact-subject').length) {
			h += 26;
		}
		if ($('#contact-cc').length) {
			h += 22;
		}

		var title = $('#contact-container .contact-title').html();
		$('#contact-container .contact-title').html('Loading...');
		dialog.overlay.fadeIn(200, function () {
			dialog.container.fadeIn(200, function () {
				dialog.data.fadeIn(200, function () {
					$('#contact-container .contact-content').animate({
						height: h
					}, function () {
						$('#contact-container .contact-title').html(title);
						$('#contact-container form').fadeIn(200, function () {
							$('#contact-container #contact-name').focus();

							$('#contact-container .contact-cc').click(function () {
								var cc = $('#contact-container #contact-cc');
								cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
							});

							// fix png's for IE 6
							if ($.browser.msie && $.browser.version < 7) {
								$('#contact-container .contact-button').each(function () {
									if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
										var src = RegExp.$1;
										$(this).css({
											backgroundImage: 'none',
											filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +  src + '", sizingMethod="crop")'
										});
									}
								});
							}
						});
					});
				});
			});
		});
	},
	show: function (dialog) {
		$('#contact-container .contact-send').click(function (e) {
			e.preventDefault();
			// validate form
			if (contact.validate()) {
				var msg = $('#contact-container .contact-message');
				msg.fadeOut(function () {
					msg.removeClass('contact-error').empty();
				});
				$('#contact-container .contact-title').html('Sending...');
				$('#contact-container form').fadeOut(200);
				$('#contact-container .contact-content').animate({
					height: '80px'
				}, function () {
					$('#contact-container .contact-loading').fadeIn(200, function () {
						$.ajax({
							url: 'data/contact.php',
							data: $('#contact-container form').serialize() + '&action=send',
							type: 'post',
							cache: false,
							dataType: 'html',
							success: function (data) {
								$('#contact-container .contact-loading').fadeOut(200, function () {
									$('#contact-container .contact-title').html('Thank you!');
									msg.html(data).fadeIn(200);
								});
							},
							error: contact.error
						});
					});
				});
			}
			else {
				if ($('#contact-container .contact-message:visible').length > 0) {
					var msg = $('#contact-container .contact-message div');
					msg.fadeOut(200, function () {
						msg.empty();
						contact.showError();
						msg.fadeIn(200);
					});
				}
				else {
					$('#contact-container .contact-message').animate({
						height: '30px'
					}, contact.showError);
				}
				
			}
		});
	},
	close: function (dialog) {
		$('#contact-container .contact-message').fadeOut();
		$('#contact-container .contact-title').html('Goodbye...');
		$('#contact-container form').fadeOut(200);
		$('#contact-container .contact-content').animate({
			height: 40
		}, function () {
			dialog.data.fadeOut(200, function () {
				dialog.container.fadeOut(200, function () {
					dialog.overlay.fadeOut(200, function () {
						$.modal.close();
					});
				});
			});
		});
	},
	error: function (xhr) {
		alert(xhr.statusText);
	},
	validate: function () {
		contact.message = '';
		if (!$('#contact-container #contact-name').val()) {
			contact.message += 'Name is required. ';
		}

		var email = $('#contact-container #contact-email').val();
		if (!email) {
			contact.message += 'Email is required. ';
		}
		else {
			if (!contact.validateEmail(email)) {
				contact.message += 'Email is invalid. ';
			}
		}

		if (!$('#contact-container #contact-message').val()) {
			contact.message += 'Message is required.';
		}

		if (contact.message.length > 0) {
			return false;
		}
		else {
			return true;
		}
	},
	validateEmail: function (email) {
		var at = email.lastIndexOf("@");

		// Make sure the at (@) sybmol exists and  
		// it is not the first or last character
		if (at < 1 || (at + 1) === email.length)
			return false;

		// Make sure there aren't multiple periods together
		if (/(\.{2,})/.test(email))
			return false;

		// Break up the local and domain portions
		var local = email.substring(0, at);
		var domain = email.substring(at + 1);

		// Check lengths
		if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
			return false;

		// Make sure local and domain don't start with or end with a period
		if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
			return false;

		// Check for quoted-string addresses
		// Since almost anything is allowed in a quoted-string address,
		// we're just going to let them go through
		if (!/^"(.+)"$/.test(local)) {
			// It's a dot-string address...check for valid characters
			if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
				return false;
		}

		// Make sure domain contains only valid characters and at least one period
		if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
			return false;	

		return true;
	},
	showError: function () {
		$('#contact-container .contact-message')
			.html($('<div class="contact-error"></div>').append(contact.message))
			.fadeIn(200);
	}
};

Hi,

I need some advice.

I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour.

There will always be a set sequence of the same sections lighting up with the same colours.
So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16.


How would i go about doing this?

Is using Javascript the best thing to use?

Any advice would be greatly appreciated.

Thanks.

I'm wondering if theirs a way to make a dim light, sorta like a candle follow my mouse cursor on a webpage?

I'm helping out my friend complete her site.
check it out he http://themodline.com/clients/jcevent

when you head over to the portfolio section the the lightbox script doesnt work properly. but if you just go to http://themodline.com/clients/jcevent/portfolio.html -it works fine.

are the scripts mixing up?
i made sure i got the correct codes. i made sure the script files are correctly linked.

check out my scripts. they are zipped he http://www.themodline.com/clients/jcevent/scripts.zip


thanks for the help guys. hope this makes sense!