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\$

migrated from stackoverflow.com Jan 29 '12 at 3:23

This question came from our site for professional and enthusiast programmers.

  • 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 '12 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\$ – Phillip Rauschkolb Jan 30 '12 at 21:44
  • 1
    \$\begingroup\$ @Levi: I'd upvote that if you write it as an asnwer. \$\endgroup\$ – palacsint Feb 5 '12 at 1:19
  • \$\begingroup\$ @Levi: i would upvote it too, but that's not saying much because i upvote everything \$\endgroup\$ – seand Feb 5 '12 at 1:33
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, privacy policy and cookie policy

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