CODEWITHSUNDEEP
jquerycssparent
Luis
Luis

Reputation: 1097

jQuery: Apply CSS to parent DIV

Let's say I'm doing a code. This code uses kontextua ads 

<div class="pread">
    <div class="postad kontextuaDisplayREGULARS728x90">
    <div style="display: block !important; margin-bottom: 0px !important; margin-left: 0px !important; margin-right: 0px !important; margin-top: 0px !important; overflow-x: hidden !important; overflow-y: hidden !important; padding-bottom: 2px !important; padding-left: 4px !important; padding-right: 4px !important; padding-top: 2px !important; z-index: 10000 !important; ">
        <iframe style="display: block; background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; overflow-x: hidden; overflow-y: hidden; background-position: initial initial; background-repeat: initial initial; " frameborder="0" width="728px" height="90px" src="javascript:(function(){return '<html><meta http-equiv=\'Content-Type\' content=\'text/html\' charset=\'UTF-8\'></meta><head><style> html { overflow:hidden; } body { background-color:transparent; float:left; padding:0; margin:0; overflow:hidden; height:90px;width:728px;} .contenido{margin:0}</style></head><body><div class=\'contenido\' id=\'banner\'><SCRIPT TYPE=\'text/javascript\' SRC=\'http://ad.yieldmanager.com/st?ad_type=ad&ad_size=728x90&section=2871061\'></SCRIPT></div></body></html>'})()"></iframe>
    </div>
    </div>
</div>

I wan't to know when clicked and apply a CSS to parent ".pread". How can I do this?

<script>
        $(".postad").live('click', function(){
        alert("clicked");
            $(this).parent().css({
                'backgroundImage' : 'url(http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png)',
                'backgroundColor' : 'limeGreen'
            });
        });
</script>

But it doesn't work. Thanks!

Upvotes: 1

Views: 17627

Answers (3)

Rafał W&#243;jcik
Rafał W&#243;jcik

Reputation: 576

Try this

<script>
$(document).ready(function(){
        $(".postad").click(function(){
        alert("clicked");
            $(this).parents('.pread').css({
                'backgroundImage' : 'url(http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png)',
                'backgroundColor' : 'limeGreen'
            });
        });
});
</script>

It's should work good :)

Upvotes: -1

jfriend00
jfriend00

Reputation: 708036

Your code works if you give some actual content to the postad div other than the iframe. You can see it work here if you click on the xxx that I added to that div.

It does not work if you click on the iframe and that's because clicks don't bubble out of an iframe into parent objects so when you click in the iframe, no click event is received in the postad div. If you click on the iframe, the click stops there.

It is possible to intercept a click on an iframe from the parent page, but that involves putting a transparent div over the top of the iframe so the parent page gets the click, not the iframe. You can see the transparent div idea work here: http://jsfiddle.net/jfriend00/h2WTB/ - just click on the download image and the click will be handled by the transparent div which will bubble to your postad event handler.

Upvotes: 3

Sarah Vessels
Sarah Vessels

Reputation: 31660

You got your CSS properties wrong. They're hyphenated, not camelCase.

$(this).parent().css({
    'background-image' : 'url("http://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/camera_test.png")',
    'background-color' : 'limeGreen'
});

Upvotes: 1

Related Questions