Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

    September 29, 2013 | Bootstrap, Menus, Plugins
    Context.js : jQuery Contextual Menus with Twitters Bootstrap CSS

    Context.js is a lightweight solution for contextual menus. Currently, there are two versions.

    The first is to be used with Twitters Bootstrap (bootstrap.css specifically). If you do not use or want to use bootstrap.css, there is a standalone stylesheet to give the menu it’s base styles.

    Features:

    • Linted: Valid JS
    • Can be used with or without Twitters Bootstrap.css
    • Event Based Links
    • Anchor Links
    • Headers
    • Dividers
    • Recursive Menus (infinite depth)
    • Vertical Space Detection (turns into a “dropup”)
    • Horizontal Space Detection (Drops to the left instead of right)
    • Add/Delete menus Dynamically
    Read More Demo

    jQuery.touchdragh : Makes elements Draggable horizontally by Touch

    September 28, 2013 | Drag & Drop, Plugins, Responsive
    jQuery.touchdragh : Makes elements Draggable horizontally by Touch

    This makes elements draggable horizontally by touch.

    • touchdragh: demo
    • touchdragh with transition: demo
    • touchdragh forever option: demo
    • touchdraghfitty: demo
    • touchdraghfitty with transition: demo
    • touchdraghsteppy: demo
    • touchdraghsteppy with transition: demo
    • touchdraghsteppy refresh method: demo
    • touchdraghsteppy forever option: demo
    • touchdraghsteppy normalize_height option: demo
    • touchdraghsteppy unsteppify: demo
    • touchdraghsteppy unsteppify manually slide: demo
    • dragger option: demo

    with Media Queries using $.ViewportWatcher

    • touchdraghsteppy media queries example: demo
    • touchdraghsteppy media queries example2: demo
    Read More Demo

    HTML5 JavaScript Gem Game With Saved Scoreboard

    September 28, 2013 | Core Java Script, Games, HTML5
    HTML5 JavaScript Gem Game With Saved Scoreboard

    Everyone is talking about HTML5 games and how they are the future of mobile gaming, but where do you start? What is it you need to do to create a game? In short the answer is actually “not much”, everything that I will be using in todays tutorial I’ve already covered in various different guises in my previous tutorials. We’ll be using only pure JavaScript and CSS in this tutorial and the images.

    Read More Demo

    Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

    September 28, 2013 | Forms, Plugins
    Ion.CheckRadio : jQuery plugin for styling checkboxes and radio-buttons

    jQuery plugin for styling checkboxes and radio-buttons.

    • Ion.CheckRadio — nice and easy jQuery-plugin for checkbox and radio-buttons customization.
    • With skin support
    • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Ion.CheckRadio supports touch-devices (iPhone, iPad, etc.).
    • Ion.CheckRadio freely distributed under terms of MIT licence.
    Read More Demo

    jQuery Multi Purpose Media Boxes – Responsive Grid

    September 27, 2013 | CSS2 / CSS3.0, Gallery, Plugins, Premium, Responsive
    jQuery Multi Purpose Media Boxes - Responsive Grid

    This is a HTML | CSS | JQuery Fully Responsive Portfolio in a pinterest style with a lightbox. It will adapt to the width of its container so you can put it anywhere and you can put anything inside the boxes. Also you don’t have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first load and the number of images to load when you click the “load more images” button.
    The navigation filter bar is generated automatically from the categories you specify to each image.

    Features:

    • Fully responsive grid and lightbox
    • Lazy Load Feature
    • The Lightbox Support images and iframes of any dimensions and it will keep the right proportions
    • The filter navigation bar is generated automatically from the categories you specify to each thumbnail
    • Set the number of images to load at start and when you click the “load more images” button
    • Support thumbnails for the grid only to the images you want to improve performance
    • Fully Responsive Grid and Lightbox
    • Full width, the grid will adapt to the 100% of its container if you set the width of each column to ‘auto’
    • You can specify a static width for each column or specify number of columns
    • When specifying the number of columns you can set the minimum width for each column
    • CSS3 Effects
    • Direction aware hover effect
    • Lightbox with slideshow (play, pause, auto-play)
    • Easy implementation
    • Compatible with Twitter Bootstrap
    Read More Demo

    Animate to Hide and Slide Content with jQuery

    September 27, 2013 | Animation, Menus
    Animate to Hide and Slide Content with jQuery

    In this tutorial I want to demonstrate how we can build a similar interface using jQuery animation. These codes are fairly basic and should work in any fixed-style website layout. This type of design leaves room for hidden content, along with main content cascading down the page.

    Ideally we will be using jQuery animations powered by jQuery UI easing effects. I have created a live example with the navigation bar fixed onto each corner of the webpage. Check out some of my demos and see if this interface could work well in any upcoming design projects.

    Read More Demo

    Ajax Select and Upload Multiple Images with jQuery

    September 27, 2013 | Ajax, PHP
    Ajax Select and Upload Multiple Images with jQuery

    Very few days back I had posted an article about Multiple ajax image upload without refreshing the page using jquery and PHP. In this post I have updated few lines of code that allows to user can select and upload multiple images in single shot, thanks to Lakshmi Maddukuri for sending me a useful piece of code. Just take a quick look this live demo.

    Read More Demo

    Create a Pentagon Hover Effect with CSS3 and jQuery

    September 27, 2013 | Animation, CSS2 / CSS3.0
    Create a Pentagon Hover Effect with CSS3 and jQuery

    This is a new series that will focus on cool web elements on the web. My goal is to try and replicate these sleek elements using a combination of HTML, Javascript and CSS3 and hopefully teach something along the way. It’s a portfolio site that implements a cool pentagon hover effect for displaying his work. It smoothly meshes together a rotate effect with a slight nudge right to the image along with a colorization of the image. Note: This is using CSS3 Transitions which is still not completely standard and browser compatibility may be limited.

     

    Read More Demo

    Flipload.js : Flipping HTML elements to show a loading indicator easily

    September 26, 2013 | Animation, Core Java Script
    Flipload.js : Flipping HTML elements to show a loading indicator easily

    Flipping HTML elements to show a loading indicator easily.

    It’s compatible with:

    • Chrome
    • Firefox
    • Safari
    Read More Demo

    Gridforms : Data entry can be beautiful with jQuery & CSS

    September 26, 2013 | CSS2 / CSS3.0, Forms, Responsive
    Gridforms : Data entry can be beautiful

    Grid forms are dense forms designed for use in applications that require lots of data to be entered regularly. A tiny Javascript/CSS framework that helps you make forms on grids with ease.

    An effort to make beautiful forms for web applications that make data entry less painful. Grid forms is a front-end library (Just CSS at the moment) which handles the boiler plate necessary to build grid based forms.

    Read More Demo