multiple jQuery scripts

[paulonline2501]

hi everyone, i have a problem with my page when i'm running two scripts at the same time.i think its because the scripts have conflicting versions of the jQuery library. i have one script that converts text box scroll bars into pretty scroll bars.i want to put another script on the same page that runs a lightbox type pop up image zoom thingy. if i hide the links to one of them the revelvent script works (for the unhidden script), but if call both the first one in the list will stop working.ive swapped round the order and only the one i put last will work. obviously i'ld like it if both could work on the same page. im calling the scripts like this:

<script type="text/javascript" src="_js/jquery-1.7.1.js"></script><script type="text/javascript" src="_js/popup.js"></script> <script type="text/javascript" src="../_js/jquery.min.js"></script><script type="text/javascript" src="../_js/jquery.mousewheel.js"></script><script type="text/javascript" src="../_js/jquery.jscrollpane.min.js"></script>

the first two are for the popup image thingy. the last three are for the scrollbar widget. can any one recommend what i should do to get both to work? if you want to see what i mean the testing page is here:http://jt-design.pau...age-pop-out.php many thanks, paul

[beyondal]

I got a similar problem, It's a mouse over plugin, and a gallery script. the code I have for the script's is:

<meta name="description" content="Awesome Cufonized Fly Out Menu with jQuery and CSS3" />		<meta name="keywords" content="cufon, jquery, css3, menu, navigation, slide out, fly out, hover"/>  	  		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>	     <script src="galleria/galleria-1.2.6.min.js"></script>	  	    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>  <script src="jquery.easing.1.3.js" type="text/javascript"></script>

In case of view complete code, www.beyondallmeadows.com/beyondallmeadows.com/Graphical.html I can't get the gallery to work!

[dsonesuk]

use no.Conflict() <script src='jquery-1.3.2.js'></script><script>var jq132 = jQuery.noConflict();</script> <script src='jquery-1.4.2.js'></script><script>var jq142 = jQuery.noConflict();</script> as described here http://forum.jquery.com/topic/multiple-versions-of-jquery-on-the-same-page

[beyondal]

That doesn't do the trick I can see my gallery, but the sliders aren't moving any more,and it keeps on sitting in a strange place witch isn't there in my div's range or css.

[dsonesuk]

What I gave, was an example of applying different Jquery variables to different Jquery version libraries, and a link explaining what they do and how to apply, it was for to read up on, to understand, NOT copy, paste FIX.

[paulonline2501]

....is any one able to advise me on how to use noConflict in this situation? ive tried this but it didnt work:

<script type="text/javascript" id="sourcecode">$.noConflict();  jQuery(document).ready(function($) {	// Code that uses jQuery's $ can follow here. 	 $(function()  {   $('.scroll-pane').jScrollPane(	{	 //showArrows: true,	 //arrowScrollOnHover: true,	 //mouseWheelSpeed: 20	 verticalDragMaxHeight: 30 	}   );    $('.pics').jScrollPane(	{	 //showArrows: true,	 //arrowScrollOnHover: true,	 //mouseWheelSpeed: 20	 verticalDragMaxHeight: 30 	}   );  });});</script>

bear in mind, the calls are as follows:

<script type="text/javascript" src="_js/jquery-1.7.1.js"></script><script type="text/javascript" src="_js/popup.js"></script> <script type="text/javascript" src="../_js/jquery.min.js"></script><script type="text/javascript" src="../_js/jquery.mousewheel.js"></script><script type="text/javascript" src="../_js/jquery.jscrollpane.min.js"></script> 

...any other suggestions would be greatly appreciated (nothing grumpy or condesending please).

[thescientist]

are you checking for errors? can you at least pinpoint where the conflicts are arising?

[paulonline2501]

....thanks for te tip thescientist. ive just spent an hour or so looking for ways to get round this by putting the contents of the scripts into a function. but needless to say couldnt get that to work.i also had a look at how to display the error messages but couldnt find anything helpful on that really. do you know of a way other than installing firebug and using that?

[dsonesuk]

@ beyondal, there is no need to use noConflict() I tested your script/htm code, removed few css errors, and used a image that the gallert can find for image3, this is what i used

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Welcome</title><title>The wonderfull things that feels beyondal</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>	    <meta name="description" content="Awesome Cufonized Fly Out Menu with jQuery and CSS3" />	    <meta name="keywords" content="cufon, jquery, css3, menu, navigation, slide out, fly out, hover"/>        <link rel="stylesheet" href="http://www.beyondallmeadows.com/Beyondallmeadows.com/css/style.css" type="text/css" media="screen">        	    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>	                <script src="galleria/galleria-1.2.6.min.js"></script>	   <script src="http://www.beyondallmeadows.com/Beyondallmeadows.com/jquery.easing.1.3.js" type="text/javascript"></script>	    <script type="text/javascript">                            $(document).ready(function(){                var $menu = $("#slidingMenu");                                /**                * the first item in the menu,                * which is selected by default                */                var $selected = $menu.find('li:first');                                /**                * this is the absolute element,                * that is going to move across the menu items                * it has the width of the selected item                * and the top is the distance from the item to the top                */			    var $moving = $('<li />', {				    'class' : 'move',				    'top'   : $selected[0].offsetTop + '%',				    'width' : $selected[0].offsetWidth + '%'				    });                                /**                * append the absolute div to the menu;                * when we mouse out from the menu                * the absolute div moves to the top (like innitially);                * when hovering the items of the menu, we move it to its position                */                $menu.bind('mouseleave',function(){                        moveTo($selected,400);                      })                     .append($moving)                     .find('li')                    .not('.move')                     .bind('mouseenter',function(){                        var $this = $(this);                        var offsetLeft = $this.offset().left + $(window).width() - ($this.outerWidth() + 20);                        //slide in the description                        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');                        //move the absolute div to this item                        moveTo($this,400);                      })                      .bind('mouseleave',function(){                        var $this = $(this);                        var offsetLeft = $this.offset().left - 20;                        //slide out the description                        $('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');                      });                                      /**                * moves the absolute div,                * with a certain speed,                * to the position of $elem                */                function moveTo($elem,speed){                    $moving.stop(true).animate({                        top        : $elem[0].offsetTop + 'px',                        width    : $elem[0].offsetWidth + 'px'                    }, speed, 'easeOutExpo');                }            });                </script><style>body, ul, li, h1, h2, span{    margin:0%;    padding:0%;}ul{    list-style:none;}body{    background:#FFF;    overflow: hidden;    font-family: "Code Pro Light Demo", "Code Pro Demo", Arial, Helvetica, sans-serif;}.slidingMenu {    position:absolute;    margin-top:auto;    float: inherit;    padding-top:0%;    top:20%;    padding-right: 0%;    padding-bottom: 0%;    width: 100%;    height: 100%;    left: 0%;}.slidingMenu li {    display:block;    float:left;    clear:both;    padding-left: 1%;    height: 8%;    line-height: 75%;}.slidingMenu li.move {    width: 10%;    position: inherit;    z-index: 7;	        background: #333;         -moz-border-radius: 0% 0% 0% 0%;      -webkit-border-top-right-radius: 20%;             -webkit-border-bottom-right-radius: 20%;    border-top-right-radius: 0%;      border-bottom-right-radius: 0%;	        -moz-box-shadow:10% 10% 25% #FFF;    -webkit-box-shadow:10% 10% 25% #FFF;    box-shadow:10% 10% 25% #FFF;        }.slidingMenu li a {    font-size:200%;    text-transform:uppercase;    text-decoration: none;    color: #FFF;    text-indent:1%;    z-index: 8;    display: block;    z-index: 8;    float: right;    line-height:225%;    position: relative;    padding-right:0%;    padding-top:0%;}#Complete page {    position:absolute;    left:0%;    top:0%;    width:auto;    height:auto;    z-index:1;}#Header {    position:fixed;    right:0%;    left:0%;    top:0%;    width:100%;    height:20%;    z-index:3;}#beyondallmeadows-02 {    margin:auto;    float:left;    padding-left:inherit;    left:0%;    top:20%;    width:20%;    height:70%;    z-index:4;}#gallery {        position:fixed;    left:30%;    top:23%;    width:80%;    height:70%;    z-index:5 !important;}#Footer {    background-color:#333;    position:fixed;    left:0%;    top:90%;    width:100%;    height:10%;    z-index:6;}#Facebook {    position:absolute;    right:24%;    top:0%;    width:6%;    height:100%;}#Rss {    position:absolute;    right:18%;    top:0%;    width:6%;    height:100%;}#Mail {    position:absolute;    right:12%;    top:0%;    width:6%;    height:100%;}#Forrst {    position:absolute;    right:6%;    top:0%;    width:6%;    height:100%;}#Twitter {    position:absolute;    right:0%;    top:0%;    width:6%;    height:100%;}</style></head><body style="background-color:#FFFFFF; margin-top: 0%; margin-bottom: 0%; margin-left: 0%; margin-right: 0%;"><div id="complete page">    <div id="Header" >    <embed width="100%" height="100%" src="http://www.beyondallmeadows.com/Beyondallmeadows.com/Header.swf"></embed>            </div><div id="beyondallmeadows-02">    <div id="slidingMenuDesc" class="slidingMenuDesc">            <ul id="slidingMenu" class="slidingMenu">            <li><a href="Index.html">Home</a></li>            <li><a href="#">Audiovisual</a></li>            <li><a href="Graphical.html">Graphical</a></li>            <li><a href="#">Audio</a></li>            <li><a href="#">Interrests</a></li>            <li><a href="#">About/Contact</a></li>        </ul>  </div>            <div id="gallery">            <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/gallery%20artwork/Image_01.jpg" border="1">	    <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/gallery%20artwork/Image_02.jpg">	    <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/gallery%20artwork/Image_03.jpg">	    	   	             <script>		    Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');		    $("#gallery").galleria({                width: 250,			    height: 250		    });	    </script>	    		 </div>                <div id="Footer">   <div id="Facebook"><a href="https://www.facebook.com/profile.php?id=100002184562741">        <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/images/Facebook.png" width="100%" height="100%" alt="Facebook"title="Facebook">	    </a>    </div>    <div id="Rss">        <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/images/Rss.png" width="100%" height="100%" alt="" title="RSS">    </div>    <div id="Mail"><a href="http://cloudflare.com/email-protection.html#1755726e787973767b5755726e787973767b7b7a7276737860643974787a286462757d7274632a547879637674633225277675786263">        <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/images/Mail.png" width="100%" height="100%" alt="" title="Mail">	    </a>    </div>    <div id="Forrst">        <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/images/Forrst.png" width="100%" height="100%" alt="" title="Forrst">    </div>    <div id="Twitter">        <img src="http://www.beyondallmeadows.com/Beyondallmeadows.com/images/Twitter.png" width="100%" height="100%" alt="" title="Twitter">    </div>    </div></div></div><script type="text/javascript">/* <![CDATA[ */(function(){try{var s,a,i,j,r,c,l=document.getElementsByTagName("a"),t=document.createElement("textarea");for(i=0;l.length-i;i++){try{a=l[i].getAttribute("href");if(a&&"cloudflare.com/email-protection"==a.substr(7 ,31)){s='';j=44;r=parseInt(a.substr(j,2),16);for(j+=2;a.length-j&&a.substr(j,1)!='X';j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}j+=1;s+=a.substr(j,a.length-j);t.innerHTML=s.replace(/</g,"<").replace(/>/g,">");l[i].setAttribute("href","mailto:"+t.value);}}catch(e){}}}catch(e){}})();/* ]]> */</script></body></html>

[paulonline2501]

...any one get any ideas on how to fix this???

[dsonesuk]

YOU don't have a script conflict, you have placed the pop-up in a small overflow: hidden; container; that adjusts its position to the total browser window height and width, OUTSIDE of its parent container, plus you have used html <!-- --> comment tags, for css, when it should be /* */, which prevented the pop up background appearing. THE pop-container AND the pop-up background should be placed at the bottom before </body> tag, NEVER within any element that will prevent it filling, and positioning itself using the body element as a guide to achieve a centred pop-up result.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb"><head><title>JTDesign</title><meta name="author" content="www.paulyouthed.com"/><meta name="Copyright" content="Copyright (c)..." /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><meta http-equiv="Content-Language" content="en-gb" /> <!-- Language set to UK english --><meta name="rating" content="General" /><meta name="distribution" content="Global" /><meta name="description" content="This is the website for..." /><meta name="keywords" content="John Tuckey Design, Architect" /><link rel="stylesheet" media="all" href="http://jt-design.paulyouthed.com/_css/main.css" /><script type="text/javascript" src="http://jt-design.paulyouthed.com/test/_js/jquery-1.7.1.js"></script><script type="text/javascript" src="http://jt-design.paulyouthed.com/_js/jquery.min.js"></script><script type="text/javascript" src="http://jt-design.paulyouthed.com/_js/jquery.jscrollpane.min.js"></script><script type="text/javascript" src="http://jt-design.paulyouthed.com/_js/jquery.mousewheel.js"></script><script type="text/javascript" src="http://jt-design.paulyouthed.com/test/_js/popup.js"></script><!--<script type="text/javascript" src="http://jt-design.paulyouthed.com/_js/css_browser_selector.js"></script>--><style type="text/css">/*ul.a {list-style:visible;list-style-type:circle;}doesnt work*/#backgroundPopup{display:none;position:fixed;_position:absolute; /* hack for internet explorer 6*/height:100%;width:100%;top:0;left:0;background:#000000;border:1px solid #cecece;z-index:1;}#popupContact{display:none;position:fixed;_position:absolute; /* hack for internet explorer 6*//*height:500px;width:500px;*/background:#FFFFFF;border:2px solid #cecece;z-index:2;padding:12px;}#popupContact h1{text-align:left;border-bottom:1px dotted #D3D3D3;padding-bottom:2px;margin-bottom:20px;}#popupContactClose{line-height:14px;right:6px;top:4px;position:absolute;display:block;}/*#popupContactClose.a, #popupContactClose.a:link, #popupContactClose.a:active, #popupContactClose.a:hover{text-decoration:none;}*/img.large{width:400px;height:400px;}</style></head><body>  <script type="text/javascript" id="sourcecode">///////////$.noConflict();  //////////jQuery(document).ready(function($) {    /////////// Code that uses jQuery's $ can follow here.                     $(function()        {            $('.scroll-pane').jScrollPane(                {                    //showArrows: true,                    //arrowScrollOnHover: true,                    //mouseWheelSpeed: 20                    verticalDragMaxHeight: 30                        }            );                    $('.pics').jScrollPane(                {                    //showArrows: true,                    //arrowScrollOnHover: true,                    //mouseWheelSpeed: 20                    verticalDragMaxHeight: 30                        }            );        });///////////});</script><div class="website">    <div class="header">        <h1>Jonathan Tuckey Design</h1>    <!-- end of header--></div>            <div class="navbar">        <ul>            <li class="nav_home"><a href="http://jt-design.paulyouthed.com/contact">Contact</a></li>            <li class="nav_products"><a href="./">About</a></li>            <li class="nav_products"><a href="../">News</a></li>        </ul>    <!-- end of navbar --></div>            <div class="scroll-pane">        <h1>Testing Area</h1>        <p>            On this page i'm testing if the pop up can handle images. Let's see if it works....        </p>        <p>            Click to see if the zoom works: <img id="button" src="http://jt-design.paulyouthed.com/_pics/1large.jpg" alt="test" />        </p>        <div id="backgroundPopup"></div>                <!-- end of content--></div>    <div class="pics">        <table>            <tr>                <td><img src="http://jt-design.paulyouthed.com/_pics/3.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/1.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/2.jpg"></td>            </tr>            <tr>                <td><img src="http://jt-design.paulyouthed.com/_pics/2.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/4.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/3.jpg"></td>            </tr>            <tr>                <td><img src="http://jt-design.paulyouthed.com/_pics/2.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/3.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/1.jpg"></td>            </tr>            <tr>                <td><img src="http://jt-design.paulyouthed.com/_pics/3.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/2.jpg"></td>                <td><img src="http://jt-design.paulyouthed.com/_pics/1.jpg"></td>            </tr>            <tr>                <td><img src="http://jt-design.paulyouthed.com/_pics/4.jpg"></td>                <td></td>                <td></td>            </tr>        </table>    <!--end of pics--></div><!-- end of website--></div>        <div id="backgroundPopup"></div>        <div id="popupContact">        <p id="popupContactClose">Close<!--<a href="">X</a>--></p>        <h1>Gallery</h1>        <p id="contactArea">            <img src="http://jt-design.paulyouthed.com/_pics/1large.jpg" alt="test" class="large" />        </p>        </div></body></html>

[beyondal]

Anybody knows how to fix the problem I have? C'mon please, I'm at a dead here, need some wizards to help me fix it. Would be very appreciated!

[dsonesuk]

Anybody knows how to fix the problem I have? C'mon please, I'm at a dead here, need some wizards to help me fix it. Would be very appreciated!

Already posted fix #9

[beyondal]

I'm sorry, didn't see it, the slider does work with the gallery but the gallery stays on the upper left side whilst it has to be where the css gallery container resides. It begins when the page loads on the right place but then it moves when the page is loaded. Thanks for help!!!!!!

[dsonesuk]

The reasons it fails is because it can't locate one of the images, as soon as can locate all image it remains at the same spot and slide and pop up works. and also the menu works also.

[beyondal]

Yes totally correct!!! avé to you!!!Thanks for all the help!

[paulonline2501]

thanks DSONESUK. looks like that did the trick.

[10eIOSweb]

I have exactly the same problem.First I created a fisheye menu and it was working great until I add an autoslider. Now the slider works, but not the menu. And I can not figure out how to fix the fisheye menu so it will work again. Any ideas on how to fix it. PS. I have read the section about the No Conflict, but I still don't know how to apply it in my script. Any help would be much appreciated. http://www.wedub4u.com/

[thescientist]

which part don't you understand? Read the documentation and cite specifically what your problem is. You would probably be best served starting your own thread so you can post code relevant to your own situation.

[10eIOSweb]

which part don't you understand? Read the documentation and cite specifically what your problem is. You would probably be best served starting your own thread so you can post code relevant to your own situation.

Thinks for your reply. I don't know how to implement the NoConflict. Here is a link to a new thread with more info:http://w3schools.invisionzone.com/index.php?showtopic=42945