Using .on for dynamically generated elements $(document).on jQuery

This is an issue that usually beginner would encounter when things like .hover and .click did not work with dynamically generated elements.

To resolve the issue, instead of using element.click(), $(document).on("click", "element_selector", function() should be used for live contents. Note that the .hover takes two callback functions, in order to achieve the same effect, mouseenter and mouseleave events should be put in when using $(document).on in this case.

$(document).on("mouseenter", "li", function() {
    // hover starts code here
});

$(document).on("mouseleave", "li", function() {
    // hover ends code here
});

reference: http://stackoverflow.com/questions/14950321/how-to-bind-hover-to-dynamically-created-li-elemtent

 

 

jQuery store locator plugin

The jQuery store locator plugin can easily help you to create a feature rich widget for your website or web application.

Demos:

Tutorials

On github: https://github.com/bjorn2404/jQuery-Store-Locator-Plugin

Author blog: http://www.bjornblog.com/web/jquery-store-locator-plugin/comment-page-3

Perfect Responsive Background Image solutions – Backstretch jQuery plugin

Backstretch - jQuery plugin - responsive background image plugin

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes. http://srobbin.com/jquery-plugins/backstretch/

Backstretch on GitHub: https://github.com/srobbin/jquery-backstretch

Other references:

https://css-tricks.com/perfect-full-page-background-image/

OR change the image via @media query
use different images for @media query
https://teamtreehouse.com/community/how-to-create-a-responsive-div-with-a-background-image
OR CSS
http://stackoverflow.com/questions/12609110/responsive-css-background-images