Mobile App Design/Dev: Building Navigation with jQuery

June 29, 2012 | Ajax, CSS2 / CSS3.0, HTML5, jQuery Mobile, Menus
Mobile App Design/Dev: Building Navigation with jQuery

Smartphones are now equipped with some very efficient web browsers. JavaScript is more powerful than ever before, and can be extended with the help of code libraries such as jQuery. When you add in the latest HTML5/CSS3 specs, it’s possible to build very snappy mobile web apps with some basic frontend code.

In this tutorial I’ll show how you can build a mobile-based website/webapp. We’ll use CSS3 media queries for targeting specific devices and screen resolutions. Plus a bit of jQuery helps to animate the menu and load external page content using Ajax calls. Even better, the layout can even expand to display properly in regular desktop browsers such as Chrome or Firefox.

Read More Demo
  2 Like?

AttC : Automatically convert a Html table to Google Chart with jQuery

June 29, 2012 | Chart & Graph, Plugins
AttC : Automatically convert a Html table to Google Chart with jQuery

jQuery based javascript plugin that converts a standard HTML table to an Google visualizations chart and displays it on the page.

Currently converts a table to one of these google charts:

  • bar
  • column
  • area
  • line
  • Pie
Read More Demo
  2 Like?

Responsive 3D Panel Layout in jQuery & CSS3

June 28, 2012 | CSS2 / CSS3.0, Plugins, Responsive
Responsive 3D Panel Layout in jQuery & CSS3

Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

Read More Demo
  0 Like?

How to Create an Video Player in jQuery, HTML5 & CSS3

June 28, 2012 | CSS2 / CSS3.0, HTML5, Media
How to Create an Video Player in jQuery, HTML5 & CSS3

In this tutorial we will code an Video Player from Impressionist UI by Vladimir Kudinov. We will code it with CSS3 for the styling and the “MediaElement.js” for the functionality. MediaElement.js is a HTML5 audio and video player that also works for older browsers using Flash and Silverlight to mimic the HTML5 MediaElement API.

Read More Demo
  0 Like?

jQTouch : Zepto/jQuery plugin for mobile web development

June 28, 2012 | Ajax, jQuery Mobile, Plugins
jQTouch : Zepto/jQuery plugin for mobile web development

jQTouch is a JavaScript plugin which works with either Zepto.js or jQuery, and comes with smooth animations, navigation, and themes for mobile WebKit browsers (as found in iOS, Android, BlackBerry, and WebOS).

Features:

  • Easy to install. Get up and running in a few minutes.
  • Entirely customizable with selector options
  • Theme support, including default Apple and jQTouch custom themes
  • Callback functions throughout, including swipe and orientation change detection
  • Page history management and CSS3 page transitions, including 3D flip, cube, and swap
  • Failover to 2D animations for devices that don’t support 3D
  • Easily allow apps to run in fullscreen mode with custom icons and startup screens
  • The power of jQuery to build AJAX applications
Read More Demo
  0 Like?

Awesome jQuery Mobile Image Gallery Web App

June 27, 2012 | CSS2 / CSS3.0, jQuery Mobile, PHP
Awesome jQuery Mobile Image Gallery Web App

With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.

Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, we get to the full image view where we can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.we will be using PHP to automatically generate albums with PHP from the folder structure.

Read More Demo
  0 Like?

jQuery Dynamic Grid: The Engine

June 27, 2012 | Animation, Plugins, Premium, Responsive, Web
jQuery Dynamic Grid: The Engine

Dynamic Grid is a jQuery plugin for generating an animated, responsive and great looking grid for your content – be it images, news feed, text and what not.

With the help of some sophisticated algorithms the script fills the grid with cells with (optionally) random heights on every page load, and thus giving the widget a unique layout every time someone loads your page! Additionally, the algorithm is smart enough to prevent cells from being too big for the total size of the widget. Which means at any point in time, there is no cell that is only partially shown or hidden. It just works like it should!

Number of options:

  • Number of columns
  • Number of rows
  • Random/fixed cell height
  • Padding between columns
  • Fluid/fixed width
  • Height
  • Easing effect
  • Animation speed
  • Animation interval
Read More Demo
  0 Like?

Smart Cart : Feature rich jQuery plugin for Shopping Cart

June 27, 2012 | Ajax, Plugins, Web
Smart Cart : Feature rich jQuery plugin for Shopping Cart

Smart Cart is a flexible and feature rich jQuery plug-in for shopping cart. It makes the add-to-cart section of online shopping much easy and user friendly. It is compact in design, very easy to implement and only minimal HTML required.

The selected items in the cart are accessible as an array of product/quantity pair delimited with ‘|’ on submit form or when checkout event is triggered. Smart Cart 2 have a simple and compact design with tabbed interface to saves space.

Features (Smart Cart 2.0):

  • Easy to implement, minimal HTML required
  • Clean and compact design, tabbed design saves space
  • Product search and Category filter enables easy and fast access to the product what users are looking for
  • Automatically calculates subtotal and total
  • Quantity is editable from the cart list
  • Event support, custom Ajax feature and validation can easily implement using the events
  • Product Image display and expanded tool tip display
  • Can implement multiple cart on same page
  • Template option, for easily customizing product display details
  • Pre-populate products on cart on page load
Read More Demo
  1 Like?

jStorage – store data locally with JavaScript

June 27, 2012 | HTML5, jSON, Other Libraries, Plugins, Web, XML
jStorage - store data locally with JavaScript

jStorage is a simple wrapper plugin for Prototype, MooTools and jQuery to cache data (string, numbers, objects, even XML nodes) on browser side. Note that functions, DOM nodes, host objects and such can not be saved.jStorage was first developed under the name of DOMCached but since a lot of features were dropped to make it simpler (like the support for namespaces and such) it was renamed. DOMCached had separate files for working with Prototype and jQuery but jStorage can handle both in one go.

jStorage makes use of HTML5 local storage where available and userData behavior in Internet Explorer older versions. Webkit SQLite is not supported.

Read More Demo
  0 Like?

Smart Wizard : jQuery plugin that gives wizard like Interface

June 26, 2012 | Ajax, Animation, Menus, Web
Smart Wizard : jQuery plugin that gives wizard like Interface

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users. Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks.

Features:

  • Easy to implement, Minimal HTML required.
  • Ajax contents loading option.
  • Cool animation effects on step navigation. (none/fade/slide/slideleft)
  • Keyboard navigation option.
  • Horizontal and vertical style step anchors.
  • Easy step input validation option
  • Option to highlight error steps
  • In-built message box
  • Easy navigation with step anchors and navigation buttons
  • Can have multiple wizards on same page
  • Option to enable all steps on first load
Read More Demo
  3 Like?

« First...102030...106107108109110...120130140...Last »