Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Jquery slider - works locally but not online

jerseydudek
in Website Design and UX

Featured Replies

Hi,

 

Can anyone see why this slider isn't working online. It works fine locally but not online. It's obviously something to do with a filepath to a .js file or something but I've looked and looked and can't see what's missing. I've tried all sorts and it's doing my head in.

 

Here's the site: http://www.chestersrestaurant.co.uk/testsite/current2.html

 

I did post another question about this project earlier but that's another subject so I wont merge the two.

 

One step forward, 15 steps back it's been like today.

 

I'm going home.

 

Thanks for any help in advance.

 

 

Debug using firebug console:

"NetworkError: 404 Not Found - http://www.chestersrestaurant.co.uk/fonts/museo_slab_300-webfont.ttf"

Yup, you have a missing JS file. You've also included the same file twice, one minified and one normal.

You're also calling 3 different versions of Jquery, the last is replacing the responsiveslides extended version.

You only need one version.

Consider using jsDelivr to call your scripts

<script src="https://cdn.jsdelivr.net/g/jquery@1.11.1,modernizr,jquery.responsiveslides"></script>

All your scripts in one HTTP request, minified and concatenated :) (Just remember to call them in order of dependency).

jsDelivr multiple files

Edited by Wynn

  • Author

Ok, thanks for your feedback.

 

I've tried to tidy it up but it's still not working. I'm still not getting something obviously. I think the problem stems from the fact I'm pulling together the code for a responsive grid system from one source, a responsive navigation structure from another source, and this jquery slider. It's the most complicated header section I've ever done I reckon (and probably the messiest!!).

 

But this is what I've done:

 

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.js"></script>

Also, I'm not sure if this section goes at the bottom of the body, or in the header (according to the instructions for the slider at http://responsiveslides.com/ this is supposed to "hook up" the slideshow. At the moment I've put it at the bottom of the body. Is that right? This is the bit I mean:

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

I know my ignorance is showing but hopefully I'll learn something from this exercise!?

 

Thanks again.

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.js"></script>

You have two versions of jquery loaded, both different version numbers, that could be problematic in itself.

  • Author

So I got rid of one version like this:

 

<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.js"></script>

and put the changed file here: http://www.chestersrestaurant.co.uk/testsite/current3.html

and still no joy!?

I guess that's not what you meant?

  • Author

I've tried removing what I think is the unnecessary line 2 ways like this:

 

<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.js"></script>

and published the save file here - http://www.chestersrestaurant.co.uk/testsite/current3.html

 

Then tried removing the other line:

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/responsiveslides.js"></script>

and published the saved file here - http://www.chestersrestaurant.co.uk/testsite/current4.html

 

Still no luck!!! . . . .

 

I'm still missing something.

I think you need to have a clear out of all the files you're not using. There are so many external JS and CSS files in your source that probably aren't required. 13 stylesheets for a grid system is worrying.

I think the intention is to choose the grid that you need per template, wether that's two cols or twelve. Including all of them probably does nothing but add additional http requests. It's much easier to debug a clean document.

On Localhost, the call to the jQuery CDN is actually looking for a location on your file system e.g. file://ajax.google.com, and is therefore not being enforced. The reason why your scripts are working locally is because you're already calling a different version of jQuery further up the page (in the <head>), and there's no conflict because the Google version of jQuery isn't being used.

 

When you're putting the files online, the jQuery CDN script is being enforced as it should, so now you've got two versions of jQuery running, which is probably causing a conflict in your plugins.

 

You should only be using one version of jQuery. Try that and see what happens.

Edited by Lyndsey

  • Author

@Lyndsey:- I must be sounding so dumb . . . so which line do I remove? I've tried both (see above)

@@Jack :- I take your point jack. I'll probably only need 3 out of those css files. I'll sort that out now. Thanks for pointing it out. My intention was to clean it up once I'd completed the design. But you're right. In a situation like this it makes looking for things like . . . . well, searching for a haystack which might have a needle in it!

Assuming you already have jquery loaded, you can remove this.

	<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
  • Author

Thaaaaaank you Jack. Result!!

 

http://www.chestersrestaurant.co.uk/testsite/success.html

 

Now all I've got to do is sort out why the drop down navigation at mobile screen sizes goes behind the slider instead of over in Safari!

 

Then I can start working on the design.

 

Thank you all so much for your help.

No worries, Lyndsey's post was a big help finding the issue. She's not bad at this, considering she builds furniture for a living.

 

I'll look at that dropdown thing now. Sounds like a z-index issue.

Glad you've got it working Jerseydude!

 

No worries, Lyndsey's post was a big help finding the issue. She's not bad at this, considering she builds furniture for a living.

 

I'll look at that dropdown thing now. Sounds like a z-index issue.

 

I think you've got me confused with someone else Jack :p

I think you've got me confused with someone else Jack :p

 

You're the table crafter right? Maybe it was me, I just don't know anymore.

Nah, I'm a web developer, but that sounds very interesting lol :p

 

Must be 4li4s then.

 

jerseydudek - I'm downloading Safari now, but I've got 80's music streaming and it could be a while.

Apparently Safari on Windows doesn't have any dev tools. I can look at this later if no one else chips in before then.

Thanks Junior. I'll look in to that closer as you suggest. I was following their instructions on the main page though . . . or so I thought!

Yeah the code looks to be the same an as you say it works locally but not online. It may be a starting point

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.