Question

I’ve been playing around with our question form for a while, and am having trouble figuring out how to tweak its effect. http://rayku.com/start

http://rayku.com/ss/2012-02-23_03-26-56.png

Something really annoying is that if I don’t type anything in the question box, and I click on anything on the form below it, it will go back to its original collapsed state.

Do you know how I can modify the CSS or JS so that it will only collapse if I click outside of the combined form area

WHILE there is no text that is typed in the question field?

Thanks!

Answer 1

I think that you should change:

mainQuestion.focus(function(){

to

mainQuestion.keyup(function(){

so you make sure that the person has entered a question and you can hide the form if they don’t.

EDIT

change your code to:

//store object in var for efficiency
var mainQuestion = $('.main-question input');
var initialValue = 'Start typing your question here';

mainQuestion.focus(function(){
    //blank out field on focus
    if(mainQuestion.val() == initialValue){
        mainQuestion.val('');
    }
});

mainQuestion.keyup(function(){
    //animate opening here
    $('#register-form').stop().animate({top:"-130px"},1000);
    $('#register-block').slideDown();
});

mainQuestion.blur(function(){
    //check to see if user has typed anything in
    if((mainQuestion.val() == initialValue) || !mainQuestion.val().length){
        //reset value
        mainQuestion.val(initialValue);
        //animate closing here
        $('#register-form').stop().animate({top:"0px"},500);
        $('#register-block').slideUp(); 
    }
});