15+ Blogs To Follow For jQuery Lovers

jQuery, being one of the most popular & powerful JavaScript frameworks around, is offering a slick experience to users at every level.

Its website is a huge resource of documentation, examples & tutorials for anyone who is into it.

Besides the documentation jQuery offers, following other jQuery users is a great way to learn more & get inspired to discover new ways for taking advantage of this library.

Here are 15+ blogs to follow for jQuery fans that frequently create jQuery-oriented content:

John Resig

Besides being the creator of jQuery, he has other creative JavaScript-related projects like:

• Processing.js
• Sizzle.js
• FireUnit & more

Not only for jQuery users but for anyone into JavaScript, his blog is a great source of information & inspiration.

Follow Details: RSS – Twitter

Official jQuery Blog

The blog covers any type of updates related to jQuery from new versions to jQuery-related posts in the blogosphere, events & more.

Follow Details: RSS – Twitter

Official jQuery UI Blog

jQuery UI is a resource which is preferred by many jQuery users. Its blog regularly shares updates about the library and also list the websites that are powered by jQuery UI (which is a nice source of inspiration).

Follow Details: RSS

Filament Group Lab

Filament Group, the team who built the ThemeRoller, various jQuery plugins & jQuery UI widgets is sharing their experiences under their Lab blog.

There are both ready to use & experimental jQuery codes shared which are described & discussed in detail.

Follow Details: RSS – Twitter

Learning jQuery

This is a multi-author blog (mostly authored by Karl Swedberg of jQuery Evangelism Team) with lots of tips & tutorials on jQuery for beginners to advanced users.

Follow Details: RSS – Twitter

jQuery For Designers

The website shares very detailed & easy to implement tutorials on interfaces that are improved by jQuery.

Follow Details: RSS – Twitter

Brandon Aaron

He is in the development team of jQuery and, not frequently, shares great info & tips on jQuery usage.

Follow Details: RSS – Twitter

Jörn Zaefferer (bassistance.de)

He is also in the jQuery development team & has created many popular jQuery plugins.

Follow Details: RSS – Twitter

Paul Bakaus

He is the creator of jQuery UI & some popular plugins like "dimensions". It is possible to find information on jQuery & jQuery UI in his blog.

Follow Details: RSS – Twitter

James Padolsey

He is a freelance web developer who writes about JavaScript & has various ideas/codes shared on jQuery. One of them which you may like: jQuery plugin detector.

Follow Details: RSS

Soh Tanaka Blog

Web designer & front-end developer Soh Tanaka has beautiful tutorials that are tailored around jQuery.

Follow Details: RSS – Twitter

JankoAtWarpSpeed

Janko Jovanovic is writing very nice tutorials that uses jQuery and also posts other web design-related articles.

Follow Details: RSS – Twitter

nettuts

One of the most popular web design tutorials website has a bunch of tutorials that heavily uses jQuery. And, the website is also a treasure with all the other articles published.

Follow Details: RSS – Twitter

Marcofolio.net

Marco Kuiper, a freelance web designer & developer, is frequently postingweb development tutorials that are based on jQuery.

Follow Details: RSS – Twitter

Build Internet!

Build Internet! has a collection of jQuery tutorials that are presented in detail. The website is not totally jQuery-oriented & publishes other development & web-business-related post

Follow Details: RSS – Twitter

David Walsh

He is in the MooTools development team. However, he mostly shares the jQuery versions of the snippets he creates which is also a nice way to compare jQuery with another great framework.

Follow Details: RSS – Twitter

jQuery How To

The website is totally focused on jQuery content. It shares code snippets, "how-to"s that can be handy for and jQuery user.

Follow Details: RSS – Twitter

WebResourcesDepot (shameless self-promotion)

WRD, time-by-time, shares tutorials on jQuery, like:

• Ajaxed Sliding Shopping Cart With jQuery
• Fly-To-Basket Effect With jQuery
• Sliding Top Menu With jQuery
• Load Content While Scrolling With jQuery
• & more..

Also, it is possible to find lots of jQuery plugins & information (like this post) regularly.

Follow Details: RSS – Twitter

 That's all are the Platform Which Teaches you jQuery Time to Time But If You Don't Want to Go Anywhere  don't Worry Time to Time I will Teach You jQuery on Blogging Section Here Only.

Any others you know that are missing? Please share them in the comments.

Read More...

Smooth Jquery Featured Post Slideshow For Blogger

This tutorial will shows you how to add featured content slideshow to show your featured post to your readers.This slideshow is very easy to setup and can easily manage width and height to match your template.Not only that you can change the speed of this slideshow easily.Default width is 550px and Default height is 200px.I think you will love this slideshow.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[

/* ------------------------------------------------------------------------
 s3Slider

 Developped By: Boban Karišik -> http://www.serie3.info/
 CSS Help: Mészáros Róbert -> http://www.perspectived.com/
 Version: 1.0

 Copyright: Feel free to redistribute the script/modify it, as
      long as you leave my infos at the top.
-------------------------------------------------------------------------- */

(function($){

$.fn.s3Slider = function(vars) {

 var element     = this;
 var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
 var current     = null;
 var timeOutFn   = null;
 var faderStat   = true;
 var mOver       = false;
 var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
 var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

 items.each(function(i) {

     $(items[i]).mouseover(function() {
        mOver = true;
     });

     $(items[i]).mouseout(function() {
         mOver   = false;
         fadeElement(true);
     });

 });

 var fadeElement = function(isMouseOut) {
     var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
     thisTimeOut = (faderStat) ? 10 : thisTimeOut;
     if(items.length > 0) {
         timeOutFn = setTimeout(makeSlider, thisTimeOut);
     } else {
         console.log("Poof..");
     }
 }

 var makeSlider = function() {
     current = (current != null) ? current : items[(items.length-1)];
     var currNo      = jQuery.inArray(current, items) + 1
     currNo = (currNo == items.length) ? 0 : (currNo - 1);
     var newMargin   = $(element).width() * currNo;
     if(faderStat == true) {
         if(!mOver) {
             $(items[currNo]).fadeIn((timeOut/6), function() {
                 if($(itemsSpan[currNo]).css('bottom') == 0) {
                     $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 } else {
                     $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                         faderStat = false;
                         current = items[currNo];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 }
             });
         }
     } else {
         if(!mOver) {
             if($(itemsSpan[currNo]).css('bottom') == 0) {
                 $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                     $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             } else {
                 $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                 $(items[currNo]).fadeOut((timeOut/6), function() {
                         faderStat = true;
                         current = items[(currNo+1)];
                         if(!mOver) {
                             fadeElement(false);
                         }
                     });
                 });
             }
         }
     }
 }

 makeSlider();

};

})(jQuery);

//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>
<style type='text/css'>
#s3slider {
background:#000000;
border:1px solid #818e8f;
width: 550px;
height: 200px;
position: relative;
overflow: hidden;
}
#s3sliderContent {
width: 550px;
position: absolute;
top:0px;
padding: 0px;
margin: 0px;
}
.s3sliderImage {
float: left;
position: relative;
display: none;
}
.s3sliderImage span {
position: absolute;
left: 0;
font: 20px Trebuchet MS, sans-serif;
padding: 10px 0px;
width: 550px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
color: #fff;
display: none;
bottom: 0;
text-align:center;
}
.clear {
clear: both;
}
</style

NOTE : To change the speed of slideshow, change the value 4000.

4.Save your template.

5.Now go to Layout-->Page Element and click on "Add a gadget".

6.Select "html/java script" and add the code given below and click save.

<div id="s3slider">
<ul id="s3sliderContent">

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhretS-iX6taBb0WzfyWicFlLCKyINKjAUbHf2kLYDcpVIoNf7KC6_QpC6e-rY0R8u1chmNOeqPKSIIm6iDwmrSdzPuOTHfzDWPzS8o-ftJ1gE4VKbK7xiJNSyZggjEfSLQk5TxGp2g_LNg/s1600/Crysis-11.jpg" /><span>Crysis : Download Full Version</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQpke8II2hqxTZSFWJivvAC39u6TcTI85FpjmYBEgw06dqzzJHEt5djwNnjT9Asy0Idw3VqaOfmv1qQn8sTCKkKvUSlWcxwH852iCBZtY_JpxziAgcQLWdQmyIhfx1NFHzz4Z6SgjkE8g//" /><span>Halo 3 : Play Game Online</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEv_1lDz_HrMUHD8TvCHt-vovCcIPkGtfR6_dFU448UHOKECWA0WfWAnMZ9hj3xPcIv_f_sei59Psp7ZlpuFW-IQZtTYMEe8ZGW3zTGZKuN01x2blxGSPqWLcONdhEQ2WcG3LwRpTFGNdH//" /><span>Avatar : Watch Movie Now !!!</span></a></li>

<li class="s3sliderImage"><a href="YOUR-LINK-HERE"><img style="width:550px;height:200px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihqtDyoHSHmy1JIgdhiFheOx641pfrnOO369FhI6IvwCpkna5ussnZVpK_-jymiiMAgP-wCPF-bZD-uknoOndaj-a390-toLy8CyR8WnorA0LYECs9J54ylkE6LK5_9LMdnnK5UUVfmDWo/s1600/call+of+duty-11.jpg" /><span>Call Of Duty 4 : Get Here</span></a></li>

<li class="s3sliderImage"></li>
</ul>
</div>

<div class='clear'></div>

NOTE : Replace YOUR-LINK-HERE and images with your content.

Now you have successfully installed this slide show to your site.

Read More...

New version of recommended for you post slide out widget with social share buttons

Recommended post slide out widget always helps your blog visitors to keep surfing different posts on your blog without leaving your blog, new version of recommended slide out post widget with social share buttons and more customization option, in this widget i have included facebook like button, twitter share button and google+ button, and also give option to change position of the widget,in old version widget it was fixed at right side of your page corner, but in this widget you can freely set position of the widget as you want to show left or right ! and also give option to change color of top border as matching with your blog/site and  more..

Demo

How To Install this Gadget?

End Of Post marker – The slide comes out when the user scrolls down to a particular point in your Blog.(the bottom of the page by default) To mark this point, you can add an HTML element there. The element should have the id bpslidein_place_holder

e.g.: <div id=’bpslidein_place_holder’></div> would do the job. The best place to add this marker would be at the end of the post. If you want to do it easily, you can add this to your Blogger Template.

In your template Find,(You will have to expand the Widget Templates)

<data:post.body/>

Immediately below it, add the following snippet and save your template

<b:if cond='data:blog.pageType == "item"'> 

Now when the reader scrolls down to this div, the slide will open up.

To Add Gadget to Your Blog...

1. Go To LAYOUT.
2. Click on Add Gadget below Blog Post.
3. Select Third party html Gadget.
4. Copy The Below code in it.
5. Now Click Save & You are Done!

<style>
#bpslidein{z index:5;
width:400px;
height:100px;
padding:10px;
background-color:#fff;
border-top:5px solid #F9780E;
position:fixed;
right:-430px;
bottom:0;-moz-box-shadow:-5px 0 10px #aaa;
-webkit-box-shadow:-5px 0 10px #aaa;
box-shadow:-5px 0 10px #aaa;
font-family:Arial, Helvetica, sans-serif;
}
#bpslidein p{
font-size:11px;
text-transform:uppercase;
font-family:Arial,Helvetica,sans-serif;
letter-spacing:1px;color:#555;
}
#bpslidein_title{
color:#555;
font-weight:700;
font-size:16px;
margin:10px 20px 10px 0;
}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{
text-decoration:none;color:#F9780E;
}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{
border:2px solid #EEE;
cursor:pointer;
color:#9A9AA1;
width:13px;
height:15px;
padding:2px 0 0 5px;
position:absolute;
right:10px;font-size:17px;
font-weight:700;font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#bpslidein .help{right:35px;
}
#bpslidein_title,#bpslidein_image{
float:left;width:80px;
}
#bpslidein_title{
width:290px;
}

?

+

X

Recommended for you

Read More...

New Mashable AJAX Navigation Menu Widget for Blogger

AJAX Navigation menu for blogger is very new widget created by Me in Blogger platform that uses Blogger JSON feed API and AJAX. This navigation menu is inspired from Mashable.com old site. I coded this widget some months ago, but there is no time for publishing this article. And now i recoded and improved this widget and added customizable features.

How It Works?

this widget is works based on jQuery library and Blogger JSON feed API. Your blog must be for Public visitors. other wise the Blogger JSON Feed API won’t works.
The menu is works just like normal drop-down menu when javascript is disabled, And it will turns to AJAX powered drop-down menu when javascript is enabled.

Live Demo

This Demo is Provided by Way2Blogging.

How To Install this Gadget?

1. Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
2. Click Edit HTML button

The CSS

Add the Following CSS Code before ]]></b:skin>

/* Menu Stylings */
.w2bmenu *{margin: 0;padding: 0;}
ul.w2bmenu {list-style: none;line-height: 1;overflow: visible !important;}
ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;}
ul.w2bmenu li{list-style: none;position:relative;float: left;margin: 0 !important;padding: 0 !important;}
ul.w2bmenu li a{margin: 0;padding: 12px 16px !important;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif !important;color: #6b6b6b !important;text-shadow: 0 1px 0 #fff;font-weight: 700 !important;text-transform: uppercase !important;font-size: 12px !important;display: block !important;border: 0 none !important;}
ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5 !important;}
ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;}
ul.w2bmenu li:hover > ul{display: block;}
ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;}
ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;}
ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff !important;}
ul.w2bmenu ul ul{display: none;left: 100%;top: 0;}
/* AJAX Menu Stylings */
ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;}
ul.w2bajaxmenu li:hover div.submenu {display: block;}
ul.w2bajaxmenu ul ,ul.w2bajaxmenu ul li{display: block !important;border: 0 none !important;margin: 0 !important;padding:0 !important;}
ul.w2bajaxmenu ul li{background: none !important;float: none !important;}
ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;}
ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0 !important;background: none;}
ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px !important;}
ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;}
ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;}
ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;}
ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0 !important;}
ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;}
ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}
#w2bajaxmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );border: 1px solid #cccccc;}

The JAVAScript

If your Blog has jQuery plugin, then don’t add this plugin in your blog template,

Otherwise add the below line of code before  </head> tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

Add the following Javascript code before  </head> tag

<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $('#w2bajaxmenu').ajaxBloggerMenu({ numPosts : 4, // Number of Posts to show defaultImg : 'http://url-to-image.com/default-image.jpeg' // Default thumbnail Image }); }); </script>

The HTML

In this section you should be carefully add the HTML, otherwise it won’t works.
The AJAX Menu accepts three types of urls. You must use this urls only in the menu. They are Label,Search Query and Label w/ Search Query.

Label URL	http://yourblogdomain.blogspot.com/search/label/LABELNAME
Search Query	http://yourblogdomain.blogspot.com/search?q=SEARCHQUERY
Label w/ Search Query	http://yourblogdomain.blogspot.com/search/label/LABELNAME?q=SEARCHQUERY

Note:- Search Query must be Url encoded. You can use this tool to encode your search query.

Use this MENU Example code and add it in HTML/JavaScript gadget

<ul id="w2bajaxmenu" class="w2bmenu"> <li> <a href="#">Home</a> </li> <li> <a href="#">Example 1</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/AdSense">Sample Label</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Gadgets?q=harish">Label w/ Search</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=way2blogging">Search Query</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=This+is+long+query+you+do+not+get+any+results,+so+try+others">Unknown Search</a> </ul> </li> <li> <a href="#">Example 2</a> <ul> <li><a href="http://yourblogdomain.blogspot.com/search/label/Design">Design</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Facebook?q=Like+Button">Facebook</a></li> <li><a href="http://yourblogdomain.blogspot.com/search/label/Templates">Templates</a></li> <li><a href="http://yourblogdomain.blogspot.com/search?q=Guest+Posts">Guest Posts</a></li> </ul> </li> <li><a href="http://yourblogdomain.blogspot.com">Normal Link</a></li> </ul>

At Last....

I hope you enjoyed with this widget. I am really sorry for not posting new gadgets and templates regularly. I hope i will continue release new templates, widgets and tips. 
Suggest new features, your feedback and your thoughts on this widget by leaving a comment and don’t forget to share this widget.

Read More...