Content Slider Using jQuery UI

Showing off the best content of your website or blog in a nice intuitive way will surely catch more eyeballs. Using an auto-playing content slider is the one of techniques to show your featured content. It saves you space and makes for a better user experience, and if you add a pinch of eye candy to it, then there’s no looking back.

There are a few tutorials on creating featured content sliders like the one from CSS-Tricks, but it uses jQuery Coda Slider plugin. Today I’m going to show you how to create a featured content slider for your website using the jQuery UI library.

View DemoDownload

jQuery.popeye 2.0

jQuery.popeye is an advanced image gallery script built on the JavaScript library jQuery. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

Though the script is quick and easy to setup, it offers great flexibility in both behaviour and styling.
It was designed as an alternative to the often-seen JavaScript image lightbox. What they all have in common: they employ a modal window to display the large images, thus disrupting the workflow of the user interacting with a webpage.

jQuery.popeye takes a different approach: not only allows it for browsing all thumbnails as well as the large images in a single image space, it also repects the page flow and stays anchored and rooted in the webpage at all times, thus giving a less disruptive user experience than modal windows.

View DemoDownload

Sliding Panel

One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we'll also animate it.

View DemoDownload

Orbit: A Slick jQuery Image Slider Plugin

Content compatible, new loading animation, thumbnail navigation for bullets, animated captions, no more overflow hidden on the container, restructured the markup & js, changed the base UI, added callback, mouseover pause, better timer interactions and re-browser tested.

View DemoDownload

Uniquely Designed and Coded Web Form Styles

View Demo Download

IE Tester : Internet Explorer Versions from 5.5 to 9

Browser Compatibility Check for Internet Explorer Versions from 5.5 to 9

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE9 preview, IE8, IE7 IE 6 and IE5.5 on Windows 7, Vista and XP, as well as the installed IE in the same process.

Requirement : Windows 7, Windows Vista or Windows XP with IE7 minimum (Windows XP/IE6 config has some problems and IE8 instance do not work under XP without IE7)
Note for IE9 : IETester installer does not include IE9 files, so you will need to install IE9 preview and copy files manually : See How To install IE9 under IETester (IE9 Preview requires Vista SP2 or Windows 7).

Download

CSS Compressor - Optmize and Format your CSS

Online code compressor for Cascading Style Sheets

The CSS Compressor greatly reduces the size of standard CSS code, stripping out unnecessary characters and implementing CSS shortcuts, allowing you to minimize the size of CSS file downloads on your web site.

Use this utility to compress your CSS to increase loading speed and save on bandwidth as well. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. The "Normal" mode should work well in most cases, creating a good balance between the two.

Compresser

Tetris with jQuery

See the colorful tetris beads move in accordance with the lightweight jQuery code.

View Demo

Flip A jquery plugin v 0.9.9

Flip is a jQuery plugin that will flip easily your elements in four directions. Try it

View DemoDownload

Photo Gallery - More Customizations

This gallery demonstrates GalleryView's ability to place both the filmstrip and panel captions on the top of the gallery, instead of the bottom. By wrapping the gallery div and assigning it a background image, we can lift the gallery off the page, or implement any number of design ideas. This gallery also uses a custom navigation theme (download here) and an easing method made possible by the jQuery Easing plugin.

View Demo

JQuery Image Scale Carousel

It auto scales the images you put into it to the appropriate height and width keeping their aspect ratio in place.

When working with imagery online keeping the integrity of an images aspect ratio is as important as anything else. This is what's so nice about this jQuery plug-in; you don't have to worry about all of your images being perfectly sized for this slider. The jQuery Image Scale Carousel auto scales all of your images making implementation super simple.

It's easy. Set up an array of images, either local images or images out on the interwebs somewhere, and then hand that array to the jQuery Image Scale Carousel. Done!

View Demo Download

Quicksand

Reorder and filter items with a nice shuffling animation.

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. You can do it in a couple of ways:

1. Use plain HTML, like an unordered list.
2. Download data by an Ajax call
3. Transform HTML items by JavaScript (for example, sort them differently)

View Demo Download

SIDEWAYS – jQuery fullscreen image gallery

A simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

View Demo 1 View Demo 2 Download

jQuery "Highlight" Demo

An introduction to Highlight

Highlight increases usability by highlighting elements as you interact with the page. Its primary use is for forms, but it can also be used for tables, lists, or any element you specify.

Examples uses:

• Form-filling can be made clearer by highlighting the element around a control as you tab into it


• Table rows can be made more visible as you pass the mouse over them, or click them


• lements can be toggled as you click them

View Demo Download

Excellent jQuery

Aviary

http://aviary.com/home

Easy Display Switch with CSS and jQuery

A quick and simple way to allow your users to switch page layouts by using CSS and jQuery.

Today’s web users expect web pages to be increasingly more interactive. To this end, the ability to change page layouts provides your users with a more immersive experience and allows them to consume information more easily, either with a quick gallery view, or a detailed summary view.

View Demo Download

Vertical Scroll Menu with jQuery

View Demo Download

Utilu Internet Explorer Collection 1.7.0.7

Check how your website looks in different Internet Explorer versions

Internet Explorer is a browser developed by Microsoft.
Windows Internet Explorer (formerly Microsoft Internet Explorer) is based on the Trident render engine.

Utilu IE Collection contains multiple IE versions, which are standalone so they can be used at the same time. This is useful for web developers.

Utilu IE Collection supports both 32-bit and 64-bit versions (if available) of Microsoft Windows 98, 98 SE, ME, NT 4.0, 2000, XP, 2003, Vista, 2008 and 7.

Conditional Comments are important for web developers, because they use them to target specific versions of Internet Explorer. In the standalone versions Conditional Comments work exactly the same as in the native versions.
The original version number is shown correcty in the User Agent string.
The version number can be found in the window title too.


Utilu IE Collection contains the following versions of IE:Utilu IE Collection bevat de volgende versies van IE:

* Internet Explorer 1.0 (4.40.308)
* Internet Explorer 1.5 (0.1.0.10)
* Internet Explorer 2.01 (2.01.046)
* Internet Explorer 3.0 (3.0.1152)
* Internet Explorer 3.01 (3.01.2723)
* Internet Explorer 3.03 (3.03.2925)
* Internet Explorer 4.01 (4.72.3110.0)
* Internet Explorer 5.01 (5.00.3314.2100)
* Internet Explorer 5.5 (5.51.4807.2300)
* Internet Explorer 6.0 (6.00.2800.1106)
* Internet Explorer 6.0 (6.00.2900.2180)
* Internet Explorer 7.0 (7.00.5730.13)
* Internet Explorer 8.0 (8.00.6001.18702)

Download

A crazy slideshow plugin for jQuery

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.

With Slides you'll never see mulitple slides fly by. Slides elegantly just slides from one slide to the next. Awesome.

Slides is compatible with all modern web browsers including; Internet Explorer 7/8/9, Firefox 3+, Chrome, Safari and Mobile Safari. And it'll even work in our old friend IE6.

View Demo Download

An HTML5 Slideshow Canvas & jQuery

You’ve probably heard a lot about the new HTML5 canvas element. As the name implies, this is a special element that allows us to create and modify graphics. In addition, we can also use it like any other element on the page – apply jQuery animations on it, listen for events and integrate it deeply into our layouts.

All uses of canvas you’ve come so far are probably limited to games and other proof of concept demos. Today, however, we are doing something practical – we are making a progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.

View Demo Download

Beautiful Background Image Navigation with jQuery

In this tutorial we are going to create a beautiful navigation that has a background image slide effect. The main idea is to have three list items that contain the same background image but with a different position. The background image for each item will be animated to slide into place in different times, creating a really nice effect. The background image sliding direction from the list item in the middle will depend on which item the user was before: coming from the right, it will slide from the left and vice versa.
On top of that we will have sub-menus that appear with their semi-transparent background sliding in. These backgrounds create an awesome effect of actually just being one element that slides into place, changing its color.
We will be using the amazing Background-Position Animation Plugin by Alexander Farkas.
The photos that we will be using are from Pat’s beautiful B&W collection on Flickr.
There will be a little bit of CSS3 involved which absence will almost not be notable when using a browser that does not support its properties (like IE).
We tried to make this one cross-browser compatible and voilà! It works beautifully in Google Chrome, Firefox, Opera, Safari, IE8, IE7 and guess what, it even works respectively in IE6. (We are using an adapted style sheet and you will have to apply some PNG fix if you want the sub-menu backgrounds to be semi-transparent. )

View Demo Download

Embedding SWF with valid W3C HTML code

This page show an example how make your Flash pages validate to comply with webstandards. This code for Flash (SWF) validates in compliance with web standards set by W3C. This code can be used in XHTML 1.0 Strict and is 100% valid. It degrades to GIF image if Flash plugin is not available and HTML + CSS stays valid.

This code will allow you to embed flash on websites and those sites will validate on w3c validator.

<object data="flash/name.swf" type="application/x-shockwave-flash" width="850"
 height="200" style="outline:none;">
 <param name="movie" value="flash/name.swf"/>
 <param name="quality" data="high"/>
 <param name="wmode" data="opaque"/>
</object>

Smooth Navigational CSS & jQuery Menu

Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair. And that's a good thing given the important role of this element in any site. The menu's contents can either be from direct markup on the page, or an external file and fetched via Ajax instead. And thanks to jQuery, a configurable, sleek "slide plus fade in" transition is applied during the unveiling of the sub menus. The menu supports both the horizontal and vertical (sidebar) orientation.

Some noteworthy features- You can specify a delay before the sub menus appear and disappear when the mouse rolls over and out of them, respectively. The sub menus reposition themselves if too close to the window's right edges. And last but not least, the depth of the accompanying shadow can be customized, or removed altogether. Smooth we say!

View Demo Download

jqFancyTransitions slideshow with strip effects

Image gallery with fancy transitions effects

jqFancyTransitions is easy-to-use jQuery plugin for displaying your photos as slideshow with fancy transition effects.

jqFancyTransitions is compatible and fully tested with Safari 2+, Internet Explorer 6+, Firefox 2+, Google Chrome 3+, Opera 9+.

View Demo Download

jQuery Accordion Banner Plugin

It to be more like an image slider. There are some coding after the project was complete jQuery plugin.

Example 1
Each slide is 600 x 270 pixels. I've set the width of the accordion to 960 and the slideWidth to 600. The size of the tabs will be calculated automatically. This is probably the best way to fire the accordion.

Example 2
Each slide is 500 x 220 pixels. I've set the width of the accordion to 780 and the tabWidth to 150. The size of the slides will be calculated automatically.
The starting slide is set to 1 (the second slide of slides 0, 1, and 2). The accordion does not auto play. I've also set the accordion to trigger on mouseover.

Example 3
This is probably the most practical example. Each slide has its own class and custom background image. I've set the text inside each of the slides to display only for the class with the open slide. I've also customized the slide class names.

View Demo Download

Beautiful custom content scroller with jquery

A custom content scroller created with jquery and css that supports mousewheel, scroll easing and has a fully customizable scrollbar.

The script utilizes jQuery UI and Brandon Aaron jquery mousewheel plugin. Very easy to configure and style with css.

View Demo Download

Welcome to Visual Html