JavaScript - Changing Body Class Based On User's Local Time

hi,

can some one help me how to get the time and date difference? given two time and date with the following format like in textbox A: 2011-05-03 17:35:47.0 and textbox B: 2011-05-03 16:35:47.0 then the output would be: 0 days, 1 hour, 0 minutes, 0 seconds

regards,
verve

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!

Hi guy not the greatest with javascript i use it now and then.

so far i have this code working correctly. Currently on mouse-over its changes the img background of imgholder.

this is the HTML
Code:

<div id="imgholder">
                </div>
            	<div id="myController2">
                           <span class="jFlowControl2">No 1 </span>
                           <span class="jFlowControl2">No 2 </span>
                        </div>
                        <div id="mySlides2">
                           <div>
                           		<a onmouseover="changeImg(this, 'img2.jpg');" class="vm" href="vulnerabiliy.htm" title="Vulnerability Management"></a>
                                <a onmouseover="changeImg(this, 'img3.jpg');" class="grc" href="it_grc.htm" title="IT Governance, Risk and Compliance"></a>
                                <a onmouseover="changeImg(this, 'img4.jpg');" class="pci" href="pci.htm" title="Payment Card Industry Data Security Standard"></a>
                                <a onmouseover="changeImg(this, 'img5.jpg');" class="gcs" href="gcs.htm" title="Government Connect Code of Connection"></a>
                                <a onmouseover="changeImg(this, 'img1.jpg');" class="pt" href="penetration.htm" title="Penetration Testing"> </a>
                                <a onmouseover="changeImg(this, 'img6.jpg');" class="as" href="application.htm" title="Application Security"> </a>
                                <!--span class="jFlowNext2  NextFlash">&nbsp;</span-->
                           </div>
                           <div>
                           		
                               <!--span class="jFlowPrev2 BackFlash">&nbsp;</span-->
                           </div>
                    	</div>
            	</div>

This is the script
Code:

<script language="javascript" type="text/javascript" src="inc/js/changeImg.js"></script>
function changeImg(e, imgName)
	{ 
		URL_prefix = 'http://www.website.co.uk/surecloud';
		// set image url
		image_url = new Array();
		image_url[0] = URL_prefix+"/images/img1.jpg";
		image_url[1] = URL_prefix+"/images/img2.jpg";
		image_url[2] = URL_prefix+"/images/img3.jpg";
		image_url[3] = URL_prefix+"/images/img4.jpg";
		image_url[4] = URL_prefix+"/images/img5.jpg";
		image_url[5] = URL_prefix+"/images/img6.jpg";
		
		preload_image_object = new Array();
			for(var i = 0; i < image_url.length; i++)
				{
				preload_image_object[i] = new Image();
				preload_image_object[i].src = image_url[i];
				}

	document.getElementById('imgholder') .style.background="transparent url('images/" + imgName + "') no-repeat";
	}

currenly if you hover over any of the <a> a css class is applied

css code
Code:

#flash a.grc:hover {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../../images/animated_nav.gif) no-repeat scroll -148px -59px;
}

what i need to do is keep this class applied over the last <a> that is hovered.

so what i would like to do is change the class of the last <a> hover so it stays active until another one is hovered.

does this make sense? any help or guidance would be appreciated

Hi everyone.
I am unfortunately stuck, and must admit myself defeated by my inferior javascript knowledge.

I would really love some sort of javascript observer to automatically add/remove a class to the labels on my page, depending on wether their checkboxes are checked or not. As well as adding those same CSS-classes to the checkboxes already checked on document load.

This would be possible in javascript, wouldn't it?

Hi, I'm working on a site that has a sky as the background, the idea is that the background image will change according the the time of day... Sunrise, day, sunset, night...

I have been using this code...

<!-- JavaScript -->
<script language="JavaScript">
var d = new Date()
var h = d.getHours()
//
if (h < 6) document.write('<body background="sky.jpg" bgcolor="white">')
else if (h < 12) document.write('<body background="day.jpg" bgcolor="white">')
else if (h < 18) document.write('<body background="day.jpg" bgcolor="white">')
else if (h < 24) document.write('<body background="night.jpg" bgcolor="white">')
</script>

This works fine for most hours but when in the hours of 5, 12, 18 and 24 the screen is blank (white background no image) any ideas why this might be happening?

Thanks for any ideas in advance!

Hi,

Is there anyone who could help me figure out how to Change a Hidden Fields Name based on selected option. The hidden fields name is sent off and I need to change the name depending on what option they select.
For if they select MyList the hidden field name needs to be SelectLists[40] or if they select testlist the hidden field name needs to be SelectLists[41].

This is probably way, way off but I've done this and it doesn't work.

Any help would be greatly appreciated, thanks.


<script language="JavaScript">
function changelist() {
//here we assign the value of the hidden input to x
x=eval(document.getElementByName("SelectLists[40]");

if(document.getElementById("SelectLists[40]").selected=true
x=SelectLists[40]

else(document.getElementById("SelectLists[41]").selected=true
x=SelectLists[41]

else(document.getElementById("SelectLists[42]").selected=true
x=SelectLists[42]

//now we assign the new value to the input
document.getElementById("theHiddenInput").name=x;

//and now we test
alert(document.getElementById("theHiddenInput").name)


}
</script>





<input type="hidden" id="theHiddenInput" name="SelectLists[40]" value="Yes">
<select class="inpBox" style="width: 287px" name='mailinglist' id="lists" onchange="changelist()">
<option value="SelectLists[40]" name="SelectLists[40]" id="SelectLists[40]">MyList</option>
<option value="SelectLists[41]" name="SelectLists[41]" id="SelectLists[41]">testlist</option>
<option value="SelectLists[42]" name="SelectLists[42]" id="SelectLists[42]">testlist2</option>

Hi all,

I currently have this javascript that will change the cell to green with one click...

Code:

<script type="text/javascript">
    	function ColorChange(obj){
			obj.style.color='#FFFFFF';
			obj.style.backgroundColor='#66CC33';
			obj.parentNode.style.backgroundColor='#66CC33';
		}
    </script>

echo "<td align=\"center\" bgcolor=\"#EEEEEE\"><a href=\"#\" onclick=\"ColorChange(this)\">$day_num</a></td>";

the problem is that I need around 3 different colors to be possible..

e.g. 1 click turns cell green | 2 turns is red | 3 turns it orange.

I'm not sure how to take this javascript further?

Would someone be kind enough to point me in the right direction?

Many thanks,

Greens85

I have a site where users enter there certain timezome (+1, +4, -8 etc) and i want to display a clock with the local time on their profile page so when people view there profile they can see currently what time it is for them.

I currently a have this.

Code:

function timeclock()
{
var t=setTimeout("startclock()",500);
}

function startclock()
{

var x = new Date();
var hour = x.getHours();
var min = x.getMinutes();
var sec = x.getSeconds();
	if (hour<10){hour="0"+hour}
	if (min<10){min="0"+min}
	if (sec<10){sec="0"+sec}
document.getElementById("clock").innerHTML=hour+":"+min+":"+sec;
timeclock();
}

Is it possible to alter the date dependent on the timezone? Maybe put startclock(timezone) andchange it to new Date(timezone);?

Hello, I would like to learn if there is way to change a different format every time the user want as example is
Code:

London 12:00:33 - Friday 18/03/2011

Thanks

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

thanks anyway

Hi, I am a complete beginner at Javascript(started a few days ago) and was having trouble with some functions. I'm trying to get the inputs required to change based on an option selected in a drop down menu. I was intending to run different scripts based on whatever is chosen but when I ran a test using an alert function, I realized my code isn't working. I went online and found really confusing stuff like "running a for loop through an array to make a dynamic select feature". Still confused any help would be appreciated.
My code thus far:
<html>

<head>

<title>Practice</title>
<script language="javascript">
function myScript()
{
var loanType = document.form1.loan.options.text
if (loanType == "Bank A")
{
alert("Working")
}

}

</script>

</head>

<body>
<form name="form1">
<select id="loan" name="loan" onchange="myScript">
<option></option>
<option>Bank A</option>
<Option>Bank B</Option>
</select>
</form>
</body>
</html>





Reply With Quote




01-08-2015, 10:52 AM #2
Primus View Profile View Forum Posts

New Coder Join Date Oct 2014 Posts 92 Thanks 0 Thanked 14 Times in 14 Posts

Code:

<script>
    function myScript()
	{
		var selectedIndex = document.form1.elements.loan.options.selectedIndex; // returns 0-2 in this case
		var loanType = document.form1.elements.loan.options[selectedIndex].value; // returns the value of the selected item
		if (loanType == "Bank A")
		{
			alert("Working")
		}

	}	
</script>
<form name="form1">
<select id="loan" name="loan" onchange="myScript()">
<option></option>
<option>Bank A</option>
<option>Bank B</option>
</select>
</form>

Maybe not the best way, but it does the trick.





Reply With Quote

01-08-2015, 11:43 AM #3
Philip M View Profile View Forum Posts

Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts

You have quite a lot of obsolete code:-

1) It is obsolete to assign a name to a form and permitted only for the sake of backwards compatibility.
2) <script language=javascript> is long deprecated and obsolete. Use <script type = "text/javascript"> instead (in fact also deprecated but still necessary for IE<9).
3) Scripts should normally be placed right in front of the </body> tag. Any script can optionally go in the head if you wrap it inside a load event listener so that it can't run before the page loads.
4) Use the value of a select box option, not the text.
5) It is recommended that you place the opening brace following the function, if, else, for, while, do, switch, and try statements on the same line and not on the following line. Apart from that every Javascript statement should be followed by a semi-colon (;). It is quite possible to disregard this advice, but if you do one day it will rise up and bite you in the undercarriage.


Code:

<html>
 <head>
 <title>Practice</title>
 </head>

 <body>
 <form>
 <select id="loan" name="loan" onchange="myScript()">
 <option value = "">Chosoe...</option>
 <option value = "Bank A">Bank A</option>
 <Option value = "Bank B">Bank B</Option>
 </select>
 </form>

<script type = "text/javascript">

 function myScript()  {
 var loanType = document.getElementById("loan").value;
 if (loanType == "Bank A")  {
 alert("Working")
 }
 }

 </script>

 </body>
 </html>

If you really want to use the option text ...

Code:

<html>
 <head>
 <title>Practice</title>
 </head>

 <body>
 <form>
 <select id="loan" name="loan" onchange="myScript(this)">
 <option value = "">Choose...</option>
 <option value = "Bank A">Bank A</option>
 <Option value = "Bank B">Bank B</Option>
 </select>
 </form>

<script type = "text/javascript">

function myScript(element)  {
var loanType = element.options[ element.selectedIndex ].text;
if (loanType == "Bank A")  {
alert("Working")
}
}

 </script>

 </body>
 </html>

The Warrington players can hang their heads high. - Commentator, BBC Radio 2

I am looking to change a flash movie based on the time of day. Basicaly I need it to switch between a day/night version of the flash.

I have this piece of code and want to know how to call the day.swf, night.swf in the flash object section where i have written 'WHAT DO I PUT HERE?'

Any help with be greatly appreciated.

Thanks.

Code:

<script type="text/javascript"> 
   <!-- 
      var DayOrNightMovie = "day.swf";
      now = new Date(); 
      hour = now.getHours(); 
      if (hour > 6 && hour < 18) { 
        DayOrNightMovie = "day.swf"; 
      } 
      else 
      { 
        DayOrNightMovie = "night.swf"; 
      } 
      var FlashObject = '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="520" height="85" hspace="0" vspace="0" align="top">'
      FlashObject += '<param name="movie" value="WHAT DO I PUT HERE?">  <param name="quality" value="high"><param name="wmode" value="transparent">'
      FlashObject += '<embed src="WHAT DO I PUT HERE?" width="520" height="85" hspace="0" vspace="0" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></object>'
      document.write(FlashObject);
   // --> 
</script>

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

Hey.

I'm currently looking for a countdown script, which is based on the server's time. I've only found scripts, that's based on the local computer's time, which means the output of the script changes, when the time on the computer is changed.

And I want to make a public announcement which counts down to something - and should output the same at every person.

I'm not that familiar with JavaScript, I know some jQuery - if anyone can supply any links or can help me with this, I'd appreciate it.