1

This is a question that is related to a previous question of another member which can be found here.

This is the Javascript function to hide a div (which is an answer to the other member's question):

function hide(obj) {

    var el = document.getElementById(obj);

        el.style.display = 'none';

}

The HTML is:

<div id='hideme'>
Warning: These are new products
<a href='#' class='close_notification' title='Click to Close'>
<img src="images/close_icon.gif" width="6" height="6" alt="Close" onClick="hide('hideme')" />
</a>
</div>

My followup question to this is: how can I add a cool effect of transition? The result will be the div 'hideme' would close slowly. Is there a work around for this?

Thanks so much everyone! It would be highly appreciated!

Note: I'm a noob with Javascript. 0-0

Community
  • 1
  • 1
chest_nut
  • 195
  • 1
  • 2
  • 11
  • 2
    Have a look at the jQuery library, it provides a lot of simple ways to add nice transition effects on events. – Sam Apr 02 '13 at 13:17
  • Of course there is: set `overflow: hidden;` on the `
    `, then gradually decrease its `height` and finally set `display: none`. Or just use jQuery, since it already does it well.
     – Joker_vD Apr 02 '13 at 13:26
  • Honestly, who would thumb this query down? As I said, I'm a noob. Sam - Thanks, I'll try to look into it. @Joker_vD - how do I actually do that? Thanks! – chest_nut Apr 03 '13 at 00:21

4 Answers4

0

If you're using jQuery

function hide() {
    $(this).parent().fadeOut();
}

As this is triggered by an event the 'this' variable will be set to the element from which it came, as you want the parent element to vanish when it's clicked this will do the trick

EDIT: For this to work you may have to play with your HTML and how many $(this).parent().parent()... you need but this would be the best way to go about it, then you don't need to pass the ID around

EDIT 2: So .parent() selects the element containing the selected element, so in this case $(this) refers to the button that was clicked as that's where the click event came from.

So $(this).parent() refers to the container element, in this case the a element and therefore the $(this).parent().parent() refers to the div element which you want to hide.

So you could give the image a class of 'closable' then do the following

$('.closable').click(function() {
    $(this).parent().parent().fadeOut();
}

This means whenever you click something with the class closable it will go up the DOM tree two elements to (with .parent().parent()) and then fade it out.

This will allow you to remove the on click event from the image, you just need to put the handler above in the jQuery document.ready function which looks like: 

$(document).ready(function() {
    //Click function here
});
Sam
  • 2,771
  • 2
  • 28
  • 41
0
$("#"+el).fadeOut(500);//el must be the id of the element
웃웃웃웃웃
  • 11,829
  • 15
  • 59
  • 91
  • I tried this, but it's not working. Or, maybe, I'm doing the wrong thing? `function hide(obj) {` `var el = document.getElementById(obj);` `el.style.display = 'none';` `$("#"+hideme).fadeOut(500);` `}` Thanks. – chest_nut Apr 03 '13 at 00:38
0

A popular choice for this would be JQuery UI's effect method. With this, you can write some very simple Javascript to hide your div in a stylish manner, for example:

function hide(obj) {

   $(obj).effect("scale");

}

EDIT: Here's an example jsFiddle

FLClover
  • 524
  • 5
  • 13
0

Use jQuery to do transition effects:

$(function(){
    $("a.close_notification").click(function(e){
        e.preventDefault();
        // stop other animations and hide, 500 milliseconds
        // you can use the function fadeOut for that too
        $("#hideme").stop().hide(500);

    });
});
Josh
  • 2,835
  • 1
  • 21
  • 33
Vinix
  • 1
  • 3