Help with multiple javascripts?

JavaScript
1

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

Currently when I load your page, I’m getting errors about the following files failing to load:

[list][]css/slideshow.css
[]js/jquery.cycle.js
[]js/slideshow.js
[]images/bird.png
[*]loader.gif
[/list]

3

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,

4

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


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


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

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

I still don’t see the slideshow.css file in your zip file. Where did you get the slideshow from?

7

I have attached it here.
It is also in the main CSS of my site (stf_style_sheet.css).

8

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.

9

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

I’m getting confused by all of the updates. Let’s start again.

Please provide what you currently have.

11

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:

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

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.

13

I have placed

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