27+ Handy Javascript Techniques for Web Designer
Digg 28 
Stumble This
Javascript is such an useful script language. It is used in many web sites to add functionality, validate forms, randomize images, and much more. Although it is not required to be pro coder, there are some useful techniques every web designer should know. In this post you will find 27+ useful JavaScript techniques, scripts, method and object that will help you save time in your next project.
The content is focused on just good ol’ JavaScript rather then libraries. Nevertheless, there are some mentioned in the post. Insert them, use them and share.
1. Rollover Buttons with Preload Images
If you use CSS rollover buttons there might be a delay when use first mouse over the button. Using the Following method you can create a simple rollover button.
<a href="webpage.html" onmouseover="roll('but1', 'image_rollover.jpg')" onmouseout="roll('but1', 'image.jpg ')"><br /><img src="image.jpg" width="64" height="64" border="0" alt="Rollover Button" name="but1" /></a>
2. Stylish Corner
If you want to add styled to box, footer using this jquery plugin you can create different kinds of Corner,
3. Box Shadow, Gradient Background
Using this method you can create box shadow, semi transpranent border, gradient background and much more.
4. Tooltip
Create a simple tooltip for viewing information when user mouse hover links.
5. Javascript Form Validation
In many project or client website you need implant forms. Using this script you can validate user information. You might also want look this this method here.
6. Floating Layers
Need a floating div to show information, you can use this technique.
7. Disable Right-Click
If you want to disable user from right clicking so they can not copy your content then you can use this method. If you just want to simply disable
8. Create flickr like Image Protecting Method
If the uploader does not allow you can not view the image in Flickr by “view background image”. Instead you see 1px transparent image. Using this technique you can create same script. This method will be helpful for a photographer portfolio or related websites.
$div style="position:absolute; top:10; left:10; width:400; height:75; z-index:1; padding:0px; border: #000000 1px solid; background-image:url(yourImage.ext);"#$/div#
9. Event Handlers (OnClick, OnBlur, OnFoucus)
JavaScript event handlers allows add feedback, user interaction and more functionality in the web pages.
10. Use of Alert, Confirm and Prompt
These three simple methods that comes in very handy for various purpose. This article explains how to use and insert them.
11. BlendTrans Filter JavaScript/ Fade in Effect/ Hide Show
Create Fade in effect for image or button using this script .
12. Add Flash Like Preloader for Images
You have an image gallery that has lots of images. Why not use a JavaScript pre-loader so the user do not get bored. This technique can be viewed here in details.
13. IE PNG FIX.
If are using PNG format images for you web sites, they will show up with a grey blck the background. Here are the five ways you can fix it using javascript.
14. Page Sliders
Page Sliders are another cool way to build interactivity in your website. Here are some of best page sliders.
15. Add Twitter Status to your Website or Blog
Twitter is the new “hip” thing. Previously we explained how to add twitter status using PHP. Here is how you can emebed status in you site.
16. Create Drag and Drop Box
This post explains how to create to a box that can be dragged around the web page. You also should check out this altente method.
17. Scroller/ News Ticker/ Text Scroller
This script shows how create different type of interactivity element such as slider, scroller, new ticker in your web pages.
18. Random Images
The Rotate Images JavaScript swaps images automatically every time you reload the page.
19. Continuous Horizontal Image Scroller
Have a gallery of scrolling images horizontally on your pages
20. Dynamic Text Gloss Effect
21. Add Glossy Effect to Your Images
This script allows you to add corners and shading and shadow to images on your webpage. Also check out Corner.js and Beval.js for more cool effects.
22. Feed to JavaScript
Run your own RSS feed using Javascript. Useful for people not running CMS or just don’t like popular feed providing services.
23. Table Sorter
23. Stylesheet Switcher
Every wonder how certain website changes their color or background when user clicks on a images or link? Not to worry Using this technique you can easily have multiple stylesheet in you site.
24. Page Redirection
If you recently changed your domain or you client and you need redirect the user, using this method you can redirect the user to new page.
<br />var sTargetURL = "redirectiontarget.htm";<br /><br />function doRedirect()<br />{<br />setTimeout( "window.location.href = sTargetURL", 2*1000 );</pre><br />}<br /><pre>
25. Twitter Like Parsing URLs with JavaScript
26 . Collapsible DIV with Javascript and CSS
If you have content you want toggle only when user click on a link, using this method you can hide/show a CSS div.
27. Generate Random Numbers
Using the JavaScript math object you can create some handy scripts for generating different kinds of numbers.
You might also be interested in:
- 10 Smart Javascript Techniques to Improve Your UI
- Javascript Cheat Sheets & Quick Reference Guides for Javascript Webmasters, Coders, Web developers & Designers
- 10 Smart Javascript Techniques For Manipulating Content
- Seven JavaScript Techniques You Should Be Using Today
Have missed any cool techniques? Share it with use by comment.
If you enjoyed this post, get free updates by email or RSS.
Posted Under: Tips
Tagged: javascript, Jquery
Thanks for these techs and we will use these.
Thanks to post such useful scripts.
WOW, you guys sure have awesome resources for web designers! Your website deserves all the accoilades it gets, the design community really loves your offering!
Great stuff. You’ve covered all the basic bells and whistles a site would need, and you did it in a simple way so even newbies can spice up their website.
Thanks.
cool post mate….
cirrogram
this technique is really good for rollover buttons.
Excellent information! I ll try this out..Thanks
This is great tip but I think we need to mix with other methods also..
petercc´s last blog : I Have Made A Web Page. Can You Direct Me To Upload It Without Any Change? Is There Any Free Web Hosting ?
ks for sharing this list of techniques. Very helpful.
Excellent information. Finding a few such solutions has taken hours in the past.
Thank u.
wow, these are soooooo useful scripts
thanks for the list.
You have a great blog here and it is Nice to read some well written posts that have some relevancy…keep up the good work
A mixed bag here – the PNG fix is better served by the Twin Helix method as it fixes backgrounds too.
Personally I always try to use jQuery for everything these days, it’s so quick and simple!
Good post tho, keep them coming!
Phil’s last blog post..Is mobile internet the way forward?
Thanks u r information
Good POST! This will help me do something with my design for tweetcustom.com I never learned graphic designing but I’m pretty clever with the photoshop editing. Learning colors & shading have been a wonderful experience!
useful techniques !
thanks a lot
@Danh ba web 2.0: Thanks
Useful list for me, thanks for sharing !
Holy crap, this guy doesn’t know anything. These are terrible.
@Dannyprose: It is fixed.
Doesn’t look like #12 (preloader) is linking to the right page.
For #1, use CSS Sprites and you won’t get that flicker on rollover.
Thanks for the list.
Why use Javascript for what can be done with simple CSS? (#1)
And disabling right-click is one of the nasties JS-Stuff around …
apart from that nice list…
Nice list with all modern scripts.
nice list of javascript techniques thanks ..
joyoge designers’ bookmark’s last blog post..27+ Handy Javascript Techniques for Web Designer
nice list thanks for sharing
Design-notes’s last blog post..Small web design elements tutorials collection
The listed effects are worthy…but, adding JS codes into the html page or markups are highly discouraged. Unobtrusuve Javascripting should be used to add behaviours to the code. ie, there whould not be any JS code snippets embedded to the html tags like ‘onMOuseOver’ ‘onClick’ and all. This is a big no no, if we are following web standards.
This is a good list! I haven’t used ‘Feed to JavaScript’ yet but will give it a go