Adding multiple js files in the header

Question

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>

A good starting point is always to write what error you get. "It doesn't work" is not enough. — Mads Mogenshøj
– Mads Mogenshøj, Commented Mar 1, 2011 at 1:13
Did something go wrong? I only see one line of javascript code. — Rian Schmits
– 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 complaint it has. — Eineki
– Eineki, Commented Mar 1, 2011 at 1:58

KJYe.Name · Accepted Answer · 2011-03-01 02:08:24Z

4

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

edited Mar 1, 2011 at 2:08

answered Mar 1, 2011 at 1:15

KJYe.Name

17.2k5 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rian Schmits Over a year ago

I think jQuery.noConflict(); needs to be in a separate script tag instead of in the one that imports jquery.

KJYe.Name Over a year ago

@RianSchmits it runs for me without issue but i'll change it

Collectives™ on Stack Overflow

Adding multiple js files in the header

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related