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 3 of 3
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Odd Problem - Fading a small div away from screen

    Ok, so far, I have a website called http://www.coinawards.net63.net/

    This site is under development, and I am currently trying to make a 'secret coin.' By this, I mean a coin on one of the sides of the page that if you hover over it, a small grey box appears next to the 'Welcome to CoinAwards' title.

    Everything is going good, except for some weird problem. If you hover over the coin once, a message box appears and it safely hovers away.

    But, if you hover over it twice, it DOES NOT fade away like its supposed to - EVEN THOUGH I'VE CHECKED IT A MILLION TIMES!

    So can anyone help me with this problem?

    Here is the necessary code for solving this error:


    JavaScript:





    Code:
    var ts = 0;
    
    var DBVAR = "Rewards:<br>+120 Coins<br>+10 Skill Points<br>+1 Award";
    
    var ADVAR = "You have already completed this achievement";
    
    function addAward()
    
    {
    
    var divTag = document.createElement("div");
            
    divTag.id = "newachievementdiv";
    
    divTag.setAttribute("align","center");
    
    divTag.style.margin = "0px auto";
    
    divTag.style.position = "fixed";
    
    divTag.style.left = "250px";
            
    divTag.className = "awardBox";
    
    if (ts == 0)
    
    {
            
    divTag.innerHTML = "Congratulations! You have <span class='highlite-blue'>found the secret coin</span>!<br>" + DBVAR;
    
    ts = 1;
    
    }
    
    else
    
    {
            
    divTag.innerHTML = "Congratulations! You have <span class='highlite-blue'>found the secret coin</span>!<br>" + ADVAR;
    
    ts = 1;
    
    }
    
    setInterval(hideAwardBox, 5000);
    
    document.body.appendChild(divTag);
    
    }
    		
    function hideAwardBox()
    
    {
    
    $('#newachievementdiv').fadeOut('slow');
    
    }



    Couple of lines of HTML:





    <div id="secretcoin" onmouseover="addAward()">

    </div>





    I think that it will help if you visit the site this is displayed on: http://www.coinawards.net63.net/




    Also, the 'secret coin' in question that you must hover over is the black highlited area down below on the left side.


    Thank You.
    Last edited by VIPStephan; 08-26-2012 at 10:45 AM. Reason: added jQuery prefix

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,688
    Thanks
    80
    Thanked 4,655 Times in 4,617 Posts
    Ummm...as that code is written, EACH TIME you hover over id="secretcoint" you will add *ANOTHER* div with the id "newachievementdiv".

    So on the second and subsequent hovers, you will now have *TWO* <div>s with the SAME ID!

    And once you do that, you can no longer locate *ANY* of the objects by id. (Which, if you didn't know, is what your jQuery code $('#newachievementdiv') is doing.

    I think you are making this way too complex.

    Instead of creating that <div> dynamically, just put it on the page as ordinary HTML with style="display: none;". Then, on the hover, you set the innerHTML appropriately and call jQuery to fade it in. And it fades out after 5 seconds.

    So, right after you <body> tag you do:
    Code:
    <div id="newachievementdiv" align="center" class="awardBox" 
         style="display: none; margin: 0px auto; position: fixed; left: 250px;">
    Congratulations! You have <span class="highlite-blue">found the secret coin</span>!
    <br/>
    <span></span>
    </div>
    And then to show it you simply do:
    Code:
    var DBVAR = "Rewards:<br>+120 Coins<br>+10 Skill Points<br>+1 Award";
    var ADVAR = "You have already completed this achievement";
    
    function addAward()
    {
        var div = document.getElementById("newachievementdiv");
        var span = div.getElementsByTagName("span")[1]; 
        span.innerHTML = ( span.innerHTML == "" ) ? DBVAR : ADVAR;
        // call fade in ...is that 
        div.fadeIn('slow'); // ???  (I don't use jQuery)
        setInterval( function() { $('#newachievementdiv').fadeOut('slow'); }, 5000);
    }
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    zingzing45 (08-26-2012)

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    57
    Thanks
    13
    Thanked 0 Times in 0 Posts

    Thumbs up Yes!!

    Wow, thanks

    I had to fix a bit of your JQuery but the code worked overall! Great!


  •  

    Posting Permissions

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