javascript conflict in Joomla - javascript

Can anyone help I am getting what seems to be conflicting Javascript in a Joomla site I am making. When the following scrip is added to the site I cannot add a listing in mosets tree
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
If i take this code out the listing works as it should in Mosets tree but the Slider and other items are effected on the home page
http://mybridespace.co.uk
I have tried no-conflict script but this doesn't seem to work well.
Any ideas would be appreciated.

Related

Google Analytics, jQuery Magnific Popups, .NET master page implementation

I will start with admitting that although I have been researching, reading, and trouble-shooting my issue I think I am missing something fundamental with my site. I apologize for my ignorance in advance but this is the only way to learn--by admitting you don't know what to do.
I'm running a VB.NET site which has a master page and content pages. I am still very much in development of the entire site trying to add features.
What I'd like to do:
I would like to add google analytics and jquery magnific popup. I've followed all the instructions from google and from magnific pop-up and I'm still having issues.
What I've done to try and make this work so far:
My head on masterpage:
<script src="Scripts/googleanalytics.js" type="text/javascript"></script>
<script src="Scripts/jquery-2.1.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-magnific-popup.js" type="text/javascript"></script>
My footer on masterpage:
<script type="text/javascript">
$('.test-popup-link').magnificPopup({type: 'image'});
</script>
Added class to image:
<a class="test-popup-link" href="img/bigdog.jpg"><img class="centerimg" src="img/smalldog.jpg" /></a>
My issues:
Google script fails to find script. It's definitely there, it was
copy/pasted directly from google's site into a file I am calling.
jquery and magnific pop-up only load on my root pages.
"/products/product1.aspx" pages for example refuse to load scripts.
Although they load on root pages, the script does not appear to work
for the image pop up. I've followed magnific-popup's instructions word for word for "initializing in html"
Instructions for magnific-popup: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool
Lastly, before I tried adding the image pop-up google analytics appeared to be working as I was getting reporting on the web analytics page.
Any help would be appreciated.
Solution found via talking it out on IRC.
I restarted my local server and it worked on my root directory. Race conditions or caching causing the problem?
I needed to add "/" before "Scripts" in my head which fixed non-root script loading.
Thanks to robert on freenode for talking me through it. :D

How can I find the source of a <script> placed in the footer?

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.

jQuery tabs not working properly in Magento

I've been trying to create a set of tabs in Magento using the following plugin:
http://os.alfajango.com/easytabs/
After setting it all up, adding the HTML, CSS & javascript the tabs seem to not work correctly instead they sort of act like anchor points on the page.
I've added this to the header of the site:
<script type="text/javascript" src="/javascripts/jquery.hashchange.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.easytabs.min.js"></script>
And I believe all the files are in the correct place / linked to in the right way.
The jQuery isn't in the above because when I added it to the header there were loads of conflicts as I believe Magento already includes the jQuery library.
Here's an example of the tab so far:
http://bit.ly/1hT1Xa0
Thanks for any help :)
You have to invoke easytabs by adding
$('#tab-container').easytabs();
// try with no conflict if not working
jQuery.noConflict();
jQuery('#tab-container').easytabs();
see more details tab at demo site.

jQuery interfering with Twitter bootstrap carousel

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/

Jquery code insert into WP HeadWay Page

Hi problem is to insert jquery code into WP Headway Page.
Short intro
I'm using Wordpress Headway theme manager and it consist of 5 posts.
I want to make jQuery Carousel with links to content (carousel works as WP plugin).
Headway has custom code section, tried to insert there.
Can someone elaborate how to insert jQuery script into single Headway Page.
I too thought this was a HeadWay issue, but it is a WordPress issue.
My solution was to add a JS in my "Child" theme folder and link to it
<script type="text/javascript" src="/wp-content/themes/childTheme/js/indexTabs.js"></script>
If you need to use another library like jQuery, just add it above the JS call
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
I added both these lines to the bottom of the post (jQuery call before the JS)

Categories

Resources