Forums

edonian

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

Krish1980

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.

edonian

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

edonian

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? :/

Paulie_D

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

edonian

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. >_<

Paulie_D

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?

edonian

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.

Paulie_D

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.

edonian

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.

Paulie_D

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.

edonian

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?

TylerNYC

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

edonian

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

TylerNYC

Okay, I'm back.

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

edonian

I have been trying to figure it out, but I changed it back. Sorry! LOL

TylerNYC

Code tag failed here too.

TylerNYC

Deleted this comment, seems that /code isn't playing nicely!

edonian

LOL Aw..How cute! xD!

Hey, I'm not sure if it's sending the code correctly... if it's okay, can you send me the corrections by email? kaegome@yahoo.com

I REALLY appreciate this..omg.

Edit: It's not showing what I need to replace.

TylerNYC

Try this Edonian:

http://codepen.io/anon/pen/xEBth

(Sent you an email with the same link as well)

scribbleart

Hi! I am new to web design and development. I finished classes at the end of 2012. I am in the process of putting a site together and I am finding myself with the same problem. I want to add to many jquery scripts and they conflict. Here is what I am using: ParallaxContentSlider (http://tympanus.net/Development/ParallaxContentSlider/) And I would like to use the Facebook Wall (http://tutorialzine.com/2011/03/custom-facebook-wall-jquery-graph/) And I wanted to use the Sticky Bar Footer (http://www.dynamicdrive.com/dynamicindex17/stickybar.htm) --- AND the person who I am working with would like me to add another slideshow!!

Now, I have the parallax slider in place and working. When I add the footer, it just does not work. When I add the facebook wall, the information in the parallax slider disappears.

What do I do??? Any help you can offer would be a BIG HELP! Thanks.

treehouse : what would you like to learn today?

Forums

[Solved] Adding multiple javascripts in one page