CODEWITHSUNDEEP
javascriptjqueryhtmlcss
closethemdangdivsright
closethemdangdivsright

Reputation: 1

Close button on div is not working

I have a set of divs I would to show on a click and then close with an "X" img on the top right hand corner. My problem is that clicking anywhere within the div causes it to close, not just the X in the upper right hand corner. I would also like to make the "X" a link so when it's hovered over the cursor changes. Code below, thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<style type="text/css">
.county{
    color:blue;
    display:block;

}
.countystats{
    background-image:url('../defunkt-facebox-cbe32e1/examples/closelabel.png') ;
    background-position:top right;
    border:3px black inset;
    background-repeat:no-repeat;
    background-color:#ccc;
    display:none;
    right:250px;
    margin: 5px 5px 5px 5px;
    padding:5px 5px 5px 5px;
    width:200px;

}
</style>

</head>

<body>
<div style="height:250px;bottom:300px; width:100px; padding: 1em; overflow:auto; margin:5px 5px 5px 5px; border: 2px black;  overflow-x:hidden;">

    <a class="county" href="#">one</a>
    <a class="county" href="#">two</a>
    <a class="county" href="#">three</a>
    <a class="county" href="#">four </a>
    <a class="county" href="#">five</a>
    <a class="county" href="#">six</a>



</div>
<div class="countystats">stats one<input maxlength="20" size="14" type="password"/><br/><p>woot</p></div>
<div class="countystats">stats two</div>
<div class="countystats">stats three</div>
<div class="countystats">some other stuff</div>
<div class="countystats">even more other stuff</div>



<br />
<br />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$('a.county').each( function(e){
        $(this).bind('click', function(e){ 
            var thisIs = $(this).index(); $('.countystats').eq(thisIs).show (250); 
            });
    $("img").hide();
    $(".countystats").click(function () {
      $(this).hide(250);
      return true;});


});
</script>
</body>
</html>

Upvotes: 0

Views: 1113

Answers (2)

Shadow Wizard
Shadow Wizard

Reputation: 66388

You can identify where the click occurred inside the element, and if matching the location of the close region hide the element.

Code for this would be:

var _closeButtonWidth = 50;
var _closeButtonHeight = 20;

$(".countystats").click(function(event) {
    event = event || window.event;
    var xPos = event.offsetX || event.clientX - $(this).offset().left;
    var yPos = event.offsetY || event.clientY - $(this).offset().top;
    var width = $(this).width();
    var height = $(this).height();
    if (xPos >= (width - _closeButtonWidth) && yPos <= (height - _closeButtonHeight)) {
        $(this).hide();
    }
});

Just define the width and height of the X icon and it should work.

Live test case: http://jsfiddle.net/nmEB6/1/
(Tested on Chrome 10, Firefox 3.6 and IE8 just click the top right corner of the green div)

Upvotes: 0

Winfield Trail
Winfield Trail

Reputation: 5695

It's behaving that way because you're choosing the entire div by selector. Instead, add a nested div set to the size of the X image, float it to the right, and bind the close event to that. If you use a float or relative positioning you should be able to avoid messing up the rest of the layout.

Edit: Even better, try the jqueryUI dialog widget. It does more or less exactly what you want and it handles the closing functionality automagically.

Upvotes: 3

Related Questions