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?
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.
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.
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();
}
});
