I have a site where I use some jquery functionalities.
On the home page I used Nivo Slider plugin, while on another page I used a Lightbox effect.
In the arrangement of links to the script in my header.php file, I have the lightbox link under Nivo Slider link. Lightbox works but Nivo slider does not work. When I re-arrange, slider works but lightbox does not work.
In this situation LightBox works, but slider does not work
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
Is this normal? How can I make both work at the same time.
My Homepage that has the slider is Here
Page that has lightbox is here
Thank you.
With lots of code from lots of places, some things stop working. One can not simply assume that adding little bits of code that individually work will work when integrated together. In this particular case, jQuery and Prototype are fighting.
This can be fixed by loading only one jQuery at the top, and then including this little snippet:
jQuery.noConflict();
Then jQuery no longer takes over the $ variable. (Your code will also need to account for this change by using jQuery rather than $, but all well-written plugins should interoperate decently with this change.)
After that, you should be able to include Prototype and your other plugins. In theory, anyways.
In practice, Prototype hooks some other things. In your particular case, it's hooking Array.prototype.reverse in a way that the jQuery plugins don't expect, and somehow, it's causing a stack overflow. I don't really know how to resolve Prototype's hijacking of that function without breaking one or the other, so you might just want to find a lightbox plugin that works with just jQuery.
jQuery is not available when you are trying to call it. You could try moving everything to the bottom of the body. Also worth noting that you are loading jQuery twice.
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.min.js"></script>
Related
I use a number of jQuery plugins on my site (owl carousel for example) which work fine everywhere except one page where I require another script which loads content from another site into an iframe.
On the problem page I am getting errors for all my jQuery plugins, i.e. owl carousel:
$(...).owlCarousel is not a function
I have tried running jQuery in no conflict mode:
jQuery.noConflict();
(function($){
$(function(){
$('.carousel').owlCarousel({
items: 3,
lazyLoad: true
});
});
})(jQuery);
But I still get the same error.
I have double checked my filepaths are correct and the files are being loaded in the correct order. They are:
<script type="text/javascript" src="mysite.com/jquery/jquery.min.js"></script>
<script type="text/javascript" src="mysite.com/owl-carousel/owl.carousel.min.js"></script>
<script type="text/javascript" src="mysite.com/custom.js"></script><!-- call to owl carousel-->
In the body I have a placeholder div for the iframe to be loaded into. Then I include the script for loading the iframe:
<script type="text/javascript" src="mysite.com/iframe-script.js">
And after this some simple javascript config settings for the iframe and that's it.
The iframe script is a few thousand lines unminified and a bit beyond my understanding of javascript but, from what I can tell it uses its own custom variable for referencing jQuery which is why I don't think the issue is a jQuery conflict issue.
jQuery still works in mysite.com/custom.js, i.e. all onclick events fire with no errors. So jQuery is working. Just none of the jQuery plugins I am using.
What is going wrong here?
I've incorporated a Magento ecommerce site into our existing website and all is OK, but there are various different jQuerys and prototypes being used along the way.
I wanted to improve the site's mobile navigation and found the awesome jQuery.mmenu plugin. I've integrated this into the site and it looks and mostly works great, but there are certain pages within the magento part of the site that have their js broken by the menu and as such the menu ceases to exist.
Looking at the code of a working page and non-working page I have found some differences in the js they use but I can't figure out how to rectify the issue:
Working page: http://www.doble-shop.co.uk/shop/boots.html
Non-working page: http://www.doble-shop.co.uk/shop/richa-monza-waterproof-leather-boots-black.html (notice that the menu doesn't show on the mobile size of the site and that the js tabs are broken as is the dropdown quick access, also the error message of Uncaught TypeError: Cannot read property 'blocker' of undefined is shown in the console)
When comparing the code of the two pages and paying attention to the js used the following are included on the broken page but not on the working page:
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/product.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/calendar/calendar-setup.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.cloudzoom.min.js"></script>
<script type="text/javascript" src="http://www.doble-shop.co.uk/shop/js/infortis/jquery/plugins/jquery.colorbox.min.js"></script>
Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.
If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ); from the second version will return the globally scoped jQuery variables to those of the first version.
<script>
var $ = jQuery.noConflict();
</script>
Place this snippet right after including of the jQuery in your page.
Read more here.
I would greatly appreciate it if someone could shed some insight onto a problem I'm having.
The code below is from the footer of a WordPress website I run, and as you'll notice, the second script is invalid. I have no idea where that even came from or how to fix it, and I've searched through many WordPress PHP files (footer.php, index.php, page.php, etc.) to try to find the source, but I'm not sure where it is.
So my question is this: could someone tell me how to find the source of this script? In other words, how can I find out where that second line of code even comes from? I'm not a developer, so sorry if this is a dumb question. Here's the code for you to reference:
<script defer="defer" src="http://echidnainc.com/wp-includes/js/admin-bar.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/easy-social-share-buttons.min.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-social-share-buttons/assets/js/essb-sticky-sidebar.js" type="text/javascript"></script>
<script defer="defer" src="http://echidnainc.com/wp-content/plugins/easy-slide-in/optin-forms-manager/js/placeholder.js" type="text/javascript"></script>
So to answer the general question I posed, to find the source of a line of code placed in the footer of a WordPress page, the first thing to try should probably be the one-by-one deactivation of plugins until the script disappears (and obviously, when the script disappears, then you know the last plugin to be deactivated was responsible). That worked for me.
And now for details on my specific situation's resolution:
A plugin, Speed Booster Pack, was causing the erroneous script:
<script defer=”defer” src=”http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js” type=”text/javascript”></script>
Either that erroneous script or another element of the Speed Booster Pack was interfering with another plugin I recently installed. I tried tweaking some PHP files in the Speed Booster Pack, but ultimately I just deactivated the plugin in order to solve the problem.
I browsed to each of the scripts you mentioned in your post (just pasted the link into my browser to see the JavaScript source). It doesn't seem to be any of those scripts that are adding the tag to Google's hosted version of jQuery.
My suggestion, without knowing the source of the plugins you have in your wordpress, is that one of the plugins is trying to include jQuery, and has an error.
As to why the scripts are loaded at the end of the page, this is a combination of the "defer" tag, combined with a common web development trick that placing tags at the end of the page body facilitates faster load times.
If you could refer to the source code for any of the plugins I don't mind checking to see which one, if any, have the typo. You yourself could attempt to remove plugins one by one to see if one causes the script tag to disappear, and boom, culprit.
The second script is invalid, because the url in the src="..." arrtibute is invalid. I assume you wanted to use jQuery, a JavaScript libary.
To fix that replace
src="http://echidnainc.comhttp//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"with src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"
The jQuery libary hosted by Google.
The CMS I use (Liferay) is dependent on jQuery to do a lot of things.
When I recently added new functionality to our site through the use of fancybox, I find that this breaks all other jQuery functionality on the page. If I take out the initial jQuery library import I use for fancybox, the other functionality works, but fancybox does not. Here is the code in question:
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
I've tried adding jQuery.noConflict(); to various parts of the code, but to no avail. I feel like this should be the correct solution, I'm just not sure exactly where to put it. Unless someone has a different possible solution, while keeping the fancybox functionality. I've been stuck on this awhile now, I'm kind of at a loss of what to try next.
Thanks in advance,
Noah
EDIT: Here is a pastebin of the page source code: http://pastebin.com/NA5WKrMW#. Line 81 is where I'm trying my jQuery import for fancybox purposes.
You have to add the noConflict right after the script tag:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var jQuery_latest = $.noConflict(true);
</script>
EDIT:
Make sure you're initializing fancybox using the correct jQuery:
jQuery_latest(document).ready(function() {
jQuery_latest(your_element_here).fancybox();
});
While creating a website using Twitter Bootstrap's carousel, it seems that some scripts are interfering from it auto-sliding when the website is loaded. But it works fine once you click one of the controls in the carousel. It then slides every 5 seconds, the default time.
I'd rather not post a jsfiddle because of the size, so the production website will have to do (not sure if this is against the rules - otherwise I'll delete it).
Now there are some plugins I'm using (Newsletter and Contact Form 7) which also include scripts from jQuery. I'm not sure how to implement the noconflict from jQuery, or if it will even help.
Can anyone spot the problem?
I got this working by saving a copy of your site to my local drive, I moved the bootstrap .js file to the bottom of the file right above </body> and called the carousel manually so it ends up looking like this
<script type="text/javascript" src="./PRO-Intermediair Your Next Step!_files/bootstrap.min.js"></script>
<script type="text/javascript">
$('.carousel').carousel();
</script>
</body></html>
edit
I posted a copy so you can see http://tctel.com/pro/