Jimmy Van: Jquery

This jQuery plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.

The plugin is compatible with most modern browsers and has been tested with Firefox 2+, Safari 3+, Opera 9, Google Chrome and Internet Explorer 6, 7, 8, 9 & 10 as well as iOS and Android.
Each example displayed below takes just 1 line of HTML or javascript to generate.

Link to jQuery Sparklines http://omnipotent.net/jquery.sparkline/#s-about

Example :

<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript" src="jquery.sparkline.js"></script>

<p> Inline Sparkline: <span class="inlinesparkline">5,5,9,10</span>. </p>

 <script type="text/javascript"> 
 $(function() {   
 $('.inlinesparkline').sparkline('html', {type: 'pie', barColor: 'red'} ); 
 }); </script>

Pros

Easy to use

A jquery plugin (we are familiar with jQuery)

Free software

Run faster than google chart

Have variety of different charts

Cons

Border not smoothly rounded for pie chart

Cannot add SliceText (only show Slice's value)

Limited customisation to tool-tip styling

Thứ Sáu, 14 tháng 12, 2012

Carousel Jquery and Slice Show

1. http://www.1stwebdesigner.com/tutorials/40-fresh-jquery-image-and-content-sliders-plugins/
2. http://www.tripwiremagazine.com/2012/10/jquery-carousel.html
3. http://www.pixelzdesign.com/blog_view.php?id=55
4. http://utdesign13.com/40-best-jquery-carousel-plugins-tutorials/
5. http://malsup.com/jquery/cycle/
6. http://www.hotajax.org/demo/compo-parallax/demo/demo.html
7. http://www.dhteumeuleu.com/in-second-lives
8. http://www.hotajax.org/images--gallery/jquery/118-polaroid-photobar-gallery-with-jquery.html
9. http://www.jcoverflip.com/demo
10.http://css-tricks.com/moving-boxes/
11. http://slidesjs.com/
12. http://www.buildinternet.com/project/supersized/
13. http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/
14. http://www.madeincima.it/download/samples/jquery/easyAccordion/
15. http://code.edspencer.net/apod/

jCarousel - Riding carousels with jQuery

1. http://sorgalla.com/projects/jcarousel/
2. http://archive.plugins.jquery.com/plugin-tags/carousel
3. http://jsfiddle.net/4WY6S/6/
4. http://code.edspencer.net/apod/

Thứ Hai, 10 tháng 12, 2012

How do I detect IE 8 with jQuery?

    if($.browser.msie && parseInt($.browser.version, 10) === 8){
        var bodyWidth = $(window).width();
        if(bodyWidth < 767){
            $(".content-right").attr("style","text-align: left;");
        }
    }

or

$(document).ready(function()
{
if ( $.browser.msie ){
    if($.browser.version == '6.0')
    {   $('html').addClass('ie6');
    }
    else if($.browser.version == '7.0')
    {   $('html').addClass('ie7');
    }
    else if($.browser.version == '8.0')
    {   $('html').addClass('ie8');
    }
    else if($.browser.version == '9.0')
    {   $('html').addClass('ie9');
    }
}
else if ( $.browser.webkit )
{ $('html').addClass('webkit');
}
else if ( $.browser.mozilla )
{ $('html').addClass('mozilla');
}
else if ( $.browser.opera )
{ $('html').addClass('opera');
}
});

Thứ Năm, 20 tháng 9, 2012

Jquery Validater Form

1.
$("#myform").validate({
rules: {
    field: {
      required: true,
      date: true
    }
}
});

2.
               rules: {
                            datepicker: {
                              required: true,
                              date: true
                            }}
3.
$('#myForm')
    .validate({
        rules :
            myDate : {
                australianDate : true
            }
    });

4.
$("#myForm").validate({
      rules: {
          username: {
           email: {
                required:true,
                email:true,
                maxlength:255,
            },
            confirmEmail: {
                required:true,
                equalTo: "#email"
            },
         }
       }
     })

5.

$('validatorElement').validate({
    rules : {
        amount : { greaterThanZero : true }
    }
});

6.
$("#regFormPart1").validate({
username: {
      required: true,
       minlength: 8,
       uniqueUserName: true
       },
messages: {
username: {
      required: "Username is required",
       minlength: "Username must be at least 8 cheractors",
       uniqueUserName: "This Username is taken already"
      }
    }
});

7.
var validator = $("#signupform").validate({
rules: {
username: {
required: true,
minlength: 6,
maxlength:16,
remote:'checkUserName',
nowhitespace:true,
alphanumeric:true,
notEqualTo:'#otherusername'
},
messages: {
username: {
required: "Enter a username",
minlength: jQuery.format("Enter at least {0} characters"),
remote: 'Username not available',
alphanumeric: 'Letters, Numbers and Underscores Only.',
notEqualTo: 'Profile and Customer Usernames cant be same'
}
});

Giới thiệu một số rules thường sử dụng :

+ required : bắt buộc phải nhập
+ minlength() : số ký tự tối thiểu vd - minlength : 3
+ maxlength() : số ký tự tối đa vd – maxlength : 10
+ rangelength() : số ký tự giới hạn trong khoảng cụ thể .vd - rangelength: [2, 6]
+ min ():giá trị nhỏ nhất . vd – min : 1
+ max () : giá trị lớn nhất . vd - max :10
+ range() : gia tri trong 1 giới hạn cụ thể . vd - range: [1,10]
+ email() :nhập theo địa chỉ email hợp lệ. vd - hoang@yahoo.com
+ url() :nhập theo địa chỉ url hợp lệ. vd – http://nhatnghe.com.vn
+ date() : nhập ngày theo chuẩn : yyyy-mm-dd .vd- 2011-12-20
+ digits() : phải nhập số
+ number() : nhập số thập phân
+ equalTo() : giá trị phải bằng với giá trị của một đối tượng cụ thể khác.

jQuery validation : End date should be Greater than Start date

$.validator.addMethod("enddate", function(value, element) {
var startdatevalue = $('.startdate').val();
return Date.parse(startdatevalue) < Date.parse(value);
}, "End Date should be greater than Start Date.");

Jquery Validation - DATE mm/dd/yyyy format
<script>
$(document).ready(function(){
    $.validator.addMethod("DateFormat", function(value,element) {
        return value.match(/^(0[1-9]|1[012])[- //.](0[1-9]|[12][0-9]|3[01])[- //.](19|20)\d\d$/);
            },
                "Please enter a date in the format mm/dd/yyyy"
            );
$("#form5").validate({
        rules: {
            arrival: {
                required: true,
                DateFormat: true
            },
            departure : {
                required: true,
                DateFormat: true
            }
        }
    });
});
</script>

jquery validation password rules
$("#myform").validate({
rules: {
    password: "required",
    password_again: {
      equalTo: "#password"
    }
}
});

Jimmy Van

Thứ Ba, 10 tháng 9, 2013

Navigation Menu With Jquery

Draw Chart & Map with Jquery

Thứ Ba, 27 tháng 8, 2013

Slide Effect Jquery

Chủ Nhật, 25 tháng 8, 2013

Caption Hover Effects

Thứ Ba, 13 tháng 8, 2013

The Best Form and Form Wizard

Thứ Năm, 25 tháng 7, 2013

JQuey Effect

Thứ Hai, 7 tháng 1, 2013

Carousel Swipe jquery

Thứ Ba, 18 tháng 12, 2012

Mobile Swipe - Swipe Jquery - Mobile Touching

jQuery Sparklines - The tool draw chart