Help Window

Sometimes in your surveys you will want to offer your users some additional help, now you could just put it on the page but you might not have enough space for it so it is a good idea to add some sort of help icon that the user can click on to open up another window and display the help. In this example we show you have to achieve this functionality.

Firstly you have to find the image that you think the user will understand as a button you can gain further help from. In our example we are going to use the following icon. The next thing we need to do is to make it click-able. To do this we use the following html.

           

Don’t forget to change the src of the image to the one on your server. Once you have this we need to add an onclick event to the html. this would be something like

onClick="window.open('http://localhost/help.htm','HWIN', 'width=400,height=200,left=0,top=100,screenX=0,screenY=100')"

We obviously need to create a help.htm file and put it somewhere on the sever so when the image is clicked it shows the right information. You should also note that we are using the window.open command to open the information into a new window. Once this is completed you should end up with an icon that pops open a new window.

As we can see it is possible to have lots of different attributes in the window.open function. The possible values for the attributes are

width=100 This determines the width of the window in pixels
height=100 This determines the height of the window in pixels
resizable=yes or no This determines if the user can re-size the window
scrollbars=yes or no This determines if you window has scroll bars or not
toolbar=yes or no This determines if the user has access to the navigation buttons etc
location=yes or no This determines if the location url is visible to the user
directories=yes or no This determines if the other buttons on a browser are visible
status=yes or no This determines if the status bar window should be shown
menubar This determines if the menu options of the browser should be shown
copyhistory This determines if the browser history should be copied to the new window
screenX ** This determines the left position of the window
screenY ** This determines the Top position of the window
left **** This determines the left position of the window
top **** This determines the Top position of the window

** Only works with Netscape 4+
**** Only works with Internet Explorer 4+

Leave a Comment

%d bloggers like this: