Breakpoint JS – load external javascript for different browser breakpoints

·

idea

Live Demo: http://hasinhayder.github.io/BreakPoint/

Breakpoint helps you to define multiple breakpoint ranges and load external javascript files when someone resize their browser window to those breakpoints. Beside loading external scripts, Breakpoint also triggers an event whenever browser width falls in any of those predefined breakpoint ranges.

Using Breakpoint
Using BreakPoint is pretty simple. Include jQuery in your web application and then include jquery.breakpoint.js. Now you can define multiple breakpoint ranges and initialize like this

[sourcecode language=”javascript”]
$(document).ready(function(){
$.BreakPoint({
breakpoints:{
mobile:{max:480,load:true},
default:{min:480,max:1024, load:true},
wide:{min:1024,max:1200,load:true},
superwide:{min:1200,load:true},
}
});
});
[/sourcecode]

In the example above, we have defined four different breakpoints. The first one mobile will be used whenever browser is resized from 0px to 480 pixel (all inclusive). The next breakpoint, default will be used whenever browser is resized between 480px to 1024px (all inclusive), and so on.

Now, whenever a breakpoint is reached, BreakPoint jQuery Plugin will load an external javascript file with the same name of the breakpoint. For example, when browser is resized to 400px it will fall under mobile and now an external file named mobile.js will be loaded and executed.

By default BreakPoint will look for external javascript files in the js/ folder in the current path. But you can change this by passing a parameter named prefix, like this

[sourcecode language=”javascript”]
$(document).ready(function(){
$.BreakPoint({
prefix:"scripts/",
breakpoints:{
mobile:{max:480,load:true},
default:{min:480,max:1024, load:true},
wide:{min:1024,max:1200,load:true},
superwide:{min:1200,load:true},
}
});
});
[/sourcecode]

Now BreakPoint will load external js files from the scripts/ folder.

Breakpoint Parameters
prefix: By default, prefix is set to js/ but you can change it to anything you want.
breakpoints: for each breakpoints, there are three paramaters you can pass which are “min”, “max” and “load”. By default min is set to 0, max is set to 9999 and load is set to false. The load parameter is an important one if you want to load external javascript files whenever a breakpoint is reached. If load is set to true, external files will be loaded, otherwise not.

BreakPoint Events
Whenever a breakpoint is reached, BreakPoint plugin will trigger a window event named breakpoint. The event object will have an attribute named breakpoint which will contain the name of the breakpoint that has been reached. Here is an example how you can add an event listener to this breakpoint event

[sourcecode language=”javascript”]
$(document).ready(function(){
$(window).bind("breakpoint",function(e){
if(console)
console.log(e.breakpoint);
});
});
[/sourcecode]

That’s mainly it. Enjoy! Check out the live demo at http://hasinhayder.github.io/BreakPoint/

The Badass List of Essential jQuery Plugins

·

banner

Check it out here: http://hasinhayder.github.io/essential-jquery-plugins/

I have started curating this list for last couple of weeks and the purpose is to create an one stop place where you can look for the essential jQuery plugin for your project and look no where else. Honestly, sometime it’s really hard to find the perfect plugin in this overwhelming world of jQuery plugins.

I hope you will find it useful. If you want to contribute, you can open an issue and tell me a missing plugin and I will be happy enough to look at it. If it’s worth to be in the list, it will be added back there, no worry. You can also fork this github repo and add the missing plugin in the readme.md file in markdown format and send me a pull request.

So enjoy this badass list of essential jQuery Plugins which is continuously growing.

An Animated Responsive grid with Filtering feature

·

This is a followup of my previous post, where we had created a beautiful responsive grid with barely 6 lines of javascript code. But this time, we have added filtering feature in it, and added category/tag selector which triggers the filtering. For filtering we have used MixItUp library in this example.

Have a look at the live demo at http://hasinhayder.github.io/ResponsiveGalleryWithFiltering. Resize the browser window and see how the grid items adapt to the new width. Select categories from the dropdown list in the top right corner to see how the filtering works.

Positioning the dropdown list was managed using media queries which you can see at the bottom of the <style> block.

One more thing to note here, a very important note perhaps. If you have used MixItUp before then you probably already know that every time mixitup refreshes the list, it actually removes the old list items and redraws them in the container. This phenomenon removes any events attached to the list items. To fix it up, you need to attach event listeners using $.delegate() method, as done in the example. However, lets have a look at that

[sourcecode language=”javascript”]
$(".grid ul").delegate("li","click",function(){
var src = $(this).find("img").attr("src");
alert(src);
});
[/sourcecode]

Enjoy!

Detecting if a DOM element has visible scrollbar.

·

Webkit browsers, specially in Mac osx hides the scrollbar intelligently when not in use. This feature improves the look-n-feel. But for the designers, sometime this can be a pain because they may need to alter the designs based on the visibility of scrollbar.

Here goes two simple jQuery plugin which can detect the visibility of scrollbar for a given DOM element

For Horizontal Scrollbar
[sourcecode language=”javascript”]
(function($) {
$.fn.hasHorizontalScrollBar = function() {
return this.get(0) ? this.get(0).scrollWidth > this.innerWidth() : false;
}
})(jQuery);
[/sourcecode]

For Vertical Scrollbar
[sourcecode language=”javascript”]
(function($) {
$.fn.hasVerticalScrollBar = function() {
return this.get(0) ? this.get(0).scrollHeight > this.innerheight() : false;
}
})(jQuery);
[/sourcecode]

You can later use it like this
[sourcecode language=”javascript”]
if($("#element").hasVerticalScrollbar()){
//do whatever you’d like to
}
[/sourcecode]

Source & Idea: This SO Discussion ๐Ÿ™‚

LazyMouse jQuery Plugin – detect mouse inactivity easily :)

·

LazyMouse

Before jumping into the details, let me hear you asking “WHY?”. To be honest, not all of you will need to detect the mouse inactivity in your web applications. But sometime, it’s useful to do something different after a certain period of inactivity either to grab attention of the viewer, or to help him by improving the UX. For example, hide the sidebar and top navigation when user is reading the content, to emphasis his reading experience. Or show an animation – just do whatever during your user’s mouse is inactive for some time.

And to detect mouse inactivity easily, here comes the LazyMouse jQuery plugin which attaches two new events to the bodyelement, one is mouse.active and another one is mouse.inactive . You can just add two listeners for those events and do whatever you want to do ๐Ÿ™‚

Using jQuery LazyMouse is pretty simple. Initialize it like this
[sourcecode language=”javascript”]
$(document).ready(function(){
$.LazyMouse();
})
[/sourcecode]

You can also specify the inactivity threshold in milliseconds, like this

[sourcecode language=”javascript”]
$(document).ready(function(){
$.LazyMouse({
delay:2000 //2 seconds threshold
});
})
[/sourcecode]

Once initialized, as we have mentioned earlier, the body element will be triggered with two new events. Lets add a listener to those, like this

[sourcecode language=”javascript”]
$(document).ready(function(){
$("body").bind("mouse.active",function(){
console.log("Mouse Active");
});
$("body").bind("mouse.inactive",function(){
console.log("Mouse Inctive");
});
})
[/sourcecode]

The events are propagated using jQuery Debounce, and therefore it is rate limited for good. See the live demo at http://hasinhayder.github.io/LazyMouse, and fork the github repo at http://github.com/hasinhayder/LazyMouse

Enjoy ๐Ÿ™‚

An awesome animated responsive grid in a few lines of javascript and css3 goodness

·

Screen Shot 2013-08-15 at 4.36.33 AM

Responsive grid is a pain to many people, because sometime they have to achieve the desired effects either using complex plugins, css layout styling with the help of media queries. And here comes a nifty solution which works perfectly well in all devices. The responsiveness is done using a few lines of Javascript which listens to window resize event. But to save the browser from refreshing the layout, it uses debounce technique which only fires after the resizing is done.

The trick is pretty neat. All you got to do is tell it a minimum width of the grid items. Then, once resized, it divides the window width by that minimum, extract the integer part and displays that many items in a row by setting a width (in percentage) for each of them.

[sourcecode language=”javascript”]
var minWidth = 250;
$(document).ready(function(){
$(window).resize($.debounce(250,function(){
var w = $(window).width();
var numberOfItems = parseInt(w/minWidth);
var itemWidthinPercentage = 100/numberOfItems;
$(".grid ul li").css({width:itemWidthinPercentage+"%"});
}));
});
[/sourcecode]

See the working grid at http://hasinhayder.github.io/responsivegrid and resize the window to check out how it fits perfectly.

The animation is done using the following css3 transition for each list item
[sourcecode language=”css”]
-webkit-transition:all 0.2s ease;
-moz-transition:all 0.2s ease;
-o-transition:all 0.2s ease;
-ms-transition:all 0.2s ease;
transition:all 0.2s ease;
[/sourcecode]

Checkout the demo and fork the github repo to customize it anyway you’d like to ๐Ÿ™‚

CSS3 Storyline Animation using jQuery Transit Library

·

I have been learning CSS3 animations and transitions for last few days, and I found this awesome jQuery library “Transit” which can be used to replace CSS3 @KeyFrame animations. I am not a big fan of KeyFrame animations because it’s tough to write and you need to calculate a lot of things and express them in percentage of total time. Which makes it even harder to write. I mean for something small, it is more than awesome – but as soon you start writing something big, where each elements are chained to each other, you will find it pretty tough.

So, here goes the CSS3 Storyline Animation using jQuery Transit library. There are many sliders in the market who uses animations like this – so if you are good, you can even make a animation designer app using Transit.

Screen Shot 2013-07-23 at 9.01.23 PM

Github URL:ย https://github.com/hasinhayder/CSS3-Storyline-Animation

Live Demo:ย http://bit.ly/CSS3Storyline

Get Robo for Free – Onepage Application Landing Template for WordPress

·

Robo is a ย small onepage template which is perfect to design a landing page, coming soon or even a small site. Though it’s one page, Robo includes custom post types like sliders, team members, features and google maps. You can showcase your work nicely with Robo.

robo

Robo for WordPress comes with beautiful documentation and includes all the necessary plugins with it, so that you don’t have to worry to leverage all the functionalities provided. Feel free to use Robo in your commercial or personal projects, no link bank is necessary at all.

Source Code:ย http://bit.ly/RoboWPGithub
Full Documentation is Available at:ย http://bit.ly/14x7UVZ
View Live at :ย http://bit.ly/RoboWPLive

28 Flat Food Icons

·

Smashing magazine released a nice food icon set in partnership with freepik (whooping big, 200 in total) few days ago. As they allow it to modify anyway you want, free for personal and commercial use ย – I decided to give them a “Flat Icon” flavour. So I picked up 28 of them last night and this is what I have come so far. Since they were little boring (all white, too flat) so I think this little make up made them look good ๐Ÿ™‚

Screen Shot 2013-07-04 at 6.58.32 AM

You can download this 28 food icons set from Hereย http://bit.ly/FlatFoodIcons. As the original artist allowed them to be used and modified anyway (personally and commercially) so feel free to use this derivative works anyway you want to.

My plan is to color all of them, hopefully by this week and release a new version after that. Until then, enjoy ๐Ÿ™‚

Download:ย http://bit.ly/FlatFoodIcons
File Content: AI, EPS, PNG files
License: Free for commercial and personal use