SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Thread: Timer on hover

  1. #1
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Timer on hover

    I'm trying to edit some javascript which was created by another coder.
    It is basically a hover event that has been set to stay visible once the mouse has rolled over the button. It now needs to be changed so that the rollover stays visible for 3 seconds, then disappears. Here is the code:

    function clearTimer() {

    clearTimeout(t);
    }


    function timeOut() {

    t=setTimeout("changeContent(0)",2000);
    }

    function changeContent(info) {

    pinfo = info;

    clearTimer();

    if (document.getElementById || document.all)

    {

    var basehtml = "<div id=\"upper-sidebar-inner\"><div class=\"info\" onmouseover=\clearTimer();\">";


    switch(info)
    {
    case 0:
    break;
    case 1:
    mo[1] = "";
    mo[2] = "onmouseover=\"changeContent(2);\"";
    mo[3] = "onmouseover=\"changeContent(3);\"";
    break;
    case 2:
    mo[1] = "onmouseover=\"changeContent(1);\"";
    mo[2] = "";
    mo[3] = "onmouseover=\"changeContent(3);\"";

    break;
    case 3:
    mo[1] = "onmouseover=\"changeContent(1);\"";
    mo[2] = "onmouseover=\"changeContent(2);\"";
    mo[3] = "";
    break;

    }

    I hope that someone can help?

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I hope someone can help too. Please provide the html that is supposed to work hand-in-hand with the above javascript.

    Without the related html, it's similar to the sound of one hand clapping.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry!
    Here's the html to go with the javascript:

    thanks

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>rollover</title>



    <script>
    var t;
    var pinfo;
    var mo = new Array(3);

    function clearTimer() {

    clearTimeout(t);
    }


    function timeOut() {

    t=setTimeout("changeContent(0)",2000);
    }

    function changeContent(info) {

    pinfo = info;

    clearTimer();

    if (document.getElementById || document.all)

    {

    var basehtml = "<div id=\"upper-sidebar-inner\"><div class=\"info\" onmouseover=\clearTimer();\">";


    switch(info)
    {
    case 0:
    break;
    case 1:
    mo[1] = "";
    mo[2] = "onmouseover=\"changeContent(2);\"";
    mo[3] = "onmouseover=\"changeContent(3);\"";
    break;
    case 2:
    mo[1] = "onmouseover=\"changeContent(1);\"";
    mo[2] = "";
    mo[3] = "onmouseover=\"changeContent(3);\"";

    break;
    case 3:
    mo[1] = "onmouseover=\"changeContent(1);\"";
    mo[2] = "onmouseover=\"changeContent(2);\"";
    mo[3] = "";
    break;

    }
    var sidehtml = "<a href=\"solution-finder/\""+ mo[1]+" id=\"us1\">Find a solution</a><a href=\"calculators/\""+mo[2]+" id=\"us2\">Use calculators</a><a href=\"apply-online/\""+mo[3]+" id=\"us3\">Apply online</a>"
    var shtml = "";

    switch(info)
    {

    case 0:
    shtml = "<div id=\"upper-sidebar-inner\" onmouseover=\"clearTimer();\"></div>" + sidehtml;
    break;
    case 1:
    shtml = basehtml + "<h2><a href=\"solution-finder/\">Find a Solution</a></h2></div></div>" + sidehtml;
    break;
    case 2:
    shtml = "<div id=\"upper-sidebar-inner\" onmouseover=\"clearTimer();\"><div class=\"info\" onmouseover=\"clearTimer();\"><h2>Calculators</h2><ul><li><a href=\"calculator/\">Calculator</a></li></ul></div></div>" + sidehtml;
    break;
    case 3:
    shtml = "<div id=\"upper-sidebar-inner\"><div class=\"info\" onmouseover=\"clearTimer();\"><h2><a href=\"apply-online/\">Apply online</a></h2></div></div>" + sidehtml;
    break;
    }

    var id = 'upper-sidebar';
    var el = document.getElementById? document.getElementById(id): document.all[id];
    if (el && typeof el.innerHTML != "undefined") el.innerHTML = shtml;

    }
    }

    </script>

    </head>

    <body>

    <div id="upper" class="clearfix" >
    <div id="upper-content">

    </div>

    <div id="upper-sidebar" >
    <div id="upper-sidebar-inner" >

    </div>

    <a href="/solution-finder/" onmouseover="changeContent(1);" id="us1">Find a solution</a>


    </div>
    </div>






    </body>
    </html>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Would people find it easier to provide a solution if they take the general idea, and come up with a different javascript solution that achieves the desired effec?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I'd be happy with that, it just needs to be a rollover that makes a div appear for 3 seconds, then disappear.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is a solution for a link that is hovered over. The div will disappear 3 seconds after you move off of the link.

    This works for one rollover. If you want to use it with multiple ones, it can be expanded to use class names for the rolled over element instead.

    Notice that the rollover link directly links to the element that it's going to affect.

    Code html4strict:
    <p><a id="rollover" href="#showme">Rollover me</a></p>
    <div id="showme">Show when rolled over</div>

    As the page is loading, we set up the mouse over and out events, and hide the div.

    Place the script code just before the </body> tag.

    Code javascript:
    var link = document.getElementById('rollover');
    link.onmouseover = showDiv;
    link.onmouseout = delayHideDiv;
    hideTarget(link);

    Showing the div is easy, but we do need to clear any previous timeout that may have been set up.

    Code javascript:
    function showDiv() {
        clearTimeout(this.timeout);
        showTarget(this);
    }
    function showTarget(el) {
        var id = el.href.split('#')[1];
        var el = document.getElementById(id);
        el.style.display = '';
    }

    When we hide the div, we do it after a 3 second timeout.

    Code javascript:
    function delayHideDiv() {
        var el = this;
        this.timeout = setTimeout(function () {
            hideTarget(el);
        }, 3000);
    }
    function hideTarget(el) {
        var id = el.href.split('#')[1];
        var el = document.getElementById(id);
        el.style.display = 'none';
    }

    Here's a full working example.

    Code html4strict:
    <html>
    <head>
    <title>rollover</title>
    </head>
    <body>
    <p><a id="rollover" href="#showme">Rollover me</a></p>
    <div id="showme">Show when rolled over</div>
    <script type="text/javascript">
    var link = document.getElementById('rollover');
    link.onmouseover = showDiv;
    link.onmouseout = delayHideDiv;
    hideTarget(link);
    function showDiv() {
        clearTimeout(this.timeout);
        showTarget(this);
    }
    function delayHideDiv() {
        var el = this;
        this.timeout = setTimeout(function () {
            hideTarget(el);
        }, 3000);
    }
    function hideTarget(el) {
        var id = el.href.split('#')[1];
        var el = document.getElementById(id);
        el.style.display = 'none';
    }
    function showTarget(el) {
        var id = el.href.split('#')[1];
        var el = document.getElementById(id);
        el.style.display = '';
    }
    </script>
    </body>
    </html>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's fantastic, it's working brilliantly, just one more question: How do I expand the code to use class names for the rolled over element?

    I'm guessing that I edit this line somehow:

    var link = document.getElementById('rollover');

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The following lines will need to be modified:

    Code javascript:
    var link = document.getElementById('rollover');
    link.onmouseover = showDiv;
    link.onmouseout = delayHideDiv;
    hideTarget(link);

    so that they loop through the appropriate class names.

    There are extensive ways to do this, which allow for multiple class names on a single element, but to start off nice and easy, I am going to presume that you have a single class name on multiple links.

    Code html4strict:
    <p><a class="rollover" href="#showme1">Rollover 1</a></p>
    <p><a class="rollover" href="#showme2">Rollover 2</a></p>
    <p><a class="rollover" href="#showme3">Rollover 3</a></p>

    Code javascript:
    var links = document.getElementsByTagName('a');
    var i;
    for (i = 0; i < links.length; i += 1) {
        var link = links[i];
        if (link.className === 'rollover') {
            link.onmouseover = showDiv;
            link.onmouseout = delayHideDiv;
            hideTarget(link);
        }
    }
    ...
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •