Archive for 2013

    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

    Formbuilder.js : Graphical Interface to build Webforms

    September 26, 2013 | Core Java Script, Drag & Drop, Forms, jSON
    Formbuilder.js : Graphical Interface to build Webforms

    Formbuilder is a graphical interface for letting users build their own webforms. Think Wufoo or Google Forms, but a lightweight component that can be integrated into your application.

    As of right now, Formbuilder only handles the client-side logic of creating a form. It will output a structured JSON representation of your form, but saving the form, rendering it on the server, and storing users’ responses is all up to you. I’m planning on releasing a Rails gem to handle this logic, but the ETA on that is pretty up in the air. If you’d like to help, feel free to reach out.

    Read More Demo

    jQuery Responsive Portfolio Gallery

    September 26, 2013 | Gallery, Plugins, Premium, Responsive
    jQuery Responsive Portfolio Gallery

    Responsive Fully Customizable jQuery Portfolio Gallery. Image preloading

    Read More Demo

    Responsive elements : Helps you build better responsive websites

    September 25, 2013 | Plugins, Responsive
    Responsive elements : Helps you build better responsive websites

    Responsive elements makes it possible for any element to adapt and respond to the area they occupy. It’s a tiny javascript library that you can drop into your projects today.

    Read More Demo

    Squiggle : Scribble out your content with jQuery Plugin

    September 25, 2013 | Plugins, Text Effect
    Squiggle : Scribble out your content with jQuery Plugin

    This jQuery plugin will generate a HTML5 Canvas made png to draw a ‘squiggle’ over your text, like a strike-through or underline.You can configure the plugin, with scribble thickness; colour; intensity or leave it in its auto state, which will callibrate itself to match your text’s CSS.

    Read More Demo

    Ion.Tabs : jQuery tabs plugin

    September 25, 2013 | Plugins, Tabs
    Ion.Tabs : jQuery tabs plugin

    jQuery tabs plugin.Easy and well done tabs with many options and skin support.

    Description:

    • Supports many groups of tabs at one page.
    • Generate events and callbacks.
    • Support many types of position saving, for each tabs group on the page.
    • Very easy in set up and customisation. Has skin support.
    • Has public methods for outside control.
    • Cross-browser support: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)
    • Ion.Tabs supports touch-devices (iPhone, iPad, etc.).
    Read More Demo