jQuery tabs not working properly in Magento - javascript

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.

Related

jQuery.mmenu conflict with other JS

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.

JQuery remove link target attribute code not working

We have a WP site that uses a 3D Cart Plugin - when you click on "Add to Cart" it opens a new window. This is because *'target='_NEW''* is built into the plugin link code. See the following page and click on any Product Description or Add to Cart button.
http://tipsybir.nextmp.net/freestyle-hummingbird-feeders-375ml/
To override this, I use this code:
<script type="text/javascript">
jQuery(document).ready(function() {
$("a[target='_new']").removeAttr("target");
});
</script>
which I got from a previous question here. We have another WP site using the same plugin, and the above code works perfect, but it is not working on this site. It is the same exact code, placed in the header, but a new window is still opened.
Can anyone help on this? We do not want a new window to open.
You are probably not using jQuery noConflict, so use jQuery instead of $
jQuery(document).ready(function() {
jQuery("a[target='_new']").removeAttr("target");
});
It was indeed that I did not have the JQuery Library loaded.

jQuery breaking other javascript

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();
});

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