CODEWITHSUNDEEP
javascriptjquery
Lani
Lani

Reputation: 73

How to disable hide on click function with Jquery, in transparent color

I'm using jQuery hide on click for my ads, so I have this code:

$(document).ready(function() {
$(".myadcss").click(function() {
$(this).hide(1000) 
    });

now I want to disable this function if some one clicks out from ads, so if somone click on transparent color?

enter image description here

Demo Ad: 728x90

Demo Full Ad:

Upvotes: 1

Views: 402

Answers (3)

Madhan Kumar
Madhan Kumar

Reputation: 121

Instead of disabling this function, add an if condition inside the function so that it hides the ads only if someone clicks the banner ads and returns otherwise.

Edit: From the screenshots that you pasted, it looks like you want to hide the ad if someone clicks on only the ad. If you added the myadcss class only to your ad element, your function will not be triggered if you click anywhere outside the ad element.

Upvotes: 0

Mohammed Joraid
Mohammed Joraid

Reputation: 6480

From #this_answer

if (!container.is(e.target) && container.has(e.target).length === 0)

To summurize, first, you use your code to initiate hide when your banner ads are being clicked:

$(document).ready(function() {
$(".myadcss").click(function() {
$(this).hide(1000) 
    });

Then you monitor clicking (using mouse-up event) to see if the pointer is clicking on the same element or another element. If it's another outside element, then show your banners ads. 

$(document).mouseup(function(e) 
{
    var container = $(".myadcss");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
            //Your Logic Here
            // call e.g. banners_show()
        container.show();
    }
});

Upvotes: 0

MarvHock
MarvHock

Reputation: 875

first, your code example is not complete and might throw an error, as the first function is not closed:

$(document).ready(function() {
  $(".myadcss").click(function() {
    $(this).hide(1000)
  });
});

Now, only add the class "myadcss" to your ad banners. With that, the click function will only be triggered on your ad banners and not somewhere else.

Additionally, if you want to prevent hiding your banner, if some specific element was clicked, you can check the clicked elements class name and decide to abort your function in that case:

$(document).ready(function() {
  $(".myadcss").click(function(event) {
    if(event.target.classList.contains('specific')) {
      return;
    }
    
    $(this).hide(1000)
  });
});
.myadcss {
  height: 200px;
  width: 50px;
  background: red;
}

.specific {
  margin: 30px 5px;
  height: 30px;
  background: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>example</title>
</head>
<body>

  <div class="myadcss">
    Your banner text
    <div class="specific"></div>
  </div>
</body>
</html>

Check clicking the white area: Above JavaScript will check its class name and will abort executing further code by using the return statement.

Upvotes: 1

Related Questions