Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations IamaSherpa on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Turn Off JS Help on Mouse Click 2

Status
Not open for further replies.
fpwr

fpwr

Programmer
Oct 21, 2003
95
US
We have a web application where we employ "hover" style help for various fields:

example.jpg


While this is very useful for new users it can be very annoying for frequent users---especially on forms with a lot of fields. What we would really like to be able to do is to give users the ability to turn the help system ON or OFF on the fly (i.e. enable/disable the JS that creates the "hover" text), however, the ability to do that is beyond our "hack" JS skills at the moment.

If anyone has any examples on how we might be able to do this it would be greatly appreciated. You can see a simple working example of what we're trying to do HERE (except of course that the on/off button doesn't work) and you can download the files for the example HERE.

Thanks for any help anyone is willing to offer!

Paul.
 
Sort by date Sort by votes
I wrote a solution, but only tested it with IE6. My Changes are in bold:

<html><body>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib2.js"></script>

Welcome, please login below:<BR><BR>

<FORM NAME="Login" METHOD="POST" ACTION="authenticate.cfm">

Username:<INPUT TYPE="TEXT" NAME="PensID" SIZE="10" onmouseover="return overlib('Please input your Username', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD><BR>
Password:<INPUT TYPE="PASSWORD" NAME="PensPassword" SIZE="10" onmouseover="return overlib('Please input your Password', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD><BR><BR>

Help System:<br>
ON:&nbsp;
<input type="radio" Name="Help" Value="Turn_On" onclick="onHelp()" CHECKED>
&nbsp;&nbsp;OFF:&nbsp;
<input type="radio" Name="Help" onclick="offHelp()" Value="Turn_Off"><br><br>


<INPUT TYPE="submit" VALUE="Log on the Website"></center>
</form>

<script>

Global_help_on = true;
Global_showObject_backup = overlib;

function offHelp()
{
if(Global_help_on)
{
overlib = function(){};
Global_help_on = false;
}
}

function onHelp()
{
if(!Global_help_on)
{
overlib = Global_showObject_backup;
Global_help_on = true;
}
}

</script>

</body></html>


jared@eae.net -
 
Upvote 0 Downvote
Holy cow---I figured this would be one of those check-back-in-a-week kind of posts! You're awesome---it works great and is simple to implement!

THANK YOU!

Paul.
 
Upvote 0 Downvote
Okay I hope I'm not trying to get too fancy here.... As I've been completing the work on this application it's become clear that I need to be able to maintain the user's selection across multiple form pages. I've been trying to do this by utilizing some cookie setting functions from Netspade:

Code: 
function setCookie(name, value, expires, path, domain, secure)
{
    document.cookie= name + "=" + escape(value) +
        ((expires) ? "; expires=" + expires.toGMTString() : "") +
        ((path) ? "; path=" + path : "") +
        ((domain) ? "; domain=" + domain : "") +
        ((secure) ? "; secure" : "");
}

function getCookie(name)
{
    var dc = document.cookie;
    var prefix = name + "=";
    var begin = dc.indexOf("; " + prefix);
    if (begin == -1)
    {
        begin = dc.indexOf(prefix);
        if (begin != 0) return null;
    }
    else
    {
        begin += 2;
    }
    var end = document.cookie.indexOf(";", begin);
    if (end == -1)
    {
        end = dc.length;
    }
    return unescape(dc.substring(begin + prefix.length, end));
}

I was able to get it to set an initial cookie and then read the cookie into an alert box (so I know that at least that part is working) with something like the following:

Code: 
<input type="radio" Name="Help" onclick="onHelp();setCookie('Help_Status', 'Y');" Value="Turn_On">

What I really need it to do, however, is the following:
[ul]
[li]Read the value of the cookie[/li]
[li]Check on the form the appropriate radio button depending on the value of the cookie[/li]
[li]Execute the appropriate [tt]onhelp()[/tt] or [tt]offhelp()[/tt] function to turn the help on or off[/li]
[li]Set the value of the cookie (if it has changed)[/li]
[/ul]

Is this difficult to do? Thanks.

Paul.

 
Upvote 0 Downvote
Set an onload function in your body to do all the tasks you mentioned when the page loads:

<body onload="loadPage();">

then define a function similar to this:
Code: 
function loadPage() {
   //read in the cookie
   radioStatus = getCookie('Help_Status');
   //check radio button accordingly
   //I would store a 0 or 1 in the cookie personally to stand for the
   //index of the radio button that will be checked
   // 0 for on, 1 for off
   document.formName.Help[radioStatus].checked = true;
   //Execute the appropriate onhelp() or offhelp() function
   if (radioStatus == 0) {
      onHelp();
   }
   else {
      offHelp();
   }
}
As far as the last step goes, you're already doing that in the onclick of each radio element. One other thing that I would do personally is condense the help functions into one function and pass true or false as a parameter to turn them on or off, but that's just me.

-kaht

banghead.gif
 
Upvote 0 Downvote
Okay, I think that I might be close but I keep getting "[tt]error: 'document.HelpForm.Help(...) is null or not an object[/tt]'." I'm thinking that this might have something to do with where I'm loading the [tt]loadPage()[/tt] function (i.e. maybe it's being called before it's loading) but even putting it in the [tt]head[/tt] section didn't make a difference.

Aside from the help overlay script ([tt]overlib2.js[/tt] that you can download in the first post) this is what I have so far (simplified into one file):

Code: 
<HTML><HEAD>

<SCRIPT LANGUAGE="JavaScript"><!--

	function setCookie(name, value, expires, path, domain, secure)
	{
   	 document.cookie= name + "=" + escape(value) +
        	((expires) ? "; expires=" + expires.toGMTString() : "") +
        	((path) ? "; path=" + path : "") +
        	((domain) ? "; domain=" + domain : "") +
        	((secure) ? "; secure" : "");
	}

	function getCookie(name)
	{
    	var dc = document.cookie;
    	var prefix = name + "=";
    	var begin = dc.indexOf("; " + prefix);
    	if (begin == -1)
    	{
        	begin = dc.indexOf(prefix);
        	if (begin != 0) return null;
   	}
    	else
    	{
        	begin += 2;
    	}
    	var end = document.cookie.indexOf(";", begin);
    	if (end == -1)
    	{
        	end = dc.length;
    	}
    	return unescape(dc.substring(begin + prefix.length, end));
	}

	function loadPage() {
   	radioStatus = getCookie('Help_Status');
   	document.HelpForm.Help[radioStatus].checked = true;
   	if (radioStatus == 0) {
      	onHelp();
   	}
   	else {
      	offHelp();
   	}
	}

// End hiding --></SCRIPT>

</HEAD>

<body onload="loadPage();">

<SCRIPT LANGUAGE="JavaScript"><!--

	Global_help_on = true;
	Global_showObject_backup = overlib;

	function offHelp()
	{
    	if(Global_help_on)
    	{
        	overlib = function(){};
        	Global_help_on = false;
    	}
	}

	function onHelp()
	{
    	if(!Global_help_on)
    	{
        	overlib = Global_showObject_backup;
        	Global_help_on = true;
    	}
	}

// End hiding --></SCRIPT>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script language="JavaScript" src="overlib2.js"></script>

<form name="HelpForm"><table width="100%">
	<tr><td align="right"><font size="2"><b>Expanded Help System</b></font></td></tr>
	<tr><td align="right"><font size="1">Turn ON:</font>&nbsp;<input type="radio" Name="Help" Value="Turn_On" style="border: 0px;background-color: #FFFFFF" onclick="onHelp();setCookie('Help_Status', 'Y');">&nbsp;&nbsp;&nbsp;<font size="1">Turn OFF:</font>&nbsp;<input type="radio" Name="Help" Value="Turn_Off" style="border: 0px;background-color: #FFFFFF" onclick="offHelp();setCookie('Help_Status', 'N');"></td></tr>
</table></form><br>

<BR><BR><center><font size="5" face="Comic Sans MS"><b>Welcome, please login below:</b></center>

<FORM NAME="login" METHOD="POST" ACTION="authenticate.cfm">

<center>
<table cellpadding="3">
<tr><td colspan="2">
       <TABLE CELLPADDING=2>
        <TR><TD VALIGN="MIDDLE"><font size="-1">DS ID</TD>
        <TD VALIGN="MIDDLE"><INPUT TYPE="TEXT" NAME="PensID" SIZE="10" MAXLENGTH="8" onmouseover="return overlib('Please input your DS (Directory Services) ID in this field.  If you do not know what your DS ID is, you can get that information by clicking on the <b>DS ID Lookup</b> link below.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD></TR>
        <TR><TD><font size="-1">Password</TD>
        <TD><INPUT TYPE="PASSWORD" NAME="PensPassword" SIZE="10" MAXLENGTH="30" onmouseover="return overlib('Please input your DS (Directory Services) password in this field.  If you do not know what your DS password is, you can reset it by clicking on the <b>DS ID Lookup</b> link below and clicking the &rdquo;DS User Password Reset&rdquo; link.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD></TR>
       </TABLE>
</td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<INPUT TYPE="submit" VALUE="Log on the Website" onmouseover="return overlib('After entering in your information above click here to log into the system.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></center>
</form>

</td></tr></table></center>
</font>

<br><hr>

</body></html>

The "Turn ON" & "Turn OFF" buttons do work (they turn off the overlay), however, if I choose "OFF" and then refresh the page it is obvious to me that it's not working correctly as it reverts back to the overlay being "ON" (even though the button stays on "OFF"). Also, you cannot go from "OFF" back to "ON" and have the overlay work again....

Any ideas? Thanks.

Paul.
 
Upvote 0 Downvote
There's a few things I've changed. I got an error when loading your js file so I moved it to the top of the page and that solved that problem. Also, for your document.HelpForm.Help(...) is null or not an object error, you had not taken my suggestion and stored 0 or 1 in the cookie. This in turn was making the document try to reference document.HelpForm.Help['Y'] and document.HelpForm.Help['N'] respectively. Also, make sure to put an expire date for your cookie at some irrelevant point somewhere far in the future, otherwise the cookie is deleted every time the browser window is closed. Finally, if the user has never visited the site before he/she will not have a cookie stored to his/her machine. Therefore I put in a check to ensure the cookie value was 0 or 1, and if not default to 0 (help enabled). Here is the working example I got (with changes bolded):
Code: 
<HTML><HEAD>
[b]
<script language="JavaScript" src="overlib2.js"></script>
[/b]
<SCRIPT LANGUAGE="JavaScript"><!--
    var expireDate = new Date();
    expireDate.setTime(Date.parse("01/01/3000"));
    function setCookie(name, value, expires, path, domain, secure)
    {
        document.cookie= name + "=" + escape(value) +
            ((expires) ? "; expires=" + expires.toGMTString() : "") +
            ((path) ? "; path=" + path : "") +
            ((domain) ? "; domain=" + domain : "") +
            ((secure) ? "; secure" : "");
    }

    function getCookie(name)
    {
        var dc = document.cookie;
        var prefix = name + "=";
        var begin = dc.indexOf("; " + prefix);
        if (begin == -1)
        {
            begin = dc.indexOf(prefix);
            if (begin != 0) return null;
       }
        else
        {
            begin += 2;
        }
        var end = document.cookie.indexOf(";", begin);
        if (end == -1)
        {
            end = dc.length;
        }
        return unescape(dc.substring(begin + prefix.length, end));
    }

    function loadPage() {
       radioStatus = getCookie('Help_Status');
       [b]if (radioStatus != 0 && radioStatus != 1) {
          radioStatus = 0;
       }[/b]
       document.HelpForm.Help[radioStatus].checked = true;
       if (radioStatus == 0) {
          onHelp();
       }
       else {
          offHelp();
       }
    }

// End hiding --></SCRIPT>

</HEAD>

<body onload="loadPage();">

<SCRIPT LANGUAGE="JavaScript"><!--

    Global_help_on = true;
    Global_showObject_backup = overlib;

    function offHelp()
    {
        if(Global_help_on)
        {
            overlib = function(){};
            Global_help_on = false;
        }
    }

    function onHelp()
    {
        if(!Global_help_on)
        {
            overlib = Global_showObject_backup;
            Global_help_on = true;
        }
    }

// End hiding --></SCRIPT>

<div id="overDiv" style="position:absolute; visibility:hidden; z-index:1000;"></div>

<form name="HelpForm"><table width="100%">
    <tr><td align="right"><font size="2"><b>Expanded Help System</b></font></td></tr>
    <tr><td align="right"><font size="1">Turn ON:</font>&nbsp;<input type="radio" Name="Help" Value="Turn_On" style="border: 0px;background-color: #FFFFFF" onclick="onHelp();[b]setCookie('Help_Status', 0, expireDate);[/b]">&nbsp;&nbsp;&nbsp;<font size="1">Turn OFF:</font>&nbsp;<input type="radio" Name="Help" Value="Turn_Off" style="border: 0px;background-color: #FFFFFF" onclick="offHelp();[b]setCookie('Help_Status', 1, expireDate);[/b]"></td></tr>
</table></form><br>

<BR><BR><center><font size="5" face="Comic Sans MS"><b>Welcome, please login below:</b></center>

<FORM NAME="login" METHOD="POST" ACTION="authenticate.cfm">

<center>
<table cellpadding="3">
<tr><td colspan="2">
       <TABLE CELLPADDING=2>
        <TR><TD VALIGN="MIDDLE"><font size="-1">DS ID</TD>
        <TD VALIGN="MIDDLE"><INPUT TYPE="TEXT" NAME="PensID" SIZE="10" MAXLENGTH="8" onmouseover="return overlib('Please input your DS (Directory Services) ID in this field.  If you do not know what your DS ID is, you can get that information by clicking on the <b>DS ID Lookup</b> link below.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD></TR>
        <TR><TD><font size="-1">Password</TD>
        <TD><INPUT TYPE="PASSWORD" NAME="PensPassword" SIZE="10" MAXLENGTH="30" onmouseover="return overlib('Please input your DS (Directory Services) password in this field.  If you do not know what your DS password is, you can reset it by clicking on the <b>DS ID Lookup</b> link below and clicking the &rdquo;DS User Password Reset&rdquo; link.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></TD></TR>
       </TABLE>
</td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>
</table>

<INPUT TYPE="submit" VALUE="Log on the Website" onmouseover="return overlib('After entering in your information above click here to log into the system.', TEXTFONT, 'Verdana', FGCOLOR, '99CCFF', TEXTCOLOR, '000000', WIDTH, '175');" onmouseout="return nd();"></center>
</form>

</td></tr></table></center>
</font>

<br><hr>

</body></html>

-kaht

banghead.gif
 
Upvote 0 Downvote
Once again I am in your debt! The only thing I would add (for anyone else who may be viewing this thread later) is that it looks like you also added the following to the cookie handling routine (but it wasn't in bold):

Code: 
    var expireDate = new Date();
    expireDate.setTime(Date.parse("01/01/3000"));

Thanks again - you & jaredn have been AWESOME!

Paul.
 
Upvote 0 Downvote
DOH! You're right, forgot to bold that part. Thanks for the star.

-kaht

banghead.gif
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
556
xwb
xwb
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
577
Kennelbloke
Kennelbloke
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
648
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
454
coldbohemia
coldbohemia
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
718
xwb
xwb

Part and Inventory Search

Sponsor

Back
Top