Problem with goto anchor

@coderunnerSep 09.2021

I have a problem with anchor.
Can somebody help me with this …

Code page1.php
`<a href=’https://domain.com/page1.php#$row[3]’>goto anchor on page2</a>`

Code page2.php
`<a name=’$row[3}’>anchor</a>`

This doesn’t work.
What am I doing wrong?
Please help me …

Best regards

to post a comment

PHP

110 Comments(s) _↴

@coderunnerauthorSep 09.2021 — #Also tried on page2.php

<a id="$row[3]">anchor</a>

But that doesn't work either.

@ginerjmSep 09.2021 — #The anchor's name is not a php var - it is a string.

@NogDogSep 09.2021 — #If the value you want _is_ in that variable, are you actually in PHP mode at that point in the file? If not, you could try:

[code=php]
 <a id="<?php echo $row[3]; ?>">anchor</a>
 [/code]

@coderunnerauthorSep 09.2021 — #And there is not a work-around so I can still use this because the variable is in the link when I move mouse cursor over the link.

The link on page1.php shows like this

https://domain.com/page1.php#1234

which is correct.

But when I click on the link, it goes to the correct page but not to the anchor but to the top of the page2.php

Best regards.

@coderunnerauthorSep 09.2021 — #@NogDog

<a id="<?php echo $row[3]; ?>">anchor</a>

Already tried that but ...

Does not go to the anchor but to top of the page.

Weird ... do I do something wrong?

Best regards

@ginerjmSep 09.2021 — #What does your html page look like on the screen? Can you 'view' the contents and confirm that it says "1234" value?

@coderunnerauthorSep 10.2021 — #@ginerjm

As I said before when I put my mouse cursor on the link on page1.php I see the var

-> https://domain.com/page1.php#1234

Or is it something else you want to know?

What's the php code to see if the link (+anchor) is completely send to page2.php?

Regards

@ginerjmSep 10.2021 — #Ok - this is confusing but it should be so simple. Permit me to sum up things so that I'm sure what you are doing.

This is what you have already said:

Code page1.php

<a href='https://domain.com/page1.php#$row[3]'>goto anchor on page2</a>

Code page2.php

<a name='$row[3}'>anchor</a>

I am assuming that both of those bits of html are already wrapped in double quote or a heredocs block. Yes? That would mean that the actual html on each page looks like this:

Code page1.php

<a href='https://domain.com/page1.php#1234'>goto anchor on page2</a>

Code page2.php

<a name='1234'>anchor</a>

But this means that your link on page1 is trying to go to page1 again.

Did I copy something incorrectly?

@coderunnerauthorSep 10.2021 — #> @ginerjm#1636794 Code page1.php

> <a href='[https://domain.com/page1.php#1234'>goto](https://domain.com/page1.php#1234%27%3Egoto) anchor on page2</a>
>
> Code page2.php

> <a name='1234'>anchor</a>

That's exactly what I see when I open the view source of page1.php and page2.php

But it always goes to the top of page2.php and not to the anchor on page2.php ...

Regards

@ginerjmSep 10.2021 — #I must be having a couple of bad days here. The link on page 1 says to 'go to page1'

But the anchor you are indicating as your target spot is located on page2.

@coderunnerauthorSep 10.2021 — #Yes I didn't noticed it either.

It is indeed <a href='https://domain.com/page**2**.php#1234'>goto anchor on page2</a>

@ginerjmSep 10.2021 — #So now the code agrees with what you are running since until now you were showing us something that you re-typed for here and not copy/pasted from your actual script?

In that case there is something else that is not correct. You don't have multiple usages of that 1234 id?

@coderunnerauthorSep 10.2021 — #This is the copy and paste when I open the view source

code page1.php

&lt;a href="page2.php?taal=en#Basil"&gt;&lt;img style="cursor: url('magnify.cur'),default;" src="upload/Basil_(3).jpg" width="auto" height="185"&gt;

code page2.php

<a id="Basil">Basil</a>

All have their own anchor ... so no multiple usage of "Basil" id

Regards

@coderunnerauthorSep 10.2021 — #oh I forgot to add the closing </a> in code above page1.php ... sorry

@ginerjmSep 10.2021 — #Hmmm.. Can you write an href that includes not only the target id but also a query element? Don't use targets very much so I am not familiar with this usage.

PS - this is not what you started this topic with. Not nice. :)

@NogDogSep 10.2021 — #You aren't by any chance testing in Internet Explorer, are you? https://developer.mozilla.org/en-US/docs/Web/API/URL/hash#browser_compatibility

@NogDogSep 10.2021 — #When you click on the link with the #1234 and presumably the page refreshes, does the #1234 still show in the navigation bar of your browser? Just wondering if something in your application is doing a redirect and losing it along the way?

Also, hopefully a silly question, but... 🤷 Is there enough content after the element you're pointing at that it can actually be scrolled to the top of the window? (The browser won't just add space after the end of the document.)

Final thought: I believe id= is preferred over name=, though either should work (but if you use both, they must have the same value.) However, make sure only one element has that ID, otherwise the results are unpredictable at best.

@coderunnerauthorSep 10.2021 — #> @ginerjm

> PS - this is not what you started this topic with. Not nice.

What do mean? The code I started with is the code of the PHP page I wrote. The last code I gave you is source view in the browser (result) and simplified the code a little bit. Instead of a text I used a picture.

What do you mean with
> @ginerjm

> Can you write an href that includes not only the target id but also a query element?

Regards

@ginerjmSep 10.2021 — #The start of this topic was only asking about an href with a location reference. Not a query argument (the ? part). Makes a bit of difference to me since I've never seen it done before and not sure one can.

@ginerjmSep 10.2021 — #Ok - did a little testing and one can indeed write a href url that has both a query parm and a location id. So - what are you doing that you are not showing us that is causing your difficulty?

@farmlandpuppisaSep 10.2021 — #This is a great forum, I really enjoy reading all the topics.

@coderunnerauthorSep 10.2021 — #@NogDog

I use only one not both ... I tried "a id" and "a name" but not together.

Yes as you can see in an earlier post the anchor in the link on page1.php is the same as the anchor on page2.php, no extra spaces, etc, ...

This is the copy and paste when I open the view source in browser

code page1.php

&lt;a href="page2.php?taal=en#Basil"&gt;&lt;img style="cursor: url('magnify.cur'),default;" src="upload/Basil_(3).jpg" width="auto" height="185"&gt;&lt;/a&gt;

code page2.php

<a id="Basil">Basil</a>

Yes because I can scroll to the end of the page so enough free space beneath the photos.

That's what I thought too that's why I asked you for a php code that I can put temporary on page2.php to see if the complete link + anchor of page1.php arrives on page2.php

Regards

@ginerjmSep 10.2021 — #And what exactly does happen when you click on the link on page 1? Where is the cursor on page2? And how do you know it is wherever it is? Is the named anchor highlighted?

@coderunnerauthorSep 10.2021 — #On page1.php -> When I put my cursor on the link, the link shows at the left bottom of browser.

When I click on the link on page1.php it goes to the top of page2.php -> not to the anchor.

The cursor shows on page2.php

But I don't know if the anchor is send to page2.php

That's why I asked for a php code that I can put temporary on page2.php to see if the complete link + anchor of page1.php arrives on page2.php

Regards

@NogDogSep 10.2021 — #PHP would not do anything with the fragment (the part after the #), so it doesn't matter what PHP sees. As I stated above, if when you get to page2.php, does your browser show the "fragment" in the browser's navigation bar (or whatever you call it)? It's the browser that does the scrolling, not PHP.

@ginerjmSep 10.2021 — #As Nogdog says - what is in the address bar when you arrive on page 2? Does it show the "1234" thingie? If it does not that explains the problem but not what your page2 code is doing before the page is sent to the screen.

@coderunnerauthorSep 11.2021 — #Sorry for all the trouble but I think I know why it doesn't work.

I tried the code on a normal page without iframe and there it works.

It's the javascript which makes the iframe resizable that prevents the anchor to work correctly.

Now does anybody know how to write a working code for a resizable iframe. I need to use the resizable iframe.

This is the code of the resizable iframe (this code works perfect only not for anchors)

``<i>
 </i>		&lt;script type='text/javascript'&gt;
 /* &lt;![CDATA[ */
 function frameSize(id){
 var theheight;
 document.getElementById(id).height = 0;
 
 if(document.getElementById) {
 theheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
 }
 
 document.getElementById(id).height = theheight;
 }
 /* ]]&gt; */
 &lt;/script&gt;
 
 &lt;iframe src="page1.php?taal=&lt;?php echo($taal)?&gt;" name="test" id="test" width="100%" height="100%" 
 frameborder="0" marginwidth="0" scrolling="no" style="visibility:hidden;" allowTransparency="true" onload="frameSize('test'); this.style.visibility = 'visible';"&gt;<i>
 
 
 </i>``

@coderunnerauthorSep 11.2021 — #What do I have to change in above code so the anchors will work?

Or should I asked this in another new topic?

Regards

@NogDogSep 11.2021 — #Wait...is it the content in the _iframe_ you're expecting to scroll to the ID in the URL pointing to _its_ src content? If so, it's not going to scroll since your javascript is setting its height to contain everything so that it doesn't need to scroll (if I'm reading it correctly). The only thing the main page that contains that iframe could target via the main page URL is the ID of the iframe element itself -- not anything in its content. (Okay, I'm about 90% confident of what I've just written, so someone more expert on this than me -- and that could be a lot of people here -- might prove me wrong. :) )

@coderunnerauthorSep 11.2021 — #Thank you NogDog for your reply, it's very clear that what you say.

So shall I wait till somebody here will come with a working resizable iframe script or shall I give up and stop replying cause it's impossible?

Regards

@SempervivumSep 11.2021 — #>The only thing the main page that contains that iframe could target via the main page URL is the ID of the iframe element itself -- not anything in its content.

That's not completely true, the content of an iFrame can be accessed by the master page, however there is the SOP active: It's possible only if the iFrame is located on the same domain as the master page and protocol and port are identical. If not, the browser will block access.

Does this apply to your iFrame @coderunner?

@coderunnerauthorSep 11.2021 — #All pages are located on the same domain and even in the same folder.

Regards

@SempervivumSep 11.2021 — #Then it should be possible, I'm gonna try it.

BTW: What's the reason for using an iFrame? Maybe if one knows about the background, one might find a solution to go without.

@SempervivumSep 11.2021 — #This turns out to be easier than I expected: When adding the hash to the src attribute of the iFrame it skips to the corresponding anchor inside. Just get the hash in the master page by `location.hash` and add it to the src attribute of the iFrame.

@coderunnerauthorSep 11.2021 — #@Sempervivum

Sorry I'm not as good as you are. I wish I was!

Can you add what you said in above code of the iframe please?

It would make my day if it would work 😃

Thanks in advance.

Regards

@SempervivumSep 11.2021 — #Shure, I'm gonna finish a different task and then will go ahead.

@coderunnerauthorSep 11.2021 — #Some explanation ...

1- On page0.php is de code to generate the resizable iframe (code see above) -> to show page1.php in iframe

2- On page1.php in iframe is the link

<a href='https://domain.com/page1.php#$row[3]'>goto anchor on page2</a>

3- On page2.php in iframe

<a name='$row[3]'>anchor</a>

I hope you understand what I mean

Regards

@SempervivumSep 11.2021 — #I'm not shure as I didn't follow the history of this thread in detail but I hope I understood things correctly.

I used this javascript in the master page of the iframe:

``<i>
 </i>&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Test&lt;/title&gt;
 
 &lt;style&gt;
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;iframe id="iframe1" src="thread730-the-iframe.html"&gt;&lt;/iframe&gt;
 &lt;script&gt;
 // Provide iFrame:
 const iframe = document.getElementById('iframe1');
 // Add hash of current page to src attribute:
 iframe.src += location.hash;
 &lt;/script&gt;
 &lt;/body&gt;
 
 
 &lt;/html&gt;<i>
 </i>`</CODE>
 And for testing I used this HTML in the iframe:
 <CODE>`<i>
 </i>&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Test&lt;/title&gt;
 
 &lt;style&gt;
 div {
 height: 150vh;
 }
 
 #container1 {
 background-color: bisque;
 }
 
 #container2 {
 background-color: lightblue;
 }
 
 #container3 {
 background-color: lightcoral;
 }
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;div id="container1"&gt;Box 1&lt;/div&gt;
 &lt;div id="container2"&gt;Box 2&lt;/div&gt;
 &lt;div id="container3"&gt;Box 3&lt;/div&gt;
 &lt;/body&gt;
 
 
 &lt;/html&gt;<i>
 </i>`</CODE>
 And the page containing the links:
 <CODE>`<i>
 </i>&lt;!doctype html&gt;
 &lt;html lang="en"&gt;
 
 &lt;head&gt;
 &lt;meta charset="UTF-8"&gt;
 &lt;title&gt;Test&lt;/title&gt;
 
 &lt;style&gt;
 
 &lt;/style&gt;
 
 &lt;/head&gt;
 
 &lt;body&gt;
 &lt;a href="thread730-anchor-inside-iframe-page2.html#container1"&gt;Goto Page 2 Box 1&lt;/a&gt;
 &lt;a href="thread730-anchor-inside-iframe-page2.html#container2"&gt;Goto Page 2 Box 2&lt;/a&gt;
 &lt;a href="thread730-anchor-inside-iframe-page2.html#container3"&gt;Goto Page 2 Box 3&lt;/a&gt;
 &lt;/body&gt;
 
 
 &lt;/html&gt;<i>
 </i>``

@coderunnerauthorSep 11.2021 — #@Sempervivum

Thank you very much for you reply and adding the new iframe code here

That code works with the anchor(s) but ...

- it's with a scrollbar on the right

- on page2.php you can view a bigger picture (lytebox) but that doesn't work anymore

So it doesn't really help me any further but thanks for helping me.

Regards

@SempervivumSep 11.2021 — #>it's with a scrollbar on the right

You can remove the scrollbar by adding `scrolling="no"` to the iframe tag. But how should the user access the content outside of the window then?

@coderunnerauthorSep 11.2021 — #I know that but then you can't access all topics.

That's not the biggest problem tho.

The biggest problem is the lytebox (view pop-up photo).

Regards

@SempervivumSep 11.2021 — #>The biggest problem is the lytebox (view pop-up photo).

Shurely this could be fixed, however one has to be able to view the code. Best would be if the site is online and you post the URL.

Regarding the scrollbar: I didn't take into account your script for resizing the iframe yet as I focussed on skipping to the anchor. Does it expand the size that way that all content is visible without scrolling? And you intend to scroll the master page to a position where the content inside the iframe, the hash is referring to, is visible?

@coderunnerauthorSep 11.2021 — #Website isn't online yet.

Will do that tomorrow on a temporary server

Will write the url soon

Regards

@coderunnerauthorSep 11.2021 — #Website is on a temporary server

url = http://joskes-teddybears.onlinewebshop.net

On the left --> menu --> Gallery/Diashow For Sale (code to show iframe)

On the right --> iframe with link#anchor -->click on a picture of a teddy bear to see new page (anchor) for more details (here it has to go to the teddy bear you clicked on)

On that page --> anchor --> you can click on the picture to enlarge picture.

Regards

@SempervivumSep 12.2021 — #I coded a javascript that does the job, presumed I understood your code well.

``<i>
 </i>    &lt;script&gt;
 function frameSize(id) {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + document.documentElement.scrollTop,
 // get scroll position:
 scrollPos = topFrame + topEle;
 // scroll document in order to make element visible:
 document.documentElement.scrollTop = scrollPos;
 
 }
 
 // }
 }
 &lt;/script&gt;<i>
 </i>`</CODE>
 Replace your old script:
 <CODE>`<i>
 </i>		&lt;script type='text/javascript'&gt;
 /* &lt;![CDATA[ */
 function frameSize(id){
 var theheight;
 document.getElementById(id).height = 0;
 
 if(document.getElementById) {
 theheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
 }
 
 document.getElementById(id).height = theheight;
 }
 /* ]]&gt; */
 &lt;/script&gt;<i>
 </i>`</CODE>
 by the new one. I used a query string in order to avoid confusion by hash vs. url params. Therefore you will have to change your links to this pattern:<br/>
 <C>&lt;a href="index_nieuw_bestellen.php?taal=de&amp;item=container1"&gt;&lt;img ...&gt;&lt;/a&gt;`

 where container1 is the ID of the element. The script will make this element visible.

 My test configuration here:

 https://webentwicklung.ulrichbangert.de/thread730-master-2.html

 If this doesn't work, put in online and come back.

reply?

0

@coderunnerauthorSep 12.2021 — #@Sempervivum 
 
 I did what you said ... not sure about the last part --> the links.

 But I don't see any difference.

 What did I wrong?
 
 Regardsreply?

0

@coderunnerauthorSep 12.2021 — #Sorry my mistake, I uploaded the files to the wrong folder ... oops.

 It's working!!!!

 Thank you very, very much.

 You made my day!
 
 Regardsreply?

0

@SempervivumSep 12.2021 — #There are two issues:
 1. You have to add the ID of the item to the link in the 1st page. Now the link reads: `index_nieuw_bestellen.php?taal=de</C>. Say the ID of the item is "Jolene" then the link should read: <C>index_nieuw_bestellen.php?taal=de&amp;item=Jolene</C>.</LI>
 <LI>2. In the second page add the ID to the item like this:
 <CODE>`<i>
 </i>&lt;div align="center" id="Jolene" style="width:290px;float:left;margin-bottom:10px;list-style-type: none;"&gt;
 &lt;div stye="position:absolute;"&gt;
 &lt;a href="index_nieuw_bestellen.php?taal=de" style="text-decoration: none;"&gt;
 &lt;img style="cursor: url('magnify.cur'),default;" src="upload/Jolene8.jpg" width="auto" height="185"&gt;&lt;/a&gt;&lt;div style="font-size:12px;position:relative;margin-top:-35px;padding:5px 0px 5px 0px;width: 140px;-webkit-border-radius: 10px;-moz-border-radius: 10px;-opera-border-radius:10px;border-radius: 10px;box-shadow:0 0 10px #666;-moz-box-shadow: 0 0 10px #666;-webkit-box-shadow: 0 0 10px #666;background-color:#b67637;color: #faeaa7;"&gt;Jolene&amp;nbsp;&amp;nbsp;45 cm&lt;/div&gt;&lt;/div&gt;&lt;div style="margin-top:25px;"&gt;&lt;/div&gt;&lt;form name="form_afbeelding"&gt;&lt;input type="hidden" name="taal" id="taal" value="de"&gt;&lt;/form&gt;<i>
 </i>`</CODE></LI></LIST>
 
 BTW: Framesets and attributes like <C>align="center"` are outdated and should be removed.reply?

0

@SempervivumSep 12.2021 — #You're welcome!

 Our postings crossed.reply?

0

@coderunnerauthorSep 12.2021 — #I want to thank everybody who spent his/her time to help me solve my problem.

 You're all fantastic

 esp. @Sempervivum who came with the solution.
 
 Topic closed.reply?

0

@coderunnerauthorSep 13.2021 — #One remark:

 The iframe script doesn't work in browser Safari! --> empty page
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #Not shure if this will fix it as I was not able to test it but give this modified script a try:
 ``<i>
 </i>    &lt;script&gt;
 function frameSize(id) {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + window.scrollY,
 // get scroll position:
 scrollPos = topFrame + topEle;
 // scroll document in order to make element visible:
 if (typeof document.documentElement.scrollTop != undefined) {
 document.documentElement.scrollTop = scrollPos;
 } else {
 document.body.scrollTop = scrollPos;
 }
 }
 }
 &lt;/script&gt;<i>
 </i> ``reply?

0

@coderunnerauthorSep 13.2021 — #Nope ... still an empty page
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #Is the console available on Safari?reply?

0

@coderunnerauthorSep 13.2021 — #Sorry ... what do you mean with "console" ?
 
 Regards
 
reply?

0

@SempervivumSep 13.2021 — #The console is a part of the developer tools which are available in every common browser for desktop. Read this in order to open it in Safari:

 https://balsamiq.com/support/faqs/browserconsole/

 However I'm afraid that your are not on desktop but iPhone instead?reply?

0

@coderunnerauthorSep 13.2021 — #Is it this what you need?

 -ReferenceError: Can't findvariable: URLSearchParams                                  galleries_nieuw.php:267

 -TypeError: 'undefined' is not an object (evaluating 'a Shopify.checkout')     1882202882033011:26

 -Unsafe JavaScript attempt to access frame ...
 
 Regards
reply?

0

@SempervivumSep 13.2021 — #Yes, that's very helpful information. Apparently URLSearchParams is unknown. According to this:

 https://caniuse.com/?search=URLSearchParams

 the feature is supported by Safari. I'll try to find out why it doesn't work though ...reply?

0

@SempervivumSep 13.2021 — #I found this QA on Stackoverflow:

 https://stackoverflow.com/questions/59575230/ios-safari-javascript-not-working-but-works-on-desktop-and-android

 They say:
 >URLSearchParams is not supported in all versions of safari or older browsers.
 
 (dated Jan 3 '20)
 
 This condradicts caniuse.com and I'm a bit helpless. Is it possible that you are using an older version of Safari, up to version 10?reply?

0

@coderunnerauthorSep 13.2021 — #I have Safari 5.1.7 (753457.2)  on my laptop Windows 10 64bits

 Is there a newer version?
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #Oh, AFAIK Safari for Windows is highly outdated and there are security issues. Experts advise against using it any longer. We can ignore that the script doesn't run in this browser.reply?

0

@coderunnerauthorSep 13.2021 — #I can't find a newer version of Safari ... latest for Windows 10 is version 5.1.7 , right?

 Or didn't I search well enough.
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #Yes, Safari for Windows is dead, it should not be used any more. Main reasons are security issues and missing support for new features like URLSearchParams.reply?

0

@coderunnerauthorSep 13.2021 — #Thanks again for you good help and clear explanations!

 Sorry for bothering you with my problem. 😅 
 
 Regardsreply?

0

@coderunnerauthorSep 13.2021 — #One more question: Will the latest code of the script - you posted  here - work on an iphone and tablet?
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #I'm not completely shure, it has to be tested. Do you have an iPhone or iPad yourself? If not you might ask a friend to check it for you.reply?

0

@coderunnerauthorSep 13.2021 — #I just called my friend who has an Apple iPhone and iPad and there he said the page is showing in the iframe but when he clicks on a picture, it doesn't go to that picture but to the top of the page.

 The same as where I started this topic with -> doesn't go to the anchor but goes to the top of the page ....  aarrgghh ... i'm loosing my hair!
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #That's really weird, difficult to fix an error when no device is available for debugging.reply?

0

@coderunnerauthorSep 13.2021 — #I can understand that. 

 I don't think an Apple iPhone and tablet have a developer's console.

 I'll ask it ...
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #I took a look at the version you have online and noticed that it doesn't work in Opera either.
 >galleries_nieuw.php?taal=de:275 Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null
 
 The reason is that the item or id is not found on page

 http://joskes-teddybears.onlinewebshop.net/beertjes/index_nieuw_bestellen.php?taal=de&item=20210808123731
 
 The item for sale has to have an ID equal to that one in the URLreply?

0

@coderunnerauthorSep 13.2021 — #My friend doesn't see any developer's console on his Apple devices.
 
 Weird ...

 Over here on my laptop the site works in Opera -> Your version is 78.0.4093.184
 
 Regardsreply?

0

@coderunnerauthorSep 13.2021 — #Now I see what you mean with it doesn't work in Opera

 I use English version and you used German version.

 Only in English version it works ..... ppfff

 I'm getting frustrated with this issue.
 
 Regardsreply?

0

@SempervivumSep 13.2021 — #Is the german version a different page? Then you will have to update it too.

 I assume that your friend used the english version either when testing on iPhone?reply?

0

@coderunnerauthorSep 13.2021 — #Now it should work in Opera too,

 Can you check it please

 But clear browser date first
 
 Regardsreply?

0

@coderunnerauthorSep 13.2021 — #Yes he set his iPhone and iPad in English and there it doesn't work.
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #It's working now even in german version. However the javascript is not the latest version. Upload it and ask your friend to try again.reply?

0

@coderunnerauthorSep 14.2021 — #Changed back to your latest script but still going to the top of the page
 
 Regards
reply?

0

@SempervivumSep 14.2021 — #Not shure if this will help but we should give it a try: The javascript is surrounded by HTML, therefore safari might reject it. Try to shift it to the bottom of the body, right before the closing <body>:
 ``<i>
 </i>    &lt;script&gt;
 // script here
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;<i>
 </i>``reply?

0

@coderunnerauthorSep 14.2021 — #Did what you say but nothing changed. Still goes to top of page.
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #Does the script resize the iframe properly on Safari?reply?

0

@coderunnerauthorSep 14.2021 — #Yes the iframe shows as in other browsers -> resize properly.
 
 Regardsreply?

0

@coderunnerauthorSep 14.2021 — #Update

 I asked my friend to try it on the iPhone and he said it works on iPhone but not on his Apple tablet ... 

 So on his iPhone it goes to the anchor.

 On his Apple tablet it goes to the top of the page.

 Both are quite new.
 
 Regards
reply?

0

@SempervivumSep 14.2021 — #That's important information and surprising. At the moment I'm helpless.reply?

0

@coderunnerauthorSep 14.2021 — #Does there exist a PHP code to find the version of Safari

 e.g.

 check if browser is safari

 if safari = v5.1 than do this ... else do that...
 
 The code will be more complex of course, it's just to show what it needs to do.
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #There should be available information about the browser however I don't know about the details.
 
 I added some code for debugging to the script and fixed an error:
 ``<i>
 </i>    &lt;script&gt;
 function logIt(txt) {
 const out = document.getElementById('output');
 out.innerHTML += txt;
 }
 function frameSize(id) {
 try {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 logIt('item=' + item);
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + window.scrollY,
 // get scroll position:
 scrollPos = topFrame + topEle;
 logIt(' topEle=' + topEle + ' topFrame=' + topFrame + ' scrollPos=' + scrollPos);
 // scroll document in order to make element visible:
 if (typeof document.documentElement != undefined) {
 document.documentElement.scrollTop = scrollPos;
 } else {
 document.body.scrollTop = scrollPos;
 }
 }
 }
 catch (e) {
 logIt(e);
 }
 }
 &lt;/script&gt;<i>
 </i>`</CODE>
 The function logIt writes some debug info to a container div#output. Please add this container to the masterpage where the script is located in:
 <CODE>`<i>
 </i>    &lt;div id="output"&gt;&lt;/div&gt;<i>
 </i>``
 Please upload this and I'm gonna check if the output is fine.reply?

0

@coderunnerauthorSep 14.2021 — #It's uploaded but I don't see an output
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #The script is existing twice, first from line 253 (the new version), second from line 348, before the closing <body>. remove the first occurence and replace the last one by the latest version.reply?

0

@coderunnerauthorSep 14.2021 — #Okay, it's done but still no output

 You'll find your script  also here -> http://joskes-teddybears.onlinewebshop.net/test.php
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #Still the same situation for me, the script is existing twice on

 http://joskes-teddybears.onlinewebshop.net/galleries_nieuw.php?taal=en

 even if I switch to the english version. Did you really upload the file after modifying it?reply?

0

@coderunnerauthorSep 14.2021 — #Yes I did but will re-upload it. The server sometimes refuses to upload.

 Now I get an output -> item=null
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #It's fine now, at page load I get item=null too and when selecting an item there is additional output:

 item=20201115094923 topEle=2208 topFrame=370 scrollPos=2578

 That's exactly what I expected.

 Now go ahead and ask your friend again to test it on his tablet and report the output.reply?

0

@coderunnerauthorSep 14.2021 — #When loading the page -> item=null

 When clicking on picture -> item=nullitem=20210518154217 topEle=895 topFrame=372 scrollPos=1267
 
 Is that the info you need?
 
 Regards
reply?

0

@SempervivumSep 14.2021 — #Yes, that's fine. However on the Apple tablet I would have expected that an error messge is output as the automatic scrolling doesn't work. I will have to add more output.reply?

0

@SempervivumSep 14.2021 — #I addes two more outputs:
 ``<i>
 </i>    &lt;script&gt;
 function logIt(txt) {
 const out = document.getElementById('output');
 out.innerHTML += txt;
 }
 function frameSize(id) {
 try {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 logIt('item=' + item);
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + window.scrollY,
 // get scroll position:
 scrollPos = topFrame + topEle;
 logIt(' topEle=' + topEle + ' topFrame=' + topFrame + ' scrollPos=' + scrollPos);
 // scroll document in order to make element visible:
 if (typeof document.documentElement != undefined) {
 document.documentElement.scrollTop = scrollPos;
 logIt(' scrollPos_on_document.documentElement=' + document.documentElement.scrollTop);
 } else {
 document.body.scrollTop = scrollPos;
 logIt(' scrollPos_on_document.body=' + document.body.scrollTop);
 }
 }
 }
 catch (e) {
 logIt(e);
 }
 }
 &lt;/script&gt;<i>
 </i>``
 Replace the existing script with this one.reply?

0

@coderunnerauthorSep 14.2021 — #iPad result ->

 When loading the page -> item=null

 When clicking on picture ->item=nullitem=20210213170924 topEle=1995 topFrame=372 scrollPos=2367 scrollPos_on_document.documentElement=0
 
 Regardsreply?

0

@SempervivumSep 14.2021 — #New version of script, try it:
 ``<i>
 </i>    &lt;script&gt;
 function logIt(txt) {
 const out = document.getElementById('output');
 out.innerHTML += txt;
 }
 function frameSize(id) {
 try {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 logIt(' item=' + item);
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + window.scrollY,
 // get scroll position:
 scrollPos = topFrame + topEle;
 logIt(' topEle=' + topEle + ' topFrame=' + topFrame + ' scrollPos=' + scrollPos);
 // scroll document in order to make element visible:
 if (typeof document.scrollingElement != undefined) {
 document.scrollingElement.scrollTop = scrollPos;
 logIt(' scrollPos_on_document.scrollingElement=' + document.scrollingElement.scrollTop);
 } else {
 // document.body.scrollTop = scrollPos;
 logIt(' document.scrollingElement_is_undefined');
 }
 }
 }
 catch (e) {
 logIt(e);
 }
 }
 &lt;/script&gt;<i>
 </i> ``
 Based on this:

 https://stackoverflow.com/questions/58693386/why-does-scrolltop-position-not-work-on-mobile-safarireply?

0

@coderunnerauthorSep 14.2021 — #Summary:
 
 iPhone result -> works just fine -> goes to anchor

 When loading the page -> item=null

 When clicking on picture ->item=nullitem=20210213170924 topEle=2017 topFrame=372 scrollPos=2389 scrollPos_on_document.documentElement=1818
 
 Detail -> Apple Safari 14.1.2
 
 =======================================================================
 
 iPad result -> goes to top of page

 When loading the page -> item=null

 When clicking on picture ->item=nullitem=20210213170924 topEle=1995 topFrame=372 scrollPos=2367 scrollPos_on_document.documentElement=0
 
 Details of iPad -> Apple Safari 12.1.12
 
 =======================================================================

 Edge - Chrome - Firefox - Opera --> goes to anchor
 
 Regardsreply?

0

@SempervivumSep 15.2021 — #Unfortunately this is not what I expected:

 `logIt(' scrollPos_on_document.scrollingElement=' + document.scrollingElement.scrollTop);`

 This should result in an output like
 >scrollPos_on_document.**scrollingElement**=xxxx
 
 Is it possible that uploading failed again?reply?

0

@coderunnerauthorSep 15.2021 — #I re-uploaded the file and still got the same.

 On the iPhone I get -> scrollPos_on_document.documentElement=1818

 On the iPad I get  -> scrollPos_on_document.documentElement=0
 
 so only on iPad I'm not getting -> scrollPos_on_document.documentElement=xxxx --> but --> 0
 
 Regardsreply?

0

@SempervivumSep 15.2021 — #I'm helpless, I searched three languages, german, english and netherlands and was not able to find the new version of the script. In order to be shure, I'm talking of this code:
 ``<i>
 </i>    &lt;script&gt;
 function logIt(txt) {
 const out = document.getElementById('output');
 out.innerHTML += txt;
 }
 function frameSize(id) {
 try {
 // set height of frame:
 const theFrame = document.getElementById(id),
 frameDoc = theFrame.contentWindow.document,
 frameHeight = frameDoc.body.scrollHeight;
 // set height of frame:
 theFrame.height = frameHeight;
 const
 // get URL of frame:
 url = theFrame.contentWindow.location.search,
 // get URL parameters:
 urlParams = new URLSearchParams(url),
 // get current item form URL params:
 item = urlParams.get('item');
 logIt(' item=' + item);
 if (item) {
 const
 // get element being addressed:
 ele = frameDoc.getElementById(item),
 // get top position of this element relative to viewport:
 boxEle = ele.getBoundingClientRect(),
 topEle = boxEle.top,
 // get position of frame relative to document:
 boxFrame = theFrame.getBoundingClientRect(),
 topFrame = boxFrame.top + window.scrollY,
 // get scroll position:
 scrollPos = topFrame + topEle;
 logIt(' topEle=' + topEle + ' topFrame=' + topFrame + ' scrollPos=' + scrollPos);
 // scroll document in order to make element visible:
 if (typeof document.scrollingElement != undefined) {
 document.scrollingElement.scrollTop = scrollPos;
 logIt(' scrollPos_on_document.scrollingElement=' + document.scrollingElement.scrollTop);
 } else {
 // document.body.scrollTop = scrollPos;
 logIt(' document.scrollingElement_is_undefined');
 }
 }
 }
 catch (e) {
 logIt(e);
 }
 }
 &lt;/script&gt;<i>
 </i>`</CODE>
 The relevant section is this:
 <CODE>`<i>
 </i>                    if (typeof document.scrollingElement != undefined) {
 document.scrollingElement.scrollTop = scrollPos;
 logIt(' scrollPos_on_document.scrollingElement=' + document.scrollingElement.scrollTop);
 } else {
 // document.body.scrollTop = scrollPos;
 logIt(' document.scrollingElement_is_undefined');
 }<i>
 </i>`</CODE>
 take notice of <C>scrollingElement`.reply?

0

@coderunnerauthorSep 15.2021 — #I always get  --> scrollPos_on_document.documentElement= **0** on the iPad.
 
 Summary:

 It works on all latest browsers except on the iPad

 Only on the iPad visitors need to scroll.

 I think this a very good result, no?

 I can live with that!
 
 Regardsreply?

0

@coderunnerauthorSep 15.2021 — #@Sempervivum 

 If you still find a solution for the iPad, don't hesitate to tell it here in this topic.

 Finally I really want to say to you thank you very, ... very much for your time, help, scripts, knowledge, research, etc

 You solved almost everything of my website problem. 😃
 
 
 Regardsreply?

0

@SempervivumSep 16.2021 — #You're welcome!
 >I can live with that!
 
 That's fine, however it's a bit unsatisfying that the remaining issue was not resolved. I cannot understand why the latest update of the function doesn't come into effect.reply?

0

@SempervivumSep 17.2021 — #Hi @coderunner 

 some minutes ago I took a look at your site and now the latest version of the script is visible. I'm confused, was there some server side caching?

 Might be worth wile to make the output visible again and test it by your friend on iPad.reply?

0

@coderunnerauthorSep 17.2021 — #I went to settings -> Safari -> cleared history, data, cache, ... on the iPad but still get the same results

 -> When loading the page -> item=null

 -> When clicking on picture ->item=null item=20210213170924 topEle=1995 topFrame=372 scrollPos=2367 scrollPos_on_document.documentElement=**0**
 
 Regardsreply?

0

@SempervivumSep 17.2021 — #Having read this:
 >cleared history, data, cache, ... on the iPad but still get the same results
 
 I have no more explanation for the fact that my browser gets the newest code now while your friend's iPad gets the outdated code. It's improbable that the iPad's Safari caches the frame even after the cache was cleared.

 However one thing we could try is loading the page inside the frame directly:

 joskes-teddybears.onlinewebshop.net/galleries_nieuw.php?taal=dereply?

0

@coderunnerauthorSep 17.2021 — #When I write -> joskes-teddybears.onlinewebshop.net/galleries_nieuw.php?taal=de <- directy in the address bar

 I get

 item=null item=20210213170924 topEle=1995 topFrame=372 scrollPos=2367 scrollPos_on_document.documentElement=**2367**

 and then it scrolls to the correct item.
 
 Regardsreply?

0

@coderunnerauthorSep 18.2021 — #And what now? The url -> joskes-teddybears.onlinewebshop.net/galleries_nieuw.php?taal=de works just fine.

 I made the url in the index page the full url as you said but that doesn't solve the problem on the iPad.

 Visitors don't know that they have to write --> joskes-teddybears.onlinewebshop.net/**galleries_nieuw.php?taal=de**
 
 Regardsreply?

0

@SempervivumSep 18.2021 — #That url war just for testing, your visitors need not care about it and can navigate from the main page to the gallery and then to the details page.
 
 Unfortunately this test was not successful as the last version of the script is not active. That one should output scrollPos_on_document.scrollingElementreply?

0

@coderunnerauthorSep 18.2021 — #Oh okay ... I thought you had a solution (a workaround) for the iPad's scroll to topic problem.

 That's why I added the full url in the index page but that didn't fix it

 I'll let it how it is ... only iPad has that scroll to top of page problem.
 
 Regardsreply?

`Also in #PHP _↴`

Mystery Code - Continued"to next page"Login With Username or Email And Password - Cleaning Up The Reg Page

×

`Success!`

Help @coderunner spread the word by sharing this article on Twitter...

Tweet This

Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account

Problem with goto anchor

110 Comments(s) _↴

`Also in #PHP _↴`

`Success!`

Social

Version

Problem with goto anchor

110 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

110 Comments(s) _↴

`Also in #PHP _↴`

`Success!`

`The web is an endless sea of information. Don't miss the boat... Subscribe!`