Question

I followed this tutorial to create a popup bar (similar to the one at the top of this site):

http://spyrestudios.com/how-to-create-a-cute-popup-bar-with-html5-css3-and-jquery/

I’m new to jQuery so I’m wondering if it is possible to have the bar hidden by default and only displayed when the user clicks on the ‘show’ button.

popup.js:

$(document).ready(function(){    


$('.showpop').hide();
$('#popup').show('bounce', { times:1 }, 300);


$('.hide').click(function(){
    $('#popup').slideUp();
    $('span.showpop').fadeIn('slow');
    return false;
});


$('a.showpoplink').click(function(){
    $('#popup').show('bounce', { times:1 }, 300);
    $('.showpop').hide();
    return false;
});
});

Sorry if its dead obvious! As I said I’ve just started learning this, been playing about with it but with no results.

Cheers.

Answer 1

instead of

$('.showpop').hide();
$('#popup').show('bounce', { times:1 }, 300);

try

$('#popup').hide();
$('.showpop').show('bounce', { times:1 }, 300);

(havnt tested but should work)