Blogger Plug n Play - jQuery Tools and Widgets: jQuery Widgets

Showing posts with label jQuery Widgets. Show all posts

$(document).ready(function() {

lastIndex = 0;
$(document).keydown(function(e){
if(e.keyCode==9)
var thisTab = $(":focus").attr("tabindex");
if(e.keyCode == 9) {
if(e.shiftKey) {
//Focus previous input
if(thisTab == startIndex){
$("#"+tabLimitInID).find('[tabindex='+lastIndex+']').focus();
return false;
}

}else {
if(thisTab == lastIndex){
$("#"+tabLimitInID).find('[tabindex='+startIndex+']').focus();
return false;
}
}
}

});

var setTabindexLimit = function(x,fancyID){
console.log(x);
startIndex = 1;
lastIndex = x;
tabLimitInID = fancyID;
$("#"+tabLimitInID).find('[tabindex='+startIndex+']').focus();
}

setTabindexLimit(10,"DivWithTabIndex");

});

http://owlgraphic.com/owlcarousel/

http://rating-widget.com/

Following code showing examples of:

1) Detach() jQuery

2) How to same multiple Detach() from same classes on page and save detached content in an array.

3) Displaying detached content in a div on clicking respective "See More" text.

4) Using :gt which is used to detach all li's greater then index 4.

5) How to use check boxes as a component which can be used multiple times in a page with simple copy/paste without any change in JS code or classes name or anything.

See Working DEMO Here

This news ticker is vertical scroller which stops for a while when heading appears then moves .It stops only on mouse-over. It is continuous and very small code to apply. view demo for complete code

DEMO

Using jQuery we can easily scroll to the required div by using any event like click , Mouse over etc. Same jQuery Function can be used to scroll multiple Divs. No change required in function during addition or removal of any div to scroll. Small Snippet jQuery's ScrollTo function alternative. See Demo for its Working and code

DEMO

jQuery Function Used. Complete code in demo link


$(document).ready(function (){
        $(".click").click(function (){
           var pos = $(this).attr("position");
                $('html, body').animate({
                    scrollTop: $("#"+pos).offset().top}, 2000);
        });
    });

Auto Image slider with great flexibility to re-size the total container and width and length of thumbnails or image. Very light with small code for execution.

See the DEMO for its working. And below CSS code to change container size and thumbnail size

                        #intro {
    width: 580px;
    margin: 0 auto;
   }
   .wrapper {
    background-color: white;
    width: 480px;
    margin: 40px auto;
    padding: 50px;
    box-shadow: 0 0 5px #999;
   }
   .list_carousel {
    background-color: #ffffff;
    margin: 0 0 30px 60px;
    width: 710px;
   }
   .list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
   }
   .list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;
    background-color: #eee;
    border: 5px solid #999;
    width: 200px;
    height: 150px;
    padding: 0;
    margin: 6px;
    display: block;
    float: left;
   }
   .list_carousel.responsive {
    width: auto;
    margin-left: 0;
   }
   .clearfix {
    float: none;
    clear: both;
   }
   .prev {
    float: left;
    margin-left: 10px;
   }
   .next {
    float: right;
    margin-right: 10px;
   }
   .pager {
    float: left;
    width: 300px;
    text-align: center;
   }
   .pager a {
    margin: 0 5px;
    text-decoration: none;
   }
   .pager a.selected {
    text-decoration: underline;
   }
   .timer {
    background-color: #999;
    height: 6px;
    width: 0px;
   }

View Demo for complete code

3D Circular continuous Round about image Scroller

Round about Image Scroller is mostly found in flash. But this is bruit using jQuery. Clicking on perticuler image moves it to first. We can also give links in it. View its Demo for Code and detailed working.

DEMO

simple jQuery accordion menu using Css. See Demo for code and its Working

DEMO

Light box which opens in the middle of page with any type of content like images text audio and video. Any type of content can be embedded in light box. It basically opens a div in middle which contains another link to a page with any type of content.

See demo For code and files.

DEMO

We can change Image in a div by clicking on thumbnails using jQuery without any CSS.

DEMO

HTML CODE

<table border="1" >
 <tr>
     <td colspan="3"><div id="thumb"><img src='Default-Image.jpg' height='200px' widht='200px' ></div>
        </td>
    </tr>
    <tr>
     <td>
   <div id="one"><img src='img-thum1.jpg' height='50px' widht='50px' ></div>
     </td>
     <td>
   <div id="two"><img src='img-thum2.jpg' height='50px' widht='50px' ></div>
     </td>
     <td>
   <div id="three"><img src='img-thum3.jpg' height='50px' widht='50px' ></div>
     </td>
    </tr>    
</table>

jQuery CODE

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>

$("#one").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

$("#two").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

$("#three").click(function() {
  $("#thumb").html("<img src='Big-Image1.jpg' height='200px' widht='200px' >");
});

</script>

Example form with Check box

<input type="checkbox" name="foo" value="bar" />
<input type="button" onclick="show_checked()" value="Show" />
<input type="button" onclick="set_checked(true)" value="On" />
<input type="button" onclick="set_checked(false)" value="Off" />

Check Status of Check box

   $('input[name=foo]').is(':checked')

Full JavaScript Code to On/Off Check Box

 

 function show_checked() {
    window.alert($('input[name=foo]').is(':checked'));
}
function set_checked(checked) {
    $('input[name=foo]').attr('checked', checked);
    //$('input[name=foo]').prop('checked', checked);
}

.prop() can also be used instead of .attr()

DEMO

Using jQuery we can check if an element is hidden or visible which changes its visibility under the effect of some jQuery functions like .hide() , .show() and .toggle() .

Visibility of an element can be checked using $(element).is(":visible")

DEMO

Here is a simple Image scroller which is showin two imaes at a time [more images can be show with some changes in CSS]

DEMO

This is a code for jQuery Toggle tool which can Show or Hide the specified text in a div and changed the text in the button accordingly with a smooth transition effect. First there is HTML code then the Script code which must be added with jQuery,js. Working can be seen on DEMO page.

<section class="round-border">
            <div>
                <button href="#collapse1" class="nav-toggle">Show</button>
            </div>
            <div id="collapse1" style="display:none">
                <p>Bla bla bla bla</p>
            </div>
        </section>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
                $('.nav-toggle').click(function(){
                    //get collapse content selector
                    var collapse_content_selector = $(this).attr('href');                    
                    
                    //make the collapse content to be shown or hide
                    var toggle_switch = $(this);
                    $(collapse_content_selector).toggle(function(){
                        if($(this).css('display')=='none'){
                            toggle_switch.html('Show');//change the button label to be 'Show'
                        }else{
                            toggle_switch.html('Hide');//change the button label to be 'Hide'
                        }
                    });
                });
                
            });   
</script>

DEMO

After a long gap I today I am going to publish this post I hope you will like this very much as I was also searching such a thing for a long time

This is a cool horizontal auto scroll image slider whose speed changes with the movement of cursor this is very flexible as we can change every property very easily , In this post I will not give tutorial But I will redirect you to the page where I found this thing so enjoy using it .

Don't forget to comeback and comment :)

Visit This Link

My Previous Post on drag able images now looks a little bit older in version as this new widget is much more exiting and more flexible.By using this you will be able to drag images up to any extent even beyond web page limitations :)As this is more easy to install and appears more cool just have a look Demo

We have seen many times a beautiful massage box in many Wordpress blogs.It appears between the title and body of post.It can be easily removed by simply clicking the close link.Here is a same massage box for blogger blogs also:) I want to clear here that this Massage box is More interesting then simple regular box.When we visit the page firstly it appears with fade in and fade out effect which easily attracts the attention of visitors.When after reading the massage he/she can make It runs out of the page .Just see the Demo Below ;)

Changing Opacity on hover is very old and common now.Here is a new jQuery based image effect.This gives a new life to images just see the demo below:)

Here is my First content slider with Tabs.The cool thing about this slider is that there is no need to click Tabs , Just hover with cursor to see content under that tab.Its Simple but powerful jQuery widget.Just see demo link below to see its working =)

Subscribe to: Posts ( Atom )