Search code examples
jqueryhtmlonclickbackground-image

Can not click on body background image for redirect


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;}

Solution

  • 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.