CODEWITHSUNDEEP
javascriptdom-events
user892134
user892134

Reputation: 3224

Closing popup div in JavaScript

Can I get help correcting the code below? You can just copy and paste and try it yourself. Onmouseover the popup div appears. If I click X the popup div should close but it doesn't. Only doubleclicking X closes the popup div. Onmouseover it should always display a popup div though.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<style type="text/css">
.container {
display:block;
width:500px;
height:200px;
border:1px solid green;
}
.advert {
float:right;
overflow:hidden;
width:100px;
height:30px;
border:1px solid red;
}
.close {
float:right;
width:20px;
height:28px;
cursor:pointer;
border:1px solid black;
}
</style>
<body>

<div class="container" onmouseover='getad(39);' onmouseout='hidead(39);changeback(39);'>
<div class='advert' id="39"  style="display:none;"><div class="close"><a href="javascript:closead(39)">X</a></div></div>
<input type="text" value="1" id="ad39" />
</div>


<div class="container" onmouseover='getad(40);' onmouseout='hidead(40);changeback(40);'>
<div class='advert' id="40" style="display:none;"><div class="close"><a href="javascript:closead(40)">X</a></div></div>
<input type="text" value="1" id="ad40" />
</div>

<script type="text/javascript">

function getad(number) {
        
    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "none") {
        document.getElementById(number).style.display = "block";
        
        }
    }
    
} 

function hidead(number) {
    
    if(document.getElementById('ad'+number).value==1) {
        if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";
        
        }
    }
} 

function closead(number) {
    
    document.getElementById('ad'+number).value = 0;
    if(document.getElementById(number).style.display == "block") {
        document.getElementById(number).style.display = "none";
        
        }

    
    
    }

    function changeback(number) {
    
    if(document.getElementById('ad'+number).value==0) {

    
    document.getElementById('ad'+number).value = 1;
    
    }
    }
</script>
</body>
</html>

Upvotes: 0

Views: 1711

Answers (3)

Brian
Brian

Reputation: 3023

The problem isn't that your ad isn't being removed. It's that in order to click the link that triggers the hidead() function, you must also be hovering the mouse cursor over the div that triggers getad() on mouseover.

So what is actually executing if you step through the actions is this.

Click event triggers on the tag for the "X-link" closead(number) fires and executes it's code. Mouseout event fires and propagates to the parent hidead(number) fires and executes. Mouseover event fires and propagates to the parent getad(number) fires and executes.

So your event is being unloaded, then immediately reloaded. Perhaps if you could provide some context, we could help you make this workable. I'm not sure under what circumstances you want to load an ad on mouseover, hide it on mouseout, and give the user a close button. That just seems like a lot of loading/unloading/flashing content that's going to annoy your visitor more than simply having a static ad that reloads every X seconds via AJAX or something.

Upvotes: 0

Cygnusx1
Cygnusx1

Reputation: 5409

I tried your code in firefox and it works.

In IE8, it does not work.

This is the main reason why you should never write native Javascript...

Use JQuery or another JS framework.

First, it will make your code cross browser compatible. Second, only 1 line of code will do what you need to do ;-)

Something like $(#39).hide() or $(#39).show()

Upvotes: 0

Joe
Joe

Reputation: 82584

You IDs are wrong:

<div class='advert' id="39"  style="display:none;">
<div class='advert' id="40" style="display:none;">

should be:

<div class='advert' id="ad39"  style="display:none;">
<div class='advert' id="ad40" style="display:none;">

Upvotes: 1

Related Questions