Help facility javascript

[breepupetstofight]

Hey,

I am trying to make a help facility for a web based application. At the moment when clicking help, the help facility opens in a new window and resizes the parent window so both are visible on the screen just like it does in the Microsoft Word help facility.

When the user closes the help facility i would like to return the parent window to its original size. I have read in numerous places not 2 mess with a users browser but the boss says this is the way i should do it.

Any thoughts?

[MikeHopley]

Originally Posted by breepupetstofight

I have read in numerous places not 2 mess with a users browser but the boss says this is the way i should do it.

Any thoughts?

Bad luck. You have an ignorant boss.

[breepupetstofight]

Do you have any other suggestions?

[MikeHopley]

Originally Posted by breepupetstofight

Do you have any other suggestions?

Nope, sorry.

[Rob]

Hang on guys....

Why not use fluid containers for the main content....

Then inject the help window floated to the right, but instead of a window, use a DIV. The main content should reflow around the help panel.

Sigh... Suprised no-one else offered this solution.

[breepupetstofight]

cheers rob,

Any places you know of that can show me how to do this, only just started doing more advanced web stuff so not really sure on a few things.

thanks again

[Rob]

Lets say the main content area is surrounded by a div with an ID of #mainContainer

next comes the main content itself.... surround this with another div #mainContent

Use the following javascript code in the head section

Code: Select all

<script>
function insertHelp(strText)
    {
        var nod=document.createElement("DIV");
        nod.ID = "helpPanel";
        mainContainer.insertBefore(nod, mainContent);
        nod.innerText= strText;
    }[FONT=verdana,geneva,lucida,'lucida grande',arial,helvetica,sans-serif]
[/font]</script>

When you click the help link, get it to call the function using the onClick event....

eg. onclick = "insertHelp('This is the help text');"

You can style the help layer using #helpPanel in css... obviously you will need to use float:right;

All the above code is from memory but it should give you an idea.

[breepupetstofight]

thanks Rob,

I almost have the code complete, the help files to be displayed at each help phase are stored as html files. How do i make the new div display these??

[MikeHopley]

Another option, instead of generating the help panel with javascript, is simply to hide it using the CSS display: none;

Then you can use javascript to change this to display: block; and reveal the panel:

Code: Select all

document.getElementById("helpPanel").style.display="block"