CODEWITHSUNDEEP
javascriptjqueryhtmlanchor
Austin A
Austin A

Reputation: 3138

Javascript conflicting with html anchor

I'm currently creating a website which has a persistent header and footer. To cut down on code duplication, I use jquery to load the header.html and footer.html when each different page is loaded.

Each html page which uses this header and footer, loads it with the code below.

<!-- Header and footer loading -->
<script> 
  $(function() {
    $("#header").load("header.html"); 
    $("#footer").load("footer.html");
  });
</script>

<div id="header">
  (header.html content rendered here)
</div>

The best way to explain this next part is by going to the site I have linked. What I would like to do is have the drop down button take a user to the specific section of the equipment page from any other page on the website. As you can currently see, this function only works if the user is already on the equipment page.

From everything I've read, cross page anchors should be setup the same way as in-page anchors. Use <a href="equipment.html#anchorname></a> and then link it to the page with <a id="anchorname></a>. However, this approach is only working when the user is on the same page as the anchor. I'm pretty sure this is due to the timing of anchor mechanism and when the jQuery code runs.

My two questions are...

  1. Could someone explain the sequence of events that are taking place which are causing my anchor not to work.
  2. What do I need to do in order to get my cross-site anchors to work properly?

Thanks and let me know if you need specific code snippets or have any questions.

Upvotes: 0

Views: 562

Answers (2)

Drakes
Drakes

Reputation: 23660

Your cross-page anchors are working exactly as intended. Consider your base HTML page with JavaScript disabled:

the page

Then #gradalls or #trucks will "scroll" to that respective anchor immediately. I say "scroll" because there is not enough content to scroll anywhere - the page will just sit there, stationary.

Next, your series of jQuery load events will fire like so:

$(function() {
  $("#header").load("header.html"); 
  $("#footer").load("footer.html");
  $("#xl4100-99").load("xl4100_99.html");
  $("#xl4200-95").load("xl4200_95.html");
  $("#lowboy-93").load("lowboy_93.html");
  $("#gmctruck-93").load("gmctruck_93.html");
});

They will populate various containers in your page and the content will grow downwards, however, the page will not scroll. That has already happened.

Solution 1

The best solution, and SEO friendly one, is to simply include the content in each page and not dynamically load it in. In fact, in addition to your keywords, a search engine simulator will only see

Dave Ankney Gradall Equipment Gradalls Trailers Trucks

and no links whatsoever. Then it may go away for a long time because there was nothing juicy there. Since you are using S3, you have to manually include the content in each page.

Solution 2

Either that, or use a proper server backend like PHP, in which case you can just include each part of the HTML like so:

<body>
  <div class="main">
    <div id="header"><?php include("header.php"); ?>
    </div>

(Only rename header.html to header.php)

Solution 3

If you really just want to get the jump to work, you can change your JS like so:

<!-- Header and footer loading -->
<script>
$(function() {
  // Create Deferred instances that can be handed to $.when()
  var d1 = $.Deferred();
  var d2 = $.Deferred();
  // var d3 = 
  // var d4 = 

  // Set up a chain of events
  $.when(d1, d2).then(function() {
    // When everything has loaded, jump to the fragment
    var hash = window.location.hash
    if (hash !== "") {
      window.location.hash = hash;
    }
  });

  // Perform the load calls
  $("#header").load("header.html", function() { d1.resolve(); });
  $("#footer").load("footer.html", function() { d2.resolve(); });
  // ...
});
</script>

I hope this is what you are looking for.

Upvotes: 1

Hassan
Hassan

Reputation: 251

it might help you

read the url and split the url on hash tag after complete loading of page call the below method....

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Upvotes: 0

Related Questions