In today’s news round-up we feature four powerful and new jQuery plugins that will add plenty of cool functionalties to your sites or applications.

Phono – jQuery Phone Plugin

Phono is a simple JQuery plugin and JavaScript library that turns any web browser into a phone; capable of making phone calls and sending instant messages. You can even connect to SIP clients; all with a simple unified API.
Phono – jQuery Phone Plugin

Wijmo – jQuery UI Widgets

Wijmo is a complete kit of over 30 jQuery UI Widgets. It is an extremely dangerous mixture of jQuery, CSS3, SVG, and HTML5 that when combined become an unstoppable force on the web.
Wijmo – jQuery UI Widgets

SlideNote – A jQuery Plugin For Sliding Notifications

SlideNote is a customizable, flexible jQuery plugin that makes it easy to display sliding notifications on your website or in your web application.
SlideNote – A jQuery Plugin For Sliding Notifications

IMGr – jQuery Image Rounder

IMGr is a jQuery plugin for rounding image corners. The script utilizes CSS3 in modern web browsers, and VML in Internet Explorer 8 and below.
IMGr – jQuery Image Rounder

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have a small, yet cool, selection of useful tools, apps and resources for web designers. First up, we have a wonderfully useful jQuery plugin Quovolver) for displaying quotes in a stylish way, next up we have a small, yet very handy app for generating a grid (Gridulator) and finally a fun time-killing bookmarklet that can destroy everything on a web page.

Quovolver – a simple jQuery plugin for revolving quotes

Quovolver is a simple extension for jQuery that takes a group of quotes and displays them on your page in an elegant way.
Quovolver – a simple jQuery plugin for revolving quotes

Gridulator – Make pixel grids, lickety-split

Tell Gridulator your layout width and the number of columns you want, and it’ll spit back all the possible grids that have nice, round integers. Just the thing for pixel-based design folk. There are inline previews, courtesy of the canvas element, and when you’re all set Gridulator can crank out full-size PNGs for you, ready for use in your CSS, Photoshop docs, or what have you.
Gridulator – Make pixel grids, lickety-split

Hello, want to kill some time?

Hello, want to kill some time?

By Paul Andrew (Speckyboyand speckyboy@twitter).

Slideshows and image galleries are all the rage at the moment, there are loads of new techniques, plugins and tutorials cropping up everywhere. In this design news round-up we have chosen our favorites from recent weeks.

SIDEWAYS – jQuery fullscreen image gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery and some simple CSS.
SIDEWAYS – jQuery fullscreen image gallery

Full Page Image Gallery with jQuery

In this tutorial you can learn how to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background.
Full Page Image Gallery with jQuery

Orbit: A Slick jQuery Image Slider Plugin

Orbit is a killer jQuery plugin that lets you create a simple, effective and beautiful slider for images of any size, and even includes some parameters for making awesome captions and a sweet timer.
Orbit: A Slick jQuery Image Slider Plugin

By Paul Andrew (Speckyboyand speckyboy@twitter).

JQuery is a framework for JavaScript which was released in 2006. The whole framework was developed by John Resig, an American Resident, Currently working with Mozilla Corporation as a JavaScript Tool Developer. Although there are many other JavaScript frameworks jQuery has been proven best in all the frameworks. The other frameworks like MooTools, Spry, midori, qooxdoo also allow you to manipulate the client side HTML content, but jQuery became very popular among all these because of its flexibility, easy coding standards and ability to deliver robust outcomes. In simple language jQuery makes the tasks done by JavaScripts easy, fast and understanding. One can manipulate css, content, images, HTML attributes and even the server side data by implementation of Ajax with jQuery.

In simple language jQuery makes the tasks done by JavaScripts easy, fast and understanding. One can manipulate css, content, images, HTML attributes and even the server side data by implementation of Ajax with jQuery.

Before jQuery, whenever it comes to animation or sliding, the only thing came into everyone’s mind was Flash. But after jQuery, one is totally ignoring using flash wherever possible. The main reason behind this is not that jQuery is the best over flash, but the implementation of jQuery over flash is better, easy and quick. Whenever one needs to place any flash content in their website, the client browser must be supportive to show the content of the flash. i.e. A Flash player is always needed. Now, as the flash player is needed, what would happen is that the control for that content is given to the flash player by the browser and hence the third party comes into existence costing the speed of the website. So if the browser is not fully able to load the content of a web page by its own, and requires some other application to show some part of the page, it will definitely take more time to load the page. And what about the users who do not have flash player in their browser at all? They will first need to download it as an add-on and then only they will be able to serf the page fully, which definitely lessens the interest of the visitor.

Where as in jQuery every kind of animations are possible as the Flash gives and need not the third party application to load or run a code and content. It is because most of the browsers introduced till date in this world which supports JavaScript, also supports jQuery, remember – jQuery is the framework for JavaScript. Look, how easy it is! One more benefit of jQuery over Flash is that any naïve developer or programmer can easily handle it with little sweat, but Flash is not any Tom-Dick-&-Harry’s cup of tea. Hence, the ultimate benefit of jQuery is less men power, as the developer himself can create the animation and scripting. To use jQuery is also very simple, one just need to add only a single file called jquery.js (jQuery Library) and little code in the HTML page where the magic is to be done. jQuery provides slider, menu bar, image rotation, image fading, text animation, interaction between client side and server side data, and whatever you can think of.

That’s the reason you would see the jQuery more and flash less in the recent websites. Flash is totally becoming or I can say became obsolete from the world of Web. Now days one would prefer flash only if they have a special requirement of the flash action scripts. Other than this don’t expect the anymore use of the Flash in the websites now.

Few advantages of jQuery over flash are:

1) jQuery is compatible with every browser.

2) jQuery is also compatible with iPhone, iPad, cell phones etc. which Flash is not.

3) jQuery is very less in size and a single jQuery can create as many animations, sliding and other effects. But in the case of Flash you will need individual flash files for every animations and sliding.

4) jQuery is a freeware where as if one want to develop something in Flash one would need to purchase a Flash Development Suite.

5) Flash files are always large in size. On the other hand jQuery file is less than 60kb in size.

6) Flash always need the upmost skill to create even a single simple stuff, but in jQuery any one little familiar with HTML and JavaScript can easily create anything.

These are very few, but the list is very long. There are only two disadvantages of jQuery over Flash, which are:

1) jQuery does not give high 3D effects and,

2) JavaScript can be disabled from the browser which will disable jQuery too.

Few examples of the jQuery artwork like flash are given below:

1) http://webdesignledger.com/tutorials/13-excellent-jquery-animation-techniques

2) http://vandelaydesign.com/blog/web-development/jquery-animation-tutorials/

3) http://www.queness.com/post/1942/10-stunning-examples-of-jquery-animations

Sometimes to get your development juices flowing you just need a meaty project or an in-depth tutorial that you can sink your teeth into and lose yourself for a few hours in coding bliss. And that’s what we have for you today, three tutorials that will satisfy your code craving! They are not only roll-up-your-sleeves and put-on-a-pot-of-coffee good but they will also introduce you to some of the latest CSS3, HTML5 and jQuery techniques.

A jQuery, CSS3 & HTML5 Hover-Based Interface

In this awesome tutorial you will learn how to create a useful hover-based user interface using jQuery, CSS3, HTML5 and @font-face. The project you’ll be creating could easily be used for a portfolio or business site and the concepts you’ll learn could certainly be used to expand the idea further.
A jQuery, CSS3 & HTML5 Hover-Based Interface

Dynamic FAQ Section w/ jQuery, YQL & Google Docs

In this tutorial, you will build a dynamic FAQ section. The script, with the help of jQuery & YQL, will pull the contents of a shared spreadsheet in your Google Docs account, and use the data to populate the FAQ section with questions and answers.
Dynamic FAQ Section w/ jQuery, YQL & Google Docs

How to easily create charts using jQuery and HTML5

For years, Flash was the only solution to display a dynamic chart on a website. But thanks to modern techniques, the dying Flash isn't needed anymore. In this tutorial,you'll be shown how easy it is to transform a basic HTML table into a profesionnal looking chart using visualize.js, a very useful jQuery plugin.
How to easily create charts using jQuery and HTML5

By Paul Andrew (Speckyboyand speckyboy@twitter).

There really is no limit to what can be achieved with jQuery. And when it is in the right hands those limits are challenged all the time, constantly pushing back its seemingly endless boundaries by developing fresh and creative techniques. In this design news round-up we have collected our favorite recent jQuery tutorials.

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL →

jQuery Quickie: Slot Machine Style Navigation

jQuery Quickie: Slot Machine Style Navigation →

How To Create A Great Contact Form

How To Create A Great Contact Form →

Music Portfolio Template with HTML5 and jQuery

Music Portfolio Template with HTML5 and jQuery →

A Simple Movie Search App w/ jQuery UI

A Simple Movie Search App w/ jQuery UI →

By Paul Andrew (Speckyboyand speckyboy@twitter).

Today’s news is a refreshing look at some of the most recent jQuery tutorials and techniques. Accompanied with the recent popularity of CSS3, some of these new techniques are groundbreaking and others simply take a fresh look at older design techniques.

CSS3 Rounded Image With jQuery

In this tutorial you will use the CSS3 border-radius and box-shadow feature to make the image element look like the screenshot above.
CSS3 Rounded Image With jQuery

Image Highlighting and Preview with jQuery

In this tutorial you will be shown how to highlight and preview images that are integrated in an article or spread over a page. This is a nice way to allow your users to view a bigger version of an image that is relevant to some context.
Image Highlighting and Preview with jQuery

Simple AJAX Commenting System

In this tut,, you are going to build a Simple AJAX Commenting System. It will feature a gravatar integration and demonstrate how to achieve effective communication between jQuery and PHP/MySQL with the help of JSON.
Simple AJAX Commenting System

Interactive Photo Desk with jQuery and CSS3

The idea of this tutorial is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.
Interactive Photo Desk with jQuery and CSS3

By Paul Andrew (Speckyboyand speckyboy@twitter).

In today’s news round-up we have collected some of the best and freshest jQuery resources. You’ll find some useful and powerful plugins, as well as an update of the jQuery Visual cheat sheet from woorkup and there is also a very detailed and comprehensive online jQuery training manual, that is called jQuery Fundamentals.

jQuery Fundamentals

The purpose of this book is to provide an overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning. This book was designed as material to be used in a classroom setting, but you may find it useful for individual study.
jQuery Fundamentals

jQuery 1.4.2 Visual Cheat Sheet

jQuery Visual Cheat Sheet, is a refined and updated version of the popular jQuery Cheat Sheet and its finally here. The new edition includes all the reference you will ever need for the jQuery 1.4.2 API.
jQuery 1.4.2 Visual Cheat Sheet

jQuery FormLabels Plugin

The idea of using captions on form input boxes is not new, but all previous methods of providing this functionality have a few disadvantages. Every form is different, so building a uniform label generator was not an easy task.
jQuery FormLabels Plugin

jQuery Text Change Event

It's a common problem, you have a text form that you need to validate client side. It's easy enough to do this when the form is submitted but in some cases better to do as they type. Implementing this requires binding events to the keyup event, and a couple other events if you want to detect text changes on cut and paste. Even if you're a JavaScript god it's tedious to keeping writing this logic over and over again. Be smart and use the ZURB text change event plugin instead.
jQuery Text Change Event

By Paul Andrew (Speckyboyand speckyboy@twitter).

Image and content sliders are everywhere, they are a trend that sprung to life last year with a bang and has escalated to point were seemingly every other new web design project has one. As a result of this popularity there are literally hundreds of jQuery slider plugins and scripts freely available, all will offer slightly different functionality, making it very hard to choose which one best suits you.

In this news round-up we take a closer look at the best of the freshest jQuery slider plugins.

Nivo Slider – The Most Awesome jQuery Image Slider

Nivo Slider is a lightweight (5kb compressed) jQuery plugin for creating good-looking image sliders. It simply converts an element that wraps images into a slider and offers 9 unique transition effects.
Nivo Slider – The Most Awesome jQuery Image Slider

Galleria – A JavaScript gallery for the Fastidious

Version 2 of Galleria is a JavaScript image gallery unlike anything else. It can take a simple list of images and turn it into a foundation of multiple intelligent gallery designs, suitable for any project.
Galleria – A JavaScript gallery for the Fastidious

Recreating the MLB.com Content Switcher with jQuery and CSS3

The goal of this project is to try to recreate the Flash content switcher from MLB.com using jQuery and CSS3.
Recreating the MLB.com Content Switcher with jQuery and CSS3

jQuery.popeye 2.0 – an inline lightbox alternative

jQuery.popeye is an advanced image gallery script, built to help you save space when displaying a collection of images and offers your users a nice and elegant way to show a big version of your images without leaving the page flow. The script is quick and easy to setup and it offers great flexibility in both behaviour and styling.
jQuery.popeye 2.0 – an inline lightbox alternative

By Paul Andrew (Speckyboyand speckyboy@twitter).

Within web design there are a multitude of solutions and techniques that cover the same problem. No solution is entirely correct, and none are entirely wrong. That is the beauty, and sometimes the agony, of web design.

Sometimes you just want the most basic and simplest technique to solve a popular problem, and that is what today’s Design Reviver Answers question covers: How do you create a nice drop down menu effect?

You can leave a comment below or you can leave your solution on the original posted question on Answers.

How do you create a nice drop down menu effect?

This question was originally asked by Elisabett Monroy, and you will find the favorite (as voted by Answers users) solution below:

Answer from Rubacode:

…and here is the code for the menu:

Now the CSS for Styling:

ul.topnav {
    list-style: None;
    padding: 0 20px;
    margin: 0;
    float: Left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: Url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: Left;
    margin: 0;
    padding: 0 15px 0 0;
    position: Relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: Block;
    text-decoration: None;
    float: Left;
}
ul.topnav li a:hover{
    background: Url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: Left;
    background: Url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: Center bottom; cursor: Pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: None;
    position: Absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: None;
    float: Left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: Both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: Left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

And a little bit of jQuery:

$(document).ready(function(){

    $("ul.subnav").parent().append(""); //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)

    $("ul.topnav li span").click(function() { //When trigger is clicked...

        //Following events are applied to the subnav itself (moving subnav up and down)
        $(this).parent().find("ul.subnav").slideDown('fast').show(); //Drop down the subnav on click

        $(this).parent().hover(function() {
        }, function(){
            $(this).parent().find("ul.subnav").slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
        });

        //Following events are applied to the trigger (Hover events for the trigger)
        }).hover(function() {
            $(this).addClass("subhover"); //On hover over, add class "subhover"
        }, function(){    //On Hover Out
            $(this).removeClass("subhover"); //On hover out, remove class "subhover"
    });

});

This solution is pretty straight forward and very easy to implement, do you have a better solution? We would love to hear about it.

You can leave your solution below in the comment section, or you can leave an answer/solution here: How do I create a nice drop down menu effect? on Answers.

Unanswered Answers

Can you help with this weeks unanswered questions?

1. Is it possible to Change the Google Maps API Key Dynamically Using JavaScript?
2. Need to get the XML content of a node as a string?
3. What Do I Need to Parse Content With Regular Expressions Using jQuery?
4. How Can I Convert HTML Entities to Unicode Character In JavaScript?
5. What's a Good Way to Refresh/Load a Web Page for Every 10 Seconds to View Updated Information?
6. Does Anyone Know of Any Browsers that May Have Problems Caching XMLHTTPRequest Responses?
7. How Can I Get a Div to Automatically Adjust to the Size of the Background I Set for it Without Setting a Specific Height for it?
8. What's a Good Way to Test Connectivity in PHP?
9. How Can I Keep a Centered Background Image from Breaking the Layout If the Browser Window is Resized?
10. What File Permissions Should Be Set for Uploaded Files?

Thanks again, firstly to everyone who asked a question, but most importantly thanks to everyone that took the time to offer always helpful and useful answers.