This topic is locked
[SOLVED]

  Show hints in forms -javascript

2/14/2007 6:23:26 AM
PHPRunner General questions
G
gdude66 author

This is not a question but a tip that I got to work.

This one comes courtesy of dynamicdrive.
In any form add the following after the body on load line

[codebox]<literal><style type="text/css">

hintbox{ /CSS for pop up hint box /

position:absolute;

top: 0;

background-color: lightyellow;

width: 150px; /Default width of hint./

padding: 3px;

border:1px solid black;

font:normal 11px Verdana;

line-height:18px;

z-index:100;

border-right: 3px solid black;

border-bottom: 3px solid black;

visibility: hidden;

}
.hintanchor{ /CSS for link that shows hint onmouseover/

font-weight: bold;

color: navy;

margin: 3px 8px;

}
</style>
&lt;script type="text/javascript">
/***

  • Show Hint script- © Dynamic Drive (www.dynamicdrive.com)
  • This notice MUST stay intact for legal use
  • Visit http://www.dynamicdrive.com/ for this script and 100s more.

    ***/
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
    /////No further editting needed
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.

    var ie=document.all

    var ns6=document.getElementById&&!document.all
    function getposOffset(what, offsettype){

    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

    var parentEl=what.offsetParent;

    while (parentEl!=null){

    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

    parentEl=parentEl.offsetParent;

    }

    return totaloffset;

    }
    function iecompattest(){

    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

    }
    function clearbrowseredge(obj, whichedge){

    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)-1 : parseInt(vertical_offset)-1

    if (whichedge=="rightedge"){

    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40

    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset

    )

    }

    else{

    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

    }

    return edgeoffset

    }
    function showhint(menucontents, obj, e, tipwidth){

    if ((ie||ns6) && document.getElementById("hintbox")){

    dropmenuobj=document.getElementById("hintbox")

    dropmenuobj.innerHTML=menucontents

    dropmenuobj.style.left=dropmenuobj.style.top=-500

    if (tipwidth!=""){

    dropmenuobj.widthobj=dropmenuobj.style

    dropmenuobj.widthobj.width=tipwidth

    }

    dropmenuobj.x=getposOffset(obj, "left")

    dropmenuobj.y=getposOffset(obj, "top")

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"

    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

    dropmenuobj.style.visibility="visible"

    obj.onmouseout=hidetip

    }

    }
    function hidetip(e){

    dropmenuobj.style.visibility="hidden"

    dropmenuobj.style.left="-500px"

    }
    function createhintbox(){

    var divblock=document.createElement("div")

    divblock.setAttribute("id", "hintbox")

    document.body.appendChild(divblock)

    }
    if (window.addEventListener)

    window.addEventListener("load", createhintbox, false)

    else if (window.attachEvent)

    window.attachEvent("onload", createhintbox)

    else if (document.getElementById)

    window.onload=createhintbox
    </script></literal>[/codebox]

    Then directly after the text box or form element add the following

    [codebox]<a href="#" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a>[/codebox]

    Edit the red bit to be whatever hint you want. It displays a ? and on mouse over the hint.

    Works well in ie 5+ and ff 1.0+ and you can use it multiple times in a form.
    There are many more in http://www.dynamicdrive.com/dynamicindex16/.

A
acpan 10/15/2007

Hi,
I am trying this using Phprunner 4.1 which i just bought.
I need to put tool tips to my forms elements.
I used visual editor in my add record form and switch to code view and

locate the head section, then inser the codes memtioned and follow instructions here

for the form elements, i don't seems to get it right, smarty error appearred when i

accessed the page from the web.
Is there anything i need to do ? Or is this code not applicable to 4.1 ?
Thanks for any help, anyone.
Dex

Alexey admin 10/17/2007

Dex,
the error message you get would help to assist you.

D
drh 10/17/2007

Graeme,

Thank you for posting such a great hint. This will surely come in very handy for me in the near future. Curious though, which version of PHPR are you using?

Dave

G
gdude66 author 10/17/2007

Graeme,

Thank you for posting such a great hint. This will surely come in very handy for me in the near future. Curious though, which version of PHPR are you using?

Dave



I am still using 3.1. I have a few 4.0 projects but haven't had the time or need to go 4.1 yet

A
acpan 11/7/2007

Hi Alexey,
Thanks for reply. when i browse i got the error as shown:
Error type 256

Error description Smarty error: [in all_com_agent_sms_tag_add.htm line 4]: syntax error: unrecognized tag: /CSS for pop up hint box / position:absolute; top: 0; background-color: lightyellow; width: 150px; /Default width of hint./ padding: 3px; border:1px solid black; font:normal 11px Verdana; line-height:18px; z-index:100; border-right: 3px solid black; border-bottom: 3px solid black; visibility: hidden; (Smarty_Compiler.class5.php, line 436)

URL 192.1.1.2/output/all_com_agent_sms_tag_add.php?

Error file C:\apache2triad\htdocs\output\libs\Smarty.class5.php

Error line 1095

SQL query
----------------------------------------------------

i have inserted after Head Section:

<HTML><HEAD><TITLE>Ads</TITLE>

------------------------------------------------------
<STYLE type=text/css>

hintbox{ /CSS for pop up hint box /

position:absolute;

top: 0;

background-color: lightyellow;

width: 150px; /Default width of hint./

padding: 3px;

border:1px solid black;

font:normal 11px Verdana;

line-height:18px;

z-index:100;

border-right: 3px solid black;

border-bottom: 3px solid black;

visibility: hidden;

}
.hintanchor{ /CSS for link that shows hint onmouseover/

font-weight: bold;

color: navy;

margin: 3px 8px;

}
</STYLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK

href="include/style.css" type=text/css rel=stylesheet>{$includes}

<META content="MSHTML 6.00.3790.2706" name=GENERATOR></HEAD>

<BODY {$bodyonload}>&lt;script type="text/javascript">
/***

  • Show Hint script- ? Dynamic Drive (www.dynamicdrive.com)
  • This notice MUST stay intact for legal use
  • Visit http://www.dynamicdrive.com/ for this script and 100s more.

    ***/
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
    /////No further editting needed
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.

    var ie=document.all

    var ns6=document.getElementById&&!document.all
    function getposOffset(what, offsettype){

    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

    var parentEl=what.offsetParent;

    while (parentEl!=null){

    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

    parentEl=parentEl.offsetParent;

    }

    return totaloffset;

    }
    function iecompattest(){

    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

    }
    function clearbrowseredge(obj, whichedge){

    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)-1 : parseInt(vertical_offset)-1

    if (whichedge=="rightedge"){

    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40

    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset

    )

    }

    else{

    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

    }

    return edgeoffset

    }
    function showhint(menucontents, obj, e, tipwidth){

    if ((ie||ns6) && document.getElementById("hintbox")){

    dropmenuobj=document.getElementById("hintbox")

    dropmenuobj.innerHTML=menucontents

    dropmenuobj.style.left=dropmenuobj.style.top=-500

    if (tipwidth!=""){

    dropmenuobj.widthobj=dropmenuobj.style

    dropmenuobj.widthobj.width=tipwidth

    }

    dropmenuobj.x=getposOffset(obj, "left")

    dropmenuobj.y=getposOffset(obj, "top")

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"

    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

    dropmenuobj.style.visibility="visible"

    obj.onmouseout=hidetip

    }

    }
    function hidetip(e){

    dropmenuobj.style.visibility="hidden"

    dropmenuobj.style.left="-500px"

    }
    function createhintbox(){

    var divblock=document.createElement("div")

    divblock.setAttribute("id", "hintbox")

    document.body.appendChild(divblock)

    }
    if (window.addEventListener)

    window.addEventListener("load", createhintbox, false)

    else if (window.attachEvent)

    window.attachEvent("onload", createhintbox)

    else if (document.getElementById)

    window.onload=createhintbox
    ----------------------------------------

    And i have inserted the hint into one of the form elements:

    ----------------------------------------
    <TR>

    <TD class=editshade_b style="PADDING-LEFT: 15px" width=150>TagMessage</TD>

    <TD class=editshade_lb style="PADDING-LEFT: 10px" width=250>{build_edit_control field="TagMessage" mode="add" value=$value_TagMessage} <A class=hintanchor onmouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')" href="#">[?]</A>

    </TD>

J
Jane 11/8/2007

Dex,
you need to add {literal} and {/literal} around your CSS and JavaScript code:

{literal}

<STYLE type=text/css>

hintbox{ /CSS for pop up hint box /

...

margin: 3px 8px;

}
</STYLE>

{/literal}

<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK

href="include/style.css" type=text/css rel=stylesheet>{$includes}

<META content="MSHTML 6.00.3790.2706" name=GENERATOR></HEAD>

<BODY {$bodyonload}>

{literal}

<script type="text/javascript">

...

</script>

{/literal}

<TR>

<TD class=editshade_b style="PADDING-LEFT: 15px" width=150>TagMessage</TD>

...

A
acpan 11/8/2007

Hi Jane, it worked now! Thanks for your advice. Here's the summary and hope it helps others.
In Visual Editor (Phprunner 4.1), Switch to html mode, and edit the codes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Ads</TITLE>
// -----------------------------------------------

// After Head Section and Title, add this:

// ------------------------------------------------
{literal}
<STYLE type=text/css>

hintbox{ /CSS for pop up hint box /

position:absolute;

top: 0;

background-color: lightyellow;

width: 150px; /Default width of hint./

padding: 3px;

border:1px solid black;

font:normal 11px Verdana;

line-height:18px;

z-index:100;

border-right: 3px solid black;

border-bottom: 3px solid black;

visibility: hidden;

}
.hintanchor{ /CSS for link that shows hint onmouseover/

font-weight: bold;

color: navy;

margin: 3px 8px;

}
</STYLE>

{/literal}
// --------------------
<META http-equiv=Content-Type content="text/html; charset=gb2312"><LINK

href="include/style.css" type=text/css rel=stylesheet>{$includes}

<META content="MSHTML 6.00.3790.2706" name=GENERATOR></HEAD>

<BODY {$bodyonload}>
// ---------------------------------------------------------------------

// Add this Java script below

// ---------------------------------------------------------------------
{literal}
<script type="text/javascript">
/***

  • Show Hint script- ? Dynamic Drive (www.dynamicdrive.com)
  • This notice MUST stay intact for legal use
  • Visit http://www.dynamicdrive.com/ for this script and 100s more.

    ***/
    var horizontal_offset="9px" //horizontal offset of hint box from anchor link
    /////No further editting needed
    var vertical_offset="0" //horizontal offset of hint box from anchor link. No need to change.

    var ie=document.all

    var ns6=document.getElementById&&!document.all
    function getposOffset(what, offsettype){

    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;

    var parentEl=what.offsetParent;

    while (parentEl!=null){

    totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;

    parentEl=parentEl.offsetParent;

    }

    return totaloffset;

    }
    function iecompattest(){

    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body

    }
    function clearbrowseredge(obj, whichedge){

    var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)-1 : parseInt(vertical_offset)-1

    if (whichedge=="rightedge"){

    var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40

    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth

    if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset

    )

    }

    else{

    var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18

    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight

    if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure)

    edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight

    }

    return edgeoffset

    }
    function showhint(menucontents, obj, e, tipwidth){

    if ((ie||ns6) && document.getElementById("hintbox")){

    dropmenuobj=document.getElementById("hintbox")

    dropmenuobj.innerHTML=menucontents

    dropmenuobj.style.left=dropmenuobj.style.top=-500

    if (tipwidth!=""){

    dropmenuobj.widthobj=dropmenuobj.style

    dropmenuobj.widthobj.width=tipwidth

    }

    dropmenuobj.x=getposOffset(obj, "left")

    dropmenuobj.y=getposOffset(obj, "top")

    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px"

    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"

    dropmenuobj.style.visibility="visible"

    obj.onmouseout=hidetip

    }

    }
    function hidetip(e){

    dropmenuobj.style.visibility="hidden"

    dropmenuobj.style.left="-500px"

    }
    function createhintbox(){

    var divblock=document.createElement("div")

    divblock.setAttribute("id", "hintbox")

    document.body.appendChild(divblock)

    }
    if (window.addEventListener)

    window.addEventListener("load", createhintbox, false)

    else if (window.attachEvent)

    window.attachEvent("onload", createhintbox)

    else if (document.getElementById)

    window.onload=createhintbox
    </script>
    {/literal}
    // ---------------------------------------------------------------------

    // Then on the same page, locate the form element, and add the hint:

    // <A class=hintanchor onmouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')"

    // href="#">[?]</A>

    // --------------------------------------------------------------------
    <TD class=editshade_lb style="PADDING-LEFT: 10px"

    width=250>{build_edit_control field="TagMessage" mode="add" value=$value_TagMessage}
    <A class=hintanchor onmouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')"

    href="#">[?]</A>
    </TD>

C
chaz 11/9/2007

does this grab data in another field in popup?? cheers
edit: its good that it worked but what use is { literal } ??? for reference

A
acpan 11/10/2007

> Does this grab data in another field in popup?? cheers
I have not tried that. It will be good to use hint to display something that relates to the data

entered on the field (before user clicks save).
Example: if user enters phone_number on the form,

when mouseover the hint, it pops the name of the telephone number owner

using SQL query on another table, this is something i wish to accomplish too.
If anyone (Jane, Alexey, Sergey et al) can advise some tricks to do that will be extremely useful.
> edit: its good that it worked but what use is { literal } ??? for reference
i think it's just a marker related to smarty to treat the section as it is.

R
rainerwolf 6/10/2008

Hi Graeme,
perfect it works great. Many thanks to you.
Rainer

L
laonian 2/22/2009

Thanks everyone for sharing. I tried your code and it works great. One problem is coming from the master-detail preview popup.
I have showhints working in the detail table list page. But when this page is shown from the master list page by onmouseover popup, the urls for the showhints are still active. But when you hover the mouse on target, the hint popup is displayed behind the preview window- that is the hint is shown on a layer between master and detail preview windows. Is there a way to force the hint to show to the front layer in this case? Thanks.