PDA

View Full Version : javascript conflict


Maikel
08-28-2011, 01:40 PM
Hello,
i have al little problem with 2 javascripts on 1 page.
One of the 2 is working and the other one fails.

One is an lightbox the other one a script for positioning shadows on the page.

Hope anyone can help me with this, i´m not an expert in javascript.

Here is the code:




<!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>
<title>Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="scripts/lightbox.js"></script>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

<script type="text/javascript" src="js/jquery.guid.js"></script>
<script type="text/javascript" src="js/jquery.dotimeout.js"></script>
<script type="text/javascript" src="js/jquery.shadowon.min.js"></script>
<link rel="stylesheet" href="styles/lightbox.css" type="text/css" media="screen" />



</head>
<body>
<script type="text/javascript">
$(document).ready(function () {

$("#box_left").shadowOn( { imageset: '3' } );
$("#box_right").shadowOn( { imageset: '3' } );

var offset = $('#box_left').offset();
var height = $('#content').height();
var bgRepoX = offset.left - 120;
var bgRepoY = offset.top + height - 220;
$("html,body").css("background", "url('images/object.png') no-repeat");
$('html,body').css({'backgroundPosition': + bgRepoX + 'px ' + bgRepoY + 'px'});

$(window).resize(function() {
var offset = $('#box_left').offset();
var height = $('#content').height();
var bgRepoX = offset.left - 120;
var bgRepoY = offset.top + height - 220;
$('html,body').css({'backgroundPosition': + bgRepoX + 'px ' + bgRepoY + 'px'});
});
});
</script>
-
<div class="text">
<h2>Impressie in beeld</h2>
<div id="streep"><img src="images/streep_right.png" border="0" style="float: right;"/></div><br />
Geniet van de beelden, lees over de ervaringen en raak ge&iuml;nspireerd!
<BR><BR>

<ul>
<BR>
<a href="images/tafel.jpg" rel="lightbox" title=""><img src="images/ibiza.jpg" alt="" title="" width="150" height="100" border="0" /></a>
<a href="images/level2groot.jpg" rel="lightbox" title=""><img src="images/lapland.jpg" alt="" title="" width="150" height="100" border="0" /></a>
<a href="images/level3groot.jpg" rel="lightbox" title=""><img src="images/vervoer.jpg" alt="" title="" width="150" height="100" border="0" /></a>
<a href="images/trouwen-zuid-afrika.jpg" rel="lightbox" title=""><img src="images/tafel1.jpg" alt="" title="" width="150" height="200" border="0" /></a>
<a href="images/man1groot.jpg" rel="lightbox" title=""><img src="images/slippers.jpg" alt="" title="" width="150" height="200" border="0" />
<a href="images/man2groot.jpg" rel="lightbox" title=""><img src="images/glazen.jpg" alt="" title="" width="150" height="200" border="0" />
</ul>

<br /><br />
</div>

</div>

<div style="clear: both;"></div>

</div>
<div id="footer">



</body>
</html>




Thanks in Advance!!!

Greetings,

Maikel
djmatt
08-28-2011, 07:22 PM
I'm not a js expert either. I've found this solution work a lot of the time:
1. Look for and change variables with the same name.

I also would cut out the other code and make sure that the other one works properly without the first code. Then vice versa to test both codes.
Maikel
08-29-2011, 12:55 AM
Hi Matt,
thanks for your reply.

I already checked both codes seperate and they work fine :).

How do you mean change the variables, have you an example for me?

Thanks in Advance.

Maikel
djmatt
08-29-2011, 04:20 PM
Look for variables in both codes that are the same.
For example:

var offset = $('#box_left').offset();

the variable "offset" may also be used in the lightbox script and the shadow script. Then, you would have to go through the whole code and the other includes to change "offset" to "offset1" or something else so they don't have the same variables.