Link to the bookmark in the inline Frame

[VictorKrs]

Hello WWW users!

Please tell me how to make the link of the menu item of the parent page link to the bookmark (also called "anchors") placed on the child page displayed in an inline Frame?

I will be grateful for your help!

[crispy68]

Hey Victor,

Try this:

1. Open up your link that you want to click and for the URL enter the following:

Code: Select all

page1.html?#Bookmark1

(change the page and bookmark names above to whatever name you've given them) 

2. In the Target Window section, choose:

Target = open in another window or frame
Value = Choose your inline frame on the page.

[VictorKrs]

Thanks a lot for the advice, Ron!

[VictorKrs]

Dear WWB professionals, please help!

I can't make links to a specific place on the page displayed in the IFrame.

Follow the link https://drive.google.com/file/d/1wqLPpm ... sp=sharing project file:
1. On pages named *var1, a link to the Layout grid (Enable Smooth Scrolling) is applied from the menu.
2. On pages named *var2, a link to Bookmarks (recipe from crispy68) is used from the menu.

In both cases, the non-link does not work.
Obviously, I'm doing something wrong or using the crispy 68 advice incorrectly.

Please help me solve this problem!

P. S.
The project uses the free "iFrame Resizer" extension for iFrame height adaptability.

[crispy68]

I'm not at my computer but do you have a link to the page to see visually in the browser?

[VictorKrs]

Hello! I'll come home and post the link.

[VictorKrs]

I'm not at my computer but do you have a link to the page to see visually in the browser?

Dear Ron,
I am sending you a link to the demo site.:
http://u1043935.isp.regruhosting.ru/

The project of this website: https://drive.google.com/file/d/1o4wfVu ... sp=sharing

[crispy68]

I had a chance to quickly look at your project on lunch at the first issues is your bookmark to "#Bookmark_end" should be "#wb_Bookmark_end" since you are using a bookmark object. Although, why not just use the layout grid as your bookmark?

2nd, you are not going to get smooth scroll as the scrolling is only on the iframe page. Your link from the parent page to the iframe wont trigger this scrolling effect.

Lastly, I think the issue for it not working is using iframeresizer. When I remove the code it works. Havent had a chance to see if there is a workaround or not.

[VictorKrs]

I answer the questions asked…

Q:
I had a chance to quickly look at your project on lunch at the first issues is your bookmark to "#Bookmark_end" should be "#wb_Bookmark_end" since you are using a bookmark object. Although, why not just use the layout grid as your bookmark?
A:
1. Changing the link to "#wb_Bookmark_end" did not give a positive result
2. The layout grid as bookmark it doesn't work either (you can see this by clicking on the link
http://u1043935.isp.regruhosting.ru/par ... _var1.html

Q:
2nd, you are not going to get smooth scroll as the scrolling is only on the iframe page. Your link from the parent page to the iframe wont trigger this scrolling effect.
A:
It doesn't work! And how to make it right?

Q:
Lastly, I think the issue for it not working is using iframeresizer. When I remove the code it works. Havent had a chance to see if there is a workaround or not.
A:
Yes! I've already figured that out. But I wish I could use it! It doesn't work out so elegantly without it
This extension works as I need it to, and it would be great if it were possible to access certain sections of the page in an iFrame. All that remains is to find a solution!

P. S.
I'm sorry if I misunderstood your questions! There are translation difficulties...

[crispy68]

1. The ID in your link should be #wb_Bookmark_end. I've confirmed this works

2. I'm not sure this is possible as usually smooth scrolling is for links on the same page. If you dont use the iFrameResizer, there is a simple CSS solution to scroll but it is very basic.

3. It seems that you will need to add another parameter to iFrameResize code. If you open up the html of the parent page, you will see the code like such:

Code: Select all

$('#if_products_ver2').iFrameResize(
{
   autoResize: true, 
   checkOrigin: false,
   heightCalculationMethod: 'bodyOffset', 
   maxHeight: Infinity,
   maxWidth: Infinity,
   minHeight: 0,
   minWidth: 0,
   resizeFrom: 'parent', 
   scrolling: false, 
   sizeHeight: true, 
   sizeWidth: false, 
   tolerance: 0, 
   widthCalculationMethod: 'scroll'
});

It seems that the following parameter needs added to the above list:

Code: Select all

  inPageLinks: true,

No way of adding it via WB and only after publish. In my tests it worked...sort of. It did jump but it's sorta of janky and doesnt always seem to work consistently. The iFrameResizer version being used is 4.1.1 in WB and the last free version was 4.3.5. I tried using this version but it didnt seem to make any difference. Newer versions require a license.

Question... is the page in the iframe a page you have access to? Is there a reason why you need to iframe the page versus just adding to the page like normal?

[VictorKrs]

The reason why I chose iFrame is the ability to display different pages with the company's products in the iFrame. In the accordion menu, products are grouped into groups (there are many of them), when opening the accordion, you can select a specific product and the description of this product should be shown in the iFrame.
That is, when selecting a product, there should be a transition to a specific place on the page in the iFrame, and as we have seen, this is problematic to implement with iFrameResizer
As a result, I abandoned iFrameResizer and the following turned out ( https://docs.google.com/document/d/1UeM ... ue&sd=true ). However, the following feature has emerged… I don't want the IFrame to have a scroll bar (it doesn't look very good to me). However, in this case, the ability to scroll the page in the iFrame disappears, which is sad. All my attempts to insert CSS code to hide the scrollbar (there are recipes on the Internet) were unsuccessful.
I posted a suggestion on the forum in the Suggestions/Improvements section so that Pablo would consider making improvements so that the scrollbars could be hidden in the iFrame settings while still being able to scroll the page in the iFrame.

[BaconFries]

I just remembered this. Although 20yrs old now I thought it might be interesting to read.
How can I use Inline Frames to implement a masterborder?

[crispy68]

@Victor,

I don't think it is possible to simply hide the iframe scrollbars and still be scrollable (at least I haven't found anything that says you can). You have 3 choices: scrollable, auto (shows them if they are needed) and hidden (which hides them but content is not scrollable). If you were to hide them, then users would not necessarily know that the content is scrollable.

One idea is to style the scrollbars to make it look better rather than the standard browser scrollbar. For example, add the following to the page that appears in the inline frame:

Code: Select all

<style>
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{border-radius:10px;}
::-webkit-scrollbar-thumb{background:red;border-radius:10px;}
</style>

Change the width, radius and color to your liking.

To make links in the parent page scroll in the iframe to the bookmark, add the following to the page in the iframe:

Code: Select all

<style>
html{scroll-behavior:smooth;}
</style>

You wont have any control over the speed of the scroll but it will at least scroll rather than jump to the bookmark.