CODEWITHSUNDEEP
jqueryhtmlcss
Bradley Bell
Bradley Bell

Reputation: 19

Hiding an image using jquery without also hiding parent DIV background image

Using Jquery I am targetting an img inside a div to hide when clicked to reveal a video iframe behind it. This works fine, however, by clicking the div, it also hides the parent div background image.

Please see the working example here by clicking one of the videos on: http://london.illustratedpeople.com/genx.html

It only seems to be a problem in Safari and is working fine in Chrome.

HTML:

<div class="profilevideo">
<img src="images/PLAY.png" width="600" height="338" alt="video" class="profile" />
<iframe src="http://player.vimeo.com/video/78191862?title=0&amp;byline=0&amp;portrait=0" width="600" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

jquery:

$('.profilevideo > img').click(function(event) {
event.stopPropagation();
var $img = $(this);
$img.hide();
$img.next().show();
});

Update This is a reference to the background change that I am seeing, in order of after click and before click: imgur.com/sZ9ps59,wcFVWEj#0 (1. after click then 2.before)

Thanks in advance, I can't find a way to fix this!

Bradley

Upvotes: 0

Views: 202

Answers (1)

moritzpflaum
moritzpflaum

Reputation: 729

One thing I could imagine (because I can't really tell from your link) is that when you hide the image, its css display property is set to none; because of that, the containing div will will shrink, as there is nothing to force it to its current size anymore.

Try setting the width and height of the container by hand and see if it still happens.

Upvotes: 3

Related Questions