Today We are gonna make a horizontal expanding menu using jQuery and css.
A vertical scrollable : jQuery Plugin
Here we show you a vertical setup for a scrollable. There is a minor change compared to the minimal setup and it’s recommended that you study that first before continuing. This scrollable has 4 elements in total and each element has 3 rows that are shown at a time. You can scroll these elements by:
- Clicking on the “more pictures” link.
- Using the up and down arrow keys.
- Using your mousewheel.
jQuery Radmenu Plugin
A Radial Menu, also known as a Pie Menu, is a circular contextual menu. The interface is a pretty cool and intuitive one and is now easy to implement on your site!
Radial menu’s are powerful primarily because the location of the menu items can be easily memorized by novice users, as well as experienced ones. The interface effectively engages users in a way in which they are capable of placing directional and gestural associations with particular actions; think muscle memory.
This plugin was created to harness the power of the radial menu and yet provide enough flexibility to the developer to express their creativity in its application. The radmenu plugin essentially builds items around the circumference of a circle.
Label inside – inscription in form fields with jQuery
This is often implemented in a way that the label in the value of the @ value attribute of input element or the content of the textarea element is set, the training and insertion is done by JavaScript. The technical implementation is problematic:
- Caption and actual user input must be distinguished in the field and the text style (color) must be changed with JavaScript. Should also be pre-assigned fields are used, the distinction made in the markup (HTML).
- If the JavaScript is running late, the user enters something into the field before its label was deleted. Thereby, the label text undesirable to a portion of the input.
Circumvents this difficulty, if one realizes the labeling with the appropriate HTML label element. This is encapsulated together with the input field in a container element of the class “label inside”:
Ingrid : jQuery Grid plugin
Datagrids don’t have to be difficult to use anymore – say hi to Ingrid. Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables. It’s easy to get started – read on below, or check out the Example Pages
jQuery Panel Gallery Plugin 1.1
The best part in my opinion, is that not one image needs to be sliced or edited to work with this plugin, in fact the plugin handles everything itself. Next, you can choose the direction in which the transition occurs from left to right, right to left, top to bottom, or bottom to top – now for each image individually. You can set the initial delay before the transitions begin, set the transitions to loop or stop after the last image, set the time it takes for each panel to appear, and set the delay between the images.
Features:
- No slicing or editing of the images is needed
- It’s just 7K
- Each image can have its own fade direction
- Easily configurable
- Reusable on multiple containers
jQuery Scrolldeck Parallax Plugin
A couple of months ago, I created a jQuery Vertical Parallax Demo that manipulated CSS to make multiple backgrounds move at different speeds relative to the users movement of the scroll bar. This type of effect is slowly appearing across various websites on the web, achieved using many different techniques. Nikebetterworld took the idea to a new level.
In today’s tutorial, we’re going to take the original jQuery Parallax script I wrote and recreate a webpage similar to Nikebetterworld.
jFontSize jQuery plugin
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc.
This tool is also used to increase the accessibility of sites, helping people who have visual problems to see better content
jQuery Blend Modes plugin
jQuery Blend Modes plugin bring the blend Modes functions to your web page, without use any images editor (Like Photoshop), The main function of this plugin is to blend two copy of same image with a specified blend mode (it support 15 modes), and render the result into a canvas element.
We can use this plugin in many way, for example I create with this plugin (and small trick) a new mouse hover idea for the images.
The traditional image mouse hover was either reduce the image opacity, or the inverse, grow it, shrink it, or something like that.
But with jQuery Blend Modes plugin, I make the contents of an image change for really!!
