0

So I've got an image that inside a tag, and I've also got a div that is centred in the middle of the screen.

How do I make this div invisible until the image is clicked?

Preview of page when the div is visible: https://i.stack.imgur.com/P8XZe.jpg

So that added to cart is a div in the middle of the screen. I want that to only show up when the "Add to cart" button has been clicked.

I want the div to go away again after 2 seconds. Transitions would be nice (eg fade into visibility), but I don't mind.

1
  • I've tried the only answer there, and that doesn't work. Nov 15, 2012 at 10:04

3 Answers 3

0

Set the display of the div to none and do a onclick event for the image which sets the display of the div to block. I would recommend using JQuery to add in any transitions or animations.

Something like (without animations):

<div id="cart" style="display:none">

</div>
<img src="imgsource" onClick="document.getElementById('cart').style.display = 'block'"/> 
0

Worked it out. Had to use jQuery.

In the < head> :

<script>
$(document).ready(function(){
  $(".addtocart").click(function(){
    $(".addedcartbg").fadeIn(500);
    $(".addedcartbg").delay(1000);
    $(".addedcartbg").fadeOut(500);
  });
});
</script>

In the < body> :

<div class="addedcartbg" style="display:none"><div class="addedcart"> Successfully added to cart. </div></div>
0

css

.hide{
display:none;
}

html

<div class="hide">
// put content here
</div>
<img class="hide-show" src="site.com/image.png" alt=""/>

js

$(function(){
 $('.hide-show').bind('click',function(){
    $('.hide').fadeIn(500).delay(2000).fadeOut(500);

    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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