SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Feb 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    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="http://free-website-translation.com/" id="ftwtranslation_button" hreflang="en" title="" style="border:0;"><img src="http://free-website-translation.com/img/fwt_button_en.gif" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0;"/></a> <script type="text/javascript" src="http://free-website-translation.com/scripts/fwt.js" /></script>

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

    Any help is appreciated.

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,183
    Mentioned
    17 Post(s)
    Tagged
    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.
    Blog/Portfolio | Evolution Xtreme | DFG Design | DFG Hosting | CSS-Tricks | Stack Overflow | Paul Irish
    Having lame problems with your code? Let us help by using a jsFiddle

  3. #3
    SitePoint Addict AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    286
    Mentioned
    0 Post(s)
    Tagged
    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">
    <html>
     
    <head>
    <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 
        coverObj=document.getElementById("cover");
        transObj=document.getElementById("trans");
       }
    // ---------
     function show()
       { // show translate button     
          coverObj.style.display="none";
          transObj.style.display="block";
      }
    //-->
    </script>
    <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; }
    -->
    </style>
    </head>
     
    <body onload="init()">
     
    <div id="wrap">
      <div id="cover" onclick="show()">
        <img src="http://free-website-translation.com/img/fwt_button_en.gif" alt="Free Translation Widget" style="border:0" width="150" height="22">
      </div>
      <!-- end cover -->
      <div id="trans">
        <a href="http://free-website-translation.com/" id="ftwtranslation_button" hreflang="en" title style="border:0;">
        <img src="http://free-website-translation.com/img/fwt_button_en.gif" id="ftwtranslation_image" alt="Free Translation Widget" style="border:0" width="150" height="22"></a>
        <script type="text/javascript" src="http://free-website-translation.com/scripts/fwt.js">
        </script>
      </div>
      <!-- end trans -->
    </div>
    <!-- end wrap -->
     
    </body>
     
    </html>


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
  •