We help IT Professionals succeed at work.
Private
Troubleshooting Question

HTML: link to element id doesn't work

22 Views
Last Modified: 2020-11-18
Hello, I am having a strange issue which is new for me. I'm building a website with Wordpress.
On this page you'll see a grid with some beers.
http://test.ilgufoblu.net/birrificio44/

Each beer is presented more widely on another page, one row for each beer, and each row has an specific id for that beer. But the links I've created all bring me to the top of this page: http://test.ilgufoblu.net/birrificio44/birre/ instead of taking me directly to the specific beer.

So for instance, this link http://test.ilgufoblu.net/birrificio44/birre/#bianca , which should take me straight from the home page to the row with that beer's description, just takes me to the top of the http://test.ilgufoblu.net/birrificio44/birre/  page.

If I'm already on the page though, the #beername links work.

I've done this many times with no problem, something's eluding me.
Hope someone can help me. Thanks.
Comment
Watch Question

HainKurtSr. System Analyst
CERTIFIED EXPERT
they are all pointing to the same page
http://test.ilgufoblu.net/birrificio44/birre/

I guess you should pass parameter correctly like

http://test.ilgufoblu.net/birrificio44/birre/?name=alice

or somehow you should url-rewrite

do you have code for
http://test.ilgufoblu.net/birrificio44/birre/ 

what do you expect here, which parameter?
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
The beers are all on that page, but the links point, for instance, to http://test.ilgufoblu.net/birrificio44/birre/#alessia

But when I click that link I just get to the top of the page, not to the element with id="alessia", although the element exists.
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011
I've seen this issue before I think. When the link href's and id's were all set correctly, it still didn't work, and it turned out to be caused by unmatched html tags in the destination page. eg a <div> tag without a </div> tag.
HainKurtSr. System Analyst
CERTIFIED EXPERT
got it...
can you add this to your beer page

$(document).ready(function () {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 250);
        }
    });
Terry WoodsWeb Developer, specialising in WordPress
CERTIFIED EXPERT
Most Valuable Expert 2011
On looking at your site, I'm not sure you have the same issue though. Instead, I think your issue might be caused by either content in the site being "lazy loaded" (ie it doesn't load until javascript detects you scrolling down the page) or race conditions (I think that's the correct term) where the browser tries to scroll down the page before the target content has loaded.

I see that once I've loaded the URL http://test.ilgufoblu.net/birrificio44/birre/#alisa I can then hit enter in my browser address bar and it then jumps to the correct location in the page.
HainKurtSr. System Analyst
CERTIFIED EXPERT
try
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 250);
};
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
@HainKurt, I've added the code but it doesn't work. Is it checking for Chrome? I'm working on Firefox, but it doesn't work on either browser.
HainKurtSr. System Analyst
CERTIFIED EXPERT
looks like a chrome bug, and above sript fixes it

Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
With the second script it works on Chrome. Doesn't seem to work on Firefox.
Sr. System Analyst
CERTIFIED EXPERT
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
If I remove your Chrome check, it works on Firefox too.
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
Oh, you had already suggested that.

HainKurtSr. System Analyst
CERTIFIED EXPERT
if this fails on IE for example,
then go back to original code and add the browsers which is not working
run this on console to get what the browser is


var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
var isFireFox = /Firefox/.test(navigator.userAgent);
if (window.location.hash && (isChrome || isFireFox)) {
            setTimeout(function () {
                var hash = window.location.hash;
                window.location.hash = "";
                window.location.hash = hash;
            }, 250);
};
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
Still would like to know the cause. Don't think it's a bug, I think Terry's right about lazy loading or race conditions botching something in the timing.

Your script takes the hash (if it's there), removes it and adds it back again after waiting for 250ms, is that right? So something is just messing with the link.

Well, you've solved it anyhow, so I'll mark it as solved, thanks a lot.

But if someone should find out the actual cause it would be great.
HainKurtSr. System Analyst
CERTIFIED EXPERT
and if content is slow, or above code fails sometimes, then increase 250 to 500 or 750 or 1000 (1 second)
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
Doesn't work on mobile though, Chrome on Android at least.
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
I have no idea what that div's doing there. It's not handwritten since it's a Wordpress site.
HainKurtSr. System Analyst
CERTIFIED EXPERT
go tho this url
and see if you can see anything wrong with HTML
and fix those ones
https://validator.w3.org/nu/?doc=http%3A%2F%2Ftest.ilgufoblu.net%2Fbirrificio44%2Fbirre%2F
HainKurtSr. System Analyst
CERTIFIED EXPERT
I have no idea what that div's doing there. It's not handwritten since it's a Wordpress site. 

ignore it, it is my Ghostery PlugIn :)
I deleted my comment
Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
If I raise the timing it works on mobile too. Still would be better to find the cause. I'll download the page source and see if something is messing with the html.
HainKurtSr. System Analyst
CERTIFIED EXPERT
for example this one


Daniele BrunengoIT Consultant, Web Designer

Author

Commented:
There's a duplicate id, I think that may be it. I'll check it out in the morning, it's 2 am here in Italy. Thanks for the wonderful help, I'll update if I find the culprit.
HainKurtSr. System Analyst
CERTIFIED EXPERT
it may be anything with html that causes it...
just try to find it... w3validor will help you
or remove half content of your page, test it
then another half
then quarter...
until you find the issue...
gl...