Grow your CSS skills. Land your dream job.

Adding multiple javascripts in one page

  • # February 1, 2013 at 1:11 am

    I tried searching in other sites for a solution but I just don’t understand what to do here. I’m hoping someone here can tell me what’s going on and how I can fix this.

    What I’m trying to achieve is the ability to maintain the javascript scroll effect and the pop up video effect. Both scripts seem to clash and one cancels the other. So I’ve linked my site where one script will work.

    [Link #1](http://casildasdesigns.webs.com/testing/help1.htm “Link here”)
    In this link, the javascript scrollbar works within the content page (The entire page doesn’t move, just the left side). The scrollbar isn’t visible so you’ll have to scroll using your mouse wheel or your laptop finger pad. But the trailer will not pop up correctly.

    [Link #2](http://casildasdesigns.webs.com/testing/help2.htm “Link here”) In this link, you cannot scroll… but the video pop up works, just click the red “trailer” link and you’ll see that the video will pop up.

    Again I want my site to have the ability to have both effects. Is this possible? This will help me so much if someone can explain what I’m doing wrong. I’m so not an expert at this stuff. :(

    I’m also having an issue with posting the code so feel free to right click and view source.

    # February 1, 2013 at 1:56 am

    I’m not an expert either, but perhaps you could insert the other jquery libraries into comments. You just need one

    script src="http://casildasdesigns.webs.com/jquery-1.7.2.min.js"

    If you use more than one, there’s likely to be a clash.

    That’s how I usually do it.

    # February 1, 2013 at 8:48 am

    I don’t understand. Do you mean pasting one of the scripts into another javascript file?

    # February 1, 2013 at 10:28 am

    Argh.. I have no idea what I’m doing wrong. I’ve been searching and I believe there is a code to prevent the javascript from clashing but I don’t understand where to place said code.. would it be inside the .js file? or the actual .html page? :/

    # February 1, 2013 at 10:41 am

    Personally, I think you (or someone) needs to look at the two JS files and see what the clash is?

    # February 1, 2013 at 10:55 am

    Well it seems when I add these following codes:




    Which are the .js files that allow the video pop up, it cancels the javascript scrollbar. I guess I don’t know how to properly use multiple external javascript files.

    EDIT: Bleh… it’s not allowing me to post the codes. >_<

    # February 1, 2013 at 11:02 am

    All you have to do it copy the script text (without any script tags)…and paste it into the box.

    THEN select it all and hit the Quote item on top of the box. It should indent all the text and there you are:

    function retrieveComputedStyle(element, styleProperty)
    {
    var computedStyle = null;

    if (typeof element.currentStyle != “undefined”)
    {
    computedStyle = element.currentStyle;
    }
    else
    {
    computedStyle = document.defaultView.getComputedStyle(element, null);
    }
    return computedStyle[styleProperty];
    }

    See?

    # February 1, 2013 at 11:18 am

    I’m trying to show you the external files not the internal but I’ll give it a try. Testing codes below:

    src=”http://www.freewebs.com/p.js”/script>script src=”/fancybox/1.4-jquery.min.js”/script
    script src=”/fancybox/jquery.-1.3.4.pack.js”/script
    script src=”/fancybox/video.js”/script

    Well if a part of the code shows, hopefully you can see what I’m talking about in the source.

    # February 1, 2013 at 11:27 am

    Yeah, but that’s not the point.

    You have two linked JS files fighting/conflicting. The answer is to find what the conflict is and solve it.

    To do that we need to see the JS TEXT for both not the links.

    That said, however, the versions of jQuery I can see being reference as quite old and it’s possible that something has been deprecated.

    # February 1, 2013 at 11:33 am

    Unfortunately, I wouldn’t know what to look for. I’m using codes that was given from a tutorial. And perhaps that’s the reason why it’s not working. I do appreciate your help.

    # February 1, 2013 at 11:47 am

    On looking at the source code of the links you gave you have WAY too many js files linked in there all probably old versions trying to do multiple things at the same time and in the wrong order.

    # February 1, 2013 at 1:51 pm

    Yeah, I figured that’s what was happening as well. I’ve been rearranging the codes to see if they would work. Do you know if it would work if I updated the jQuery? Or…Do you know if there is a simpler way for me to achieve what I want?

    # February 1, 2013 at 2:46 pm

    Edonian, give me bit. As soon as my toddlers rest, I will solve this for you!

    # February 1, 2013 at 2:51 pm

    Thank you so much! I’ve been trying to figure this out since yesterday… and it’s driving me crazy!

    # February 1, 2013 at 4:29 pm

    Okay, I’m back.

    Edonian, are you working on your site right now? The sources keep changing.

Viewing 15 posts - 1 through 15 (of 21 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".