Wrong Forum?: can't fathom where to insert JS code

This section is for programmers. Please use it for all discussons on interfacing help with your applications and related subjects.

Moderators: Alexander Halser, Michael Schwarzl

Post Reply
Dave Gehman
Posts: 458
Joined: Sat Sep 23, 2017 9:05 pm

Wrong Forum?: can't fathom where to insert JS code

Unread post by Dave Gehman » Tue Mar 10, 2020 4:17 pm

In-process HM8 project
Output: WebHelp (html)

The need:
We have a section with multiple topics that depend on HTML iframe to bring content from an external site into our online help docs. Basic iframe apparently has default height and width. Specifying those parameters with height= and width= of course results in a frame of fixed size.

We need the frame to size itself based on content. Some of it is only a few lines long; some goes to 50 lines or more -- a fixed size doesn't work. The larger files sport a scroll bar -- and of course the enclosing topoc has its own scroll bar... anathema to our software developers.

There are numerous code snippets on the Web that size an ifram dynamically based on content, but every one that I can find has the same attribute: they don't say where to insert the code.

Right now, to create the iframes, we're using HM8's Insert HTML code object to execute the iframe in any given topic, as follows:

Code: Select all

<iframe src="../[URL]/designs/[name of file to insert into frame].html" height="600" width="1000"></iframe>
Where or how, for example, do I place the following snippet, from TutorialRepublic, (or any other JS script for dynamic frame sizing):

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Auto Adjust iFrame Height Based on Content</title>
<style>
    iframe{
        width: 100%;
        border: 2px solid #ccc;
    }
</style>
</head>
<body>
    <iframe src="demo.php" id="myIframe"></iframe>
    
    <script>
    // Selecting the iframe element
    var iframe = document.getElementById("myIframe");
    
    // Adjusting the iframe height onload event
    iframe.onload = function(){
        iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px';
    }
    </script>
</body>
</html>

User avatar
Martin Wynne
Posts: 2588
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Martin Wynne » Tue Mar 10, 2020 9:29 pm

Dave Gehman wrote:
Tue Mar 10, 2020 4:17 pm
There are numerous code snippets on the Web that size an iframe dynamically based on content, but every one that I can find has the same attribute: they don't say where to insert the code.
Hi Dave,

There are lots of ways of doing it. The simplest is probably to modify the HTML Code Object for the iframe like this.

Specify your required width, but not a height, and add an onload event:

Code: Select all

<iframe src="../[URL]/designs/[name of file to insert into frame].html" width="1000" onload="this.style.height=this.contentWindow.document.body.scrollHeight+'px';"></iframe>
I haven't tested this -- it may not work in all browsers. I will test it now and get back to you.

Do you have access to the page template (which skin you are using?). Ideally it needs to be a function in the <head> section. How many topics have these iframes in them? How many iframes in each?

cheers,

Martin.

Dave Gehman
Posts: 458
Joined: Sat Sep 23, 2017 9:05 pm

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Dave Gehman » Tue Mar 10, 2020 10:32 pm

Martin Wynne wrote:
Tue Mar 10, 2020 9:29 pm

Hi Dave,

There are lots of ways of doing it. The simplest is probably to modify the HTML Code Object for the iframe like this.

....
Do you have access to the page template (which skin you are using?). Ideally it needs to be a function in the <head> section.
I'll try your code snippet, and thanks once again...

I'm using a customized -- sorry, customised version of an older skin, WebHelp_SlateGrey.hmskin and don't see why I wouldn't have access to it, though it is clearly a binary file when brought into Notepad++
How many topics have these iframes in them? How many iframes in each?
A mere 110 or so (and growing); they contain a single iframe.

Over the weekend, I learned how to search and replace across multiple files in Notepad++. (I had to change the URL [the iframe src=] when I transitioned from testing on my system to testing on our cloud server. That change took less than 3 seconds for all 110 or so.)

User avatar
Martin Wynne
Posts: 2588
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Martin Wynne » Tue Mar 10, 2020 10:44 pm

Dave Gehman wrote:
Tue Mar 10, 2020 10:32 pm
WebHelp_SlateGrey.hmskin and don't see why I wouldn't have access to it ...
A mere 110 or so (and growing); they contain a single iframe.
Hi Dave,

Only one per topic? That makes it a lot easier. Time here for a meal now, I will get back to you later.

cheers,

Martin.

Dave Gehman
Posts: 458
Joined: Sat Sep 23, 2017 9:05 pm

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Dave Gehman » Wed Mar 11, 2020 12:09 am

Yes, only one per file. Enjoy your food, and again, many thanks.

User avatar
Martin Wynne
Posts: 2588
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Martin Wynne » Wed Mar 11, 2020 6:22 am

Hi Dave,

This seems to be working ok. I have tested it using the V2 SlateGrey skin in Firefox, Chrome, Opera, Microsoft Edge and Internet Explorer.

This is the code in the HTML Code Object when inserting an iframe in the topic. You can have more than one in a topic if you wish. Only the URL needs to change for each one. There is no need to modify the page template in the skin.

Code: Select all

<iframe class="x" width="1000" height="100%" style="border:0px; overflow:hidden;"
 onload="this.style.height=(this.contentWindow.document.body.scrollHeight+30)+'px';"
 src="URL for your iframe content"></iframe>
A few points to note:

1. this probably won't work on your local system, it will work only after uploading to your server. (Locally the iframes will appear, but won't resize.)

2. the URL for the iframe must be on the same domain as your Webhelp. (You can insert content from other domains in an iframe, but it won't get resized this way because of cross-domain security restrictions.)

3. the src="URL" must be on the bottom line of the code so that the onload stuff is set up first, before the source gets loaded.

4. the +30 is to prevent scrollbars appearing. Increase it if necessary until they don't.

5. set the width to whatever you want, or a % of the page width. Leave the height on 100%.

6. the class="x" is to avoid your iframe being affected by any of Tim's iframe code in this skin.

There are no doubt other fancier ways of doing the same thing, some avoiding the above restrictions, but this way seems to work fine.

You will need to edit the code for your existing HTML Code Objects -- set about the XML files with Notepad++ file search & replace.

cheers,

Martin.

Dave Gehman
Posts: 458
Joined: Sat Sep 23, 2017 9:05 pm

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Dave Gehman » Wed Mar 11, 2020 11:19 am

Martin, again many thanks. The src= URL is indeed on the same server as the WebHelp -- and simple, rather than fancy, is better for us.

Dave Gehman
Posts: 458
Joined: Sat Sep 23, 2017 9:05 pm

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Dave Gehman » Wed Mar 11, 2020 2:24 pm

Beatiful!

And it works both on the cloudy server AND on my local system (at least, with the local published 'site' generated by HM8).

User avatar
Martin Wynne
Posts: 2588
Joined: Mon May 12, 2003 3:21 pm
Location: West of the Severn, UK

Re: Wrong Forum?: can't fathom where to insert JS code

Unread post by Martin Wynne » Wed Mar 11, 2020 5:16 pm

Glad it worked. :)

Martin.

Post Reply