jQuery Odd Problem - Fading a small div away from screen

zingzing45 · 08-26-2012, 04:16 AM

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.

Old Pedant · 08-26-2012, 04:51 AM

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);
}

zingzing45 · 08-26-2012, 05:12 PM

Wow, thanks

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