Tag Archives: jquery

Javascript countdown

So I’ve created this little countdown tool.

This will count down to a specific date and time… and then display a specific message during and then after the specified time.

The tool being used to countdown to Earth Hour on the WWF website
The tool being used to countdown to Earth Hour on the WWF website

It’s pretty lightweight (and relies on JQuery – again)

The Countdown HTML:

<span class="lineOne">This is where the countdown goes </span>
<span class="subLine">until the event</span>

The Countdown Javascript:

You’ll see on line 8 and 9 there are timestamps – these are for the beginning and the end of the event – you’ll have to figure out what the timestamps for these dates and times are.

Line 44 and 49 are the messages that will come up during and after the event.

$(document).ready(function(){
		console.log("ping");
		var 	countSpeed = 2,
			dayLength = 86400000,
			hourLength = 3600000,
			minLength = 60000,
			secondLength = 1000,
			eventStamp = 1396125000000,
			eventOverStamp = 1396128600000;
			setInterval(countUp,1000 / countSpeed);

		function countUp(){

			var 	thisNow = jQuery.now(),
				eventDiff = eventStamp - thisNow,
				daysLeft = eventDiff / dayLength,
				daysLeft = Math.floor(daysLeft),
				hoursLeft = (eventDiff - (daysLeft * dayLength)) / hourLength,
				hoursLeft = Math.floor(hoursLeft),
				minsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength)) / minLength,
				minsLeft = Math.floor(minsLeft),
				secsLeft = (eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength)) / secondLength,
				secsLeft = Math.floor(secsLeft);
				millisLeft = eventDiff - (daysLeft * dayLength) - (hoursLeft * hourLength) - (minsLeft * minLength) - (secsLeft * secondLength);
				if(millisLeft > 99) { 
					millisLeft = ""+millisLeft;
					millisLeft = millisLeft.substring(0, millisLeft.length - 1);
				}
				if(secsLeft<10){ secsLeft = "0" + secsLeft; }
				if(minsLeft<10){ minsLeft = "0" + minsLeft; }
				if(hoursLeft<10){ hoursLeft = "0" + hoursLeft; }
				if(daysLeft<10){ daysLeft = "0" + daysLeft; }

			$(".lineOne").empty().append("00 days 00 hours 00 minutes 00 seconds ");
			$("#days").empty().append(daysLeft);
			$("#hours").empty().append(hoursLeft);
			$("#minutes").empty().append(minsLeft);
			$("#seconds").empty().append(secsLeft);
			$("#millis").empty().append(millisLeft);

			if(thisNow > eventStamp && thisNow < eventOverStamp){ 				$(".lineOne").empty().append("Earth Hour"); 				$(".subLine").empty().append("is currently underway").css("margin-top", "180px"); 				$("#heroSpace .wwf_button").empty().append("Find out what's happening"); 			} 			else if (thisNow > eventOverStamp){
				$(".lineOne").empty().append("Earth Hour");
				$(".subLine").empty().append("has been and gone").css("margin-top", "180px");
				$("#heroSpace .wwf_button").empty().append("Find out what happened");
			}

		};

	})

Obviously – please feel free to use as you wish. Let me know how you’ve found it in the comments.

Count down to Earth Hour

So this week was the 60 day count down to Earth Hour and to celebrate WWF produced a list of 60 things to do in the dark.

To remind visitors about the campaign we booked in a homepage take over of the main WWF site focusing on Earth Hour and in particular the count down… which gave me an opportunity to play with some simple js and do something a little fun.

Earth Hour on the WWF homepage
Earth Hour on the WWF homepage

The code (if you’re interested) is below – for your enjoyment. The stats – so far – are looking good.

Homepages are funny things – and I plan to write a blog post on them soon – but in short we sometimes put a lot of focus on them and forget that visitors usually arrive at our sites for a reason… and that reason is rarely to see what random offering is being featured on the HP.

Anything we can do to draw attention toward valuable calls to action – including the occasional bit of movement – should always be considered (if only to be dismissed). But it is also important not let that get in the way of the user’s journey toward the reason for their visit. This can only lead to a ruined online relationship… so when you’re monitoring look for the impact elsewhere also (negative or positive).

Anyhow – the code:

$(document).ready(function(){
	var countMe = 0,
		countSpeed = 40;
	$(".subLine").fadeOut(0);
	$(".count").empty();
	setInterval(countUp,countSpeed);

	function countUp(){
		$(".count").empty();
		if(countMe<10){ $(".count").append("0" + countMe); }
		else { $(".count").append(countMe); }
		
		if(countMe<60){
			countMe = countMe+1;
		} else {
			$(".subLine").fadeIn(1000);
		}
	}
})

Highlight some text – a dare ya

Today I’ve implemented a little bit of script on my site that allows you – the visitors of this site – to highlight any bit of text that you might want to tweet… and tweet it at the click of a buttons.

Go on…

Give it a go.

It’s quite a simple bit of jQuery script that activates on text highlight.

var myCopy;

function clickToCopy(){
    $(".panel").remove();
}

if(!window.Kolich){
    Kolich = {};
}

Kolich.Selector = {};
Kolich.Selector.getSelected = function(){
    var t = '';
    if(window.getSelection){
        t = window.getSelection();
    } else if(document.getSelection){
        t = document.getSelection();
    } else if(document.selection){
        t = document.selection.createRange().text;
    }
    return t;
}

Kolich.Selector.mouseup = function(event){
    st = Kolich.Selector.getSelected();
    if(st!=''){
        $("body").append("<div class='panel'><a href='http://www.twitter.com' target='_blank' id='textTweet'>Tweet this</a></div>");
        $(".panel").css({
            "left": event.pageX,
            "top": event.pageY
        });
        myCopy = "" + st;

        if(myCopy.length>100){
            var whatDiff = myCopy.length - 100;
            myCopy = myCopy.slice(0,-whatDiff);
        }

        myTweet = myCopy.replace(/\%/g,"%25").replace(/ /g, '%20').replace(/!/g,"%21").replace(/"/g,"%22").replace(/#/g,"%23").replace(/\$/g,"%26").replace(/\&/g,"%26").replace(/'/g,"%27").replace(/\(/g,"%28").replace(/\)/g,"%29").replace(/@/g,"%40");

$("#textTweet").attr("href", "http://twitter.com/home?status=" + myTweet + "...%20" + window.location.href);

    } else { $(".panel").remove();}
}

$(document).ready(function(){
    $(document).bind("mouseup", Kolich.Selector.mouseup);
});

The purpose of this is less about the what it does (and being a smart-arse)… but more an experiment in allowing visitors to better choose what they share socially (rather than the bog-standard “Share this page”-type button.

Part two of this will be to also include a “copy to clipboard” option… which also allows for better analytical tracking… but this is yet to come (watch this space).

Update: I’m also going to try and make it work a little better in instances where the selected text is longer ┬áthan the characters allowed.