SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    0 Post(s)
    0 Thread(s)

    Javascript hover over popup

    I'm trying to add a translation widget to my site. It works fine but, the thing pops up the window when i hover over it. Is there any way to have it only open if it's clicked on?
    Code JavaScript:
    <a href="" id="ftwtranslation_button" hreflang="en" title="" style="border:0;"><img src="" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0;"/></a> <script type="text/javascript" src="" /></script>

    I'd just use Googles translate widget but for some reason firefox users see a constant loading progress bar, "transferring data from" which is just as annoying.

    Any help is appreciated.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Melbourne, AU
    17 Post(s)
    1 Thread(s)
    Its hard coded to use the onmouseover attribute so the only way to update it would be to host the script locally on your server.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    2 Post(s)
    0 Thread(s)
    There is a way to do it. Just use the image in a cover layer above the required button and make both the cover layer and the translation layer position:absolute and toggle between display:block and display:none. The cover layer needs an onclick handler to reveal the active button. The script below does all of this. One improvement would be to build in a timeout so that the non-active layer can be restored if the button is not being used after activating.

    I have used in-line handlers to make it clear what is happening.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Translate Button</title>
    <script type="text/javascript">
    var coverObj, transObj;  // global
     function init()
      { // shorcut to active objects 
    // ---------
     function show()
       { // show translate button     
    <style type="text/css">
    body  { margin:3px 0px; text-align:center; }
    #wrap { position:relative; top:0px; left:0px; width:500px; height:400px; border:1px solid #666; margin:0px auto;  }
    #cover { position:absolute; top:0px; left:0px; width:152px; height:24px; cursor:pointer;  }
    #trans { display:none; position:absolute; top:0px; left:0px; width:150px; height:22px; text-align:left; border:1px solid blue; }
    <body onload="init()">
    <div id="wrap">
      <div id="cover" onclick="show()">
        <img src="" alt="Free Translation Widget" style="border:0" width="150" height="22">
      <!-- end cover -->
      <div id="trans">
        <a href="" id="ftwtranslation_button" hreflang="en" title style="border:0;">
        <img src="" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0" width="150" height="22"></a>
        <script type="text/javascript" src="">
      <!-- end trans -->
    <!-- end wrap -->


Posting Permissions

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