I'm trying to add two different javascript functions to my header:

1) is for a lightbox (see code below) and the

2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.

Q: how can I get all these js. files to work when I view my page?

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

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

\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>

<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>

<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'y';
            $.localScroll();
        });
</script>

I'm trying to add two different javascript functions to my header:

1) is for a lightbox (see code below) and the

2) is for a local scroll (code below). When I place them both in my header tag, as seen below, one or the other will not work at all--depending on the order in which I place them the tag-- when I go to view my page.

Q: how can I get all these js. files to work when I view my page?

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

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

\\\\and this one below////
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js"></script>

<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>

<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>

<script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'y';
            $.localScroll();
        });
</script>

• javascript
• jquery
• prototypejs

• A good starting point is always to write what error you get. "It doesn't work" is not enough. – Mads Mogenshøj Commented Mar 1, 2011 at 1:13
• Did something go wrong? I only see one line of javascript code. – Rian Schmits Commented Mar 1, 2011 at 1:14
• When something goes wrong this way (a lot of libraries and a simple line of custom made code) you should check the validity of your page against the w3c validator and fix all the plaint it has. – Eineki Commented Mar 1, 2011 at 1:58

1 Answer 1

You are using prototype w/ jQuery make sure you have jQuery.noConflict(); after your jquery framework script and prototype framework and before you run any main scripts. It is not remended to use more than one JavaScript framework at the sametime.

<header>
<link rel="stylesheet" href="/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript" src="/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/jquery-vertical-scroll/js/jquery.min.js">
</script>
<script type="text/javascript">
    jQuery.noConflict();
</script>
<script src="jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="/js/lightbox.js"></script>

<script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery.localScroll.defaults.axis = 'y';
            jQuery.localScroll();
        });
</script>
</header>

give this a try