Jump to content

Recommended Posts

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

Edited by as_bold_as_love
Link to post
Share on other sites

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!

Link to post
Share on other sites

....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).

Edited by as_bold_as_love
Link to post
Share on other sites

....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?

Edited by as_bold_as_love
Link to post
Share on other sites

@ 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>

Link to post
Share on other sites

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>

Link to post
Share on other sites

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!!!!!!

Link to post
Share on other sites

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/

Link to post
Share on other sites

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.

Link to post
Share on other sites
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
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...