0

Pre-requisite knowledge:

In my website's footer, there are links that redirect user to the website's company page, say www.example.com/company.html#first .

Clicking this link would trigger the default browser behavior i.e. it will redirect to www.example.com/company.html#first and bring into view the div with id = "first".

But in my company.html's dom, there is no div with id = "first" (I have got my reasons due to which I can't provide the id to the concerned div but that's a separate issue). Moreover, I am using the url's hash in some functionality due to which I'm bound to keep it to #first.

Question:

So, my question would be if I can bring a different div into view - the parent element (which has an id available) of the div I failed to provide the id for as mentioned above on the click of the footer link. Suggestions are welcome as well!

Prashant Singhal
  • 139
  • 1
  • 10
  • If the ID is not available in the DOM, how would you find the parent of the div? – Bram Vanroy Sep 01 '16 at 18:53
  • @BramVanroy Sorry, should've mentioned that the parent div's id (say div#parent) is in fact available. But there are multiple list items within this div#parent one of which is supposed to have id **#first** but that is not available. I have multiple links in footer which point to these list items; so I cannot simply target a single list item. – Prashant Singhal Sep 03 '16 at 10:19
  • Do you know in advance what the alternative `id` would be, if so you can use a map of the form `{ 'first' : 'alternativeToFirst' }` and use that to scroll to the appropriate element without changing the hash in the URL. – David Thomas Sep 03 '16 at 10:20

3 Answers3

0

Since you are indicating you have access to jQuery, you can write a script to change them after the fact like

var link1 = $('a[href="http://www.example.com/company.html#first"]');
$(link1).attr('href','http://www.example.com/company.html#mydiv');

That way you will change the url you really want it to point. You'll do something similar for each one of them.

Running Buffalo
  • 1,243
  • 2
  • 9
  • 17
0

Of interest might be to provide he links in the footer with a fallback URL presented as a data-* attribute. E.g.

<a href="www.example.com/company.html#first" data-fallback="www.example.com/company.html#first-parent" title="First">First</a>

In jQuery you could then do something like this (untested):

$("a").click(function(e) {
  if (window.location.hash) {
    // Don't follow the link initially
    e.preventDefault();

    var url = this.href,
      // Borrowed from: http://stackoverflow.com/a/4426201/1150683
      el = $(url.substring(url.indexOf('#') + 1));

    // If element exists
    if (el.length > 0) {
      window.location.href = url;
    } else {
      window.location.href = $(this).data("fallback");
    }
  }
});
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
  • The data-fallback looks like a really nice way to go forward but this won't be a solution to my problem as the condition `el.length > 0` will always be true for my scenario. Thanks anyways, now I can atleast optimize my code :) – Prashant Singhal Sep 02 '16 at 08:16
  • Then what determines if the original anchor should be followed or not? If I click a link, and it has a hash -- when should it be followed, and when shouldn't it be? – Bram Vanroy Sep 02 '16 at 08:37
  • The original anchor is followed because I have not prevented default click action on it - clicking on the footer link `a[href="/company.html#first"]` takes us to company.html but since it is unable to find `#first`, the top of the page is brought into view. – Prashant Singhal Sep 03 '16 at 10:33
0

So I did solve my own problem but only by hardcoding the url hash available. It's kind of dirty and the script would be called on every page but I think that's what I will use for now. I use $(document).ready() like this:

$(document).ready(function() {
if (location.pathname.split('/')[1] === 'company.html' && $.inArray(location.hash.split('#')[1], ['first', 'second', 'third']) > -1) {
  $('#parent').get(0).scrollIntoView();
}
});
Prashant Singhal
  • 139
  • 1
  • 10