StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>For <strong>those who came here looking</strong> for a stable plugin to easily resize the background image of a web page, there is a good Jquery Plugin that does just that!</p> <p><strong>See:</strong> <a href="http://johnpatrickgiven.com/jquery/background-resize/" rel="nofollow noreferrer">jQuery Easy Background Resize</a></p> <hr> <p><strong>Related to the OP questions:</strong></p> <ul> <li><strong>Support for older browsers:</strong></li> </ul> <p>The market share for IE6 is today very low. The same goes to other browsers like Safari, Firefox, and Opera.</p> <p><img src="https://i.stack.imgur.com/PH5qi.png" alt="enter image description here"></p> <p>See more <a href="http://www.w3schools.com/browsers/browsers_stats.asp" rel="nofollow noreferrer">details here!</a></p> <hr> <ul> <li><strong>Wrap the code into a Jquery Plug-In:</strong></li> </ul> <p>Take your code and build a plug-in out of it can be done in four basic steps:</p> <ol> <li>Cross Library Safety</li> <li>Create and Name Your Plugin Function</li> <li>Allow chainability</li> <li>Start Building Plugin Functionality</li> </ol> <p><strong>(1)</strong> The first thing to do is create a wrapper function which allows you to use $ and not cause conflicts with other JavaScript frameworks that may be included:</p> <pre><code>(function($) { // safe to use $ here and not cause conflicts })(jQuery); </code></pre> <p><strong>(2)</strong> Next, create the function inside which your plugin will reside. Whatever you name this function will be how you and others use your plugin:</p> <pre><code>(function($) { $.fn.mypluginname = function() { // the plugin functionality goes in here } })(jQuery); </code></pre> <p><strong>(3)</strong> At this point, keep in mind that because jQuery takes any selector, you could be dealing with one or more objects. This means you need to be sure that your plug-in loops through each element matched by the selector and applies the plug-in functionality:</p> <pre><code>(function($) { $.fn.mypluginname = function() { return this.each(function() { // apply plugin functionality to each element }); } })(jQuery); </code></pre> <p><strong>(4)</strong> At this stage, you start building your plugin functionality! In your case, all the necessary steps for the background resize.</p> <p><strong>The end Result will be something along this line:</strong></p> <pre><code>$('div').mypluginname(); </code></pre> <p>Here's a good tutorial to walk you through the entire process, even adding configuration options as you mentioned!</p> <p>See: <a href="http://addictedtonew.com/archives/414/creating-a-jquery-plugin-from-scratch/" rel="nofollow noreferrer">Creating A jQuery Plugin From Scratch</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload