4
\$\begingroup\$

Is there a better way to do what I'm doing? If not, I'd like just a general review of how I did it and the usability of it (how it works and functions, not artistically how it looks).

Here is the working JSFiddle.

JavaScript

$(document).ready(function () {
    // initlize panels
    $('.panel').each(function (i) {
        var $tab = $(this).children('.tab');
        $tab.css({ 'top': $tab.position().top + i * ($tab.height() + 5) });
    });
    $('.tab').click(function () {
        var $panel = $(this).parent();
        if ($panel.attr('data-open') == 'yes') {
            $panel.animate({
                left: '-=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'no');
        } else {
            $('.panel').css({ 'z-index': 0 });
            $panel.css({ 'z-index': 1 });
            $panel.animate({
                left: '+=300'
            }, 1000, function () {
                // Animation complete.
            });
            $panel.attr('data-open', 'yes');
        }
    });
});

CSS

body
{
    margin: 0px;
    padding: 0px;
    font-family: Arial;
}
.panel
{
    position:absolute;
    top: 0px;
    bottom: 0px;
    left: -300px;
    width: 299px;
    border-right: 1px solid black;
    background-color: White;
}

.tab
{
    position: absolute;
    top: 10px;
    width: 16px;
    right: -17px;
    height: 75px;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    cursor: pointer;
    background-color: White;
}

.tab div 
{
    position: relative;
    display: block;
    left: 1px;
    top: -15px; /* Same as height */
    width: 75px; /* Same as .tab height */
    height: 15px;
    font-size: 14px;
    font-weight:normal;
    line-height: 15px;
    text-align: center;
    -moz-transform:rotate(-270deg); 
    -moz-transform-origin: bottom left;
    -webkit-transform: rotate(-270deg);
    -webkit-transform-origin: bottom left;
    -o-transform: rotate(-270deg);
    -o-transform-origin:  bottom left;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    vertical-align: top;
}

CSS - in an IE-only CSS file

.tab div
{
    top: 0;
}

HTML

<div id="panels">
    <div class="panel">
        <div class="tab"><div>Tab A</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab B</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab C</div></div>
    </div>
    <div class="panel">
        <div class="tab"><div>Tab D</div></div>
    </div>
</div>
\$\endgroup\$
  • 1
    \$\begingroup\$ do you know what divitis is ? \$\endgroup\$ – tereško Dec 3 '11 at 2:32
  • \$\begingroup\$ Except for the empty "animation complete" functions and the each loop over an anonymous function, this code looks fine. \$\endgroup\$ – kojiro Dec 3 '11 at 2:34
2
\$\begingroup\$
  • your tab label seems to exist within the content which it is tabbing .. kinda bad, don't you think.
  • there is no point in using $(document).ready(), just put your script file right before </body> , and it will already be executing, when the DOM is done.
  • instead of adding function for each .tab tag's onclick separately, you should read about event delegation and use that
  • use closures for storing the active tab, instead of DOM. DOM manipulations are slow
  • setting top and bottom values in CSS fails to do what you want on IE7
  • animation quality on IE9 is horrid
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.