For those of you that don’t know, jQuery is a rich JavaScript library that makes it possible for web developers to produce quite remarkable effects with just a few lines of code. It makes writing lengthy JavaScript code bearable, by turning long, repetitive tasks into shorter, more understandable ones. It’s simple to use, saving you time and effort. jQuery is massively popular, for obvious reasons, and everybody’s using it. To make sure you stand out, it’s vital you incorporate some of the more quirky capabilities of jQuery into your web sites. That’s where this list comes in!

We bring you 20 tricks capable of transforming a boring site into a slick, cool and interesting one that users will want to engage with again and again. Some of these tricks are more suited to beginners, while others will teach even the biggest jQuery geeks a thing or two.

1.) Image Cross Fade Transition

Learn how to fade one image into another. Three different methods of achieving this aim are discussed here: using two images, using a single image and simply using CSS.

2.) Vertically Scrolling Menu

Create an innovative and slick vertically scrolling menu for your website that’s really easy for visitors to use.

3.) Create a Fancy Share Box

Most sites these days feature social media share links, but most present them in a really boring way. You can make your site stand out by using the tricks outlined here. Align and overlap your share links to save space, looking sleek in the process.

4.) Create Background Image Animations

Creating background image animations is easier than you think, using jQuery. You’ll need to download the Background-Position plugin to do it, but a minimal amount of code is required. Who needs Flash?

5.) Create a Smooth jQuery Popup

Learn to create a polished popup using HTML, CSS and the jQuery Library. Get it done in just two easy steps.

6.) Use a Cheat Sheet

A well-designed cheat sheet makes using jQuery simple. Above, you’ll find a great online cheat sheet for 1.2.6.

7.) Build An Incredible Login Form

This is a great space-saving jQuery trick, but it’s not as easy as some of the others in this list. Follow 16 steps to build an animated login form which folds out from the top panel when clicked.

8.) Create a Slick Tabbed Content Area

This easy to follow tutorial will guide you through a relatively simple method for creating a minimal, really functional tabbed content area, using CSS and jQuery.

9.) Rounded Corners

Use jQuery’s Wrap, Prepend and Append functions to create rounded corners, to make your site look that little bit more welcoming.

10.) slideViewer

Use slideViewer, a lightweight (1.5kb) jQuery plugin, to create a smart looking image gallery without having to write loads of HTML. It’s customisable and intuitive.

11.) Build a LavaLamp Menu

The LavaLamp menu is really satisfying to use and looks great. Follow this tutorial to create your own.

12.) Style Switcher

Use jQuery and PHP to create a clever style switcher which will really make your website stand out from the crowd. In this example, ‘day’ and ‘night’ styles are used, but there are thousands of potential styles which could be combined using this method.

13.) jQuery Tools

jQuery Tools is a collection of six different, equally amazing tools for you to use in your website. These include the brilliant Scrollable, which makes scrollbars a thing of the past.

14.) Implement a News Ticker

Create a great news ticker, which features fade in and out effects, with jQuery and just 10 lines of JavaScript code.

15.) Create an Amazing Music Player

Use xHTML and jQuery to create a fantastic music player, which users can interact with by clicking and dragging with their mouse or clicking their directional keys and space bar.

Click here to see full tutorial…

Designers often have a lot of code snippets that is used most of the time. There are loads of handy scripts, bits of html and widgets that you can incorporate into your websites and blogs

Here i’ve listed the best 15 site to download Ready to use Javascript code snippets that will help you a lot and reduce your time and effort in you web development process

I bet most of the developers know these websites, just thought of compiling them together, If I’ve missed some of you favorite sites please mention in comments, so other users can find that site

1) Web Resources Depot

2) Dev Snippets

3) Ajax Rain

4) Dynamic Drive

5) Hot Scripts

6) Dzone Snippets

7) Dhtml Goodies

Web Appers

9) JavaScript Kit

10) Mini Ajax

11) Fat Scripts

12) Stunicholls

13)Yahoo UI Library

14) Open Source Free

15) JavaScript.Internet

See more tutorials here…

Can you spot the difference between these two selectors?

#header.callout {  }

#header .callout { }

They look nearly identical, but the top one has no space between “#header” and “.callout” while the bottom one does. This small difference makes a huge difference in what it does. To some of you, that top selector may seem like a mistake, but it’s actually a quite useful selector. Let’s see the difference, what that top selector means, and exploring more of that style selector.

Here is the “plain English” of “#header .callout”:

Select all elements with the class name callout that are children of the element with an ID of header.

Here is the “plain English” of “#header.callout”:

Select the element which has an ID of header and also a class name of callout.

Maybe this graphic will make that more clear:

Combinations of Classes and IDs

The big point here is that you can target elements that have combinations of classes and IDs by stringing those selectors together without spaces.

ID and Class Selector

As we covered above, you can target elements by a combination of ID and class.

<h1 id="one" class="two">This Should Be Red</h1>

 #one.two { color: red; }

Double Class Selector

Target an element that has all of multiple classes. Shown below with two classes, but not limited to two.

<h1 class="three four">Double Class</h1>

.three.four { color: red; }

Multiples

We aren’t limited to only two here, we can combine as many classes and IDs into a single selector as we want.

.snippet#header.code.red { color: red; }

Although bear in mind that’s getting a little ridiculous =)

Example

So how useful is all this really? Especially with ID’s, they are supposed to be unique anyway, so why would you need to combine it with a class? I admit the use cases for the ID versions are slimmer, but there are certainly uses. One of those is overriding styles easily.

#header { color: red; } #header.override { color: black; } 

The second targets the same element, but overrides the color, instead of having to use:

.override { color: black !important }

or perhaps prefacing the selector with something even more specific.

More useful is multiple classes and using them in the “object oriented” css style that is all the rage lately. Let’s say you had a bunch of divs on a page, and you used multiple various descriptive class names on them:

<div class="red border box"></div> <div class="blue border box"></div> <div class="green border box"></div> <div class="red box"></div> <div class="blue box"></div> <div class="green box"></div> <div class="border box"></div>

They all share the class “box”, which perhaps sets a width or a background texture, something that all of them have in common. Then some of them have color names as classes, this would be for controlling the colors used inside the box. Perhaps green means the box has a greenish background and light green text. A few of them have a class name of “border”, presumably these would have a border on them while the rest would not.

So let’s set something up:

.box { width: 100px; float: left; margin: 0 10px 10px 0; } .red { color: red; background: pink; } .blue { color: blue; background: light-blue; } .green { color: green; background: light-green; } .border { border: 5px solid black; }

Cool, we have a good toolbox going here, where we can create new boxes and we have a variety of options, we can pick a color and if it has a border or not just by applying some fairly semantic classes. Having this class name toolbox also allows us to target unique combinations of these classes. For example, maybe that black border isn’t working on the red boxes, let’s fix that:

.red.border { border-color: #900; }

Border color on red box changed because it had both the red class and border class

Based on this demo page.

Specificity

Also important to note here is that the specificity values of selectors like this will carry the same weight as if they were separate. This is what gives these the overriding power like the example above.

Browser Compatibility

All good current browsers support this as well as IE back to version 7. IE 6 is rather weird. It selects based on the first selector in the list. So “.red.border” will select based on just “.red”, which kinda ruins things. But if you are supporting IE 6, you are used to this kind of tomfoolery anyway and can just fix it with conditional styles.

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

This single element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector:

h2[rel=friend] { /* woohoo! */ }

There is a lot more too attribute selectors though, so let’s look closer at all the different options and try to cover some “real world” scenarios on when they might be useful.

Attribute Exactly Equals Certain Value

In the example we used above, the attribute of the h2 element was “friend”. The CSS selector we wrote targeted that h2 element because it’s rel attribute was exactly “friend”. In other words, that equals sign means just just what you think it does… an exact match. See another basic example:

<h1 rel="external">Attribute Equals</h1>

h1[rel=external] { color: red; }

A great real world example of this is styling a blogroll. Let’s say you had a list of links to friends sites like this:

<a href="http://perishablepress.com">Jeff Starr</a> <a href="http://davidwalsh.name">David Walsh</a> <a href="http://accidentalninja.net/">Richard Felix</a>

Then you wanted to style each link slightly differently. The traditional way would probably be to give each link a class name in which to target, but that requires additional markup which is always a nice thing to avoid (semantics and all). Another way might be to use :nth-child, but that requires their order to never change. This is the perfect use for attribute selectors… the links already have a unique attribute in which to target!

a[href=http://perishablepress.com] { color: red; }

I believe the most common use of regular attribute selectors is on inputs. There are text, button, checkbox, file, hidden, image, password, radio, reset, and submit (did I miss any?). All of them are <input>’s, and all of them are very different. So doing something like input { padding: 10px; } is a bad idea most of the time. It’s very common to see things like:

input[type=text] { padding: 3px; } input[type=radio] { float: left; }

It’s really the only way to get your hands on certain types of inputs without screwing up the others and without adding extra markup.

Attribute Contains Certain Value Somewhere

This is where it starts getting more interesting. The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit. For example, “*=” means “match the following value anywhere in the attribute value.” Look at this example:

<h1 rel="xxxexternalxxx">Attribute Contains</h1>

h1[rel*=external] { color: red; }

Remember that classes and ID’s are attributes too, and can be used used with attribute selectors. So let’s say you were writing CSS for a site where you couldn’t control the markup and a sloppy developer had three DIVs you need to target:

<div id="post_1"></div> <div id="post_two"</div> <div id="third_post"></div>

You could select them all with:

div[id*=post]  { color: red; }

Attribute Begins with Certain Value

<h1 rel="external-link yep">Attribute Begins</h1>

h1[rel^=external] { color: red; }

A real world example of using this would be, say, that you wanted to style every single link to your friends site different than other links. Doesn’t matter if you are linking to their homepage or any subpage, any links to them you want to style up.

a[href^=http://perishablepress.com] { color: red; }

That will match a link to their homepage, but also any other subpages as well.

Attribute Ends with Certain Value

We can select based on how attribute values begin, why not end?

<h1 rel="friend external">Attribute Ends</h1>

h1[rel$=external] { color: red; }

Honestly I struggle a bit to find the perfect real world example of using this, but I do like that it exists. Perhaps you could use it to look for links that end in characters that will likely have no significant effect:

a[href$=#], a[href$=?] { color: red; }

Attribute is within Space Separated List

You probably already knew that you could apply multiple classes to elements right? Well if you do that, you can still use .class-name in CSS to target any one of them. Attribute selectors aren’t that easy. If your rel attribute has multiple values (e.g. values in a space separated list) you’ll need to use “~=”:

<h1 rel="friend external sandwich">Attribute Space Separated</h1>

h1[rel~=external] { color: red; }

You might be thinking, why would I use this when *= would also match this and be more versatile? Indeed it is more versatile, but it can be too versatile. This selector requires the spaces around the value where as *= would not. So if you had two elements one with rel=home friend-link and one with rel=home friend link you are going to need the space-separated selector to target the second one properly.

Attribute is within Dash Separated List

The dash separated list is very similar to the space separated list above, both in it’s use and how it’s nice to have for stricter enforcement beyond what *= can do.

 <h1 rel="friend-external-sandwich">Attribute Dash Separated</h1>

h1[rel|=external] { color: red; }

Multiple Attribute Matches

Vital to note is that you can use multiple attribute selectors in the same selector, which requires all of them to match for the selector itself to match.

<h1 rel="handsome" title="Important note">Multiple Attributes</h1>

h1[rel=handsome][title^=Important] { color: red; }

Browser Support

Every single example above works in all modern browsers: Safari, Chrome, Firefox, Opera, and IE. Internet Explorer has perfect support for all of these down to version 7, but zero support in 6. To test in your browser, see the test page. If the line/selector style is in red, it works.

The Idea

The idea is to have a highlight of some kind (a background or an underline) follow you around as you mouse over the different links in the navigation. This will happen with jQuery and it’s animation abilities. As such, the “magic line” will only be appended via JavaScript. Once added to the list and styled, as you mouse over the different links, it figures out the left positioning and the width and animates to match.

HTML

Typical list here…. It has the “group” class because it’s going to be a horizontal row and will need the clearfix so it has height. The ID is for the JavaScript to target it.

<div class="nav-wrap"> <ul class="group" id="example-one"> <li class="current_page_item"><a href="#">Home</a></li> <li><a href="#">Buy Tickets</a></li> <li><a href="#">Group Sales</a></li> <li><a href="#">Reviews</a></li> <li><a href="#">The Show</a></li> <li><a href="#">Videos</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Magic Shop</a></li> </ul> </div>

Notice the .nav-wrap div around it. That is used because of the styling, the bars go full width of the screen the but the navigation is centered within. This centering brings up an issue when we start the JavaScript.

CSS

Do the ol’ inline list elements with floated left anchors to get the list horizontal and avoid stairstepping. The magic line is absolutely positioned under the bar, so that it doesn’t cause jitter (mouse over a link, animates over, mouse is now on magic line not the link, animates back, etc.) Everything else is purely stylistic.

.nav-wrap { margin: 50px auto;  background-color: rgba(0,0,0,0.6); border-top: 2px solid white; border-bottom: 2px solid white; } #example-one { margin: 0 auto; list-style: none; position: relative; width: 960px; } #example-one li { display: inline; } #example-one li a { color: #bbb; font-size: 14px; display: block; float: left; padding: 6px 10px 4px 10px; text-decoration: none; text-transform: uppercase; } #example-one li a:hover { color: white; } #magic-line { position: absolute; bottom: -2px; left: 0; width: 100px; height: 2px; background: #fe4902; }

jQuery JavaScript

1. When DOM is ready…
2. Set up variables including current left offset of the navigation
3. Set up resize function on the window to reset that offset should it change (because of the centering)
4. Append the magic line to the nav
5. Set up position and width of the magic line for the current page item
6. Also set the original width and position as data, so it can be used to animate back to
7. On hover, calculate the new width and new left position and animate to it
8. On the hover callback (mouse out), animate back to original

$(function(){ var $el, leftPos, newWidth, $mainNav = $("#example-one"), pageOffset = $mainNav.offset().left;

// Fixing the offset if the window changes size $(window).resize(function() { pageOffset = $mainNav.offset().left; });

$mainNav.append("<li id='magic-line'></li>"); var $magicLine = $("#magic-line");

$magicLine .width($(".current_page_item").width()) .css("left", $(".current_page_item a").offset().left - pageOffset) .data("origLeft", $magicLine.offset().left - pageOffset) .data("origWidth", $magicLine.width());

$("#example-one li").find("a").hover(function() { $el = $(this); leftPos = $el.offset().left - pageOffset; newWidth = $el.parent().width(); $magicLine.stop().animate({ left: leftPos, width: newWidth }); }, function() { $magicLine.stop().animate({ left: $magicLine.data("origLeft"), width: $magicLine.data("origWidth") }); }); });

Issues

Opera is weird about it. It makes the original width of the magic line the full width of the nav bar and shortens it from the right on hovers. I haven’t been able to figure it out. If you do, awesome, let me know I’ll update this article and demos.

Alternate Version

Check out the demo link below for an alternate version that uses a background instead of a line, and animates color as well as position and width. Basically the same, except the CSS is slightly different and the JavaScript pulls the color of the new list item from a rel attribute in the HTML.

Color animations in jQuery require the color plugin. I was just moaning about how it doesn’t work with RGBa color, and someone sent me a patch that does, which is included in the download. I’m really sorry, but I can’t remember their name! Speak up if it was you and I’ll update this and credit the patch to you.

All Yours

As always, feel free to do whatever you want with it. Preferably, use it in corporate projects and earn wheelbarrows of cash.

View Demo   Download Files

There is a CSS selector, really a pseduo-selector, called nth-child. Here is an example of using it:

ul li:nth-child(3n+3) { color: #ccc; }

What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? Let’s take a look.

It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. Those should be pretty obvious. “Even” selects even numbered elements, like the 2nd, 4th, 6th, etc. “Odd” selects odd numbered elements, like 1st, 3rd, 5th, etc.

As seen in the first example, nth-child also accepts equations in between those parentheses. The simplest possible equation? Just a number. If you put simply a number in the parentheses, it will match only that number element. For example, here is how to select only the 5th element:

ul li:nth-child(5) { color: #ccc; }

Let’s get back to the “3n+3″ from the original example though. How does that work? Why does it select every third element? The trick is understanding the “n” and algebraic equation that represents. Think of “n” as starting at zero and then a set of all positive integers. Then complete the equation. So the 3n is “3xn”, and the whole equation together is “(3xn)+3″. Now substituting in the zero and positive integers, we get:

(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.

How about the :nth-child(2n+1)?

(2 x 0) + 1 = 1 = 1st Element
(2 x 1) + 1 = 3 = 3rd Element
(2 x 2) + 1 = 5 = 5th Element
etc.

Hey wait! That’s the same as “odd”, so probably don’t need to use that one very often. But wait now. Haven’t we exposed our original example as being overly complicated? What if instead of “3n+3″, we used “3n+0″, or even simpler “3n”.

(3 x 0) = 0 = no match
(3 x 1) = 3 = 3rd Element
(3 x 2) = 6 = 6th Element
(3 x 3) = 9 = 9th Element
etc.

So as you can see, the matches are exactly the same, no need for the “+3″. We can use negative n values, as well as use subtraction in the equations. For example, 4n-1:

(4 x 0) – 1 = -1 = no match
(4 x 1) – 1 = 3 = 3rd Element
(4 x 2) – 1 = 7 = 7th Element
etc.

Using “-n” values seems a little weird, because if the end result is negative there is no match, so you’ll need to add to the equation to get it back positive again. As it turns out, this is a rather clever technique. You can use it to select the “first n elements” with “-n+3″:

-0 + 3 = 3 = 3rd Element
-1 + 3 = 2 = 2nd Element
-2 + 3 = 1 = 1st Element
-3 + 3 = 0 = no match
etc.

Sitepoint has a nice reference guide, which includes this handy-dandy table which I’ll shameless republish here:

Browser Compatibility

nth-child is one of those rather unfortunate CSS attributes that is caught between nearly full cross-browser compatibility, except for completely zero support in IE, even IE 8. So when it comes to it’s use, if the end result is “progressive enhancement” in some fashion (e.g. applying a cool color palette to table rows, for example), then by all means, go for it. But you probably shouldn’t use it if you are doing something more important, like relying on it for site structure. For example, removing the right margin from every third box in a three by three grid of boxes, so they will fit properly.

One saving grace here is that if you are using jQuery, which supports all CSS selector including :nth-child, the selector will work, even in Internet Explorer.

Still not getting it?

I’m not a big fan of the phrase “I’m a visual learner”. Of course you are, everybody is. Visual aids are enormously helpful in situations just like this. To help, I put together a little nth-child tester page. There, you can type in equations and see the results of what it selects below.

How do you make sure that you get all of your work done on time?

As freelancers, we wear many different hats. In addition to performing our freelancing specialty for the client, we’re also the sales staff, the manager, the support team, and the accountant all rolled into one person.

For many freelancers the project planning tasks that go along with freelancing may seem kind of overwhelming (especially if they’ve never done any project planning). Other freelancers may find that they need to provide the same kind of project plans to their clients that would have been required of them in the corporate world.

Either way, project planning can be a lot of extra work for a freelancer. The project planning task is difficult to handle without good tools to work with.

In this post, I list some project management tools that are either freeware or open source.

Free Project Management Applications

Fortunately, there is a huge variety of project management tools available to help freelancers and small business owners with their project planning needs. Some of the very best tools require a substantial financial investment on the part of the freelancer. However, there other tools that may not be quite as full-featured that will work fine for a freelancer who is just starting out or for a very small business owner.

Here is a list of ten project management software applications that are either free (or available at a very low cost) with a brief description of each:

• jxProject–Free application that includes many of the features expected of a project management package such as: task dependencies, resource scheduling, timeline formatting, and resource leveling. (The tool is free because it includes advertisements. A version without advertisements is available for $20.00.)
• dotProject–Open source tool designed to help you structure and schedule your work. For user questions, there is forum (manned by volunteers) that can be accessed from the main site. Announcements are made through the blog, which can be accessed from their website.
• GanttProject–Free, open source software lets you create Gantt charts, assign resources, create PERT charts, and plan collaboration. The tool has a very helpful user forum and blog.
• Open Workbench–This open source software bills itself as a direct competitor to Microsoft Project. In fact, the software’s website includes a detailed comparison between the two packages. Open Workbench is sponsored by CA, the manufacturer of the Clarity family of products (which are not free).
• SugarCRM –The community edition of this software is released under the GNU General Public License (GPL) v3. This product includes a user forum and there is even a conference. (There are two additional products from this company that are not open source and do cost money.)
• ProjectPier–This open source software lets you manage messages, tasks, and milestones. You can also upload and manage files. The website includes a helpful forum and a blog listing planned updates.
• OpenProj–Open source software package distributed under the CPAL license. It is comparable to Microsoft Project in that it lets you produce a wide variety of charts such as Gantt and PERT. This software is owned by Serena Software Incorporated, which also sells Projects on Demand.
• Project HQ–This open source software package compares itself with Basecamp. Features include the ability to track projects, milestones, and create task lists and tasks. The website does include a user forum. I did notice on the download page that there are no stable releases of this software yet, which means that all versions are in development.
• Clocking IT–This free project management tool was designed by a consultant for consultants. It helps you track how much time is spent on each project, although it can produce Gantt charts and other reports. The website includes a user forum and a wiki.
• TaskJuggler–This open source package is released under the GNU GPL version 2 license. With this tool you can manage tasks, resources, and costs that are related to your projects. It also supports risk analysis and flexible working hours. Support is available through Google Groups.

If you didn’t find the project management system that you need in this list, you may find it in our earlier list of project management tools. There are also project management alternatives for freelancers with greater needs.

More Project Management Tools

If you didn’t find what you needed in the list above, you may want to choose from one of these additional fine project management tools. You’ll have to pay for these project management programs, but all of these packages also offer a short free trial to new customers.

Here are five more project management tools:

• Copper
• activeCollab
• No kahuna
• Lighthouse
• Microsoft Project

What Project Management Tools Do You Use?

Do you use project management software to plan your freelancing tasks? Have you used any of the tools above, or do you use other tools that we haven’t mentioned here?

Share your thoughts and experiences in the comments.

See more here…