Willing to pay a few Bucks- Time controlled script

Now Closed. Thank you to Gerluis for resolving this! And to you Hogan! I am in awe!



Ok, so i have your interest, here's what i need

I use a clock timed to GMT LONDON

I use a carousel that displays images as links.
the carousel is linked to a css style sheet.

currently:

To change between two images i simply change the "class" between online and offline like here: ENABLED IMAGE

<div style="display: block;" class="jcarousel-container jcarousel-container-horizontal"><div disabled="true" style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal"></div><div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div><div class="jcarousel-clip jcarousel-clip-horizontal"><ul style="width: 4100px; left: 0px;" id="mycarousel" class="channels jcarousel-list jcarousel-list-horizontal">
				<li jcarouselindex="1" class="show_1 jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" id="ch_1">
			

<a class="enabled" href="http://www.mysite.com/stuff/other-stuff/show1.html" title="Show 1"></a>
		</li>

Code (markup):

AND HERE: DISABLED IMAGE

<div style="display: block;" class="jcarousel-container jcarousel-container-horizontal"><div disabled="true" style="display: block;" class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal"></div><div disabled="false" style="display: block;" class="jcarousel-next jcarousel-next-horizontal"></div><div class="jcarousel-clip jcarousel-clip-horizontal"><ul style="width: 4100px; left: 0px;" id="mycarousel" class="channels jcarousel-list jcarousel-list-horizontal">
				<li jcarouselindex="1" class="channel_1 jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" id="ch_1">
			<a class="offline" href="http://www.mysite.com/stuff/other-stuff/show1.html" title="Show 1"></a>
		</li>

Code (markup):

What i would like to do is:

Using the clock below (or any other clock)

<iframe src="[B](INSERT H T T P HERE)[/B]free.timeanddate.com/clock/i2ecbysx/n136/fn2/fcfff/tct/pct/ts1/ta1" frameborder="0" width="112" height="21" allowTransparency="true"></iframe>

Code (markup):

i want to automatically change between "enabled" and "offline" depending on the time of day.

NB: The time MUST come from London time and NOT visitors system time or this will not work!


I believe would work something like this:

<script language="JavaScript">
GMTLonton = "%%GMT%%";
  </script>
    <script language="JavaScript" src="CLOCK ADDRESS"></script>
    
    <script language="JavaScript" src="CLOCK ADRESS"></script>
    <script>
if (GMTLONDON == "4am to 7pm") {
 document.write('offline' );
}else{
 document.write('enabled');}
    </script>

Code (markup):

I suppose it would then have to echo into the "class" in the carousel

I understand the concept but cant make it work


I offer $10 for this, ono

 

This would be my proposed solution, but there are other ways to solve this. If you have any questions ask. One requirement would be for server to render correct initial css classes based on London time. I could handle that with javascript too, but it would be better if it's done on server side. jQuery is mandatory ofc. I can't guarantee that this works , tested few cases and it seemed fine.

No payment needed.

<script type="text/javascript">
var london_hrs = 22; // this needs to be rendered on server as referenced london time when page loads

var offset = new Date().getHours() - london_hrs; // calculate offset between london and client time

$(document).ready(function(){
	setInterval(checkTime, 60000); // call timer function once per minute
});

function checkTime()
{
	var current_hrs = new Date().getHours();

	var current_london_hrs = current_hrs - offset;
	
	if (current_london_hrs < 0) current_london_hrs += 24;
        else if (current_london_hrs >= 24) current_london_hrs -= 24;

	//alert("London time:" + current_london_hrs);
	
	if (current_london_hrs > 4 && current_london_hrs < 19)
	{
		$('li.jcarousel-item a.enabled').toggleClass("enabled").addClass("offline"); 
		//alert("offline");
	}
	else
	{
		$('li.jcarousel-item a.offline').toggleClass("offline").addClass("enabled"); 
		//alert ("enabled");
	}
}
</script>

Code (markup):

 

Thank you very much, my fault, i should have said. There are more than one items in the carousel that dont finish, only one ends at 5am until 7pm.

 

Then you would need to add an id to that particular element and use corresponding jQuery selector.
For example:

...<a id="switchable_item" class="offline" href="http://www.mysite.com/stuff/other-stuff/show1.html" title="Show 1"></a>...

jQuery modification part:	
	if (current_london_hrs > 4 && current_london_hrs < 19)
	{
                $('#switchable').removeClass("enabled").addClass("offline"); 
	}
	else
	{
		$('#switchable').removeClass("offline").addClass("enabled"); 
	}

Code (markup):

 

Now Closed. Thank you to Gerluis for resolving this! And to you Hogan! I am in awe!