Hi everyone,

 

I have a carousel i am working on, and it has a timwer so when the timer counts down the hours till it gets to 9:00pm UK time it will change the image of that specific day for example if it is wednesday it will show that image etc and the info for that deal,

 

But as i not sure if it is completely working how an i remove the TIMER and at the bottom of the carousel where it has monday tuesday, wednesday, thursday and friday add "LINKS" so i click on them so can see if the sprite images are all in the correct places?

 

I have attached a screenshot of what the page looks like:

 

 

 

and i have attched the js code

function cntDown(){
var now = new Date();
var now_ms = now.getTime();

var tmrw = new Date();
if(now.getHours() >= 21){
tmrw.setDate(now.getDate() + 1);
}
tmrw.setHours(21);
tmrw.setMinutes(0);
tmrw.setSeconds(0);
var tmrw_ms = tmrw.getTime();
var tmrw_date = tmrw.getDate();
var tmrw_month = tmrw.getMonth() + 1;
var tmrw_year = tmrw.getFullYear();

var ms = tmrw_ms - now_ms;
var secs = ms / 1000;
var mins = secs / 60;
var hrs = mins / 60;
var rem_sec = Math.floor(secs % 60); if(rem_sec <= 9) rem_sec = "0" + rem_sec;
var rem_min = Math.floor(mins % 60); if(rem_min <= 9) rem_min = "0" + rem_min;
var rem_hrs = Math.floor(hrs % 24); if(rem_hrs <= 9) rem_hrs = "0" + rem_hrs;
document.getElementById("countdown").innerHTML = rem_hrs + ":" + rem_min + ":" + rem_sec + "";
setTimeout("cntDown()", 1000);

} 



$(document).ready(function(){



//alert(dayValue[todaysDay]);


//alert("hello");

// Get day
var ActualDate = new Date();
var ActualDay = ActualDate.getDay();


var dayValue = new Array();
   dayValue[0] = "sun";
dayValue[1] = "mon";
   dayValue[2] = "tues";	
   dayValue[3] = "wed";
   dayValue[4] = "thurs";
dayValue[5] = "fri";
   dayValue[6] = "sat";



//

//alert(dayValue[ActualDay]);
var d = dayValue[ActualDay];
//var d = "Keasty";

//	alert(thursName);
//alert("testing it works");
//alert(thursName);       
//  var dname = d + Name;



//$("#countdown").css("font-size","40px";
$("#countdown").css({'color':'black','font-size':'40px'});



//alert(thurswasPrice);
//$(".main-prod-link").attr({href:thursProdhref});
//$(".prod_descrip").append(thursName);
//$(".prod_wasprice").append(thurswasPrice);
//$(".prod_price").append(thursPrice);
//$(".prod_spec").append(thursDescription);


//alert(ActualDay);

if (ActualDay ==1){
 $("#mon").addClass("smallprods_active_mon");
 $("#prodimage").addClass("bigprods_active_mon");

$(".main-prod-link").attr({href:monProdhref});
$(".prod_descrip").append(monName);
$(".prod_wasprice").append(monwasPrice);
$(".prod_price").append(monPrice);
$(".prod_spec").append(monDescription);  


}

if (ActualDay ==2){
 $("#tues").addClass("smallprods_active_tues");
 $("#prodimage").addClass("bigprods_active_tues");

$(".main-prod-link").attr({href:tuesProdhref});
$(".prod_descrip").append(tuesName);
$(".prod_wasprice").append(tueswasPrice);
$(".prod_price").append(tuesPrice);
$(".prod_spec").append(tuesDescription);  


}




if (ActualDay ==3){
 $("#wed").addClass("smallprods_active_wed");
 $("#prodimage").addClass("bigprods_active_wed");

$(".main-prod-link").attr({href:wedProdhref});
$(".prod_descrip").append(wedName);
$(".prod_wasprice").append(wedwasPrice);
$(".prod_price").append(wedPrice);
$(".prod_spec").append(wedDescription);  


}


if (ActualDay ==4){
 $("#thurs").addClass("smallprods_active_thurs");
 $("#prodimage").addClass("bigprods_active_thurs");

$(".main-prod-link").attr({href:thursProdhref});
$(".prod_descrip").append(thursName);
$(".prod_wasprice").append(thurswasPrice);
$(".prod_price").append(thursPrice);
$(".prod_spec").append(thursDescription);  


}

if (ActualDay ==5){
 $("#fri").addClass("smallprods_active_fri");
 $("#prodimage").addClass("bigprods_active_fri");

$(".main-prod-link").attr({href:friProdhref});
$(".prod_descrip").append(friName);
$(".prod_wasprice").append(friwasPrice);
$(".prod_price").append(friPrice);
$(".prod_spec").append(friDescription);  


} 



});

Regards,

Aaron

I'm really confused as to what you're trying to do, sorry.

 

Explain like:

 

What's Happening?

 

What's mean to happen?

 

I will keep the thread open for the next few hours so I will reply when you reply.

hi mate if you go here:

 

http://beta.bluegeeks.co.uk your see the carousel live in action.

 

Well i wanted to link the bottom part so when you click the Tuesday / Wednesday / Thursday / friday it shows you the hosting plans, so i dont have to wait until 9pm to see if it actually is working how i would like it to , so would like them linked so can see each one in action without waiting for the timer to count down.

 

And i would also like it so when it goes on tuesday the blue arow moves above that day and same for the other days wedneasday / thursday / friday.

 

Regards,

Aaron

Right, I'll say how I'd do it.

 

Don't get the javascript to update the default package information, use php.

 

So check the day in php, if it's monday: include 'christmas-plans/monday.php';

 

The Default Plan

Have it appear in a container div right, so like this.

 

<div id="christmasPlan">
<?php 

// Include the current day file.
// Mon, Tue, Wed, Thu, Fri, Sat, Sun
include 'christmas-plans/'.date('D').'php';
?>
</div>

 

So that would be how you load the default plan.

 

Loading the different days when you click the bottom links

You would have a three letter day representation (Mon, Tue etc. notice the capital at start and the 3 letters only) as the id of each of the divs (you would also have to put class="christmasPlan" or something on each of them and then in your javascript you would have.

 

$('.christmasPlan').click(function()
{
// Get the day (from the ID of the div we clicked).
day = $(this).attr('id');

// Now we load the page into the container div (remember).
$('#christmasPlan').load('christmas-plans/'+day+'.php');
});

 

Animating the little arrow

You would have to slide that into its own layer and then animate it across inside the function using the animate function (p*** easy to use).

Hi Jack cheers for that,

 

I am sorry if this is a silly question, but xcould you show me a quick example please?

 

if not too much trouble as my php is very basic knowledge and have know clue how the php page should look etc?

 

regards,

Aaron

as when i just load a test page.php i get:

 

Warning: include(christmas-plans/Thuphp) [function.include]: failed to open stream: No such file or directory in /home/aaron21/public_html/beta/carousel.php on line 6

 

Warning: include(christmas-plans/Thuphp) [function.include]: failed to open stream: No such file or directory in /home/aaron21/public_html/beta/carousel.php on line 6

 

Warning: include() [function.include]: Failed opening 'christmas-plans/Thuphp' for inclusion (include_path='.:/usr/lib/php:/usr/local/lib/php') in /home/aaron21/public_html/beta/carousel.php on line 6

 

this is just the php code lol to get the dates

let me explain exactly how it is all meant to work .

 

I am using CSS Sprites for each of the images so the big images is one big image and the css sprite moves up to the new day when it is tuesday etc till friday. then it will say Sorry it has ended etc.

 

Then the bottom ones Well by default monday can stay in colour so then tuesday / wednesday / thursday / friday are all greyed out, and then what is meant to happen is when its tuesday the greyed out one is meant to become the colour and monday stays as it is etc,

 

So then for wednesday Monday should be coloured version / tuesday should be coloured version too and so should wednesday now.

 

But at moment when it becomes a new day for example today thursday, thursday becomes coloured but then wednesday is greyed out which it shouldnt be , and i cant work out why

 

So if this can be all accomplished your way i be most appreciated.

 

 

Regards,

Aaron

 

EDIT: fixed the sprite issue lol lol so i tihkn its all working now lmao, only thing i would like now is to transfer intothe php version? if possible hehe

Edited December 16, 201015 yr by Aaron Healey

Sorry, the correct php code is:

 

<div id="christmasPlan">
<?php 

// Include the current day file.
// Mon, Tue, Wed, Thu, Fri, Sat, Sun
include 'christmas-plans/'.date('D').'.'.'php';
?>
</div>

 

and you need to make a christmas-plans directory and make files for each of the day files (Mon.php, Tue.php, Wed.php, Thu.php, Fri.php) etc.

 

Aww ok mate, i have it all working now but could you help me do the

 

animation for the arrow please. as i would like it to move so when it is tuesday the arrow is on that day and so on.

 

Regards,

Aaron

You need to have the arrow as a seperate slice really..

 

Then use

 

animate() to move it along on click.

The arrow is its seperate slice the arrow is its own image mate, i just dont know how to do it how i want as never used the animate()

 

Aaron

 

EDIT:

 

because the way i would like it is when it is monday arrow is on monday and then when on tuesday arrow shows on tuesday etc until friday and it doesnt need to have an onclick any more just need it to move along lol

Edited December 18, 201015 yr by Aaron Healey

Na it isn't.

 

http://www.bluegeeks.co.uk/beta/images/active_arrow.png

 

It has that singular line underneath it.

 

To use animate you would do something like this

 

$('#IDofArrow').animate('left', '100px');

 

and obviously change the value of left to w/e the position of the day.

awww ok so for example do i do this then once the image is sliced:

 

$('#MonArrow').animate('left', '100px');

$('#TuesArrow').animate('left', '200px');

$('#WedArrow').animate('left', '300px');

$('#ThursArrow').animate('left','400px');

$('#FriArrow').animate('left', '500px');

 

is this corerect?

 

or is there more to it,

 

Regards,

Aaron

As i would like it to do it automatically so i dont have keep changing it lol

No, you would have one arrow (not a seperate arrow for each day) that you animate

 

so

 

// For monday

$('#arrow').animate('left', '100px');

 

// For tuesday

$('#arrow').animate('left', '200px');

 

 

etc

Awww ok .

 

Aaron

right i have put the js code in place the animate part.

 

now the div for arrow which was already there was:

 

<div class="active_arrow" id="activearrow">
<img src="http://www.bluegeeks.co.uk/beta/images/active_arrow_day.png">
</div>

 

so do i remove it so just shows:

 

<div id="arrow" class="active_arrow"></div>

 

and then for the js i have this now if you see i added the .animate to the id arrow

 

if (CurrentTime > "08:15:02" && CurrentTime < "21:00:02" && dayValue[ActualDay] != ("sat") && dayValue[ActualDay] != ("sun"))
{
if (dayValue[ActualDay] == "mon"){
	$('#arrow').animate('left', '0px');
	$("#mon").addClass("smallprods_active_mon");
	$("#prodimage").addClass("bigprods_active_mon");
	$(".main-prod-link").attr({href:monProdhref});
	$(".prod_logo").attr({img:monProdLogo});
	$(".prod_descrip").append(monName);
	$(".prod_wasprice").append(monwasPrice);
	$(".prod_price").append(monPrice);
	$(".prod_spec").append(monDescription);  
}

if (dayValue[ActualDay] == "tues"){
	$('#arrow').animate('left', '208px');
	$("#mon").addClass("smallprods_active_mon");

	$("#tues").addClass("smallprods_active_tues");
	$("#prodimage").addClass("bigprods_active_tues");
	$(".main-prod-link").attr({href:tuesProdhref});
	$(".prod_logo").attr({src:monProdLogo});
	$(".prod_descrip").append(tuesName);
	$(".prod_wasprice").append(tueswasPrice);
	$(".prod_price").append(tuesPrice);
	$(".prod_spec").append(tuesDescription);  
}

if (dayValue[ActualDay] == "wed"){
	$('#arrow').animate('left', '409px');
	$("#mon").addClass("smallprods_active_mon");
	$("#tues").addClass("smallprods_active_tues");

	$("#wed").addClass("smallprods_active_wed");
	$("#prodimage").addClass("bigprods_active_wed");
	$(".main-prod-link").attr({href:wedProdhref});
	$(".prod_logo").attr({src:wedProdLogo});
	$(".prod_descrip").append(wedName);
	$(".prod_wasprice").append(wedwasPrice);
	$(".prod_price").append(wedPrice);
	$(".prod_spec").append(wedDescription);  
 }

if (dayValue[ActualDay] == "thurs"){
	$('#arrow').animate('left', '600px');
	$("#mon").addClass("smallprods_active_mon");
	$("#tues").addClass("smallprods_active_tues");
	$("#wed").addClass("smallprods_active_wed");

	$("#thurs").addClass("smallprods_active_thurs");
	$("#prodimage").addClass("bigprods_active_thurs");
	$(".main-prod-link").attr({href:thursProdhref});
	$(".prod_logo").attr({src:thursProdLogo});
	$(".prod_descrip").append(thursName);
	$(".prod_wasprice").append(thurswasPrice);
	$(".prod_price").append(thursPrice);
	$(".prod_spec").append(thursDescription);  
}

if (dayValue[ActualDay] == "fri"){
	$('#arrow').animate('left', '804px');
	$("#mon").addClass("smallprods_active_mon");
	$("#tues").addClass("smallprods_active_tues");
	$("#wed").addClass("smallprods_active_wed");
	$("#thurs").addClass("smallprods_active_thurs");

	$("#fri").addClass("smallprods_active_fri");
	$("#prodimage").addClass("bigprods_active_fri");
	$(".main-prod-link").attr({href:friProdhref});
	$(".prod_logo").attr({src:friProdLogo});
	$(".prod_descrip").append(friName);
	$(".prod_wasprice").append(friwasPrice);
	$(".prod_price").append(friPrice);
	$(".prod_spec").append(friDescription);   
}
}
else
{
$(".timer").html("Sorry Finished For Today!").css({'font-family':'arial black','color':'black','font-size':'30px'});
}

});

 

Hope this makes sense.

 

Regards,

Aaron

Edited December 21, 201015 yr by Aaron Healey

Sounds about right

but for some reason the arrow doesnt move?

 

so if i pm you my CSS / js files would you have a look for me? and html

 

Regards,

Aaron

Upload a zip of the files matey and I'll look (if I get Pm before like 11 tonight).