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.
1.<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.
1.$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.
1.<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.
