Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

i'm hoping you can help me out.

I am trying to trigger an event that lowers the opacity on any clicked tag (h1, img, div, etc..), but I only want this event to trigger on tags that are within a containing div.

Example:

<div id="opacity_wrapper">
  <div class="row-fluid">
     <div class="span12" style="padding-top: 25px;">
       <div class="well well-large" style="background-color: #FFF">
             <h1> Some Stuff </h1>
             <img src="/img/blah.jpg" />
             <h2> more stuff </h2>
             <div style="background-color: #000">
               <a href="#"> some link </a>
               <h2> blahblahblah> </h2>
             </div>
      </div>
    </div>
  </div>
</div>

<div>
  <h6> more stuff </h6>
  <h5> more stuff> </h5>
  <button> some button </button>
</div>

So, if any of those 'h1', 'img', 'h2', 'div', or 'a' tags are clicked I want it to trigger (and only for the particular h1, img, or h2 tag that was clicked), but I do NOT want it to trigger for any elements not contained within the opacity-wrapper div, like the 'h6', 'h5', or button tags at the bottom.

Is this possible?

This got me the closest, but it does not exclude any elements. 

<script>
  $(document).ready(function(){
  $( window ).click(function ( e ) {
  $( e.target ).css({ opacity: 0.5 });
    });
});
</script>

If there is some way to do,

If the window.clicked element is a child of #opacity_wrapper" then {

e.target.css opacity 0.5 } else { do nothing }

Then I believe that would work. Any suggestions? Thanks.

share|improve this question

2 Answers

up vote 1 down vote accepted

Changing the selector you bind the click event to should do it:

$(document).ready(function(){
   $("#opacity_wrapper").click(function ( e ) {
      $( e.target ).css({ opacity: 0.5 });
   });
});

Note that you have a problem with one of your closing <div>s which will affect this. <div class="span12" style="padding-top: 25px;"> is being "closed" with an open <div>

share|improve this answer
That works great, I will mark it as my accepted answer as soon as the site allows. Would you happen to know a way to exclude a specific element within #opacity_wrapper from changing on click? – user2278120 Apr 13 at 19:22
There'd be several different ways to do it, but one way would be to run something like this at the top of your click function: if ($(e.target).is("h1")) { return; } – ryanbrill Apr 13 at 19:26
Thanks again Ryan! – user2278120 Apr 13 at 19:29
up vote 1 down vote 
$('.well').click(function(event) {
  $(event.target).css('opacity','0.5');  
});

This will do it for you. This limits the selection to the div with the "well" class applied to it. You will obviously need to clear the selection and reset opacity when the next one is clicked.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.