jQuery Side panel slider plugin

jQuery Side panel slider plugin

Side panel slider plugin (jQuery) that also slides page (inspired on medium).

Features:

  • slide page and panel together (inspired on medium.com)
  • support multiple panels on same page
  • support closing when clicking outside panel or pressing ESC.
  • play well with angularJS directives (Example comming soon)

Uber Zoom : jQuery Smooth Zoom & Pan

Uber Zoom : jQuery Smooth Zoom & Pan

Next-gen smooth zoom & pan for your photos and images.Uber Zoom uses many features that you would normally find in a native iOS or Android app to improve the user experience, like rubberbanding and intertia.

If you need to have a small preview of your image in the bottom left corner, you can enable that. The user will see a small window to navigate your image by dragging.

Dynamic Pricing Table with CSS3 & jQuery

Dynamic Pricing Table with CSS3 & jQuery

I’m going to recreate a Dynamic Pricing Table inspired by the pricing table from Website Chef. The main point of this is to have an editable list of options that will recalculate the features and price of the whole table. As you toggle different addable “Packages” extra features will pop into view in the table as well as updating the overall price.

jQuery Responsive Tabs

jQuery Responsive Tabs

This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.

Features:

  • Tabs transform to accordion based on breakpoint
  • Uses javascript / jQuery for the technical tab switching (class based)
  • Uses CSS for the desktop/tablet/mobile view
  • Has callback events for the tab events
  • Tabs can be opened with URL hashes
  • Tabs can auto rotate
  • Tabs can be collapsed (optional)
  • The tabs are controllable with API methods
  • Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)

jQuery Sticky Navigation with Smooth Effect

jQuery Sticky Navigation with Smooth Effect

In this quick tutorial we’re going to use jQuery and make a simple sticky navigation. With that done, we’ll improve on our efforts by using jQuery Waypoints to make the effect smoother.

3D Card Previewer with CSS3 & jQuery

3D Card Previewer with CSS3 & jQuery

I’ve been working on a movie review based site and I wanted to try and create a movie previewer. I’m incorporating CSS3 transform’s perspective and rotation. The previewer consists of a list of 3D Card movie posters tilted to the right and one featured movie blown up full size. You can switch in between featured movies by clicking on each movie poster.

Google Maps Draw Module with jQuery

Google Maps Draw Module with jQuery

Google Maps Draw Module is a useful tool for web developers who want to build web apps for drawing on maps in the front end. It is based on modern tools such as Google API v3, jQuery, Javascript, Bootstrap, HTML5 and CSS3.

This module provides a responsive graphical interface to users for adding markers and drawing polygons, rectangles, polylines and circles in order to create maps online. Users are able to add/edit/delete objects on Google Maps. Also users can enter title and description for all objects they create.

Vivus.js : JS library to make Drawing Animation on SVG

Vivus.js : JS library to make Drawing Animation on SVG

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

okvideo : jQuery Fullscreen background Videos Plugin

okvideo : jQuery Fullscreen background Videos Plugin

OKVideo is a jQuery plugin that allows for YouTube or Vimeo videos to be used as full-screen backgrounds on webpages. OKVideo aims to be customizable while making some basic decisions about how the plugin should control video. When using OKVideo, all videos will be served from Vimeo or YouTube based on a number of variables like browser, device, bandwidth, etc.