Results 1 to 6 of 6

Thread: Using #hintbox on an iPad

  1. #1
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Using #hintbox on an iPad

    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.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    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>
    Last edited by vwphillips; 02-11-2014 at 01:32 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Hintbox with iPad

    [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

  4. #4
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by ttgivencej; 02-12-2014 at 12:57 AM.

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    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>
    Last edited by vwphillips; 02-12-2014 at 08:50 AM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Feb 2014
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Similar Threads

  1. ddlevelsmenu problem on ipad
    By BodoF in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-14-2012, 11:59 AM
  2. Identifying Ipod or Ipad
    By SteveHeavy in forum Looking for such a script or service
    Replies: 2
    Last Post: 02-01-2012, 08:17 PM
  3. IFRAME scroller on iPad
    By tonywscott in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-26-2011, 04:50 PM
  4. Resolved ipad problem
    By traq in forum CSS
    Replies: 12
    Last Post: 05-22-2011, 02:48 AM
  5. Using the HintBox script
    By peteyb in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-29-2008, 06:20 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •