Hi I need Mootools for my chronoforms, prototype for my lightbox 2 (I think) and maybe also some jQuery in the future.
When I enable Mootools, lightbox 2 is not working in IE, when I disable it, lightbox works fine but I get errors on my page from my chronoforms form.
Is there a good and easy way to make sure you don't get any problems using all three together?
And something like JQuery.noConflict() is not an easy solution.
You cannot have MooTools and Prototype co-exist.
This is because they both change (extend) native host objects (Types) like Element (MooTools) and Array, Function, String, Number (both). You can't noConflict this for the life of you, each method can be defined once.
It's going to be pot luck when you reference "foo".contains('oo') and it goes to String.prototype.contains (for instance) if you get Prototype's, Mootools or ES5's implementations (MooTools 1.5.1+).
Time to reconsider what you use as you really should go to a single framework - they all can do what you need individually.
You can also have MooTools + jQuery or Prototype + jQuery, however
Related
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>
I would like to replicate jQuery's addClass function using plain javascript
So far, I have made this function:
function addClass(el,cl){
el.className+=(el.className?' ':'')+cl
}
It works well, but It uses this syntax:
addClass(element,class)
I want it to use this syntax:
element.addClass(class)
How can I do that?
thanks :)
There is no perfectly safe way to make element.addClass() work for all elements when element is a DOM element (not your own object like a jQuery object) in all browsers. Some frameworks have done this in the past and they have run into enough problems that some are moving away from doing that. I would not recommend doing it this way.
You are not in the business of browser compatibility or framework creation (not do you want to be) so even though it seems cleaner to extend the DOM objects, I would not recommend it. jQuery and YUI do not do it this way. They make a wrapper object that contains both the method and the DOM element reference.
If you want to read of some of the perils, here's a good reference on the subject: What's wrong with Extending the DOM?.
You can make it a prototype to extend the Element class.
Element.prototype.addClass = function(cl) {
this.className+=(this.className?' ':'')+cl;
}
example
As minitech pointed out though, this won't work reliably in all browsers (namely IE).
am currently studying jquery, can someone tell me the things that javascript native can do which jquery cannot ?
In short: nothing
jQuery is an abstraction layer on top of plain JavaScript, it is JavaScript, it just adds a bunch of shortcuts to common tasks, usually in a highly optimized and cross-browser way.
It doesn't take anything away, you can mix and match all you want, jQuery simply adds to your options.
I'd take a look at the jQuery getting started documentation for more questions you might have like this.
jQuery is a library for Javascript which adds additional features.
It doesn't replace anything.
None i think. But there maybe some things that jQuery can do but JavaScript cannot.
I've seen a million different posts and (as odds would have it) a million different answers regarding how to include multiple jQuery libraries/plugins along with unrelated libraries/plugins. My main concern are the ones that require jQuery themselves.
Basically I'm using Prototype, jQuery, jQueryUI, and jQuery.dropshadow.js. Due to the requirements for Prototype, I obviously need to use "jQuery.noConflict()". However, this seems to break the other libraries. That leaves me wondering, in what order I need to include things and if I need to go back and replace the "$" in all the scripts with something else.
It would really be nice if these tutorial writers would start covering edge cases. Is it just me, or does it seem like they glaze over (or completely ignore) these hoping no one will use them?
Anyway, would someone mind explicitly detailing how to go about this?
Best.
The jQuery function (normally $) can be named anything and plug-ins handle that by wrapping themselves like this:
(function($) {
...
})(jQuery);
If any plug-ins breaks when $ is named differently (jQuery.UI certainly does handle this), please contact the plug-in author because it's a bug.
I am trying to use FormCheck for MooTools to validate a basic contact form I am planning to build. The problem is I can't seem to set up the script to work at all =(
If anyone knows about FormCheck or MooTools and can add any pointers they would all be greatly recieved.
My website is here: http://ryanis.me/
You are using jquery AND mootools on the same page? Why would you do that, it's a bad practice and bad form to stuff your users for two frameworks for what is a small page without anything complex. that aside, are you using the noconflict mode in either framework (note that this is only available since mootools 1.2.3 and requires some changes in the source code of the plugins, probably better off namespacing jquery)
first of all, you have a mootools domready function then you do inline js on the body tag onLoad...
then at the bottom of the source, you try the mootools domready again...
then you embed an accordion script (something that mootools can have built in as part of mootools-more). not sure what you use jquery for but you really need to structure your page better and pick a single framework.
the error you are getting in the formcheck js implies that either this.form is undefined (at time of evaluation $("contactform") was not available or that this.form.getElements() is not a valid method, which would imply that the mootools element prototype is not working. once again, are you using the noconflict mode?
it really needs refactoring and rethinking...
If you are using jQuery you may want to check out various jQuery plugins that will do form validation for you. The validation plugin works pretty well. If you want to use jQuery and MooTools together, you probably need to make sure that you are using jQuery in noConflict mode.