SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with multiple javascripts?

    I'm currently working on building a site as part of an external University project. I have basic knowledge of coding and have got to a point where I'm a little out of my depth. The page that I am having trouble with is the home page as I want to run a javascript twitter feed and a slideshow on the same page. I have never used javascript before and have tried to follow tutorials and other forum posts, but I don't really know what I'm doing and it is taking up to much of my time trying to work out what I'm doing wrong.

    I have placed the files for sharing with this link; as I am unsure how to do it here: https://www.dropbox.com/sh/zl5qonxri3scflj/SVRseVEDKT

    Any help with this would really help me out a lot.

    Thank you

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    Any help with this would really help me out a lot.
    Currently when I load your page, I'm getting errors about the following files failing to load:
    • css/slideshow.css
    • js/jquery.cycle.js
    • js/slideshow.js
    • images/bird.png
    • loader.gif
    Last edited by paul_wilkins; Sep 11, 2012 at 15:19. Reason: s/birg/bird
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Currently when I load your page, I'm getting errors about the following files failing to load:
    • css/slideshow.css
    • js/jquery.cycle.js
    • js/slideshow.js
    • images/bird.png
    • loader.gif

    I have tried search for image/birg.png and can't find where that is in the code, but it should be images/bird.png. I have added the slideshow.css to a new css folder; but I am unsure what loader.gif is, as I have searched my computer and can't find it anywhere.

    I am unsure why the files won't load, but they are all place in the correct paths that you have said,
    Last edited by paul_wilkins; Sep 11, 2012 at 15:19. Reason: propagate spelling correction to quote

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    I have tried search for image/birg.png and can't find where that is in the code, but it should be images/bird.png. I have added the slideshow.css to a new css folder; but I am unsure what loader.gif is, as I have searched my computer and can't find it anywhere.

    I am unsure why the files won't load, but they are all place in the correct paths that you have said,
    There wasn't a slideshow.css file in the zip that I unpacked.

    For jquery.cycle.js and slideshow.js, those are due to the pathing on the filenames

    HTML Code:
    <script type="text/javascript" src="../../../Desktop/stf_root/js/jquery.cycle.js"></script>
    <script type="text/javascript" src="../../../Desktop/stf_root/js/slideshow.js"></script>
    If they're relative to the html file being loaded, you really should just use instead "js/jquery.cycle.js"

    The same problem occurs in the CSS file too, with:

    Code css:
    #bird {background-image:url(../stf_root/images/bird.png); background-repeat:no-repeat; width: 49px;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    There wasn't a slideshow.css file in the zip that I unpacked.

    For jquery.cycle.js and slideshow.js, those are due to the pathing on the filenames

    HTML Code:
    <script type="text/javascript" src="../../../Desktop/stf_root/js/jquery.cycle.js"></script>
    <script type="text/javascript" src="../../../Desktop/stf_root/js/slideshow.js"></script>
    If they're relative to the html file being loaded, you really should just use instead "js/jquery.cycle.js"

    The same problem occurs in the CSS file too, with:

    Code css:
    #bird {background-image:url(../stf_root/images/bird.png); background-repeat:no-repeat; width: 49px;

    I have fixed what you said, but I can't seem to get the files to upload to here in a zip, but all the files are in the link that I posted earlier.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    I have fixed what you said, but I can't seem to get the files to upload to here in a zip, but all the files are in the link that I posted earlier.
    I still don't see the slideshow.css file in your zip file. Where did you get the slideshow from?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    slideshow.txt
    I have attached it here.
    It is also in the main CSS of my site (stf_style_sheet.css).

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    I have attached it here.
    Thanks. It seems that after loading jquery and the cycle plugin, you are loading jquery again and are then thereby clobbering the cycle that was initially there.

    Get rid of multiple attempts to load jquery.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not really sure what you mean. I have the:
    <script type="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="/js/slideshow.js"></script>
    in the Head tag, but where is it loading again?

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    I'm not really sure what you mean. I have the:
    <script type="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="/js/slideshow.js"></script>
    in the Head tag, but where is it loading again?
    I'm getting confused by all of the updates. Let's start again.

    Please provide what you currently have.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    On the index page I wants to have the twitter feed, which is the script labelled //Twitter in the <head>. This has been working fine, up until the point where I added the script for the slideshow.

    This is the original file that I downloaded with the slideshow in:
    demo.zip

    Since downloading it, I've changed the styling the slideshow.css. Which I also added to my site stf_style_sheet.css.

    I added the <script type="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="/js/slideshow.js"></script>
    to run the slideshow in the <head> tag.

    I'm unsure what <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    is doing, but I think its for the twitter feed.
    But I've just realised that this is in the <head> twice, is that what you meant that I should delete?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by meganj15 View Post
    I'm unsure what <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    is doing, but I think its for the twitter feed.
    But I've just realised that this is in the <head> twice, is that what you meant that I should delete?
    That's the jQuery library. You should only load that once, and ensure that it's loaded before anything else that requires it, such as the jquery cycle plugin.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Sep 2012
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have placed
    HTML Code:
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.cycle.js"></script>
    <script type="text/javascript" src="/js/slideshow.js"></script>
    at the top of the <head>, and deleted the first line which was repeated.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •