Geek asks and answers

How to fix jquery drawer issue?

I need to flip the div panel to the left when some div element is clicked and hide as soon as the div element is clicked again. (just like the new Twitter reader).

I tried several methods, but I could not animate it. lately I have determined that this is not going smoothly due to the bad that I did. Increased div divider width and decrese width.

Is there any good suggestion or piece of code to work with me?

Here is the code I used for the animation and gt shows a more readable div panel

$("#more-item").animate({"width": "toggle"}, { duration: 500,specialEasing: {width: 'linear', height: 'easeOutBounce'} });

Here is the script I need to see.

1. clicked on item div
2. more read div panel animate and flip to left and show the
3. click again item div
4. more read div panel animate and flip right and hide

when we are in the third paragraph, if we again click on another div element, just load the contents of the last click of the div and then leave and hide more read div

, , Twitter. enter image description here

+3
1

, <div> , .

top, bottom right css .

: http://jsfiddle.net/wUGaY/1/

HTML:

<div class="panel"></div>
<div class="container">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
    <div class="item">Four: This contains a bit longer text to test if wrapping is working correctly.</div>
    <div class="item">Five</div>
    <div class="item">Six</div>
    <div class="item">Seven</div>
    <div class="item">Eight</div>
    <div class="item">Nine</div>
    <div class="item">Ten</div>
</div>

CSS

.panel {
    position:fixed;
    top:0px;
    bottom:0px;
    right:0px;
    width:200px;
    padding:20px;
    border:1px solid #eee;
    background-color:white;
}

.item {
    border:1px solid #eee;
    padding:20px;
}

.active {
    background-color: #eee;
}

JavaScript:

$(function(){
    function showPanel() {
        // Show the panel and animate it into view
        $('.panel').stop().show().animate({
            right: '0px'
        });
        // Animate the container margin to make room
        // for the reading panel
        $('.container').stop().animate({
            marginRight: '232px'
        });
    }

    function hidePanel() {
        // Move the panel off the screen and hide it when done
        $('.panel').stop().animate({
            right: '-232px'
        }, function(){
            $(this).hide();
        });

        // Animate the container margin back to normal
        $('.container').stop().animate({
            marginRight: '0px'
        });
    }

    // Hide the panel initially and set its position
    $('.panel').hide().css('right','-232px');

    // What happens when they click on inactive items?
    $('.container').delegate('.item:not(.active)', 'click', function() {
        var $this = $(this);

        // Make the current item the only active item
        $('.active').removeClass('active');
        $this.addClass('active');

        // Add some content to the reading panel
        $('.panel').html($this.html());

        // Show the reading panel
        showPanel();
    });

    // What happens when they click on an active item?
    $('.container').delegate('.active', 'click', function() {
        // Make it inactive
        $(this).removeClass('active');

        // Hide the reading panel
        hidePanel();
    });
});
+5

More articles:


All Articles