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.

New look blog & I’m sharing code

So you might have noticed a few changes to my blog recently:

  1. I’ve changed the look of my site
  2. I’ve moved it to WordPress (you might not have noticed that)
  3. I’ve created some ‘tutorials’ and am sharing some code I’ve been creating recently

I’ve let my blogging slide over the past year… and that’s poor form on my part.

I’m reasonably lucky in that  in my real-world, day-to-day job I get to work on some interesting, fun and innovative projects and I think it’s important that any learnings (etc) are shared wherever possible.

One of the things I love about the web community is that we’re a sharing group of people. Up until now I’ve not really produced anything worth sharing. However – recently I’ve been working on a few bits of code outside of work that others (hopefully) might find useful… so I’ve added a new category – “Code & tutorials” and have shared some little bits of JS I’ve been working on.

I hope that by putting these out into the world other will either use them or help me improve it.

Anyhow – I don’t really want to babble. This is really just a quick not to say “Hi”, “this is what I’ll be doing”, “I hope you’ll enjoy it” and “bye.”

Load on scroll

On the homepage of this (my) site you may have noticed that each article only appears as you scroll to it.

I say “may have noticed” as hopefully each section loads before you reach it so the only thing you’ll notice is the scroll bar jumping from the bottom of the bar to somewhere higher as the page becomes longer.

It’s quite a simple bit of script that basically removes all specified elements as the page loads. It then re-adds them to the DOM as the user scrolls down the page. This has decreased the load time for my homepage by around 75%.

There are probably more sophisticated ways of doing this (certainly some using AJAX) but this is a reasonably quick win that effectively reduced load time.

Here is how to make sections or elements of your page appear as you scroll to them:

The JS:

var windowHeight = $(window).height();
	storedDivs = [];

$(document).ready(function(){
	console.log(windowHeight);
	$(".post").each(function(){
		var myPosition = $(this).offset();
		//console.log(myPosition);
		if(myPosition.top>windowHeight){
			$(this).addClass("hidden");
			var myContents = $(this).html();
			storedDivs.push(myContents);
			$(this).empty();
		}
	});
})

$(window).scroll(function(){
	    var fromTop = $(window).scrollTop();
		$(".hidden").each(function(){
			var myDifference = $(this).offset().top - fromTop;
			//console.log(myDifference);
			if(myDifference < windowHeight){
				$(this).empty();
				$(this).append(storedDivs[0]);
				storedDivs.shift();
				console.log("changed something");
				$(this).removeClass("hidden");

				/*  ADD AND JS FUNCTIONS TO FIRE HERE  */
				//exampleFunction();
			}
		});
	});

In the above JS you’ll notice on line six the class “post” is specified. This is the element(s) which the JS searches for – and then hides – when the page loads.

To make this work on your site simply add the “post” class to each element you want to be effected or change the class specified on line six to the class you currently use on your site.

It is also worth noting the space on line 32 which is where you can add functions that need to fire after the content has been added back into the page. For instance Facebook comments use a bit of JS to render them – you’d need to fire this JS at this point.