I'm working with a site developed by an external developer. I've noticed the code they use for accordions only supports a fixed number of accordion items per page (even though their CMS can create an unlimited amount of items marked as being displayed accordion-style). I'm trying to tidy this up to avoid confusing my colleagues later down the line.
I'm trying to add a standard Mootools more accordion, but when I add it to a page I get the error below:
Uncaught TypeError: Property 'container' of object # is not a
function mootools-core-1.4.5-full-compat.js:683
Here's an example page - the links in tags below 'Session details - Click the titles below for more information on each session.' should all be accordions.
I'm calling this code at the bottom of my page from http://www.aua.ac.uk/scripts/accordion.js:
window.addEvent('domready', function(){
new Fx.Accordion($$('#sub_left .accordion_heading'),$$('#sub_left .accordion_holder'), {
opacity: 0,
display: -1,
alwaysHide: true
});
});
Using these versions of Mootools (referenced at the top of the page in the head):
mootools-core-1.4.5-full-compat.js and mootools-more-1.4.0.1.js
Here is a fiddle using those verions of mootools, a portion of the HTML from my page, and the same accordion code - and it's all working. I think there is a conflict somewhere on my full page but I can't work out where.
http://jsfiddle.net/bcfu2/5/
Does anyone have any idea how to either fix this, or where to start debugging it - other than removing code/links to JS files one by one?
The js of microsoft creating some collision with mootools Array implements:
<script src="/WebResource.axd?d=maKRZUGfDX1oNLvbjE5CVpp8Freqy1QYQvNjdATWoN2tEAP8BRYB9DDy6RYI9PQwhPak11VYG6N-fakPxQX9OdjCS0k1&t=634604425351482412" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=WSd7pLxkPBvO2m8zwahAn--zWk9drBpRcPo6hiP5S6h3lc4U02xAjGNhWI80hxb4tjqMmAYSYPB7ziM6k7g74E-bBOiz7xRre8hSbGF4tJ2E6c8VeX-W4J-tQv1ZL10ruL5uPffOFyiUX3xZVWWQT_YClyI1&t=ffffffffb868b5f4" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=bawOzJp1LF5Sj6rS_r-W75i2ouoWmFBvTNI9zqR0q_Lsf42KbPAaMTrPFSZ9jqam3zDWOHBUgNgKBDwGos_WSLyBOzTAzYVuGRRlgWxM0Jm-uc_fb8NPaprYxmDuvgVoemZKvN0bfNIpr2yzsXUjhCVB-0dFOF6qHbKXJEXRN_LWShmr0&t=ffffffffb868b5f4" type="text/javascript"></script>
If you remove those scripts you will see your code is working fine:
http://jsfiddle.net/V8WRM/
Related
I have a master grid and sub grid. On click of row expand , I was able to fetch the result and display. It was working fine in IE and chrome. Now I am getting Error: Object doesn't support property or method 'jqGrid' in IE10 but it works fine in chrome.
I am loading grid.locale before jqgrid src . List of scripts:
<script src="Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.carouFredSel-6.2.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
<script src="Scripts/jquery.jqGrid.src.js" type="text/javascript"></script>
I am able to show the result in master grid. When I expand the sub grid , I am getting the error.The following is the code where I am getting the error.
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var orderid= jQuery('#tblJQGrid').jqGrid('getCell', row_id, 'OrderID');
Line: 291
Error: Object doesn't support property or method 'jqGrid'
You should include more full list of JavaScript files which you use and it's order. .
One of the possible reasons could be the usage of jQuery version which has bug in IE10. For example if you would use jQuery 2.0.2 you could have the described problem. Usage of jQuery 2.0.3 or 1.10.2 will solve the problem.
I am using two jquery plugins:
hero carousel and content hover.
Initially when I load the page the content hover works correctly, however when I carry out a hard refresh on the page it seems to default to display:none.
I have tried disabling the hero carousel plugin and this resolves the problem but I have no idea where the conflict may be between the two plugins.
I would paste all the code but that would mean pasting two huge chunks of jquery, the site in its current state can be found here the content hover plugin is currently on the bottom left image under the slider.
Thanks.
Take these two scripts:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
});
</script>
<script>
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
</script>
And put them together like this:
<script>
$(document).ready(function(){
$('.hero-carousel').heroCarousel({
easing: 'easeOutExpo',
css3pieFix: true
});
$('#d1').contenthover({
overlay_background:'#F25342',
overlay_opacity:0.8
});
});
</script>
I do not see any script binding your second carousel function. I also do not see the easing library which is available here: http://gsgd.co.uk/sandbox/jquery/easing/ You'll need that because you are using easing in your carousel function above.
Trying to resolve $ conflict between prototype.js and jQuery.js because I need to use jSlider which requires the jQuery library.
I add jQuery.noConflict() at the end of the jquery.js file then in the jslider.js file I change $._roundNumber to jQuery._roundNumber. Yet I still get an error which says jQuery._roundNumber is not a function. Please help.
Here is the example of integrating prototype and jquery...May check you did the right thing or not.?
<script src="prototype.js"></script>
<script src="effects.js"></script>
<script src="jquery.js"></script>
jQuery.noConflict();
jQuery(document).ready(function($){
jQuery("a").click(function(){
Effect.Shake('shake_demo');
});
});
<div id="shake_demo" style="width:150px; height:40px; background:#ccc; text-align:center;">
Click me to shake!
</div>
And now for rounding the number you can use this code:
var txt=jQuery('#txtBox').val());
var amt = parseFloat(txt);
alert(amt.toFixed(2);
https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Number/toFixed
Fixed. Just realised that the reason jQuery.noConflict() was not working was because jQuery was already being used in the template page that I was including in my current page so the problem was two fold:
'$()' which is the default jQuery selector was clashing with prototype.js which Tapestry includes by default
when I added jQuery.noConflict() at the end of my jquery.new.js file then tried using 'jQuery()' as the selector it did not work either because a different version of jquery (let's call this jquery.old.js) was already included in the template page (which I was including in my current page). To get the jquery.old.js to work with prototype.js, the previous developer already used jQuery.noConflict() so the 'jQuery()' selector was already taken as well.
Fix: I added $j2 = jQuery.noConflict() at the end of jquery.new.js file then I used '$j2()' selector in my new library that uses the jSlider and I also modified the selector in the jSlider.js file. It all works well now.
I am leaving both jquery.new.js and jquery.old.js file in the project (rather than using just one) because the template page which uses the older jquery version is used all over the site (I don't want to test the entire site after changing this) while the new component I'm adding needs the new version of jquery (jquery.new.js) file. And yes I know it's better to add the no conflict commands at the top of my html page rather than at the end of the js library files - will change that after this update on stack overflow :)
How do I integrate Jquery code for Infinity/Autopager Scroll down in Joomla. And If possible the scroller to work on Chosen Articles.
if you want to add jQuery into your joomla made site then it is easy to load a jquery file like:
Add the following codes into your index.php file you will find this file in your template directory like : joomla/templates/rhuk_milkyway/index.php now simple open it and add the following code after <link> tab
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
now before starting your own jquery codes it is must to make your codes without conflicting with mootools and other, and for this just simple add jQuery.noConflict(); and place jQuery instead of $ for example:
<script>
jQuery.noConflict();
// now your codes like
jQuery('#someid').each(function(i, e){});
</script>
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>