CssGalleries

Latest jQuery and jQuery UI Theme links on Google CDN

I have often seen developers asking where to find the jQuery UI Library and the jQuery UI Themes on Google CDN

Using jQuery to pick up where CSS leaves off

In the following lecture by Chris Coyier, he gives a beautiful, and funny (which is great), introduction to jQuery and explaining how to benefit from including it in our workflow with HTML and CSS. Enjoy!

How to create drag & drop interaction with jQuery

One of the more interesting actions in visual interfaces is the ability to drag an object and drop it on a selected target. Pretty much like what we do in real life at the supermarket. Grab a beer – drag to cart – drop it in the cart. But there are attributes in the product that it would be interesting to unveil in an application. For example, when you grab a beer you can feel if it´s cold or not, and when you get to the checkout you pay the price of the bottle, which is a hidden attribute of the bottle. Today we will learn how to create drag & drop using jQuery and adding hidden attributes to the draggable items.

How to select and reveal elements with jQuery

One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.

A jQuery Twitter Ticker

In this tutorial we are going to create a pure jQuery & CSS twitter ticker which utilizes Twitter´s Search API. It will show your or your friends´ latest tweets, and will not require any server side code or databases. As a result, the ticker will be easily included into any web page and easily modified to your likings.

Slick content slider

Web masters constantly search for ways to optimize the way content is presented on their sites. With the advent of terms like “above the fold” it is ever so important to provide eye-catching and functional user interfaces.

In this tutorial we are going to make a slick content slider for a computer shop, with the help of jQuery and the MopSlider plugin. The slider is going to be generated with PHP and we are using a plain txt file as a data source for the notebook configurations.

Making our own twitter timeline

Twitter has grown into a real social phenomenon. This is an incredible achievement for such a simple service. But as you know, great ideas are not necessarily complex.

This time we are going to create our own twitter-like timeline, where you can view and post your tweets. You can use the code I´ve provided here for all kinds of purposes and be sure that the possibilities are endless. So grab the demo files and start learning!

jQuery & CSS Sprite Animation Explained In Under 5 Minutes

Today we´re going to take a look at sprite animation. There´s been a lot of talk this year about the future of technologies like Adobe´s Flash and for good reason – with the performance of JavaScript frameworks having come so far since they were first conceived, it´s now possible to create equally as powerful animations and effects without needing to use any third party plugins.In today´s screencast I´m going to show you what a sprite is and just how easy it can be to create an entire animated scene using jQuery, CSS & Sprites. You´ll also get to see some pretty cool out-in-the-wild examples of jQuery Sprite Animation in action, so why not check it out in my screencast below!

30+ Useful Jquery Tutorials Using Advance Techniques

Although there are many great techniques already but hopefully these listed jquery tutorials will help you too and it will also give you a more professional feel and you will get latest techniques for modern design requirements of Web Developers.

In this our first jQuery Tutorials article, we will presenting some really useful trainings about how to learn jquery techniques step by step and also will productive in your websites developments.

Hope you will like these listed tutorials and leave your comments.

jQuery if / else Statements

Recently, someone was looking for some jQuery to solve their problem. Instead I gave them a snippet of ‘normal´ javascript as a solution, however the person wasn´t happy with this and insisted on using jQuery.

jQuery Notification Plugin with jQuery UI ThemeRoller Ready

Pines Notify is a JavaScript notification plugin for the jQuery JavaScript library, developed by Hunter Perrin as part of Pines. It is licensed under the GNU Affero GPL. It is designed to provide maximum flexibility, while still being easy to use and easy to implement.

AeroWindow jQuery plugin

AeroWindow - Plugin for jQuery - Windows Aero Style for Web sites

AeroWindow create pop-up window in the Aero style, inspired by the style of Window7. The popup window offers the usual options and full functionality similar to Windows windows.

Pines Notify jQuery Plugin

Pines Notify is a JavaScript notification plugin, developed by Hunter Perrin as part of Pines. It is designed to provide an unparalleled level of flexibility, while still being very easy to implement and use. It uses the jQuery UI CSS library for styling, which means it is fully and easily themeable. Try out some of the readymade themes using the selector in the top right corner of this page. It is licensed under the GNU Affero GPL, which means you are free to use, study, modify, and freely redistribute it under the same license.

Fluid Navigation – How to create an informative menu-bar with jQuery & CSS

After a few weeks away in the US, I´m back with a brand new jQuery post – this week taking a look at a new style of navigation menu. jQuery has made it simple for developers to define an idea or wireframe for a component and then implement it reasonably quickly, which has certainly helped it become the most popular JavaScript Framework out there at the moment. I feel like some of the navigation options out there right now don´t provide you with enough information about the sections of a site you can visit, so today we´re going to learn how to create a menu that solves this problem.

Zoom-Info – How To Create An Informative Image Gallery With jQuery & CSS

Question: Have you ever wanted to neatly display a few lines of text about an image in your site but didn´t want to compromise on the design of your overall layout? In today´s post I´m going to show you how to create a useful information-rich jQuery Image Gallery that solves that problem. The best part of it is that it´s so simple to write up that all you´ll need are jQuery´s excellent .hover() and .animate() functions to get it up and running.

8 jQuery Performance & Optimization Tips You Need In 2010

Great topic today!. Performance optimization. Performance optimization is an important aspect of any type of coding project, including those that use jQuery. Today I´m going to go through some quick useful jQuery coding and performance tips that I think are important for every JavaScript developer to bare in mind when writing their projects using the jQuery framework. Some of these are going to be a little obvious whilst others are things that you might not have considered doing before.

Why and how to create Microsoft Office Minibar with jQuery and CSS3

Although many will argue that Microsoft products are an example of a good design, Minibar was one of design refreshments that came out with the Office 2007. It is a variation of a toolbar that exposes context-related functionality. In case of MS Word, context is a text selection. Since Minibar always pops up near the mouse pointer it enables users to quickly perform actions related to a selection.

jQuery vs. JavaScript – The Masters Share Their Views On Vanilla JS

We´ve got a really great post for you today guys. We´re going to explore whether it´s fundamentally important for designers and developers to understand how to use vanilla JavaScript and not just it´s derivative frameworks and libraries such as jQuery and MooTools. You might be asking ‘why?´, but read on and you´ll find out!. Because this is a topic that can invoke passion on both sides of the debate, I´ve asked a few familiar names to join the discussion including David Walsh, Chris Coyier, Marco Kupier, Janko Javanovic and James Padolsey. All of these authors use jQuery regularly and are in a good position to advise on the pros and cons of knowing vanilla JS.

20 Awesome jQuery Enhanced CSS Button Techniques

With all the talk of CSS3 at the moment, its easy to overlook the impact Javascript, especially jQuery, can have on the appearance of the basic web button. As such, we have collected 20 useful CSS buttons techniques that have all been improved and enhanced by the sooper-dooper power of jQuery.

BounceBox Notification Plugin With jQuery & CSS3

Earlier this week, while working on ZineScripts‘ coupon code system, I found the need to be able to dynamically create and present a message box to Zine´s visitors. The usual routine would include digging through jQuery´s plugin repository and ending up with using a lightbox alternative, but I decided to take the time and build an one-off notification solution, which I am sharing with you today.

10 jQuery Plugins to Help with Web Page Layouts

Every now and then a web project will come up that has special and unique layout requirements, and the current capabilities of CSS just aren´t enough. With projects such as these, jQuery can be your best friend. So here are 10 jQuery plugins to help you out with page layouts.

jQuerify Bookmarklet: allows load jQuery for pages that don't have it - Useful for developers.

A long time ago I built myself a little bookmarklet to load jQuery on pages that don't already have it. The idea was to allow me to play around with any page on the web, using jQuery in the Firebug (and now Safari or IE8) console. I blogged about it, got lots of great feedback, and then blogged about an improved version. Now that a lot more great feedback has come through the comments of the updated bookmarklet post, I've decided to update it one more time.

How to select and reveal elements with jQuery

One user asked the other day on the jQuery Tabs tutorial how to highlight the particular tab we selected. In this tutorial we will see some way to select different elements using jQuery, from a basic multiple selection, a multiple selection revealing content and a excluding selection revealing content. See the three examples and read on.

How to create drag & drop interaction with jQuery

One of the more interesting actions in visual interfaces is the ability to drag an object and drop it on a selected target. Pretty much like what we do in real life at the supermarket. Grab a beer – drag to cart – drop it in the cart. But there are attributes in the product that it would be interesting to unveil in an application. For example, when you grab a beer you can feel if it´s cold or not, and when you get to the checkout you pay the price of the bottle, which is a hidden attribute of the bottle. Today we will learn how to create drag & drop using jQuery and adding hidden attributes to the draggable items.

Using jQuery to pick up where CSS leaves off

In the following lecture by Chris Coyier, he gives a beautiful, and funny (which is great), introduction to jQuery and explaining how to benefit from including it in our workflow with HTML and CSS. Enjoy!

How to avoid double clicking with jQuery

There has been always one troubling issue regarding web forms and user interaction: when the user double clicks the submit button. Detecting and preventing it or disabling the button is an expensive operation in terms of computing. Fortunately, jQuery has a neat solution. As usual.

SliderNav: iPhone Style Contact Lists Using JQuery and CSS

This effect is actually from Techi.com, a new blog launched by the guys at WebDesignerDepot, where they use it to display their popular tags in the sidebar. I wanted to see how easy (or hard) it was to recreate using JQuery and CSS, and it turns out that it´s pretty simple to do. I´ve packed it into a neat little plugin so you hopefully you can make some use of it!

Sliding Panel Photo Wall Gallery with jQuery

Today we will create a stunning full page photo wall gallery. The idea is to have a whole page full of thumbs with a nice light effect when we hover. When an image is clicked, a panel slides up from the bottom revealing the full picture. When clicking on the full image, the thumbs panel slide back from the bottom. This effect will give the impression that we are stacking the panels on top of each other every time we change the mode. In the full picture view we add some nice transition effect when we browse through the photos.

50 Fundamental jQuery Controls and Rich UI Components

Every seasoned developer has one and every young and upcoming developer should be thinking of building one – a good and concise collection of UI controls, components and plugins that you can always rely on in times of need.

HoverAttribute jQuery plugin/a>

HoverAttribute is a jQuery plugin that allows you to make (link-)elements more dynamic by making an attribute of that element show up on hovering. This is foremost intended for tags residing within full-width elements, such as headings or list entries. Amongst several options, it is possible to choose any attribute (href by default, see Usage) of a given tag. The functionality is implemented like:

4 Creative and Fresh jQuery Tutorials

Sometimes the basics of web design are simply not enough, and sometimes your creative needs demand that you “work out of the box” and build a web page that breaks normal convention. Enter jQuery, the modern days web design super-hero, to your creative rescue.

Seek Attention jQuery Plugin

The "seekAttention" plugin gracefully get´s your users attention by fading out a definable area but leaving the target element (the element which is seeking attention) un-faded and thereby focusing the users attention on it.

Griddy – Customizable Grid Overlay jQuery Plugin

Griddy is a small JQuery plugin thats creates a simple, customizable grid overlay on top of any element. It can also calculate row heights and column widths automatically based on the number of rows/columns and gutter space. There are few options, including: rows, row height, row gutter, columns, column height, column width, color and opacity.