SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery not loading properly

    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

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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?
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by AussieJohn View Post
    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.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Tough one.
    Do you have more than one browser you could test on.
    Do you get the same error cross browsers?

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Cyanide_Pierce View Post
    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).
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  10. #10
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Cyanide_Pierce View Post
    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:

    Code javascript:
    $(document).ready(function(){
     
      $("#nivo").load("nivo.php", function() {
     
        $("#nivo").nivoSlider(); // http://nivo.dev7studios.com/support/jquery-plugin-usage/ for options
     
      });
     
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  11. #11
    SitePoint Enthusiast
    Join Date
    Jun 2011
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,900
    Mentioned
    212 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Cyanide_Pierce View Post
    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:
    Code:
    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).


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
  •