Posts In "JQuery"

20 JQuery Table Datagrid Plugins

January 18th, 2012 by aditia rahman / 2 Comments  

     

Datagrid is one of most common used in web design, sometimes it will taking a lot of time to designing table, like header, he zebra row, pagination, etc. In jquery there are a lot of ready to use plugin that I compiled in this post, although grid features will be supported in JQuery UI, maybe is good to know some alternative, before JQuery UI grid came along.

JQuery Accesible RIA Table

JQuery CSS Animation and Rotate

December 11th, 2011 by aditia rahman / No Comments  

     

In today post I try to do a little experiment with css animation, with jquery to generating css value on the fly. When this post created the this animation examples only works on firefox and chrome browser.

In this short example I try to create a stack of images, on the default position each of images have a different angle, and rotating to the same angle in the same duration of time. Here I show all of the code.

JQuery Plugin For Rotating Image

December 4th, 2011 by aditia rahman / 1 Comment  

     

Creating a jquery plugin is easier than it sound, first time I heard about creating 3rd party plugin sounds scary, maybe need more deeper understanding about the platform, but not in jquery. Well I just feel something missing if I have been using jquery for a while not to creating a plugin.

jquery image rotate plugin

Few month ago I have created a simple tutorial to rotating image using jquery, now it would be nice if  I can used as a plugin, and now it a chance to learning simple jquery plugin.

Sumon Math Game With JQuery

October 9th, 2011 by aditia rahman / No Comments  

     

In today post I want to share how I make a simple sumon math game based on JQuery, this game inspired by hyperandroid, this game it quite nice to practice your self concentration about math addition.

JQuery Sumon Game 

This post will create that simple nice game, just to show that you can make it with simple jquery, please note that I only add the basic rule of the game, which are, we have to pick the total number that matched the appear random number thats all.

Slide Navigation Using JQuery With Easing Plugin

September 7th, 2011 by aditia rahman / 9 Comments  

     

Few days ago I browse the apple official site and looking some mac product, the navigation at apple mac page are using an easing effect, it separating each product by the category, I love the effect when user click on the navigation it like the products appear and disappear one by one, with the easing effect on the end movement, like bouncing on the vertical line.

If you see the source code on apple page, seems they are still using prototype.js, once are the most popular javascript framework, before the appearance of  jquery. In this post I want to create something like the apple mac navigation menu using jquery easing plugins.

Swipe Like Effect Based On JQuery UI Draggable

August 28th, 2011 by aditia rahman / 1 Comment  

     

Swipe effect has becoming popular when mobile application usage increase, it a nice touch effect to slide between layout, and some of mobile web application framework has already have this feature for example you can see sencha touch carousel component, but I think the swipe effect can be good enough too, not only for mobile web but for web desktop too. Here I want to share a little idea creating swipe like effect based on jquery UI draggable. Basically the idea is really simple it is the combination of  revert option in jquery ui draggable, jquery animation for moving an element, and mouse event for firing when the item have to swipe.

HTML
<div id="container">
    <div id="swipe_container">
        <div class="item">Item Swipe 1</div>
        <div class="item">Item Swipe 2</div>
        <div class="item">Item Swipe 3</div>
        <div class="item">Item Swipe 4</div>
        <div class="item">Item Swipe 5</div>
        <div style="clear:both"></div>
    </div>
</div>

Easy JQuery Circular Gallery Using RadMenu Plugin

June 24th, 2011 by aditia rahman / 4 Comments  

     

Today post, let’s playing a little code with JQuery and JQuery RadMenu Plugin, cause lately I’ve been thinking about creating circular image gallery my self, and my search stop here for a moment when finding this cool plugins.

JQuery Circle Gallery

This plugin is really cool you can creating a circle from many html element that you defined, which means you don’t have to create a formula to set all the element position to create a circle form.

Hover Image Zoom With JQuery

June 11th, 2011 by aditia rahman / 27 Comments  

     

In today I create a little code snippet in JQuery, this time is about zooming hovered image, this kind of feature might be fit for a web gallery site which have many content, to giving a little quick preview about the item.

JQuery Image Zoom Hover

Here the code, not really much to say, just playing little with jquery animate function and some CSS property such as top, left, width and height.

12 JQuery Based Rich Text Editor

May 21st, 2011 by aditia rahman / 3 Comments  

     

Rich Text Editor maybe one of a must feature in publishing web application like wordpress, joomla, or any other CMS, here I’m collecting some of rich text editor based on JQuery, surely it must be used for JQuery lover.

JQuery Based Rich Text Editor

But I cannot find a popular one like TinyMCE or CKEditor, whatever some of this quite good for your project.

Sliding Stacked Images With JQuery

May 14th, 2011 by aditia rahman / 5 Comments  

     

A sliding door effect can be used what the site offer. About a week ago I visited a site called auroraos, on the first page I see a nice sliding image gallery on the front page, it used JQuery to creating the effect, it like a vertical accordion, sliding door effect or whatever you called it.

jquery sliding stacked images

All the images must have the same size, in both width and height, the hovered images will shows entirely, and the others will mostly hidden.