Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Web Design
Messing about with JQuery
I have been wanting to get my head around some more javascript for a while now and just recently a friend pointed me in the direction of 'JQuery' as the framework of choice for developers. In absolute basic terms, a javascript framework is a .js file which sits in a folder in your site structure. You can then reference this file in your web pages and create some great little effects.
I Remember being a kid in the 80s. Our choices for computers and games were limited and very, very basic. Our school had a few BBC Micro computers and the home computer of choice was either the ZX48k by Spectrum or the Commodore 64. All of these machines were basic, the graphics were blocky and they loaded games from a cassette. However, each was fascinating for me when I was young.
I don't know what it was but the idea that coloured blocks could move across a screen or a collection of coloured blocks could shoot down even more coloured blocks with the press of a rubber key was amazing. I even learnt some basic programming using the BBC Micro and spent hours typing in code from magazines just to get a 5 second effect of a starfield or a car with rolling wheels. Over the nineties and noughties I got into gaming a bit more and, with the advent of the Megadrive, NES and the Playstation, started to expect more and more sophisticated graphics, gameplay and controls. The problem with this evolution is the 'home programmer' got left behind. Games and graphics were produced by those who really know what they are doing and with expensive software and machines. In 2008 I find myself being dissapointed if graphics are not exactly like the real thing! It's amazing how our expectations have rocketed in a relatively short space of time and, as a result, I haven't a clue how any of it works and know that it would take me years to learn.
Where am I going with this? Well Javascript has brought those early days of being able to do some of this stuff myself flooding back. Once again I can get coloured blocks to move around the screen or create a great looking, interactive menu system on a website with the aid of JQuery. All of a sudden I am ten years old again! Dreamweaver comes with some inbuilt javascript technology such as the classic 'rollover image' but JQuery allows you to do so much more.
I have been messing around with some of the built in features of JQuery. The staple classics that adorn quite a few websites nowadays.
The Accordian
You've seen these before I'm sure. You click on a button and the content of the div slowly expands to reveal what's inside. Place a few of these buttons on top of each other and you have your Accordian. It was pretty easy to set up and style and can be used to make a smooth and sophisticated looking menu system, especially where space is at a premium. Click here to view a test Accordian set up.
Thickbox
I have used Lightbox a few times before and I use it on this site to show graphic designs and tutorial images. Thickbox works in pretty much the same way. Once installed it is very easy to add or remove images from each category which makes it very flexible and the code on the page is little more than a normal link so it is great for keeping loading times to a minimum. Click here to view Thickbox in action on our web design company Portfolio Page.
Lavalamp Menu
The Lavalamp menu is a smooth JQuery plug in. It just adds a little extra zing to a standard menu list. The list in the code is styled in the CSS apart from the 'active' menu highlight box which is styled using the JQuery framework. Click here to view Lavalamp Menu in action on our web design company website. Note: This menu is no longer there. For details visit www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers
Warnings!
Not everyone has Javascript enabled on their browser so you need to use JQuery plug-ins which 'degrade' when JS switched off. This means that items such as the Lavalamp Menu must still work and allow viewers to navigate the site even with Javascript disabled. You must check how a plug in degrades before using it.
I would also advise you not to over use effects. I believe that a little subtle JS is great but it can soon become overkill when it is used just for the sake of it. Remember the golden rule, 'content is king'. Everything else is just sugar coating.
You can find a link to the JQuery home page on the 'links' section of this website.
