The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex
I'm sure this question has been asked several times before, but I can't find the link.
ReplyDelete$.fn points to the jQuery.prototype. Any methods or properties you add to it become available to all instance of the jQuery wrapped objects.
$.something adds a property or function to the jQuery object itself.
Use the first form $.fn.something when you're dealing with DOM elements on the page, and your plugin does something to the elements. When the plugin has nothing to do with the DOM elements, use the other form $.something.
For example, if you had a logger function, it doesn't make much sense to use it with DOM elements as in:
$("p > span").log();
For this case, you'd simply add the log method to the jQuery object iself:
jQuery.log = function(message) {
// log somewhere
};
$.log("much better");
However, when dealing with elements, you would want to use the other form. For example, if you had a graphing plugin (plotGraph) that takes data from a <table> and generates a graph - you would use the $.fn.* form.
$.fn.plotGraph = function() {
// read the table data and generate a graph
};
$("#someTable").plotGraph();
On a related note, suppose you had a plugin which could be used either with elements or standalone, and you want to access it as $.myPlugin or $("<selector>").myPlugin(), you can reuse the same function for both.
Say we want a custom alert where the date is prepended to each alert message. When used as a standalone function, we pass it the message as an argument, and when used with elements, it uses the text of the element as the message:
(function() {
function myAlert(message) {
alert(new Date().toUTCString() + " - " + message);
}
$.myAlert = myAlert;
$.fn.myAlert = function() {
return this.each(function() {
myAlert($(this).text());
});
};
})();
It's wrapped in a self-executing function so myAlert doesn't spill out to the global scope. This is an example or reusing functionality between both the plugin forms.
As theIV mentioned, it is a good practice to return the jQuery wrapped element itself since you wouldn't want to break chaining.
Finally, I found similar questions :-)
http://stackoverflow.com/questions/1991126/difference-jquery-extend-and-jquery-fn-extend
http://stackoverflow.com/questions/2671734/jquery-plugin-fn-question
http://stackoverflow.com/questions/538043/jquery-plugin-authoring-why-do-some-do-jquery-pluginname-and-others-jquery-fn-pl
http://stackoverflow.com/questions/2398007/in-jquery-what-is-the-difference-between-myfunction-and-fn-myfunction
A
ReplyDelete$.a = function() {
return "hello world";
};
alert($.a());
B
$.fn.b = function() {
return "hello " + $(this).length + " elements";
}
alert($("p").b());