Gridly is a jQuery plugin to enable dragging and dropping as well as resizing on a grids. In the demo below try tapping or dragging any of the bricks.
Archive for 2013
HostSlide Hosting Plan & Pricing Slider in jQuery
This HostSlide hosting plan & pricing slider is the best widget for your website. It’s lightweight and the layout can be changed easily in the CSS file. It’s powered by javascript and is supported in all major browsers. It enables you to use a simple and fast slide to view plan features and prices. It’s ready to be added to your website to give a brand new user experience. Unlimited plans/pricing/options can be added in seconds.
Features:
- Compatible with all major browsers
- Lightweight
- Fully customizable
- SEO friendly
- Add unlimited prices and plans
- Add unlimited options (e.g. price, bandwidth, CPU, RAM, Disk Space)
jQuery Steps : A powerful jQuery wizard plugin
jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!
Features:
- HTML5 and Accessability support
- Async (AJAX) content loading
- Form validation made easy
- Embedded iframe content
- Cool transition effects
- Keyboard navigation
- Simple Step Manipulation
- Multiple wizards in one page
- Easy Navigation
- State Persistence *
jQuery Plugin for the IndexedDB API
IndexedDB is a database inside a browser to save and retrieve objects on the browser/client.
The Jquery IndexedDB Plugin is a wrapper over IndexedDB, making it easier to use with Jquery.
- Don’t worry out browser differences ( setVersion/onupgradeneeded ).
- Use Jquery promises in place of requests
- Supports chaining, less verbose syntax
IndexedBD is not supported on all browsers . You can use the IndexedDB polyfill over WebSQL to get the plugin working on Opera, Safari, iPad, iPhone, etc.
jQuery Horizontal Gridfolio Pro
Horizontal Gridfolio Pro is a fully responsive media grid plugin that allows you to display media content with an unique and original layout. It’s perfect for presentations, for anyone that want to obtain a great impact on their visitors.
Horizontal Gridfolio Pro features a large variety of options, it can have any number of categories and each category can have any number of images. When a thumbnail is pressed you can choose either to display an original media lightbox which we have coded, no action or open a webpage. The lightbox can display images, iframe (html pages) and videos loaded from YouTube or Vimeo.
Features:
- Responsive / Flexible / Fluid layout: the grid can be used with three display types, responsive/fixed, fluid width or fullscreen.
- Autoscale: The grid can resize it’s height proportional to the width this way on smaller screens it will keep a correct ratio and it will be completely visible (optional).
- Drag or Scroll Function: The grid can be dragged with the mouse/finger or scrolled like a regular HTML page.
- Mouse wheel support: The grid can be scrolled with the mouse wheel (optional).
Horizontal Portfolio Layout with CSS3 Animations & jQuery
In this tutorial today we’re going to create a horizontal portfolio layout with cool hover effects inspired. The website is made in Flash, so I thought it would be nice to recreate the flash hover effect of the portfolio items using CSS3 animations and transitions, and some jQuery to replicate the image pan effect on hover.
I’ve also added a simple falling down effect on scroll, where the portfolio items fall down as soon as they enter the visible area of the viewport.
Simple Vertical Menu with jQuery and CSS3
In this tutorial I`m going to show you how to create a simple, but very stylish vertical menu using some CSS3, a bit of jQuery, a custom text font and the most impressive icon font you can find at this moment, which is FontAwesome.
Combine all of these with a nice color scheme and you get a beautiful UI element, ready to be used in your projects!
Build a Custom Ad Banner Rotator Script with jQuery
In this tutorial I want to demonstrate how we can build a jQuery banner rotator which works even over PHP/Rails caching. You only need to implement the codes on your frontend, which means the settings on your web server do not matter as much. The script will hold an array of content data which matches up based on the image and outbound links. Take a peek at my live sample demo to catch a glimpse into what we will be creating.
jQuery Auto Ajax Loader Indicator Plugin
A simple plugin to automatically display aJax requests using jQuery with highly configurable. In the code of your script you don’t need any more support indication to the user requests. The plugin will do everything himself!
Features:
- Lightweight: 4KB of JavaScript
- Appearance is controlled through CSS so it can be restyled.
- Automatically starts
- You do not need to modify your scripts to use
- The ability to set different templates into individual navigation elements
- Error handler
