jQuery not loading properly

[Cyanide_Pierce]

Trying to display content depending on the viewport size
When entering in the URI it will say it has loaded but the content wont show.
However if i hit refresh / F5 then it will show

JQUERY
$(document).ready(function() {
var viewportWidth = $(window).width();
if(viewportWidth > 550){
$("#nivo").load("nivo.php");
}
});

HTML
<div id="nivo"></div>


Many Thanks in advanced

[AussieJohn]

Do you perhaps have a sample page up somewhere? This code looks like it should be working just fine on its own.

Also, is this happening across browsers or only in a particular one?

[Cyanide_Pierce]

On my machine locally it wasnt working on enter at all, but live it works sometimes on enter

http://www.piercemcgeough.co.uk/liveproject/index.html

[AussieJohn]

I just had a look and it seems to be working ok for me on the site (Using Chrome).

When you're viewing it locally, are you serving it through a local webserver or are you merely opening the HTML file in the browser (e.g. http://localhost/liveproject/index.html vs file:///C:/liveproject/index.html)

If you are trying to load it from the filesystem, depending on the browser you might get different results as some do not allow AJAX requests to the local filesystem.

[Pullo]

If you are trying to load it from the filesystem, depending on the browser you might get different results as some do not allow AJAX requests to the local filesystem.

I get the same result.
In Chrome the sample page you link to behaves as expected.
However, locally it falls foul of Chrome's Access-Control-Allow-Origin and fails silently.

[Cyanide_Pierce]

It appears to be a problem with my localhost.
I am using xampp and am accessing it via localhost/websites/piercemcgeough.co.uk/liveproject/
Is there anything i can to to make sure it loads as expected locally?

Pierce

[Pullo]

Tough one.
Do you have more than one browser you could test on.
Do you get the same error cross browsers?

[AussieJohn]

It appears to be a problem with my localhost.
I am using xampp and am accessing it via localhost/websites/piercemcgeough.co.uk/liveproject/
Is there anything i can to to make sure it loads as expected locally?

Pierce

Some things to check off the list:
- Check that jQuery is loading properly
- Does this fail consistently locally or is it seemingly sporadic?
- Does it fail only when opening the site for the first time in a browser session, or does it also happen if you hit refresh?
- Check your apache error log right after a failure to see if there are any server side errors that could be preventing the file from loading (in the default xampp installation that would be C:\xampp\apache\logs\error.log
- Like Pullo said, try to reproduce this in a different browser. Also, check the browser's console (F12 in a few browsers, then head to the "console" tab) for any errors).

[Cyanide_Pierce]

I know you said it was working but go to the site again please http://www.piercemcgeough.co.uk/liveproject/
On initial page load it will work but if you click services and then back to home it will disappear again. Services page doesnt have the slider on it.

jQuery does seem to be loading properly
fails consistently with and hitting enter in the url live and locally
works consistently with F5 / Refresh live and locally
results consistent across FF IE Chrome
error log shows no errors

This is strange
Any ideas guys?

[AussieJohn]

Any ideas guys?

Here's an idea - Can you try to manually instantiate the nivo slider after it is loaded?

When I navigate from the services page back to the home page, I can see that the slider is injected properly, but I suspect that the default nivoslider script gets loaded from cache a lot faster and then doesn't see any sliders in the DOM.

Give something like this a try:

$(document).ready(function(){
 
  $("#nivo").load("nivo.php", function() {
 
    $("#nivo").nivoSlider(); // http://nivo.dev7studios.com/support/jquery-plugin-usage/ for options
 
  });
 
});

[Cyanide_Pierce]

So if you navigate from services back to home does it appear?
No that code didnt work.
I can just go back to using $("#nivo").hide(); and $("#nivo").show();
I was just looking for a way to remove code from the page to make it lighter for smaller screen sizes

Pierce

[Pullo]

So if you navigate from services back to home does it appear?

Nope. I now understand your problem and can reproduce it.

If you use Chrome's web dev tools to analyse the page, on the first page load you see the following warning:

Resource interpreted as Image but transferred with MIME type text/html: "http://www.piercemcgeough.co.uk/liveproject/index.html"

Maybe the PHP file is being transferred with the wrong MIME type?

What happens if you remove the images from the PHP file and replace them with some randome text (just for testing purposes).