0

I have multiple instances where I use jquery on my site (like an image slider and navigation) but they will not work if I do not place the jquery call multiple times.

E.g. the 2 snippets below won't work unless I call the script twice. Please help. (There are more jquery calls on my page as well calling different libraries) Can't I just call the latest library once and be done with it? I tried and doesn't work.

<!--menu -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/newnav.css" />
<script type="text/javascript" src="js/navdoublecolumn.js"></script>
<script>
<!--
ddmegamenu.docinit({
    menuid:'solidmenu',
    dur:0, 
    easing:'easeInOutCirc' //<--no comma after last setting
})
// -->
</script>



<!-- slide -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/jquery.tabSlideOut.v1.3.js"></script>

<script type="text/javascript">
$(function(){
    $('.slideout1').tabSlideOut({
        tabHandle: '.slideouthandle1',             //class of the element that will become your tab
        pathToTabImage: 'images/slideouttab_chat.jpg',//path to the image for the tab //Optionally can be set using css
        imageHeight: '150px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 200,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '215px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: true                       //options: true makes it stick(fixed position) on scroll
    });

});
</script>
7
  • To clarify, why does <script type="text/javascript" src="js/jquery.min.js"></script> need to be called each time? I sure it doesn't. Can someone please help me out with this? Jan 25, 2013 at 9:34
  • 1
    it should not be called each time, once per html page... the only cause may be if you redefine $ or used jQuery.noconflict()
    – zb'
    Jan 25, 2013 at 9:35
  • Don't know if this matters but I'm using a CMS that injects head section on the fly Jan 25, 2013 at 9:46
  • Also where I place the call, makes things work of not Jan 25, 2013 at 9:47
  • 1
    that means you should call jQuery functions as jQuery() instead of $()
    – zb'
    Jan 25, 2013 at 11:21

2 Answers 2

1

I expect something in navdoublecolumn.js is overwriting or otherwise breaking jQuery functionality. By including jQuery a second time, you are redefining the methods / variables and therefore restoring functionality that navdoublecolumn.js has broken.

You may get a clue to what is breaking by looking at the javascript console error output you get when you remove the second jQuery inclusion.

2
  • So are you saying that in that case I have no choice but to call it again? Jan 25, 2013 at 9:50
  • No. I'm saying that if you don't call it again you have a chance of working out what the error is.
    – seb
    Jan 3, 2014 at 15:21
0

As you using jQuery.noconflict() use this:

jQuery(function($){
    $('.slideout1').tabSlideOut({
        tabHandle: '.slideouthandle1',             //class of the element that will become your tab
        pathToTabImage: 'images/slideouttab_chat.jpg',//path to the image for the tab //Optionally can be set using css
        imageHeight: '150px',                     //height of tab image           //Optionally can be set using css
        imageWidth: '40px',                       //width of tab image            //Optionally can be set using css
        tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
        speed: 200,                               //speed of animation
        action: 'click',                          //options: 'click' or 'hover', action to trigger animation
        topPos: '215px',                          //position from the top/ use if tabLocation is left or right
        leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
        fixedPosition: true                       //options: true makes it stick(fixed position) on scroll
    });

});
1
  • instead of immediatly downvoting you can tell what error is, you using noconflict, show how.
    – zb'
    Jan 25, 2013 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.