27+ Handy Javascript Techniques for Web Designer

post1
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.

javascript_rollover

[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,

roundedcorner

View Demo

3. Box Shadow, Gradient Background

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

border_shadow

View Demo

4. Tooltip

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

tooltip

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.

javascript_form

View Demo

6. Floating Layers

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

floating

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

disbale_right_click

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.

event_handler

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.

alert_prompt

11. BlendTrans Filter JavaScript/ Fade in Effect/ Hide Show

Create Fade in effect for image or button using this script .

fade_in

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.

loading

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.

png_fix

14. Page Sliders

Page Sliders are another cool way to build interactivity in your website. Here are some of best page sliders.

slider

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.

twitter_status

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.
drag_drop

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.
scroller

View Demo

18. Random Images

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

random_images

View Demo

19. Continuous Horizontal Image Scroller

Have a gallery of scrolling images horizontally on your pages

h_scroller

20. Dynamic Text Gloss Effect

fancy_text

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.

glossy

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.

feed2js

23. Table Sorter

table_sort

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.

stylesheet_switcher

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

twitter_url

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.
div_slide

View Demo

27. Generate Random Numbers

Using the JavaScript math object you can create some handy scripts for generating different kinds of numbers.

random_number

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.


Author:

Kawsar Ali is a web designer who also likes blogging. In his spare time he walks around with a Nikon D5100 hunting for good textures.


  • Los Angeles SEO Services

    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.

  • http://www.philsbury.co.uk Phil

    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! :)

  • Kawsar Ali

    @Danh ba web 2.0: Thanks

  • Kawsar Ali

    @Dannyprose: It is fixed. :)

  • http://www.dannyprose.com Dannyprose

    Doesn’t look like #12 (preloader) is linking to the right page.

  • http://kivodesigns.com Mike Kivikoski

    For #1, use CSS Sprites and you won’t get that flicker on rollover.

    Thanks for the list. :)

  • http://www.nilsriedemann.de nils.r

    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…

  • Bzuk

    Nice list with all modern scripts.

  • http://adelineyaw.com Adeline

    This is a good list! I haven’t used ‘Feed to JavaScript’ yet but will give it a go :)