#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0

    Question How to load outside URL's with my script?


    Hi! I have a script that loads content into a div and also updates the URL accordingly. Whenever I click on a link in the menu, the content for that page gets loaded onto the div contentarea. It also does a couple of other things regarding the height of the div and automatic scrolling. The problem is, if I put any links inside contentarea itself, clicking on them doesn't really do anything. For example, if you go to THIS page on my site, you can see that there is a link to the contact us page. If I click on it, the link should clear the div and load the contact us content into contentarea.

    I have another issue that I think runs along the same lines. Look at the language selector at the top. If I click on Spanish, the page should be completely cleared and the site should load again in Spanish, but clicking on it doesn't really do anything.

    Here's my script:

    javascript Code:
    //Jquery loader
    function getHash() {
        return window.location.hash
    }
     
    $("a").on("click", function (e) {
     
        page = this.href.replace("#", "") + ".html",
            hash = $(this).prop("hash");
     
     
    $('#contentarea').load(page, function () {
     
      if (page.match("home.html")) {
        history.pushState('', document.title, window.location.pathname);
      } else {
        location.hash = hash;
      }
     
      var divHeight = $('#content').height();
     
      $('#contentarea').height(divHeight);
     
     
      $("html, body").animate({
      scrollTop: $(this).height()
      }, "7000");
     
    });
     
        e.preventDefault();
    });
     
    //on pageload
     
    history.pushState
    var hash = getHash();
    if (hash) {
        $("a[href='" + hash + "']").trigger("click");
    } else {
        $("a[href='#home']").trigger("click");
    }
     
     
    </script>


    As you can tell, I'm a newbie, so any feedback would be greatly appreciated. Thank you!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    It's because you are attaching a prevent default click event to all "a" tags. You need to give your navigation "a" tags; a specific class name and refer to it specifically in this area:
    Code:
    $("a").on("click", function (e) {
    something like...
    Code:
    $(".navigation_links").on("click", function (e) {
    Although, I would go with the .click() API and not this .on() API for this method.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0
    Thank you for your reply! I made the changes, but if you go to the forms page, clicking on the contact us link still doesn't lead anywhere. I'm sure it has something to do with the fact that I'm clicking from within the div, but I'm not sure how to fix that. Any clues?

    BTW, the language bar at the top works now because of your fix. Thanks!
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0
    I have another question. If I go to the Spanish website and I try to go back to the English website, the URL is not really updating, even though the English content is loading. How do I address that?
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    The link actually does work; it goes to this link: http://calstateautoparts.com/public/beta/#contactus.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    As far as the language link is concerned, it does not get the language or the the URL to change, when I click "English". Right now I am on the go; so I am not able to get a good look at your source code. If I get time over the next couple days..., I will try to take a more indept look at it.
    Last edited by web_loone08; July 31st, 2014 at 09:29 PM.
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0
    I didn't have the right file up. Now, if you go to forms you'll see that the link to contact us (which exists on the server) doesn't redirect anywhere. It works however, if you try open the link in a new tab.

    For the language management, I'm just using a translated copy of the main site and an href to that translated copy.The Spanish website is located in a folder inside of the main site, so its URL is /beta/es. Now, the English website is located at /beta. When I'm in the Spanish website and I click on the English link (beta/), I'm not being redirected anywhere, which is the same problem I'm seeing in the forms page I mentioned above. That's why I think they might be the same issue.

    Thank you for your help
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0
    Hi! Did you get a chance to check the issue? Any ideas?

    Thank you
  16. #9
  17. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    Originally Posted by melitica
    Hi! Did you get a chance to check the issue? Any ideas?

    Thank you
    Your link is dead; the "beta" directory gives this error code, when you visit it: "Not Found [CFN #0005]". So... "yes" and... "no"; I went to the link to replicate your issue, but the directory is down.
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2014
    Posts
    13
    Rep Power
    0
    The beta link doesn't exist anymore. You can access the website by going here. Sorry about that. And thanks!
  20. #11
  21. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,188
    Rep Power
    184
    It's because "forms.html" contains the link "Contact us"; which has a hard coded href attribute of "#contactus" (see your source code below):
    Code:
    <a href="/#contactus">Contact us</a>
    This is a anchor/hash; not an actual link; you need to replace it with:
    Code:
    <a href="/contactus.html">Contact us</a>

IMN logo majestic logo threadwatch logo seochat tools logo