Superdit.com » JQuery

20 JQuery Table Datagrid Plugins

aditia rahman — Wed, 18 Jan 2012 02:01:50 +0000

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 CSS Animation and Rotate

aditia rahman — Sun, 11 Dec 2011 09:22:38 +0000

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.




    CSS Rotate And Animation

I use jquery for generating each images angle, and adding CSS animation on the fly using jquery, you can see all the images have the same animation keyframe which is animation to 360deg in 3 seconds, with ease effect, so why not just put on static css style, I don’t really know what, but on webkit browser it is not working. Here the demo, this might be a lag on firefox.

Demo

JQuery Plugin For Rotating Image

aditia rahman — Sun, 04 Dec 2011 06:50:12 +0000

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.

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.

demo | download

Now just straight to the plugin code, this is the code I put on file jquery.rotate.js

(function( $ ) {
    $.fn.myrotate = function() {
        var img = this.find("img");
        var imgpos = img.position();
        var x0, y0;

        $(window).load(function() {
            img.removeAttr("width");
            img.removeAttr("height");

            x0 = imgpos.left + (img.width() / 2);
            y0 = imgpos.top + (img.height() / 2);
        });

        var x, y, x1, y1, drag = 0;

        img.css({
            "cursor": "pointer",
            "position": "relative"
        });

        img.mousemove(function(e) {
            x1 = e.pageX;
            y1 = e.pageY;
            x = x1 - x0;
            y = y1 - y0;

            r = 360 - ((180/Math.PI) * Math.atan2(y,x));

            if (drag == 1) {
                img.css("transform","rotate(-"+r+"deg)");
                img.css("-moz-transform","rotate(-"+r+"deg)");
                img.css("-webkit-transform","rotate(-"+r+"deg)");
                img.css("-o-transform","rotate(-"+r+"deg)");
            }
        });

        img.mousedown(function() {
            if (drag == 0) {
                drag = 1;
                img.css("-webkit-box-shadow", "0 0 5px #999");
                img.css("-moz-box-shadow", "0 0 5px #999");
                img.css("box-shadow", "0 0 5px #999");
            } else {
                drag = 0;
                img.css("-webkit-box-shadow", "0 0 2px #999");
                img.css("-moz-box-shadow", "0 0 2px #999");
                img.css("box-shadow", "0 0 2px #999");
            }
        });

        img.mouseleave(function() {
            drag = 0;
        });
    };
})( jQuery );

The idea is similar from before, to get the image center point and get the cursor coordinate using javascript Math we can find the radian, and rotate the image using CSS. Here are a sample usage

There are some problem when you are getting image width and height directly from html tag in webkit browser, even when we are using jquery, there are a thread from stackoverflow offer many solution for this.

Sumon Math Game With JQuery

aditia rahman — Sun, 09 Oct 2011 13:24:55 +0000

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.

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.

Demo | Download

JQuery

In this example i’m using a little JQuery UI effect, so not to forget to include it on your script.

1. function randomFromTo, from admixweb, this function will get random number between the two input parameter.

2. function Array.prototype.clean , from stackoverflow, this function will clean the array, I use this with javascript delete function to cleaning the array, since I haven’t found how to destroying an array in javascript.

3. function generateRandomSum, this function will pick the total random in array, the total picked number is random from one to three, and each index of the array must be unique.

4. function getUnique, this function will get unique index of array that stored in array, this are recursive function, it will continue run until find the unique array index.

5. function boxClick, this is the main event function of this example, many array variable used in this function, I admit I fell a little bit confuse when debugging this, that I have to delete array, change array, clean. etc.

6. function start, this is the initialization when displaying the box, it creating each box by looping on the fly, based on the dimensions size that picked.

HTML


    
        Pick Dimension:  
        
        
    
    Next Total:  0

CSS

* {
    font-family: Arial, "Free Sans";
}
body {
    background: #fff url("circles.png") repeat right top;
}
#container {
    margin: 0 auto;
    text-align: center;
}
#dimcontainer {
    padding: 2px;
    margin: 0 auto;
    left: 500px;
}
.boxnum {
    text-align: center;
    cursor: pointer;
    border: 2px solid #e3e3e3;
    background: #fff;
    width: 70px;
    height: 70px;
    margin: 2px;
    float: left;
    color: #D80000;
    -webkit-border-radius: .3em;
    -moz-border-radius: .3em;
    border-radius: .3em;
}
.boxnum:hover {
    background: #e3e3e3;
}
.boxnum p {
    margin-top: 20px;
    font-size: 28px;
    font-weight: bold;
    text-shadow: -1px 1px 1px #fff;
}
.red {
    background: #ff0000;
    border-color: #ff0000;
}
.red:hover {
    background: #ff0000 !important;
}
#boxclear {
    clear: both;
}
#pnext {
    font-size: 18px;
}
#nextsum {
    font-weight: bold;
    font-size: 30px;
    position: relative;
    top: 3px;
}
#pick {
    font-size: 18px;
}

That’s all, I know this example is not perfect but at least this is one of the way how you make it, you can improve it by adding some several features like, game scoring, help instruction, difficulty (by adding range in the random number), some bug fixing for preventing rapid click, etc.

Demo | Download

Slide Navigation Using JQuery With Easing Plugin

aditia rahman — Wed, 07 Sep 2011 00:26:20 +0000

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.

Demo | Download

The apple mac page not only dealing with the effect but also with the selected navigation, and for the easing effect I use jQuery easing plugin, although it is an old plugin, but it still work or maybe you can use jquery ui bounce effect for the alternative.

HTML

The html code are mostly the same as when you are create an image slideshow using the the overflow css property, and syncronize the nave of product container and navigation so it can be easily manipulated by jquery.


    
        
            
            
            
            
            
            
        
        
            
            
            
            
            
        
        
            
            
            
            
        
         
            
            
            
            
            
            
        
        
    


    Browser
    Apple
    Construction
    Cake

CSS

* {
    font-family: Arial, "Free Sans";
}
.container {
    border: 5px solid #0099cc;
    width: 700px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 50px;
    padding: 10px 0;
    -webkit-border-radius: .3em .3em 0 0;
    -moz-border-radius: .3em .3em 0 0;
    border-radius: .3em .3em 0 0;
}
#container_wide {
    width: 2800px;position: relative;
}
.product_container {
    text-align: center;
    width: 700px;
    float: left;
    position: relative;
}
.product_container a {
    margin: 0 12px;
    position: relative;
}
.nav {
    width: 700px;
    background: #0099cc;
    margin: 0 auto;
    text-align: center;
    border: 5px solid #0099cc;
    border-bottom-width: 10px;
    -webkit-border-radius: 0 0 .3em .3em;
    -moz-border-radius: 0 0 .3em .3em;
    border-radius: 0 0 .3em .3em;
}
.nav a {
    color: #fff;
    font-size: 12px;
    letter-spacing: 1px;
    margin-right: 10px;
    font-weight: bold;
    text-decoration: none;
}
.nav a:hover {
    color: #e3e3e3;
}

JQuery

The jquery code will move each item one by one from it specific product container with a time delay, when you are creating image slideshow simply just move the div container, and the image will change.

But in this case we cannot do that cause if we move the container all the item will be move as well, but the container still needed to make the product alignment tidy.

$(document).ready(function() {
    var displayed = "product_browser";
    var cindex = 0; // current index (displayed product)

    function loopMoveLeft(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveLeft(el.next(), move);
            }, 100);
        }
    }

    function loopMoveRight(el, move) {
        if (el.length == 1) {
            setTimeout(function() {
                el.animate({ left: move }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
                loopMoveRight(el.prev(), move);
            }, 100);
        }
    }

    function slideItem(obj_el) {
        var product = $(obj_el).attr("id").replace("nav_", "");
        var contid = 'product_' + product;

        // current displayed element
        var elFirst = $("#"+displayed+" a:first-child");
        var elLast = $("#"+displayed+" a:last-child");
        var total_el = $("#"+displayed).children().length;

        var index = $(obj_el).index();

        // new element to displayed
        var el_f = $("#"+contid+" a:first-child");
        var el_l = $("#"+contid+" a:last-child");
        var total_new = $("#"+contid).children().length;

        var movement = -700 * index;

        if (cindex > index) {
            loopMoveRight(elLast, movement);
            setTimeout(function() {
                loopMoveRight(el_l, movement)
            }, (total_el + 1) * 100);
        } else if (cindex < index) {
            loopMoveLeft(elFirst, movement);
            setTimeout(function() {
                loopMoveLeft(el_f, movement)
            }, (total_el + 1) * 100);
        }

        cindex = index;
        displayed = contid;

        return (total_el + 5 + total_new) * 100;
    }

    var timeout;

    $(".product_nav").click(function() {
        $(".product_nav").unbind('click');
        timeout = slideItem(this);

        // prevent abusive click
        setTimeout(function() {
            $(".product_nav").bind('click', function() {
                timeout = slideItem(this);
            });
        }, timeout);
    });
});

You can see on code above this example mostly using the setTimeout to make each item move in sequence, the bind and unbind used for preventing abusive click from user and it still using setTimeout too.

Demo | Download

Swipe Like Effect Based On JQuery UI Draggable

aditia rahman — Sun, 28 Aug 2011 12:34:34 +0000

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


    
        Item Swipe 1
        Item Swipe 2
        Item Swipe 3
        Item Swipe 4
        Item Swipe 5

Demo

CSS

Make sure the swipe container width equal or larger than total items width for example you have 3 item swipe with 300px width, use minimum 900px for swipe container width.

#container {
    width: 320px;
    height: 480px;
    overflow: hidden;
    border: 5px solid #0099cc;
    margin:0 auto;
}
#swipe_container {
    width: 1600px;
    background: #999;
}
.item {
    font-size: 24px;
    width: 320px;
    height: 480px;
    float: left;
    background: #e3e3e3;
}

JQuery

This jquery code will count the items inside the swipe container, this used for detecting whether it is the first item or the last item to swipe, if true, the position not change and to make it look like swiping an item, add the revent option on the draggable function.

$(document).ready(function() {
    var cont_pos = $("#swipe_container").position();
    var item_width = $(".item").width();
    var items = $("#swipe_container > div.item").length;
    var item_index = 1;
    var cont_post_temp;

    $("#swipe_container").draggable({ axis: "x", revert: true });

    function bindMouseUp() {
        $("#swipe_container").unbind('mouseup');
        cont_post_temp = $("#swipe_container").position().left;
        if (cont_pos.left > cont_post_temp && item_index != items) {
            // swipe to right
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_pos.left - cont_post_temp;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '-=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index++;;
        } else if (cont_pos.left < cont_post_temp && item_index != 1) {
            // swipe to left
            $("#swipe_container").draggable("option", "revert", false);
            var moveLeft = cont_post_temp - cont_pos.left;
            moveLeft = Math.abs(item_width - moveLeft);
            $("#swipe_container").animate({
                left: '+=' + moveLeft
            }, 500, function() {
                $("#swipe_container").draggable("option", "revert", true);
                cont_pos = $("#swipe_container").position();
                $("#swipe_container").bind('mouseup', function() {
                    bindMouseUp();
                });
            });
            item_index = item_index - 1;
        } else {
            // on the beginning or end item swipe
            $("#swipe_container").draggable( "option", "revert", true );
            $("#swipe_container").bind('mouseup', function() {
                bindMouseUp();
            });
        }
    }

    $("#swipe_container").mouseup(function() {
        bindMouseUp();
    });
});

In above code the swipe function is triggered on bingMouseUp, in this function I have to bind and unbind the mouse event and the revert for preventing abuse mouse event, from user. That is all I know this not perfect, like this swipe only happen when the mouse up, but when mouse leave an item it came back to previous position.

Demo

Easy JQuery Circular Gallery Using RadMenu Plugin

aditia rahman — Fri, 24 Jun 2011 10:45:15 +0000

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.

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.

Plugin: RadMenu

All Code




    JQuery Circle Gallery

This example only follow the original example at the plugin page, with a little style modification and added selected image on the center of the circle, just take some attention to css position for this. If you want more advance tutorial you can read addyosmani jquery roudrr blog post, he explain step by step how to create a circle form from a set of images.

Download Demo

Hover Image Zoom With JQuery

aditia rahman — Sat, 11 Jun 2011 01:35:35 +0000

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.

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.




    JQuery Zoom Hover

I’m using 5 images here, the zoom in effect triggered when the mouse is hover in, and vice versa. We need to manipulate the top and left in animating to make the zoom effect looks tidy, and this how to measure the movement number, let say your images 100px x 100px and zoomed to 200px x 200px, which mean you have to make the top and left reduced by 50px (200px – 100px) / 2 when the zoomin triggered, easy right, and that’s all.

Demo Download

stock photos by flickr architecture group

12 JQuery Based Rich Text Editor

aditia rahman — Sat, 21 May 2011 07:23:07 +0000

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.

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

1. MarkItUp

visit | demo | download

2. jWYSIWYG

visit | demo | download

3. jHtmlArea

visit | demo | download

4. WYMEditor

visit | demo | download

5. Light Weight RTE JQuery

visit | demo | download

6. uEditor

visit | demo | download

7. CLEditor

visit | demo | download

8. LWRTE

visit | download

9. HtmlBox

visit | demo | download

10. CSS3 Jquery RTE

visit | download

11. Damn Small Rich Text Editor

visit | download

12. jQuery WYSIWYG Rich Text Editor

visit | demo | download

Sliding Stacked Images With JQuery

aditia rahman — Sat, 14 May 2011 01:09:53 +0000

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.

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.

View Demo | Download Source

HTML

In this example I’m using 5 images, like before we have to set the overflow css property to hidden so all the images can be expanded in the background, you can see on the CSS code section.

JQuery

This example set all the images position using JQuery, on the $(document).ready(); function, to make it easier where to move the images when an images hover, I set all the position in array. And there is two recursive function i used here, they are used when JQuery must loop on the prev and next images until no images found anymore.

$(document).ready(function() {
    var cwidth = parseInt($("#container").css("width").replace("px", ""));
    var img_count = $("#img_container").children().length;
    var img_width = $("#img1").width();
    var divider = cwidth / img_count;
    var small_space = (cwidth - img_width) / (img_count - 1);

    // set position
    var cssleft = Array();
    $("#img_container img").each(function(index) {
        cssleft[index] = new Array();
        // set default position
        cssleft[index][0] = (index * divider) - (index * img_width);
        $(this).css("left", cssleft[index][0] + "px");

        // set left position
        cssleft[index][1] = (index * small_space) - (index * img_width);

        // set right position
        var index2 = index;
        if (index2 == 0) {
            index2++;
        }
        cssleft[index][2] = cssleft[index2 - 1][1];
    });

    // image hover
    $("#img_container img").mouseenter(function() {
        var img_id = parseInt($(this).attr("id").replace("img", "")) - 1;

        if ($(this).attr("id") != "img1") {
            $(this).animate({
                left: cssleft[img_id][1]
            }, 300);
        }
        loopNext(this);
        loopPrev(this);
    });

    // image container hover out back to default position
    $("#img_container").mouseleave(function() {
        $("#img_container img").each(function(index) {
            $(this).animate({
                left: cssleft[index][0]
            }, 300);
        });
    });

    function loopPrev(el) {
        if ($(el).prev().is("img")) {
            var imgprev_id = parseInt($(el).attr("id").replace("img", ""));

            if ($(el).prev().attr("id") != "img1") {
                $(el).prev().animate({
                    left: cssleft[imgprev_id - 2][1]
                }, 300);
            }
            loopPrev($(el).prev());
        }
    }

    function loopNext(el) {
        if ($(el).next().is("img")) {
            var imgnext_id = parseInt($(el).attr("id").replace("img", ""));

            $(el).next().animate({
                left: cssleft[imgnext_id][2]
            }, 300);
            loopNext($(el).next());
        }
    }
});

CSS

I’m using the box shadow effect to the space between each image, so not to get confused.

#container {
    margin: 0 auto;
    margin-top: 50px;
    width: 800px;
    height: 350px;
    overflow: hidden;
    border: 10px solid #000;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
}
#img_container {
    width: 4000px;
}
#img_container img {
    position: relative;
    -moz-box-shadow: -5px 0 10px #000;
    -webkit-box-shadow: -5px 0 10px #000;
    box-shadow: -5px 0 10px #000;
    width: 600px;
}
#img1 { z-index: 0; }
#img2 { z-index: 1; }
#img3 { z-index: 2; }
#img4 { z-index: 3; }
#img5 { z-index: 4; }

View Demo | Download Source

Superdit.com » JQuery

20 JQuery Table Datagrid Plugins

JQuery Accesible RIA Table

Flexigrid

jqGrid

inGrid

tGrid

Datatables

jTPS

jQuery Gridy

GridNic

Kendo UI Grid

jqxGrid

Pines Grid

JQuery Magic Grid

Editable Grid

Sigma Grid

Tablesorter

Zentable

jqGridView

OpenJS Grid

Compass Datagrid

JQuery CSS Animation and Rotate

Demo

JQuery Plugin For Rotating Image

demo | download

Sumon Math Game With JQuery

JQuery

HTML

CSS

Slide Navigation Using JQuery With Easing Plugin

HTML

CSS

JQuery

Swipe Like Effect Based On JQuery UI Draggable

HTML

Demo

CSS

JQuery

Demo

Easy JQuery Circular Gallery Using RadMenu Plugin

All Code

Hover Image Zoom With JQuery

12 JQuery Based Rich Text Editor

1. MarkItUp

2. jWYSIWYG

3. jHtmlArea

4. WYMEditor

5. Light Weight RTE JQuery

6. uEditor

7. CLEditor

8. LWRTE

9. HtmlBox

10. CSS3 Jquery RTE

11. Damn Small Rich Text Editor

12. jQuery WYSIWYG Rich Text Editor

Sliding Stacked Images With JQuery

HTML

JQuery

CSS