Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    activate hyperlink after holding down mouse for 3 seconds in a image map

    hi everyone,

    firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse...

    When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result.

    Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway.

    I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds.

    anybody want to trade some help for a thankyou?

  • #2
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by djrakun View Post
    I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Test Page</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    </head>
    <body>
    <p>
     <span>Hold down for three seconds</span>
    <p>
     <a href='http://mozilla.com/firefox'>FireFox</a>
    <p>
     <a href='http://opera.com'>Opera</a>
     
    <script type="text/javascript">
    
    function delayLink( url )
    {
     this.nav = function(){ window.location.href = this.url; }
       
     if( !url )
      clearTimeout( this.timer );
     else  
     {
      if( this.timer ) 
       clearTimeout( this.timer ); 
      this.url = url; 
      
      this.timer = setTimeout( this.nav, 3000 ); 
     } 
    }
    
    for( var i = 0, dl = document.links, len = dl.length; i < len; i++ )
    {
     dl[ i ].onmousedown =  function(){ delayLink( this.href ); }  
     dl[ i ].onmouseup = dl[ i ].onmouseout = function(){ delayLink( null ); }    
     dl[ i ].onclick = function(){ return false; }    
    }
    
    </script>
    
    </body>
    </html>
    Yes I know...

  • Users who have thanked RandomUser531 for this post:

    djrakun (07-27-2010)

  • #3
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thanks, Phil, but like my other attempts, I can't seem to get this to work within an image map. for example, one of my points on my map is pasted below. If i click on that point i am immediately forwarded to mozilla, even after adding the java script logic you included above

    Code:
    <area shape="rect" coords="623,30,637,43"
     href="http://mozilla.com/firefox" target="_top"
     onmouseover="ddrivetip('<b>Mozilla</b><br><br><b>Location: </b>this link will take you to Mozilla's download page<br><br><b>Why? </b>better than internet exploder<br><br><b>Actions: </b>click on download link when you get there<br><br>', 'white', 300)"
     onmouseout="hideddrivetip()" alt="Mozilla" ; ="">

  • #4
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    O.K. just replace the script block with this, which must be located below all links and <area>s:
    Code:
    <script type="text/javascript">
    
    (function(){
    
     function delayLink( url )
     {
      this.nav = function(){ window.location.href = this.url; }
       
      if( !url )
       clearTimeout( this.timer );
      else  
      {
       if( this.timer ) 
        clearTimeout( this.timer ); 
       this.url = url; 
      
       this.timer = setTimeout( this.nav, 3000 ); 
      } 
     }
    
     var eTypes = [ document.getElementsByTagName('area'), document.links ];
    
     for( var i = 0, len = eTypes.length; i < len; i++ )
      for( var j = 0, t = eTypes[i], tLen = t.length; j < tLen; j++ )
      {
       t[ j ].onmousedown =  function(){ delayLink( this.href ); }  
       t[ j ].onmouseup = function(){ delayLink( null ); }    
       t[ j ].onclick =  function(){ return false; }    
      }
    
    })(/*28432953637269707465726C61746976652E636F6D*/);
    
    </script>
    Last edited by RandomUser531; 07-27-2010 at 05:56 PM.

  • #5
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    oh, you are GOOD! you'll have to explain to me what the heck this is

    Code:
    })(/*28432953637269707465726C61746976652E636F6D*/);
    anyway, through a browser this works great. easy cut and paste job and works with my original html pages ( sans the doubleclick javascript nonsense). Unfortunately the new code seems to have no effect within the android webview. Maybe there is some deficiency in the android sdk that has made this not work up until now.

    Thanks again, Phil. you're doing great

  • #6
    New Coder
    Join Date
    Jul 2010
    Posts
    61
    Thanks
    0
    Thanked 21 Times in 21 Posts
    Quote Originally Posted by djrakun View Post
    the new code seems to have no effect within the android webview. Maybe there is some deficiency in the android sdk that has made this not work up until now.
    I have no experience of Android Webview but have you configured it to run JavaScript? http://developer.android.com/referen...t/WebView.html

  • #7
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes. I have some javascript that displays tooltips when you hover over a point and that works ok. My guess is that holding down on the touchscreen does not register as a click, like a tap does. Some other gesture probably takes over when the screen is held, like drag movement. Well, I think I'll try to tackle hthis problem in the android dev forums


  •  

    Posting Permissions

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