CODEWITHSUNDEEP
javascriptjquerythis
dpDesignz
dpDesignz

Reputation: 1959

Click Function "this" not working

I have a script that I found at http://www.red-team-design.com/cool-notification-messages-with-css3-jquery, but I'm having a problem with my code

I'm wanting to get it to 1) hide on click, and 2) hide after 15 seconds

HTML:

<div class="warning message">It is currently past 4pm. Any orders placed between now and midnight will not be placed until 4pm tomorrow.</div>

Javascript:

var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
    var messagesHeights = new Array(); // this array will store height for each
    for (i=0; i<myMessages.length; i++){
        messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
        $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
    }
}
function showMessage(type){
    hideAllMessages();
    $('.'+type).animate({top:"0"}, 500);
    setTimeout(function(){
        $('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
        hideAllMessages();
        },15000);
}
$(document).ready(function(){
    // Initially, hide them all
    hideAllMessages();
    // Show message
    for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}         
    // When message is clicked, hide it
    $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500);
    });
});

This is getting executed by php, which I'm just inserting the following line into my code using php:

<script type='text/javascript'>
    $(document).ready(function(){
        showMessage(warning)
    });
</script>​

Now for some reason the div doesn't hide when I click it, and it won't hide after the 15 seconds as specified.

I've created a JSFiddle at http://jsfiddle.net/dpdesignz/yTaRa/1/ if anyone would mind looking to see what may be going wrong? I have a feeling it's related to the part executed by the PHP echo, so does anyone know of another way to maybe do this?

Upvotes: 0

Views: 445

Answers (2)

ThatGuyInIT
ThatGuyInIT

Reputation: 2239

$(document).ready(function(){
    $('.info, .warning, .error, .success').hide();
    $('.info, .warning, .error, .success').slideDown(500);
    $('.info, .warning, .error, .success').delay(15000).slideUp(500);
    $('.info, .warning, .error, .success').on('click', function() {
        $(this).hide();
    });
});

Let jQuery do all the work =)

http://jsfiddle.net/yTaRa/8/

If every message type will also be classed as message we can reduce this code down even further...

$(document).ready(function(){
    $('.message').hide();
    $('.message').slideDown(500);
    $('.message').delay(15000).slideUp(500);
    $('.message').on('click', function() {
        $(this).hide();
    });
});

http://jsfiddle.net/yTaRa/9/

$(document).ready(function(){
    setTimeout(function() {                   //sets a 15 second timer on each message to collapse up over .5 seconds
        $('.message').slideUp(500);
    }, 15000);
    $('.message').hide();                     //hides all elements with the class message.
    $('.message').slideDown(500);             //animates messages to expand down over .5 seconds
    $('.message').on('click', function() {    //wires up click event to hide message on click
        $(this).slideUp(500);
    });
});

http://jsfiddle.net/yTaRa/10/

I had to use setTimeout for the 15 seconds call of slideUp as the click slideUp would not fire with:

$('.message').delay(15000).slideUp(500);

I assume that this is because only one slideUp() call can be scheduled on the same element at one time.

Upvotes: 1

3dgoo
3dgoo

Reputation: 15794

You have a few errors in your code.

First warning is not defined

Which refers to the following:

$(document).ready(function(){
    showMessage(warning) 
});

warning is not a set variable. Perhaps you mean this to be 'warning'.

Secondly showMessage is not defined

showMessage('warning');

This is called before the showMessage() function is defined. You can fix this by moving this call into the other $(document).ready()

http://jsfiddle.net/yTaRa/5/

var myMessages = ['info','warning','error','success']; // define the messages types
function hideAllMessages(){
    var messagesHeights = new Array(); // this array will store height for each
    for (i=0; i<myMessages.length; i++){
        messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
        $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
    }
}
function showMessage(type){
    hideAllMessages();
    $('.'+type).animate({top:"0"}, 500);
    setTimeout(function(){
        $('.'+type).animate({top: -$('.'+type).outerHeight()}, 500);
        hideAllMessages();
        },15000);
}
$(document).ready(function(){
    // Initially, hide them all
    hideAllMessages();
    // Show message
    for(var i=0;i<myMessages.length;i++) {showMessage(myMessages[i]);}         
    // When message is clicked, hide it
    $('.message').click(function(){              
          $(this).animate({top: -$(this).outerHeight()}, 500);
    });
    showMessage('warning');
});
​

Upvotes: 1

Related Questions