Website Sprite Images.

So if you are following websites to day, you notice the in thing seems to be sprites.

What are sprites?

Well their a collection of buttons/images held within one image, so for example if you inspect a icon image on facebook and look at the background you’ll see their sprite. Which can be classed as pretty much all their own images across the site, with enough room for hundreds more icons.

Its time to discuss reasons why you would use one of these sprites, the main reason is down to speed, the fact is instead of loading 10-20 icons separately you load them all at once making it more efficient within the way its called.

With this sprite you loose some margin for error, for example with things like Internet Explorer 6 I’m sure we’ve all done the thing of not putting sizes on images and having it mess up you’re whole site, using a sprite you have to specify a width and hight in the CSS so you loose the possibility of having them break your site design.

Hows this done then?

Creating your Own Lightbox: 2

The Main Part Box & JavaScript

Well previously I posted on the basics of creating a lightbox, I shall explain the code for one of my most basic creations as once you understand this you can take it a lot further.

So I shall start with the JavaScript:

function lightbox(id1){
if(document.getElementById(id1).style.display==”block”){
document.getElementById(id1).style.display=”none”;
document.getElementById(‘lightbox’).style.display=”none”;
}else{
document.getElementById(id1).style.display=”block”;
document.getElementById(‘lightbox’).style.display=”block”;
}
}

Essentiall all it is doing is checking if id1 is already open if its shown as a CSS display block it will close id1 and lightbox id, else it will open them.

This keeps the script nice and short no bloated effects like Lightbox2 or jQuery lightbox, now in your html all you need to do is:

<div id=”mybox” class=”lightbox” style=”display:none;”>

stuff you want in lightbox

<a href=”javascript:lightbox(‘mybox’)”>Close Lightbox</a>

</div>

You can see I’ve set display:none; this is very important just because we are hiding the box, yeah not good for the search engines but for now it works, when you get more advanced I would have a class called hide, and apply it to the div tag just to keep google happy.

Creating Your Own Lightbox

One thing that bugs me is these lightboxes and the lack of support on forums, you ask about lightboxes and they just link you to lightbox2 or ibox and all this junk which quite frankly is appaling, no one takes the time to explain the process of a lightbox.

My job recently involved constructing a lightbox, after a few days of racking my brains at other scripts I just put them in the trash bin as they where exactly as described trash bloated scripts for something I really dont need that much.

All I wanted was a fixed lightbox, nothing special like floating above the entire site, I wanted to click x and it would bring up some funky box.

So I just started thinking about it and essentially, its just 2 layers 1. your grey overlay and 2. your box you want.

Hopfully you can see with my porley constructed diagram, as you can see layer 1 is under layer 2 but they are both over the website… this really is all you need to keep in your mind.

Windows XP Time to Run it Right!

So I recently purchased a new copy of Windows XP before I used to maybe re-format my hard drive every 1 year or so due to obvious reasons of windows lacking the ability to run well past the first year.

The usual stuff you had to do to keep windows running was a defrag, clean up temp files, empty the bin… well the list goes on and in reality we never did it. It maybe got cleaned once every 2 months if lucky, so I shall tell you how to do it automatically.

We shall begin with installing the usual, CCleaner and also put JKDefrag in your program files.

So we want to setup a simple batch file to run CCleaner and JKDefrag, you can however set JKDefrag to run when your screensaver appears but I can’t say I like screensavers that much.

Anyway we shall make the batch file (something.bat) in say C:\ (just for simplicity)  then in that we will put this in it

“%PROGRAMFILES%\CCleaner\CCleaner.exe” /AUTO
“%PROGRAMFILES%\JK Defrag\JkDefragCmd.exe” -a 2 -s 40 -d 2 C:

Ultra Mobile Laptops, Netbooks

I take it you have heard about these new ultra mobile laptops (netbooks), well their not really new but they hit the blogs a lot when they came out, their was a lot of excitement over the Asus Eee laptop rightly so considering its a nice netbook.

Now me I’m too cheap to buy one at the retail price, instead I went one better and used ebay to buy myself a Compaq Evo N400c, now yes it might be 2-3 inches bigger but its a classic and repairable when something goes wrong, I’ve done a few fixes to it such as replacing the hard drive due to the old one failing unfortunately its a higher capacity but what you gonna do its all I had.

As I’m a complete computer nerd I did some upgrades and downgrades to it, I increased the RAM by another 256MB yep nothing in today’s standards but its still nice enough to run Windows 2000 without any trouble. As I just said I have Windows 2000 on it as XP was on it previously who puts XP on a laptop built for Windows 98 seriously? Well same could be said about Win2k but it runs quite well.