I have page with centered position of content. On body (behind this div) have a background image, and when i click on visible part of image i must redirect user to other link.
The problem is that the div is over body (and it should be that). When i click i am on padding of div. I tried with jquery
when click on div to redirect, but every time when click it is redirect, i want only when click on image background.
<? php echo '<body style="background-image: url(/tv/banners/main/main_banner_68_1.jpg);" class="tm-isblog" itemscope itemtype="http://schema.org/WebPage" id="background-body" >';
echo '<div class="tv-content" onclick="showMsg()">';
here is content of page
<script type="application/javascript">
function showMsg(item) {
alert('redirect me now');
} </script>
css:
body{margin:0;padding:0 !important;overflow-x:hidden;width:100%;}
.tv-content{margin: auto;width: 100%;border: 0px solid green;padding: 90px 130px;overflow: hidden;}
When I get your question correct, you want to redirect if a user clicks on the body even if the click is inside the "padding" of the container with the class .tv-content?
You could achieve this by doing the following:
// trigger the click event on body
$('body').on('click', function(e) {
// get the real click target from the event object
var elm = $(e.target);
// in case this element has no parents with the class, redirect
if (!elm.parents().hasClass('tv-content')) {
console.log('redirect now');
}
});
I made a simple demo for this.