Question

i want to slide a div when user click on support button from right to left.i have tried the following code.. but its not working correctly for me…

<script type="text/javascript">

$(document).ready(function () {
    $('[id$=aSupport]').live('click', function (e) {

        if ($('[id$=hdfsupportcount]').val() == 1) {
            $('[id$=hdfsupportcount]').val(0);

            $('[id$=divSupport]').css({ 'right': '' }).animate({
                'left': '0px'
            });
            // $('[id$=divSupport]').css('display', 'none');
        } else {
            $('[id$=hdfsupportcount]').val(1);

            $('[id$=divSupport]').css({ 'right': '0px', 'left': '' }).animate({
                'right': '30px'
            });
            $('[id$=divSupport]').css('display', 'block');
        }
    });
});
</script>

Html code is:

<div>
    <asp:HiddenField ID="hdfsupportcount" runat="server" />
    <div style="float: right; position: fixed; top: 35%; right: -3px;">
        <a href="javascript:void(0);" class="signin" title="Support" id="aSupport">
            <img src="support_button2.png" /></a>
    </div>
    <div id="divSupport" style="height: 500px; width: 270px; float: right; position: fixed;
        top: 35%; right: 21px; display: none;">
        <div id="ContactMenu">
            <div id="topnav" class="topnav">
            </div>
            <div id="signin_menu">
                <div id="signin">
                    <div style="width: 100%; font-weight: bold; font-size: 22px; color: Black;">
                        <div style="width: 27px; float: left">
                        </div>
                        <div style="float: left; margin-top: 1px">
                            123-456-7890</div>
                    </div>
                    <br clear="all" />
                    <br />
                    <p>
                        <label style="font-weight: bold; color: Black">
                            Contact Us</label>
                    </p>
                    <p>
                        <label>
                            Email</label>
                        <asp:TextBox ID="txtContactEmail" runat="server"></asp:TextBox>
                    </p>
                    <p>
                        <label>
                            Message</label>
                        <asp:TextBox ID="txtMessage" TextMode="MultiLine" runat="server"></asp:TextBox>
                    </p>
                    <asp:Button ID="btnContactUs" CssClass="signin_submit" runat="server" Text="Send"
                        ValidationGroup="ContactUS" OnClick="btnContactUs_Click" />
                    <asp:Button ID="btnContactUsCancel" CssClass="signin_submit" runat="server" Text="Cancel"
                        OnClick="btnContactUsCancel_Click" />
                </div>
            </div>
        </div>
    </div>
</div>

When we click on buttons first time.the div slides to left but when i click on button again i want to slide it to right and div will be hide. …please help me…

Answer 1

I would handle it like this.

$(function(){
    $(document).on('click', '[id$=aSupport]', function (e) {
        var dist = 0,
            count = $('[id$=hdfsupportcount]'),
            support = $('[id$=divSupport]');
        switch(count.val()){
            case '0':
                    count.val(1);
                    dist = 30;
                break;
            case '1':
                    count.val(0);
                    dist = -300;
                break;
        }    
        support.stop().animate({
            right: dist
        }, 500);
    });
});​

Also, remove display:none; from <div id="divSupport"> and give it a right:-270px; so it appears off the page. It’s already hidden from sliding in, so no reason to be display:none;. here’s a working jsFiddle showing an example.