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.
Related
I am having a ridiculous problem which seems to be a lot harder than it really should be.
Have been struggling now for about three days trying to figure out a way to run javascript on pages in wikipedia, and it seems like it is close to impossible. (I can get it to run under common.js, but want it only on specific pages.
Seemed like one option is to use Widgets, but whenever I put script in, mediawiki changes it and removes the <> (changes it to < and >), which means it will not run, and I can't find a single mentioning anywhere how to get Mediawiki to stop doing this for Mediawiki or for the Widget extension. Any help would be welcome.
As an example, I put the following code in widget:redbox
<noinclude>
This is a test
</noinclude>
<includeonly><script> type="text/javascript"> console.log("I am alie"); </script></includeonly>
And what I get back is
This is a test fckLR <script> type="text/javascript"> console.log("I am alie"); </script>fckLR
The simplest solution is to put a script in common.js that will only run if an element with a certain ID exists on the page (i.e. $( '#some-id' ).length > 0).
Since nobody pointed out what I'm about to say, I am probably missing something... Also I know this post is very old, but is there a reason for type=text/javascript not to be inside the opening script tag?
I really fail to see why placing attributes outside the opening tag could be useful.
Just in case this was really a mistake and that's all there is to it, the correct syntax would be
<includeonly>
<script type="text/javascript">
console.log("Hello, underworld!");
</script>
</includeonly>
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.
I have noticed an interesting issue on a website that I am helping a friend with. When I am on the homepage I can use javascript/jQuery to access the DOM as expected and everything works fine. If I use the console and type console.log($('html')); it returns the html object from the site as expected.
However, if I do this exact same thing on any page other than the index, it returns null. The source of the page appears to be the same and I can see all the elements there, but javascript itself does not seem to be aware of them.
The site is built using the Typo3 CMS, if that could be part of it.
Does anybody have any experience with this? Or is there any way to tell javascript to re-read the DOM after the full page load?
EDIT Somebody asked for a link to the site so here it is: http://www.stinglonline.de/
You have a conflict between jquery and prototype.
Add something along the lines of var $j = jQuery.noConflict(); and then update your jquery on that page to use the new $j variable such $j("html") and it should work for you. See: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/
I tested this, in console, on http://www.stinglonline.de/haupt-menue/stingl-gmbh/profil.html.
Alternatively you can just use jQuery instead of the $, whichever works best for you.
Well it looks like the $ is part of the jquery library on http://www.stinglonline.de/top-menue/home.html
But the $ is part of the Prototype library on every other page.
You do not have this issue on the homepage because you do not use prototype there.
You should declare your prototype library BEFORE you declare you jquery library.
It looks like only the home page is running jQuery.
If you use native Javascript to select from the DOM it works just fine.
Give it a try:
document.getElementsByTagName('html');
That does the same thing in Javascript that $('html'); does in jQuery.
There are a few Notes and things to consider When using this native Javascript method.
I find jQuery very useful, but without a proper understanding of native Javascript it becomes a crutch.
EDIT
scrappedcola's Answer is correct I missed the jQuery tag in the code when I looked.
In the homepage, type $ in console(Chrome) as blow. It use jquery.
So $('html') return document.getElementsByTagName('html').
>$
function (a,b){return new m.fn.init(a,b)} jquery.js?1399526417:2
in other pages, type $ in console(Chrome) as blow. It use prototype.
So $('html') return document.getElementById('html'),
$('skiplinks') return document.getElementById('skiplinks').
>$
function $(b){
if(arguments.length>1){
for(var a=0,d=[],c=arguments.length;a<c;a++){
d.push($(arguments[a]))
}
return d
}
if(Object.isString(b)){
b=document.getElementById(b)
}
return Element.extend(b)
}
prototype.1.7.0.yui.js:1
$('skiplinks')
<ul id="skiplinks">…</ul>
After installing lightbox for my website my comments stopped working. I looked at the code and moved the javascript links that were in the <head> (the ones that came with lightbox) in the to above the javascript links that came with Wordpress-Buddypress. Before my javascript links from Lightbox were below the javascript links that came with Wordpress.
After making the switch, the comments started working again on my website but now the lightbox does not work.
When I use Firebug to find errors, I get this error.
$("#videogallery a[rel]").overlay is not a function
That code comes from "videolightbox.js" which was a file that came with my lightbox.
I did lots of reseach on this problem and I am thinking that I might need to use jQuery.noConflict(); but I have no idea how to use it? I was looking at this link
but I can't seem to get it to work because I have no idea how to use it. I also tried replacing all the $() with jQuery() but that did not solve my problem.
but I have no idea how to use it?
var $j = jQuery.noConflict();
and your code will change from
$(selector) to $j(selector)
A lot of examples are given here
http://api.jquery.com/jQuery.noConflict/
One thing to consider closely is the script loading order and watch for repeat loading of JQuery. In some (hopefully rare) situations, you can load JQuery, set up some code that uses it, then reload JQuery which tosses away the events that were set up after loading it the first time.
I know I ran into that situation once, but I can't remember the details that led to it occurring.
To your answer
$=jQuery.noConflict();
Now you can use $('#id').css(...);
The error is probably causing the rest of the code not being executed, .overlay is not a function means that .overlay is not a function and $ is working fine.
var test; test("#videogallery a[rel]").test()
//TypeError: test is not a function <-- You would see this if $ wasn't working
var test = function(){return {};};
test("#videogallery a[rel]").test();
//TypeError: test("#videogallery a[rel]").test is not a function <-- You see this because .overlay isn't working
It simply means you are trying to call .overlay before it exists.
This has got me baffled. I'm sure the solution is obvious, but I can't figure it out for the life of me.
All of the files are getting included correctly, and in the right order. I tried just removing the validation completely, just to see what would happen, and then started getting:
jQuery.easing[jQuery.easing.def] is not a function
...but only on this one page.
Can anyone offer any insights?
The page is at http://www.hotspring.co.nz/request-info/
You're loading two different versions of jQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!--...-->
<script type='text/javascript' src='http://www.hotspring.co.nz/wp-includes/js/jquery/jquery.js?ver=1.4.4'></script>
One of them ends up as $() and doesn't have validate installed, the other ends up as jQuery() and does have validate installed; in particular, $() ends up as jQuery 1.5.2 and jQuery() ends up as 1.4.4. Open up a JavaScript console on your site and look at these:
$.fn.jquery // This will say 1.5.2
jQuery.fn.jquery // This will say 1.4.4
The solution is to just include one jQuery library.
Are you sure nothing else is competing for the "$" object? A lot of toolkits use that and that can cause a lot of issues with jQuery and its plugins. Experiment with this and see if that helps you.