Clever Geek Handbook

Switch CSS to Tooltip

I have a console setup on a tool that I created. The console can be minimized when pressed and maximized when pressed again.

The problem, however, is that once I maximize it, it just minimizes when it is done. What are my options?

$('#consolebutton').mouseup(function() {
        if ($('#footconsole').height(200)) {
            $('#footconsole').animate({
                height: 14
            }, 100)
        } else if ($('#footconsole').height(14)) {
                $('#footconsole').animate({
                height: 200
            }, 100);
        }
});

(I understand that checking the height of a div actually sets the height of the div, and that's the problem.)

http://jsfiddle.net/VaDBW/3/

+3


source to share


3 answers


Try it...

$('#consolebutton').mouseup(function() {
    var $footconsole = $('#footconsole');
    if ($footconsole.height() == 200) {
        $footconsole.animate({
            height: 14
        }, 100)
    } else {
        $footconsole.animate({
            height: 200
        }, 100);
    }
});


It compares to the height (not sets it) and I also set the variable to a value $("#footconsole")

rather than keep looking for it.

+4


source


Call the method height()

with no parameters. With no parameters, it returns the current height. When passing a parameter, it sets the height.

if($('#footconsole').height() == 14)

eg. Although in my opinion it is better to keep the status flag in data

versus checking the height



if($('#footconsole').data('collapsed'))
{
    $('#footconsole').data('collapsed', false);
    /* do expand code */
} else {
     $('#footconsole').data('collapsed', true);
     /* do collapse code */
}

You can also use a class to define parameters, and if you need to do more than just switch the class, you can check with hasClass

to make further adjustments. Lots of options. But getting out of the original height seems a little odd.

+1


source


I would use toggleClass () inside a click (function () {...}); and then you don't need if statements and you can put the height difference in CSS.

0


source






More articles:


All Articles