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, $(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




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.



On github:

Author blog:

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.

Backstretch on GitHub:

Other references:

Perfect Full Page Background Image

OR change the image via @media query
use different images for @media query