Category “Web Design”

Useful jQuery snippets for everyone

Tuesday, 27 April, 2010

jQuery: Write less, do more!Whether you want to play with the DOM a little bit, get some help with your design or code or just need to experiment, we have found some jQuery snippets that you will definitely find inspirational (remember that in WordPress you need to replace $ with jQuery).

Here are some of our favorites:

How to detect any browser:

This way you can redirect IE users to getforefox.com :P

(if ($.browser.safari)) { } // Detects Safari
(if ($.browser.msie && $.browser.version > 6 )) // Detects IE6 and above
(if ($.browser.msie && $.browser.version <= 6 )) // Detects IE6 and below
(if ($.browser.mozilla && $.browser.version >= '1.8' )) // Detects FireFox 2 and above

How to switch CSS:

$('link[media='screen']').attr('href', 'Alternative.css');

How to style table rows:

Just add a tr.odd CSS color rule!

$("tr:odd").addClass("odd");

How to make elements disappear after a given amount of time:

Great for notifications!

//Here's how we used to do it in 1.3.2 using setTimeout
setTimeout(function() {
$('.mydiv').hide('blind', {}, 500)
}, 5000);
//And here's how you can do it with 1.4 using the delay() feature (this is a lot like sleep)
$(".mydiv").delay(5000).hide('blind', {}, 500);

How to center elements:

For the CSS impaired :P

jQuery.fn.center = function () {
this.css('position','absolute');
this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');return this;}
//Use the above function as: $(element).center();

These tricks and many more here and here.

The world’s best collection of tiny icons

Sunday, 6 December, 2009

SILK ICONS set

I have had the best collection of 16×16 pixel icons in my hard drive all this time and I did not realise it. The guy who made them is an icon God. Seriously, after downloading this set, you will never need to search for 16×16 pixel icons again. So without further delay, may I present you, famfamfam.com’s SILK ICONS set.

That guy did an amazing job, we should all donate some money to him ;)

Points to pixels to ems to percentage table

Sunday, 10 May, 2009

If you have trouble with converting text size units, here’s a useful reference table.

Points Pixels Ems Percent Points Pixels Ems Percent
6pt 8px 0.5em 50% 16pt 22px 1.4em 140%
7pt 9px 0.55em 55% 17pt 23px 1.45em 145%
7.5pt 10px 0.625em 62.5% 18pt 24px 1.5em 150%
8pt 11px 0.7em 70% 20pt 26px 1.6em 160%
9pt 12px 0.75em 75% 22pt 29px 1.8em 180%
10pt 13px 0.8em 80% 24pt 32px 2em 200%
10.5pt 14px 0.875em 87.5% 26pt 35px 2.2em 220%
11pt 15px 0.95em 95% 27pt 36px 2.25em 225%
12pt 16px 1em 100% 28pt 37px 2.3em 230%
13pt 17px 1.05em 105% 29pt 38px 2.35em 235%
13.5pt 18px 1.125em 112.5% 30pt 40px 2.45em 245%
14pt 19px 1.2em 120% 32pt 42px 2.55em 255%
14.5pt 20px 1.25em 125% 34pt 45px 2.75em 275%
15pt 21px 1.3em 130% 36pt 48px 3em 300%