Grow your CSS skills. Land your dream job.

Getting three scripts to work on one page. possible??

  • # March 20, 2013 at 11:28 am

    So, how will I get my slides on the Parallax Slider to show again. Before I added the sticky bar and the facewall. My slides showed fine.

    Do you think this will ever work…. or should I find another way to create my footer and facebook call?

    Thanks

    # March 20, 2013 at 12:22 pm

    Can I ask…?

    I want to forewarn you that I can be a bit anal-retentive when it comes to detail, but I would like to know more about your development process for this website.

    Also, please bare with me all if you have already answered to anything that I am about to ask or state, as I am going purely off of scribbleart’s original post. No I have not read in detail any responses, simply because it seems that this is an open issue and has yet to be resolved.

    Personally, I believe that more details need to be provided to not only help with the current issue, but as scribbleart has expressed, the client is going to want future work, as for now an additional slideshow. When a person is scrambling on what to do in the future, when they are already presented with a problem, this causes me to ‘want to know more’ about the entire process.

    So, with that said…

    Scribbleart, my first concern is what languages are you developing in?

    Client-Side: HTML, CSS, jQuery (Obviously), anything else?

    Server-Side: ASP, .NET, JAVA, PHP, something else?

    You say that you are new to the industry….

    > “I am in the process of putting a site together and I am finding that my javascripts will not play nice with one another. I want to add too many jquery scripts and they conflict.”

    Are you using just jQuery, or do you have something else running as well, such as RAW JavaScript, MooTools, Prototype, etc? If so you need to ensure that you are using the no_conflict statement and make some slight modifications to the other’s identifiers… Also, a rule of thumb, don’t use more than one ‘js library’, find one that you work best with and stick with just that one. Another thing that you want to make sure of is that you are not using key identifiers more than once. This goes for the jQuery itself as well as the CSS Markup.

    You said

    > “Now, since then….. I followed advice to put all the scripts at the bottom of the page and limit my calls for jquery to one. I did this and the page is looking rough- and none of the scripts are working.”

    Why in the hell are you doing this? Always place your JavaScript in the < 'head'> section! I know I may get alot of haters on this, but don’t do that. There are much better ways to reduce site/page load times and by doing this you can also end up with problems that you normally wouldn’t have. This is something that many people are conforming to, but just because that’s the case does not make it right! I also challenge anyone to show me evidence that this method actually does anything substantial for a website other than cause a headache and bad coding methods.

    If you want faster load times, please refer to Chris’s Tutorial on the subject, [http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/](http://css-tricks.com/video-screencasts/114-lets-do-simple-stuff-to-make-our-websites-faster/ “Faster Load Times”)

    # March 20, 2013 at 1:55 pm

    Thanks for your help.
    I have an art background and went back to get my web design credentials. My course work was not extensive in the areas of development. However, I did have a course on javascript – that covered jquery, ajax. In fact the course did not cover how to use more than one script on a page. I was taught how to put together a simple script and then… how to use developed scripts. SO, that is what I have done here. I found 3 scripts that worked for my needs and I attempted to add them to my page. (I sited the scripts that I used in the first post)

    Since my skill set is limited, I had tried to follow all the advice that I was given. So, I put all the scripts at the bottom of the page and moved things , took things out –as people suggested. I just don’t seem to be making much progress.

    # March 20, 2013 at 2:23 pm

    Ok, so what is your level of knowledge on HTML, CSS?

    # March 20, 2013 at 2:25 pm

    It is very possible to have three scripts on the same page, however, you need to ensure that nothing is conflicting such as duplicate identifiers in your js and/or duplicate ids and/or classes in your css…

    # March 20, 2013 at 2:33 pm

    Ensure that you always call for your external documents (meaning outside the page) into your < 'head'> section of your page in the following order:

    Stylesheets (CSS)

    JavaScript Library (jQuery in your case)

    jQuery Scripts

    Inline jQuery Scripts

    Don’t call a secondary script before you’re done with the first script. You want to make sure that you work on one at a time, typically from the top of the page down, before continuing onto the next one. This way it is easier to locate and troubleshoot your problems…

    # March 20, 2013 at 2:37 pm

    Also, with CSS it is best to have everything in a single stylesheet (as much as possible) and use section labeling in the document to locate specific areas for modification. The reason being that it adds to your load time calling more documents. Browsers typically load 1-2 files at a time. This can be modified on your side, but regardless, the end-users will only have the limit of 1-2. Same goes with images. Best practice is to use sprites…

    # March 20, 2013 at 2:39 pm

    If I am losing you at this point, I’m afraid that you have much to learn before taking on website development/ design. If you’re still with me, then let me know where you are at. If you would like, you can send me your files in a zip and I can take a look through them…

    # March 21, 2013 at 11:01 am

    Thank you. I have a good working knowledge of HTML and CSS. And I try to put everything into one CSS file.- Except -when I add a JS script, I usually add a style sheet for it.

    # March 21, 2013 at 11:09 am

    > Always place your JavaScript in the < 'head'> section! I know I may get a lot of haters on this, but don’t do that.

    You sure will.

    In a lot of cases, the JS isn’t needed until the page is fully loaded. So that the bottom of the page is the place to ‘activate’ that JS.

    If you put modernizer or responsive.js in the footer the screen will have to redraw / repaint based on that JS after it’s already loaded / painted.

    By all means put **essential** scripts in the head. Other scripts can wait until the end. In fact, I dare to say, that’s best practise.

    # April 12, 2013 at 6:51 am

    Like I said, I know I would get haters on what I said about placing your JavaScript in the < 'head'> section, however… Some older browsers will sometimes ignore it and you may even have errors falsely reporting in the console. I spent quite a few weeks on a clients website (quite large with a lot of JS dependencies), along side two other veteran designers, having to re-structure their website because a lot of things were going haywire due to calling JS at the end of the document.

Viewing 11 posts - 16 through 26 (of 26 total)

You must be logged in to reply to this topic.

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