2
\$\begingroup\$

I just wanted to share this script I wrote in that hopes that someone might find it useful and can hopefully simplify it(?).

I'm very new to writing anything with jQuery, so this script is probably bulkier than it needs to be, but it does work.

Here's the full HTML page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Simple Slide Panel</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <style type="text/css">
            html{ height:100%;}
            body {
                margin: 0 auto;
                padding: 0;
                font: 75%/120% Arial, Helvetica, sans-serif;
                height:100%
            }
            #menu1 {
                background: #754c24;
                height: 100%;
                width:0px;  
                float:right;
                overflow:hidden;
            }
            #menu2 {
                background: #fff;
                height: 100%;
                width:0px;  
                float:right;
                overflow:hidden;
            }
            #nav-bar {
                background: #333;
                height: 100%;
                width:30px; 
                float:right;
            }
            ul.nav-menu{
                padding:0px;
                margin:0;
            }
            ul.nav-menu li{
                list-style-type:none;
                padding:0px;
                width:10px;
                height:400px;
            }
            ul.nav-menu li a{
                display:block;
                width:100px;
                padding:5px;
                position:relative;
                right:42px;
                top:60px;
                color:#fff;
                text-decoration:none;
            }
            ul.nav-menu li a.btn-2{
                top:160px;
            }
            ul.nav-menu li a:hover{
                background-color:#fff;
                color:#000;
            }
            .rotate {
                -webkit-transform: rotate(-90deg);  /* Safari */
                -moz-transform: rotate(-90deg);     /* Firefox */
                -ms-transform: rotate(-90deg);      /* IE */
                -o-transform: rotate(-90deg);       /* Opera */
                filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Internet Explorer */
            }
        </style>
    </head>
    <body>
        <div id="menu1">This panel expands Too.</div>
        <div id="menu2">This panel expands</div>
        <div id="nav-bar">
            <ul class="nav-menu">
                <li>
                    <a name="nav" href="#" class="btn-1 rotate">Slide Panel 1</a>
                    <a name="nav" href="#" class="btn-2 rotate">Slide Panel 2</a>
                </li>
            </ul>
        </div><!--/nav-bar-->
        <script type="text/javascript">
            $(document).ready(function()
            {
                var $menu1 = $('#menu1');
                var $menu2 = $('#menu2');

                $('.btn-1').toggle(
                function()
                {
                    if ($menu1.width() == 250)
                    {
                        $('#menu1').animate({width: "0"}, 500);
                    }
                    else {
                        $('#menu2').animate({width:'0px'},500);
                        $('#menu1').delay(500).animate({width:'250px'},500);
                    } 
                },
                function()
                {
                    if ($menu1.width() == 250)
                    {
                        $('#menu1').animate({width: "0"}, 500);
                    }
                    else {
                        $('#menu2').animate({width:'0px'},500);
                        $('#menu1').delay(500).animate({width:'250px'},500);
                    }
                });

                $('.btn-2').toggle(
                function()
                {
                    if ($menu2.width() == 250)
                    {
                        $('#menu2').animate({width: "0"}, 500);
                    }
                    else {
                        $('#menu1').animate({width:'0px'},500);
                        $('#menu2').delay(500).animate({width:'250px'},500);
                    }
                },
                function()
                {
                    if ($menu2.width() == 250)
                    {
                        $('#menu2').animate({width: "0"}, 500);
                    }
                    else {
                        $('#menu1').animate({width:'0px'},500);
                        $('#menu2').delay(500).animate({width:'250px'},500);
                    }
                });
            });
        </script>
    </body>
</html>
\$\endgroup\$
4
  • 2
    \$\begingroup\$ Just one quick tip, I see you set the menu1 and menu2 divs to variables and you use those variables in the if statements. You may want to also use the variables in place of the animate/delate calls as well. For instance: $('#menu1').animate({width: "0"}, 500); could be $menu1.animate({width: "0"}, 500); \$\endgroup\$
    – Levi
    Jan 30, 2012 at 14:27
  • 1
    \$\begingroup\$ Thank you, that is a cleaner way to do it. I'm also wondering if there is some way to set it up so the buttons could be created dynamically and wouldn't have to be set as variables. Still pretty new to writing javascript/jquery but I'm guessing using the sibling function may be a place to start. \$\endgroup\$ Jan 30, 2012 at 21:44
  • 1
    \$\begingroup\$ @Levi: I'd upvote that if you write it as an asnwer. \$\endgroup\$
    – palacsint
    Feb 5, 2012 at 1:19
  • \$\begingroup\$ @Levi: i would upvote it too, but that's not saying much because i upvote everything \$\endgroup\$
    – seand
    Feb 5, 2012 at 1:33

1 Answer 1

2
\$\begingroup\$

2 comments:

  • Why are you passing the same function twice to $.toggle()? From the documentation it looks like it only takes 1 function, the callback.
  • You can abstract out the common functionality in those functions into one:

    function toggleMenu(menu, alternateMenu) {
        if (menu.width() == 250) {
            menu.animate({width: "0"}, 500);
        }
        else {
            alternateMenu.animate({width:'0px'},500);
            menu.delay(500).animate({width:'250px'},500);
        } 
    };
    
    $(document).ready(function() {            
        $('.btn-1').toggle(function() {
            toggleMenu($('#menu1'), $('#menu2'));
        });
    
        $('.btn-2').toggle(function() {
            toggleMenu($('#menu2'), $('#menu1'));
        });
    });
    
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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