Hi! I am new to web design. I finished classes at the end of 2012. I posted a question a few weeks ago. But I got sick and could not follow up. I see that it has been marked as solved- SO, I am posting again.
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.
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. (my facebook wall and footer are not styled, yet)
What do I do??? Any help you can offer would be a BIG HELP! Thanks.
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.
http://crossfitchoice.com/choicewireframe.html
Is it salvageable? Is there a way to get it to work?
Right now your main issue is that all of your script tags are wrapped in an <a href="#togglebar">. Move them out of there. Your script tags should be the last thing before your closing body tag.
Great. That looks better. Now put your jQuery template scripts back into the content, wherever you want them rendered, leaving the other scripts in the same order.
Okay. I tried to do what you said. I am not sure if I moved too many of the scripts. But, I took what appeared to be the templates and placed them at the correct div.
What next?
I have not tested but try these
1. try to use only one jquery library
2. remove other jquery and see if individual works or not
3. if they works fine
4. try to put two jqueries together and see if they works or not,if they works then fine if not...they are conflicted
5. here is way to remove conflict
var me = jQuery.noConflict();
me(function() {
me('#da-slider').cslider({
autoplay : true,
bgincrement : 50,
interval : 9000
});
});
thank you for all your help. I guess I just need more training before I attempt a project like this. I am just really confused with all of this.
On top of that, I have all these files that I have tried with the page that are still lingering in attachment (even though I have removed the link from the page).
At least when I started it had one working element.
Any good tutorials out there on making more than one jquery work on a page???
I am so LOST it is not funny--- and kinda sad.
When I , first, put the page together, it went smooth and looked great--- until I tried to add the last two features. then I took things out of place and tried what I was told.... and I cant get one thing to work and NOW I have no clue what I am doing.
Are you familiar with Chrome's Developer Tools? Or Firebug? I think these would help you a lot. Your jQuery scripts broke because jQuery isn't defined. You're loading your scripts in the wrong order. You have to load jQuery before you load any of the plugins it depends on. If you're calling jQuery functions in the body of your page, make sure jQuery is loaded before you call those functions. Move
to the top of the page, or move all your other script calls after your jQuery call. Also check out this snippet for a really good idea to make sure your page doesn't break if your CDN fails. If your're concerned about page load speed, you could also load your scripts asynchronously via something like Yepnope (included with modernizr), but I don't really think that's necessary at this stage.
Okay, I attempted to do what you suggested. I added the code snippet to the head of the page. But it is all not working. when I load I (now ) get 7 errors or things that are not loading. I am not sure what is going on.
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?
"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.
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.
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...
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...
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...
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...
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.
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.
Hi! I am new to web design. I finished classes at the end of 2012. I posted a question a few weeks ago. But I got sick and could not follow up. I see that it has been marked as solved- SO, I am posting again.
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.
Here is what I am using: ParallaxContentSlider (http://tympanus.net/Development/ParallaxContentSlider/) The Facebook Wall (http://tutorialzine.com/2011/03/custom-facebook-wall-jquery-graph/) And 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. (my facebook wall and footer are not styled, yet)
What do I do??? Any help you can offer would be a BIG HELP! Thanks.
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. http://crossfitchoice.com/choicewireframe.html
Is it salvageable? Is there a way to get it to work?
Thanks
Right now your main issue is that all of your script tags are wrapped in an
<a href="#togglebar">. Move them out of there. Your script tags should be the last thing before your closing body tag.I think I have fixed that issue... by closing the tag.
All the scripts are down at the end of the page before the tag.
Great. That looks better. Now put your jQuery template scripts back into the content, wherever you want them rendered, leaving the other scripts in the same order.
Okay. I tried to do what you said. I am not sure if I moved too many of the scripts. But, I took what appeared to be the templates and placed them at the correct div. What next?
I have not tested but try these 1. try to use only one jquery library 2. remove other jquery and see if individual works or not 3. if they works fine 4. try to put two jqueries together and see if they works or not,if they works then fine if not...they are conflicted 5. here is way to remove conflict
var me = jQuery.noConflict(); me(function() { me('#da-slider').cslider({ autoplay : true, bgincrement : 50, interval : 9000 }); });last thing dont forget to put jquery library at the top of all js files in your case put at top
thank you for all your help. I guess I just need more training before I attempt a project like this. I am just really confused with all of this.
On top of that, I have all these files that I have tried with the page that are still lingering in attachment (even though I have removed the link from the page).
At least when I started it had one working element.
Any good tutorials out there on making more than one jquery work on a page???
I am so LOST it is not funny--- and kinda sad.
When I , first, put the page together, it went smooth and looked great--- until I tried to add the last two features. then I took things out of place and tried what I was told.... and I cant get one thing to work and NOW I have no clue what I am doing.
Super frustrated.
http://api.jquery.com/jQuery.noConflict/
try upload the file and disturbed it may be someone can help includeing me
the file is uploaded and posted at http://crossfitchoice.com/choicewireframe.html If you can help-- that would be GREAT.
Are you familiar with Chrome's Developer Tools? Or Firebug? I think these would help you a lot. Your jQuery scripts broke because jQuery isn't defined. You're loading your scripts in the wrong order. You have to load jQuery before you load any of the plugins it depends on. If you're calling jQuery functions in the body of your page, make sure jQuery is loaded before you call those functions. Move
to the top of the page, or move all your other script calls after your jQuery call. Also check out this snippet for a really good idea to make sure your page doesn't break if your CDN fails. If your're concerned about page load speed, you could also load your scripts asynchronously via something like Yepnope (included with modernizr), but I don't really think that's necessary at this stage.
... my code snippet broke, I was saying that you should move your reference to the jQuery CDN to the top of the page.
thanks, I will try that....
Okay, I attempted to do what you suggested. I added the code snippet to the head of the page. But it is all not working. when I load I (now ) get 7 errors or things that are not loading. I am not sure what is going on.
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
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....
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
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/
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.
Ok, so what is your level of knowledge on HTML, CSS?
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...
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...
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...
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...
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.
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.
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.