Using #hintbox on an iPad

**ttgivencej** · 02-11-2014, 02:18 AM

1) Script Title: hintbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex16/showhint.htm

3) Describe problem: This works fine on a PC. For an iPad though, the hint is displayed but it doesn't shut off. You can see how this works by using the example on the http://www.dynamicdrive.com/dynamicindex16/showhint.htm page. When you touch the [?] the hint pops up but there is no way to turn it off. Does anyone have a solution or suggest a different script to use? Over 50% of my visitors are using an iPad or other mobile devices to view my website.

**vwphillips** · 02-11-2014, 09:27 AM

this will

toggle the visibility onclick of the link
hide onclick of the hintbox
hide after a specified delay

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></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>

<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
var hidedelay=4;             //the auto hide delay in seconds
/////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");
  if (!dropmenuobj.style.visibility){
   dropmenuobj.onclick=hidetip;
  }
  dropmenuobj.style.visibility=dropmenuobj.innerHTML!=menucontents||dropmenuobj.style.visibility!="visible"?"visible":"hidden";
  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";
  clearTimeout(hidetip.to);
  typeof(hidedelay)=='number'&&hidedelay>0?hidetip.to=setTimeout(function(){  hidetip(); },hidedelay*1000):null;
 }
}

function hidetip(e){
dropmenuobj.style.visibility="hidden"
dropmenuobj.style.left="-500px"
  dropmenuobj.innerHTML='';
}

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></head>

<body>
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onclick="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />
<b>Password:</b>  <input type="text" class="test" /> <a href="#" class="hintanchor" onclick="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px')">[?]</a><br />
</form>
</body>

</html>

**ttgivencej** · 02-11-2014, 10:03 PM

[QUOTE=vwphillips;305291]
this will toggle the visibility onclick of the link
hide onclick of the hintbox
hide after a specified delay
[QUOTE]

Hello vwphillips,

Thanks for the quick response.

What I was actually trying to do is have the same hintbox function when using the iPad/iPhone.

Is this possible?
If the user is on an iPad/iPhone
Place an x-exit image inside the hintbox.
When user touches the [?] the onclick command displays the hintbox.
If the user touches x-exit box it exits out back to the webpage.
If the user touches anywhere inside the hintbox it goes to the href link.

If the user is on a normal browser:
Can the onMouseover existing function still work exactly as it does today.
Or use the onclick to activate the hintbox and operate just like the above.

Thanks,
John Vence

**ttgivencej** · 02-12-2014, 12:46 AM

Hello Vic,

Thanks for the quick response.

I tried setting the hidedelay to 10 and used onMouseover, see example:

<b>Username:</b> <input type="text" class="test" /> <a href="google.com" class="hintanchor" onMouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a><br />

This seems to work better. The user can click on the hint text and it will disapear.

So, my questions are:
- can you make the code work this above way for iPad and the old way for non-iPad?
- can you add another parameter to showhint to pass the number of seconds for timeout, this way we can make it short or long depending on amount of text.

Thanks for all your help,
John Vence

**vwphillips** · 02-12-2014, 08:40 AM

the delay is passed to the function(for no delay use -1)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></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>

<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
var hidedelay=4;             //the auto hide delay in seconds
/////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,dly){
 if ((ie||ns6) && document.getElementById("hintbox")){
  dropmenuobj=document.getElementById("hintbox");
  if (!dropmenuobj.style.visibility){
   dropmenuobj.onclick=hidetip;
  }
  dropmenuobj.style.visibility=(e.type!='mouseout'&&(dropmenuobj.innerHTML!=menucontents||dropmenuobj.style.visibility!="visible"))||e.type!='mouseover'?"visible":"hidden";
  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";
  clearTimeout(hidetip.to);
  var dly=typeof(dly)=='number'?dly:typeof(hidedelay)=='number'?hidedelay:-1;
  dly>0?hidetip.to=setTimeout(function(){  hidetip(); },dly*1000):null;
 }
}

function hidetip(e){
 if (dropmenuobj){
  dropmenuobj.style.visibility="hidden"
  dropmenuobj.style.left="-500px"
  dropmenuobj.innerHTML='';
 }
}

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></head>

<body>
<form>
<b>Username:</b> <input type="text" class="test" /> <a href="#" class="hintanchor" onmouseout="hidetip();" onmouseover="showhint('Please choose a username. Should consist of alphanumeric characters only.', this, event, '150px',10)">[?]</a><br />
<b>Password:</b>  <input type="text" class="test" /> <a href="#" class="hintanchor" onmouseout="hidetip();" onmouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or longer.', this, event, '200px',5)">[?]</a><br />
</form>
</body>

</html>

**ttgivencej** · 02-13-2014, 03:13 AM

Hello Vic,

Thanks again, this now works nicely on both a PC and iPad.

One more request, on a small iPhone screen sometimes the hintbox appears above the [?] click area. Can you force it to always create the hintbox below the [?] click area.

Thanks,
John Vence