We Keep Coding

jQuery - write new plugin - this.foreach doesn't work

I am currently writing a little JS something, and as it might get re-used in my company I want to do it right and write is as a jQuery plugin (jQuery is definitely needed for ease, so I have decided upon relying on it).
Now, I am a relatively experienced developer regarding jQuery, but I have a problem that is probably incredibly simple to solve and still I do not know where I am going wrong.
I included the jQuery file like normal from the CDN, then my plugin file and last of all the js file that I use to test the plugin.
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/jquery.tsnowglobe.js"></script>
<script type="text/javascript" src="js/main.js"></script>
Then I try to define the plugin in the jquery.tsnowglobe.js file.
(function($) {
$.fn.snowglobe = function(options) {
return this.each(function() {
console.log("Test!");
};
};
}(jQuery));
This is obviously only to test wether everything is working or not.
Well, the problem is: I don't get any output when I use my plugin.
I have defined a canvas in the HTML part (I also tried multiple, didn't work):
<canvas id="snowglobe"></canvas>
And then I consecutively try to use the snowglobe-function on it in the main.js-file (which is loaded last):
$("canvas").snowglobe();
Well, the problem is, I get absolutely no output. Now, I think I might have identified the problem: inside my function definition, this is not an array. What really irritates me that all tutorials use the same code as a start, so as far as I see it should be working, and even if I wrap this in an array I cannot access any DOM-element-properties inside the loop, as this in that case does not refer to any DOM element itself.
Thanks in advance for helping me! I am really not sure what I could do to solve this.

How To Get Two JS/Jquery Plugins to Work Together?

I've posted here before but can't find my account so this is my new first post.
I'm attempting to use a js plugin called "blueberry slider" with a responsive js menu called "Menumaker" and something is conflicting, can't get the slider to show. I really don't know what I'm doing with JS yet, hoping someone can help. In Chrome, element inspection, it's saying "undefined is not a function". I haven't modified anything of the plugins.

I think your problem is probably that you're loading a version of jquery, adding a plugin to it, and then loading a new version of jquery and attempting to add a plugin to that, too. Pick a single version of jquery to include. You're including three:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
at the top,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
just above your blueberry script, and
<script src="js/jquery-1.8.3.min.js"></script>
at the bottom just above your menumaker script.
The latest version of jQuery loads and overwrites your blueberry script's modified version of jQuery.
I suggest you just get rid of the last two and use the first version.

the function which you are calling and function present in your plugin library doesn't match , which is the reason it doesn't find any function named "undefined" in that library. Try checking the function name in it's documentation.

Jquery plugin conflicts

How do you guys resolve conflicts between Jquery plugins. A conflict would be a situation where two or more Jquery plugins (such as a file upload plugin) work properly alone but result in errors or unintended behavior when you include a second plugin.
I have this problem right now and I am considering using an iframe to isolate sections of my page from everything else. But I want to avoid this if possible to work out these conflicts.
Auditing the plugin code is not feasible its mountains of code and there are short development times to consider.
I can't use jquery.noConflict because I would have to fire it and then replace the $ with Jquery in ever line of my code. Editing the plugins is not feasible. I thought jquery.noConflict didn't work for plugins? It only works for javascript/jquery libraries? I'm not reffering to libraries. Just plugins like sliders, galleries, fileuploaders etc etc.
I used:
(function($) {
jQuery.noConflict();
});
Already..

After some digging around on the web I found some resources
Jquery Plugin conflict
How do I solve this jQuery plugins conflict?
http://forum.jquery.com/topic/jquery-plugins-conflict
And the last one
http://www.jotform.com/help/130-Fixing-Jquery-Plugin-Conflicts-jCarousel
It seems that everyone suggest to use noconflict but except for the last one who said it worked - I don't see a reason it should work, since in documentations JQuery explains that it was meant for libraries that don't use JQuery but collide with it. ( see the 3rd resource I pasted here).
Anyway, it seems as if the best option is to dive into the code and modify it.

i had an issue with jquery conflict, but my case was i had also used prototype.js. i worked out a solution for that. here is a pointer checkout if it helps.
jquery conflict occurs when "$" is also used by some other plugins. hence we need to define jQuery.noConflict
so that all the methods are called using some other reference in this case 'jQuery'.
try include the scripts files on the page as follows.
include all the jQuery files (library and all plugins which are dependent on jquery).
fire jQuery.noConflict();
include all other libraries/ plugins.
wherever jquery methods are called use "jQuery" istead of "$"
hope this helps you out..

replacing page content with .html(content) is not working

I have a weird problem in jQuery. The problem is that I can smoothly use $('#container').html(content) to replace the page content but to specific page. It is not working all around. Gives 'TypeError' message in console. Is there any probability that using SlickGrid can cause such error. Because error is thrown only in that pages where I have used SlickGrid.
Any suggestion would be highly appreciated.

It's hard to tell what's going on with your page, but my guess is that you may have a conflict with the $ between jQuery and SlickGrid. Look at the noConflict function in jQuery - it may help you out.
Call $.noConflict(); before SlickGrid's javascript <script> tag is added, and then refer to jQuery functions by using jQuery(selector) instead of $(selector).
Hope this helps!

Are there any drawbacks to using head.js?

Things I am aware of:
Screen flicker if scripts alter styles / content (not an issue for me as I currently load scripts at the end of the page and so have workarounds already)
Inability to detect script load failure (not too concerned about this either as everything I develop is required to work with or without javascript. Might affect my workarounds for item 1 but happy with this risk)
It looks to be a very good option to me but I am hoping for some references (feel free to say only positive things!) before I invest time in incorporating it into my next project.
Currently we develop mid-to-large sized sites with, generally, a moderate amount of Javascript (although this is growing rapidly). We also use the jQuery library for the bulk of our Javascript.
Anyone have any experience? Good or bad! :)
P.S. for those interested this is head.js

Nope. As long as you put any code that is dependent on the loading files inside head.ready {} then you will not face any problems with your code.

Here is my conclusion for head.js, I have done some benchmarks myself:
http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html
It is subjective opinion and benchmarks are not by any means scientific.

I was/am interested and thinking of maybe also using head.js BUT i found something not so nice: In the url that you gave me there are three tab buttons:
SCRIPT SCRIPT SRC head.js
SRC in head on bottom on head
Shift+Ctr+Refresh gives very little differences for me (+/-10ms between the three # 120mbit line, firefox 3.6.13)
When I use Ctr+R refresh, the results on the head.js are consistently 100ms slower than the other two versions without head.js... So, its NOT always faster.

There would be no problem on using jquery or javascript library heavily. Try to main each library as unique.
I am using prototype, scriptaculous, jquery and many more jquery additional plugins. I faced an error while loading entire scripts. Then i found out its due to $ sign which is an important parameter of jquery and prototype.
i had used
$.noConflict();
jQuery(document).ready(function($){
//jquery codes here
})
So keep your script library unique

head.js() gave a problem to my pages. None of my asp:button OnClick events were working. But if I include the scripts in the traditional way (<script type="text/javascript src="") then the events worked perfectly. I tried EnableClientScript = "false" and also CausesValidation="false". But nothing worked. Finally just scrapped the head.js idea since it did not make a lot of difference to my page load time, anyway.