[SOLVED] Javascript Conflict?

liamloveslearning · November 12, 2009

Hi Everybody,

Im trying to implement a lightbox script on my website but Its not working as Id hoped, I presume its clashing with the other javascript on my page, Could anybody clarify this and point me to the solution? thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reload Design - Runcorn, Graphic Design</title>


<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script type="text/javascript">
animatedcollapse.addDiv('services', 'optional_attribute_string')
//additional addDiv() call...
//additional addDiv() call...
animatedcollapse.init()
</script>



<!DOCTYPE HTML>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('services', 'fade=1')


animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>



















<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        google.load("jquery", "1.2.6");
    </script>

    <script type="text/javascript" src="js/example.js"></script>



<script type="text/javascript">
<!--


function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('images/uparrow.png','images/downarrow.png')">




<div id="container">



  <div id="header">
    
     	<div id="logo"><a href="index.html"><img src="images/logo.png" width="282" height="116"border="0" /></a></div>
        
<div id="nav">
            <ul>
                <li><a href="about.html">About</a></li>
                <li><a href="services.html">Services</a></li>
                <li><a href="portfolio.html">Portfolio</a></li>
                <li><a href="contact.php">Contact</a></li>
            </ul>
      </div>
    
     <div id="clearer"></div>
    <div id="folio">
            <ul>
                <li><a href="web.html">Web Design</a></li>
                <li><a href="logo.html">Logo Design</a></li>
                <li><a href="vehicle.html">Vehicle Livery</a></li>
                <li><a href="sign.html">Signage</a></li>
            </ul>
      </div>
    
    
    
  </div>
  
    
    	
        <div id="topmask"></div>
  
      
      <div id="content">

   <div id="spacer"></div>

<a href="images/vehicle/0.png" rel="lightbox[v]">		 <img class="latwork" src="images/vehicle/thumbs/0.jpg" border="0" /></a>
<a href="images/vehicle/1.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/1.jpg" border="0" /></a>
<a href="images/vehicle/2.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/2.jpg" border="0" /></a>
<a href="images/vehicle/3.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/3.jpg" border="0" /></a>
<a href="images/vehicle/4.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/4.jpg" border="0" /></a>
<a href="images/vehicle/5.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/5.jpg" border="0" /></a>
<a href="images/vehicle/6.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/6.jpg" border="0" /></a>
<a href="images/vehicle/8.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/8.jpg" border="0" /></a>
<a href="images/vehicle/9.png" rel="lightbox[v]">        <img class="latwork" src="images/vehicle/thumbs/9.jpg" border="0" /></a>
<a href="images/vehicle/10.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/10.jpg" border="0" /></a>
<a href="images/vehicle/11.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/11.jpg" border="0" /></a>
<a href="images/vehicle/12.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/12.jpg" border="0" /></a>
<a href="images/vehicle/13.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/13.jpg" border="0" /></a>
<a href="images/vehicle/14.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/14.jpg" border="0" /></a>
<a href="images/vehicle/15.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/15.jpg" border="0" /></a>
<a href="images/vehicle/16.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/16.jpg" border="0" /></a>
<a href="images/vehicle/17.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/17.jpg" border="0" /></a>
<a href="images/vehicle/18.png" rel="lightbox[v]">       <img class="latwork" src="images/vehicle/thumbs/18.jpg" border="0" /></a>







<img class="latwork" src="images/bottomspacer.png" border="0" />  </div>
    
     <div id="botmask"></div>
    
</div>

<div id="topbox">

<div id="panel"><a href="javascript:animatedcollapse.toggle('services')"><img src="images/pulldown.png" border="0" /></a></div>

<div id="services">


<div id="centrecols">

<div class="column">

	<h3>Services</h3>
	<ul>
		<li class="green">Print Design</li>
		<li class="green">Web Design</li>
		<li class="green">Vehicle Livery</li>
		<li class="green">Flyer Design</li>

		<li class="green noborder">Logo Design</li>
	</ul>
</div>
    
    <div class="column">

	<h3>Tools</h3>
	<ul>
		<li class="green">Photoshop</li>
		<li class="green">Dreamweaver</li>
		<li class="green">Flash</li>
		<li class="green">Illustrator</li>

		<li class="green noborder">InDesign</li>
	</ul>
</div>
    
    <div class="column">

	<h3>Clients</h3>
	<ul>
		<li class="green">Peel Ports</li>
		<li class="green">Halton Council</li>
		<li class="green">E - Sure</li>
		<li class="green">Sheila's Wheels</li>

		<li class="green noborder">David Stearne</li>
	</ul>
</div>
    
    <div class="concolumn">

	<h3>Contact</h3>
	<ul>
		<li>[email protected]</li>
		<li >01928 566777</li>
		<li >EBL Centre</li>
		<li>Picow Farm Road</li>

		<li>Runcorn</li>
	</ul>
</div>
    
        <div class="columnlast">
<ul>
		<li class="green">	 <a href="javascript:animatedcollapse.toggle('services')">HIDE</a> </li>

	</ul>

</div>



<div>



</div>

</div>




</body>
</html>

trq · November 12, 2009

but Its not working as Id hoped,

What exactly does that mean?

Surely you can't simply post a bunch of code and that comment and expect people to figure out your problem.

liamloveslearning · November 12, 2009

Sorry, what I mean is my image links opens in a new window/tab as opposed to the lightbox so this tells me my javascript isnt working; Im not sure what code I should paste neither so I posted the code for my page as it is at the moment

trq · November 12, 2009

I'm really not going there until your code is cleaned up quite a bit.

For starters, you have at least 4 different javascript libraries included, including two different version of jQuery. On top of that, you have two different doctypes.

liamloveslearning · November 12, 2009

Okay thanks for the advice, Im brad new to javascript im just using tuts online where as I really should have read up about it first, In regards to the 4 libraries, is it possible to combine them all?

trq · November 12, 2009

Okay thanks for the advice, Im brad new to javascript im just using tuts online where as I really should have read up about it first, In regards to the 4 libraries, is it possible to combine them all?

Well, you'll never need to version of jQuery, so at least one of them could be thrown away. As for combining prototype, scriptaculous and jQuery, its possible.

In my experience however your probably best finding one library and sticking with it. jQuery is a great library on its own, there really shouldn't be any need for multiple libs in most cases.

liamloveslearning · November 12, 2009

Okay thanks, I think im going to read up and learn the basics now as opposed to cut and pasting everything, thanks anyway

dflow · November 19, 2009

Okay thanks for the advice, Im brad new to javascript im just using tuts online where as I really should have read up about it first, In regards to the 4 libraries, is it possible to combine them all?

Well, you'll never need to version of jQuery, so at least one of them could be thrown away. As for combining prototype, scriptaculous and jQuery, its possible.

In my experience however your probably best finding one library and sticking with it. jQuery is a great library on its own, there really shouldn't be any need for multiple libs in most cases.

i had the same issue

i am including a navigation menu based on jquery.js

it was called correctly but then my image gallery based on lightbox and prototype wasnt executed correctly

i have found this work around

http://docs.jquery.com/Core/jQuery.noConflict

i have implemented this script in my menu.php file as it is an include in all files

and jquery.js needs to be called before all other related libraries are called inorder for them to work

place this in your <head>

<script type="text/javascript" src="http://example.com/js/jquery.js"></script>
<script>
     jQuery.noConflict();
     
     // Use jQuery via jQuery(...)
     jQuery(document).ready(function(){
       jQuery("NavmenuDiv").hide();
     });
     
     // Use Prototype with $(...), etc.
     $('id').hide();
   </script>

Sign In

[SOLVED] Javascript Conflict?

Recommended Posts

liamloveslearning

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

liamloveslearning

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

liamloveslearning

Link to comment

Share on other sites

trq

Link to comment

Share on other sites

liamloveslearning

Link to comment

Share on other sites

dflow

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information