PeterBraden.co.ukArticles Tagged "jquery"

So following on from yesterdays Call of Duty text effect, I had a little play around with the new Google Maps API. Here are the results - a little pointless maybe, but whatever.

Like a lot of my experimental projects, this is not thoroughly tested (works in Firefox 3.5), and almost certainly won't work in Internet Explorer. Use a proper browser.

I don't play a lot of video games, but my brother does, and every now and then I get hooked on one of his games. This afternoon I completed Call of Duty 4, which is surprisingly engrossing — shooting people in the head is quite addictive.

One of the things I liked most about the game was the visual experience of the briefing/loading screens. The designers have used all the typical elements that have become associated with this spy/military thriller genre — the aerial maps, wire-frame fly-throughs, mountains of irrelavant data. All the cliches are covered.

One particular effect that caught my eye was the fade-in/fade-out on the name of the level. It seemed very reminiscent of Bourne Identity/24. I thought I'd give a go at recreating it in javascript.

Here's the code — I've wrapped up the fade-in into a jquery extension:

$.fn.stealthIn = function(callback){
	this.each(function(){
		
		var content = $(this).text();
		$(this).text("").css({
			'color' : '#9f9',
			'text-shadow' : '#0f0 0px 0px 5px',
			'font-family' :"Bank Gothic"
			}).show();
		
		var i = 0;
		var j = 1;
		var x = $(this);
		var t = setInterval(function(){
			var cont = x.text();
			
			if (j==3){	
				x.text(cont.substr(0,i) + content[i]);
				i+=1;
				j=0;
			}else{
				x.text(cont.substr(0,i) + String.fromCharCode(
					1072 + parseInt(Math.random()*20)));	
				j+=1;
			}
					
			if (i == content.length){
				clearInterval(t);
				if (callback){
					callback();
				}
			}	
		}, 20);
		
	});

}


// Use it like:
$("#some-element").stealthIn();

And here's a live example:

You'll only get the full effect if you have the font "Bank Gothic" on your computer - which I believe is bundled on a mac. Sorry PC users!

Some more <canvas> experimentation. Basic pong rules, but the AI should improve as your score increases…

Here’s a little piece of jquery/javascript that I find myself using frequently. It’s not revolutionary - in fact I think I originally based it on somebody else’s code, but I think this is the only one that retrieves the hint text from the input's associated label. This means that it degrades really nicely, and encourages a good semantic form.

$.fn.hint = function () {
	return this.each(function () {
		var input = $(this);
		if (input.attr('type')!='text' && 
                   input[0].tagName != 'TEXTAREA'){
			return;
			}
		
    	var form = $(this.form);

		var label = form.find('label[for=' +
                     $(this).attr('id') + ']');
		var text = label.text()
		label.hide();
		
		function remove() {
			if (input.val() === text && 
                              input.hasClass('blur')) {
				input.val('').removeClass('blur');
      			}
			}

		input.blur(function () {
			if (this.value === '') {
				input.addClass('blur').val(text);
        	}
		}).focus(remove).blur();
		form.submit(remove);
      	$(window).unload(remove); // handles Firefox's autocomplete
    });
};

And then to use it:

<label for =”to_hint”>Hint text</label>
<input type = 'text' id = “to_hint”></input>
...
$(“input#to_hint”).hint()

For example: Hint text