回发时停止JQuery滑入

Question

I am working on an asp.net webpage with a jquery slider to slide a div in and out. The div includes three asp dropdown lists, with values initialised by the page load routine in the server side VB. On the first drop down I want to have autopostback so depending on the item selected, the second drop down list is rebound.

Unfortunately, when autopostback is triggered, the whole div is sliding back into its starting position, although on sliding the div back onto the screen, I can see that the autopostback routine worked and rebound the second drop down.

Is there anyway to stop the div sliding back to its starting position the handle button is clicked?

I am using jquery.tabSlideOut.v1.3.js, but i have copied and pasted below if its of any use:

(function($){
$.fn.tabSlideOut = function(callerSettings) {
    var settings = $.extend({
        tabHandle: '.handle',
        speed: 300, 
        action: 'click',
        tabLocation: 'right',
       topPos: '1px',
       leftPos: '20px',
        fixedPosition: false,
        positioning: 'absolute',
        pathToTabImage: null,
        imageHeight: null,
        imageWidth: null,
        onLoadSlideOut: true                       
    }, callerSettings||{});

    settings.tabHandle = $(settings.tabHandle);
    var obj = this;
    if (settings.fixedPosition === true) {
        settings.positioning = 'fixed';
    } else {
        settings.positioning = 'absolute';
    }

    //ie6 doesn't do well with the fixed option
    if (document.all && !window.opera && !window.XMLHttpRequest) {
        settings.positioning = 'absolute';
    }

    //set initial tabHandle css

    if (settings.pathToTabImage != null) {
        settings.tabHandle.css({
        'background' : 'url('+settings.pathToTabImage+') no-repeat',
        'width' : settings.imageWidth,
        'height': settings.imageHeight
        });
    }

    settings.tabHandle.css({ 
        'display': 'block',
        'textIndent' : '-99999px',
        'outline' : 'none',
        'position' : 'absolute'
    });

    obj.css({
        'line-height' : '1',
        'position' : settings.positioning
    });

    var properties = {
                containerWidth: parseInt(obj.outerWidth(), 10) + 'px',
                containerHeight: parseInt(obj.outerHeight(), 10) + 'px',
                tabWidth: parseInt(settings.tabHandle.outerWidth(), 10) + 'px',
                tabHeight: parseInt(settings.tabHandle.outerHeight(), 10) + 'px'
            };

    //set calculated css
    if(settings.tabLocation === 'top' || settings.tabLocation === 'bottom') {
        obj.css({'left' : settings.leftPos});
        settings.tabHandle.css({'right' : 0});
    }

    if(settings.tabLocation === 'top') {
        obj.css({'top' : '-' + properties.containerHeight});
        settings.tabHandle.css({'bottom' : '-' + properties.tabHeight});
    }

    if(settings.tabLocation === 'bottom') {
        obj.css({'bottom' : '-' + properties.containerHeight, 'position' : 'fixed'});
        settings.tabHandle.css({'top' : '-' + properties.tabHeight});

    }

    if(settings.tabLocation === 'left' || settings.tabLocation === 'right') {
        obj.css({
            'height' : properties.containerHeight,
            'top' : settings.topPos
        });

        settings.tabHandle.css({'top' : 0});
    }

    if(settings.tabLocation === 'left') {
        obj.css({ 'left': '-' + properties.containerWidth});
        settings.tabHandle.css({'right' : '-' + properties.tabWidth});
    }

    if(settings.tabLocation === 'right') {
        obj.css({ 'right': '-' + properties.containerWidth});
        settings.tabHandle.css({'left' : '-' + properties.tabWidth});

        $('html').css('overflow-x', 'hidden');
    }

    //functions for animation events

    settings.tabHandle.click(function(event){
        event.preventDefault();
    });

    var slideIn = function() {

        if (settings.tabLocation === 'top') {
            obj.animate({top:'-' + properties.containerHeight}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'left') {
            obj.animate({left: '-' + properties.containerWidth}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'right') {
            obj.animate({right: '-' + properties.containerWidth}, settings.speed).removeClass('open');
        } else if (settings.tabLocation === 'bottom') {
            obj.animate({bottom: '-' + properties.containerHeight}, settings.speed).removeClass('open');
        }    

    };

    var slideOut = function() {

        if (settings.tabLocation == 'top') {
            obj.animate({top:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'left') {
            obj.animate({left:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'right') {
            obj.animate({right:'-3px'},  settings.speed).addClass('open');
        } else if (settings.tabLocation == 'bottom') {
            obj.animate({bottom:'-3px'},  settings.speed).addClass('open');
        }
    };

   var clickAction = function(){
        settings.tabHandle.click(function(event){
            if (obj.hasClass('open')) {
                slideIn();
            } else {
                slideOut();
            }
        });

    };

    if (settings.action === 'click') {
        clickAction();
    }

    if (settings.action === 'hover') {
        hoverAction();
    }

    if (settings.onLoadSlideOut) {
        slideOutOnLoad();
    };

};
})(jQuery);

The drop downs in the div I am sliding are...

<asp:DropDownList ID="ddContinent" AutoPostBack="true"   runat="server">
                <asp:ListItem>ALL</asp:ListItem>
                <asp:ListItem>Africa</asp:ListItem>
                <asp:ListItem>Americas</asp:ListItem>
                <asp:ListItem>Asia</asp:ListItem>
                <asp:ListItem>Europe</asp:ListItem>
</asp:DropDownList>

<asp:DropDownList ID="ddCountry"   runat="server">
</asp:DropDownList>

ddCountry is initialised on pageload and I am rebinding depending on the continent selected in the first drop down using a ddContinent.SelectedIndexChanged type function on the server side VB. To clarify - this bit is working. I am trying to work out how to stop the DIV sliding back out of view when the auto post back is triggered

Any ideas?

EDIT: I haven't found a definite answer yet, but rummaging around the web, one option may be to use a button click to activate the slider instead of the "a" link. then maybe use cookie or a label to store if the div should be visible or not. the value could be updated by the button click alone and would be a condition of the slider sliding.

Answer 1

I use C# instead of VB.Net but this should help :

.ASPX

<asp:DropDownList ID="ddContinent" AutoPostBack="true" OnSelectedIndexChanged ="UpdateCountry" runat="server">

Code-behind :

   Private Sub UpdateCountry(ByVal sender As Object, _
        ByVal e As System.EventArgs) 
   // update countries
  End Sub