Deslice DIV y cambie el tamaño de los contenidos usando JQuery

I want to slide top div up/down and left div left/right. When left or top DIVs slides in/out, the center content should be adjusted on the screen. I have written the code for the same. But when I slide left div, the center content falls down for a moment. More over the code does not work well in all browsers. In IE, when I slide top DIV, the content does not resize but if I first slide top div and then slide left div, it works fine. What changes are required in below code so that I can work properly in all browsers?

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="JQuery.js"></script>
<script src="JQuery-UI.js"></script>

<title></title>
<style type="text/css">
    .form
    {
        margin: 0;
        padding: 0;
        display: inline;
    }

    body
    {
        height: 100%;
        position: relative;
        font-family: Verdana;
        margin: 0;
        padding: 0;
    }

    .topDiv
    {
        display: block;
        background-repeat: repeat;
        background-image: url('../Images/HeaderLogoBackground.png');
        width: 100%;
        background-color: #7AB800;
        height: 108px;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#showHideTopDiv").click(function () {
            if (!$('#topDiv').hasClass("off")) {
                $('#topDiv').animate({ 'margin-top': '-108px' }, 500);
                $('#topDiv').addClass("off");
                $('#divContent').animate({ 'height': '890px' }, 500);

            }
            else {
                $('#topDiv').animate({ 'margin-top': '0px' }, 500);
                $('#topDiv').removeClass("off");
                $('#divContent').animate({ 'height': '780px' }, 500);
            }
        });

        $('#divSideSlider').click(function () {
            if (!$('#sidebar').hasClass("off")) {
                $('#sidebar').animate({ 'margin-left': '-10%' },500);
                $('#sidebar').addClass("off");
                $('#divReportContent').animate({ 'margin-left': '0.0%', 'width': '99.5%' }, 500);
            }
            else {
                $('#sidebar').animate({ 'margin-left': '0.0%' },500);
                $('#sidebar').removeClass("off");
                $('#divReportContent').animate({ 'margin-left': '0.0%', 'width': '89.5%' }, 500);
            }
        });
    });
</script>
</head>
<body>
<form id="form1" runat="server" class="form">
    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="topDiv" class="topDiv">
        <div style="float: left;">
            <img src="Images/Background.png" />
        </div>
        <div style="float: right;">
            user detail
        </div>
    </div>
    <div id="showHideTopDiv" style="height: 10px; background-color: #E5E4E2; display: block; color: #E5E4E2;">
    </div>
    <div id="divContent" style="height: 780px;margin:0px;padding:0px;">
        <div style="float: left; background-color: red; width: 10%; height: inherit;margin:0px;padding:0;display:block;" id="sidebar">

        </div>
        <div style="background-color: #E5E4E2; height: inherit; width: 0.5%; float: left;margin:0px;padding:0;display:block;" id="divSideSlider">
        </div>
        <div style="float:left;width:89.5%;background-color:aqua;height:inherit;margin:0px;padding:0;display:block;" id="divReportContent">

        </div>
    </div>
</form>
</body>
</html>

preguntado el 28 de mayo de 14 a las 14:05

1 Respuestas

Try to go with DHTMLX Layouts or Jquery UI..This allows the sliding of the DIVs very smoothly...Or use Any other Widjet Libraries...Click here JQUERY UI

There are lot of effects there which u can use without much Coding

enter image description here

contestado el 28 de mayo de 14 a las 14:05

This looks fine but I want to go with the current code only. - Desarrollador de Microsoft

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.