27+ Handy Javascript Techniques for Web Designer

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.


[sourcecode lang=”html”] <a&nbsp; 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>[/sourcecode]

2. Stylish Corner

If you want to add styled to box, footer using this jquery plugin you can create different kinds of Corner,


View Demo

3. Box Shadow, Gradient Background

Using this method you can create box shadow, semi transpranent border, gradient background and much more.


View Demo

4. Tooltip

Create a simple tooltip for viewing information when user mouse hover links.


View Demo

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.


View Demo

6. Floating Layers

Need a floating div to show information, you can use this technique.


View Demo

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.

[sourcecode lang=”php”]$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# [/sourcecode]

View Demo

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 .


View Demo

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.



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.

View Demo

18. Random Images

The Rotate Images JavaScript swaps images automatically every time you reload the page.


View Demo

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.


View demo

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


View Demo

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.


View Demo

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.

[sourcecode lang=”java”]<br />var sTargetURL = "redirectiontarget.htm";<br /><br />function doRedirect()<br />{<br />setTimeout( "window.location.href = sTargetURL", 2*1000 );</pre><br />}<br /><pre>[/sourcecode]

25. Twitter Like Parsing URLs with JavaScript


View Demo

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.

View Demo

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:

  1. 10 Smart Javascript Techniques to Improve Your UI
  2. Javascript Cheat Sheets & Quick Reference Guides for Javascript Webmasters, Coders, Web developers & Designers
  3. 10 Smart Javascript Techniques For Manipulating Content
  4. Seven JavaScript Techniques You Should Be Using Today

Have missed any cool techniques? Share it with use by comment.


Pin It on Pinterest

Share This
Sign up for our Newsletter

Signup today for free and receive all new free articles published at Web Design Views.