Search code examples
javascriptjqueryprototypejsscriptaculous

Why did one of my effects stopped working after adding another effect?

I am new to all of this so sorry if this is a stupid question.

I had previously created a lightbox affect for my contact form and had it working great. Clicked contact, lightbox popped up with the contact form that kept in a separate html page. The script references were as follows:

<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>

Then, I went through a tutorial to add a coda-like slider box and got that all working adding the following scripts to the head:

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

Once I completed that I found that my initial lightbox function stopped working and the link now just sent me to the html page. No lightbox. Here is the full head now:

<title>index</title> 
<link rel="stylesheet" href="css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/lightview.css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='js/lightview.js'></script>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-1.4.2-min.js" type="text/javascript"></script>
<script src="js/jquery.localscroll-1.2.7-min.js" type="text/javascript"></script>
<script src="js/jquery.serialScroll-1.2.2-min.js" type="text/javascript"></script>
<script src="js/coda-slider.js" type="text/javascript" charset="utf-8"></script>

Here is my nav that sent to the light box:

    <a href="index.html">Overview</a> |
    <a href="index.html">Client List</a> |
    <a href="index.html">Reviews</a> |
    <a href="index.html">News</a> |
    <a href='hiddenforms/candidateform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Candidates</a> | 
    <a href='hiddenforms/contactform.html' class='lightview' title=" :: :: topclose: true, autosize: true">Contact</a> | 
    <a href="candidate.html">Share</a>

I hope that helps. Can you have too much javascript on a page? How do I fix this?

Solution

  • Look in your error console (Firebug, Web Inspector, etc) for errors. If one script is overwriting properties the other script is expecting, it may break something. You also might want to consider at least deploying with all of your scripts concatenated to a single file, to reduce network lag.

    Edit: It might also be a conflict between jQuery and Prototype and/or Scriptaculous. jQuery tries to avoid conflicts with other libraries, but only so much of this can be controlled. Ensure jQuery is loaded before the other scripts and add jQuery.noConflict(); to the end.