Designs Graphics How-To Tutorials

35 Advance Techniques Of JavaScript – Tutorials

AD
A-Fresh-Bottom-Slide-Out-Menu-with-jQuery

AD
JavaScript tutorials is very welcomed by the web developer or designers since many modern techniques relied on the world wide web. They need always follow various web techniques and scripts for best user experience. Then following we prepared some basic but helpful JavaScript tutorials maybe you wanted.

Giving users the ability to interact with your web site is one of the key elements to its success. Allowing users to post a comment or response and socially sharing are two of the basic fundamentals of web interaction, another, maybe less popular, is giving users the quickfire option of grading or rating a post, by using the super simple five star method or by the voting up or down approach.

In this industry – now more than ever – designers are becoming coders, and coders are becoming designers. The idea of a developer ONLY performing frontend or backend work is quickly becoming a dated concept. jQuery will help to bridge the gap. Javascript is not an unattainable skill.

If you like this post, share it with your friends through email and social networks. Please don’t forget to subscribe to our RSS-feed, follow us on Twitter and like our facebook Fan page for recent updates.

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.

Advance Techniques Of JavaScript - Tutorials - Designsmag

How jQuery Beginners can Test and Improve their Code

jQuery’s arrival has made the process writing JavaScript laughably easy. But, you’ll notice that making small changes to your code improves the readability and/or performance significantly. Here are some tips to get you on your way to optimizing your code.

Advance Techniques Of JavaScript - Tutorials - Designsmag

Date / Time Picker

A date picker control. To open the calendar, click the icon at the right side of the input box.

Advance Techniques Of JavaScript - Tutorials - Designsmag

SlideViewer

Advance Techniques Of JavaScript - Tutorials - Designsmag

Textboxlist Auto-Completion

Advance Techniques Of JavaScript - Tutorials - Designsmag

LavaLamp for jQuery lovers!

Hover above and feel for yourself, the nifty effect of Lava Lamp. What you just experienced is nothing but the LavaLamp menu packaged as a plugin for the amazing jQuery javascript library. I personally believe that the effect rivals that of flash – Don’t you? Especially considering the fact that it is extremely light weight.

Advance Techniques Of JavaScript - Tutorials - Designsmag

Lightbox 2

Lightbox is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Advance Techniques Of JavaScript - Tutorials - Designsmag

LightWindow

After researching every single modal window, lightbox, slimbox, etc out there nothing fit the bill. Granted some of them were very nice but only fit a specific purpose, others were a nightmare on the code end, and others were just hacks of another. None of them truly supported all of the features we needed and those that were close could not be easily adapted without a bottle of Prozac near by.

Other caveats were the complete lack of ability to style and position the system, and the insane over-kill of some of the systems trying to
reproduce either another desktop (As if most computer users aren’t confused enough) or the reproduction of a popup window (Show me someone
who likes popup windows…). Lastly, most people didn’t actually test for their media types and how they behaved in other browsers and operating
systems (Yes the movies and Flash work in Firefox for the Mac).

Advance Techniques Of JavaScript - Tutorials - Designsmag

jQuery Tutorial – Create a Sliding Menu Using jQuery

This time we’ll be building a sleek menu using jquery and some styles. What’s beautiful about jquery is how you can change a few bits
and you get an entirely new effect.

Advance Techniques Of JavaScript - Tutorials - Designsmag

jQuery Tutorial – How to Make a Smooth Animated Menu with jQuery

Ever seen some excellent jQuery navigation that left you wanting to make one of your own? Today we’ll aim to do just that by building a menu
and animate it with some smooth effects. The menu has such a smooth animation because of a thing called “easing”. Adobe’s definition in the
Flash Developer Center is a little more complete:

“The term easing refers to gradual acceleration or deceleration during an animation, which helps your animations appear more realistic.
Easing creates a more natural appearance of acceleration or deceleration by gradually adjusting the rate of change.”

Advance Techniques Of JavaScript - Tutorials - Designsmag

AD

How to Detect the Social Sites Your Visitors Use

One of the great things about the web is the relative ease with which one can set up a new service. In social bookmarking alone with have Del.icio.us, Digg, Facebook, Fark, Mister-Wong, Newsvine, Reddit, Technorati, Slashdot, and StumbleUpon, to name a few. That’s great for competition, and that’s great for users, but it’s not so good for bloggers and content creators.

What are you to do if you want readers to promote your content? Kevin Rose, of Digg, put it succinctly: “Encourage your visitors to submit
their favorite stories directly to Digg [with a Digg badge].” Not everyone uses Digg. You have to decide on which bookmarking site, if
any, to dedicate your precious screen real-estate. It’s a hard choice. If you choose poorly your reader won’t vote—it’s not a single click
coupled and out-of-sight means out-of-mind—and your content losses its chance to make it big. You have to choose your horse wisely.

Advance Techniques Of JavaScript - Tutorials - Designsmag

Javascript Image Gallery Using Mootools

This free image gallery based on javascript is a quick & easy solution. Implementing the demo doesn’t requre knowledge of any javascript. In this article, I’ll explain and breakdown the javascript that runs the image gallery using the javascript framework Mootools.

Advance Techniques Of JavaScript - Tutorials - Designsmag

Making accordion menu using jquery

Last time, I’ve shown how to create accordion using jquery. But, In this post I’ll show you how can you create fancy accordion menu using jQuery. In this post, you’ll see two examples of accordion. First menu’s visibility get’s toggled on clicking on the header while the another menu’s visibility get’s toogled when mouse is moved over it.

Advance Techniques Of JavaScript - Tutorials - Designsmag

Sponsor Flip Wall With jQuery & CSS

Designing and coding a sponsors page is part of the developer’s life (at least the lucky developer’s life, if it is about a personal site of theirs). It, however, follows different rules than those for the other pages of the site. You have to find a way to fit a lot of information and organize it clearly, so that the emphasis is put on your sponsors, and not on other elements of your design.

We are using PHP, CSS and jQuery with the jQuery Flip plug-in, to do just that. The resulting code can be used to showcase your sponsors, clients or portfolio projects as well.

Advance Techniques Of JavaScript - Tutorials - Designsmag

jQuery.Syntax

jQuery.Syntax is an extremely fast and lightweight syntax highlighter written in JavaScript. It has dynamic loading of syntax source files and integrates cleanly using CSS or modelines.

Advance Techniques Of JavaScript - Tutorials - Designsmag

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated

About the author

Naaz

Naaz is a web designer and loves to find new tips and tricks for creativity purposes and likes to share them with the people.
Follow him on Google+ to get latest posts from the Author.

2 Comments

Leave a Comment

Get you FREE gift Today

Subscribe to our mailing list and get your free gift now