JavaScript - Jquery : Need help in showing effects

Asked By Tejaswini Prashant J on 17-Nov-11 07:08 AM
Earn up to 30 extra points for answering this tough question.
Hi,
I am trying to give a hide effect on click of a div which includes
$('#menu').click(function(e){  
.....

       $("#main1").hide(2000, function () {
          document.getElementById("main").style.width="98%";  //Changing width 'n' to 98%
          document.getElementById("galleryContainer").style.width="98%";  //Changing width 'n' to 98%
          document.getElementById("gallery").style.margin="auto";  //Aligning in middle
       });   
}

this is working fine... but want to add
$(this).hide("slide", { direction: "right" }, 1000);
and execute the function steps also..
Can anybody tell me how my code should be modified so function will be called on hide which will change the width and alignment with slide hide effect.
Jitendra Faye replied to Tejaswini Prashant J on 17-Nov-11 10:54 PM
Try like this-


$('#menu').click(function(e){  
.....
     $(this).hide("slide", { direction: "right" }, 1000); 

     $("#main1").hide(2000, function () {
      document.getElementById("main").style.width="98%";  //Changing width 'n' to 98%
      document.getElementById("galleryContainer").style.width="98%";  //Changing width 'n' to 98%
      document.getElementById("gallery").style.margin="auto";  //Aligning in middle
     });   
}
Anil Kumar replied to Tejaswini Prashant J on 18-Nov-11 06:00 AM
Hi Tejaswini,

I would like you to try out this code:

<a href="#" id="lnk1">show div 1</a> &nbsp;
<a href="#" id="lnk2">show div 2</a>
<br/><br/>
<div id="divParent">
    <div id="div1">
        <pre>
    these are the contents of div 1
    div1 items here
    div 1 items
    </pre>
    </div>
    <div id="div2">
        <pre>
    these are the contents of div 2
    the quick brown fox jumsp over the lazy dog
    </pre>
    </div>
</div>
==============================

$(document).ready(function() {
    var h1 = $("#div1").height();
    var h2 = $("#div2").height();
    $("#div1,#div2").height(Math.max(h1, h2));
    $("#div2").hide();
});

$("#lnk1").live('click', function() {
    $("#div1").show();
    $("#div2").hide();
});

$("#lnk2").live('click', function() {
    $("#div2").show();
    $("#div1").hide();
});

==================

#divParent {
    border:1px solid blue;
    height:200px;
    overflow:auto;   
}

#div1{
 border:1px solid red;   
}

#div2{
    border:1px solid yellow;
}
===

See the below show:

SHOW DIV 1
:
 these are the contents of div 1
    div1 items here
    div 1 items

SHOW DIV 2:
these are the contents of div 2
the quick brown fox jumsp over the lazy dog

Hope it helps you
Do update us again.
Thank you
Anil

Chintan Vaghela replied to Tejaswini Prashant J on 18-Nov-11 07:16 AM

Hello

 

Try to js as following way

    <script language="javascript" type="text/javascript" src="jQuery.js"></script>

 

    <script language="javascript" type="text/javascript">

      $(document).ready(function() {

 

        $('#btnClick').click(function() {

          $("#div1").toggle(2000, function() {

            $("#div2").width(5);  //Changing width 'n' to 98%

            $("#div2").css("float", "left");

          });

        });

      });

    </script>

 

    <asp:Button ID="btnClick" runat="server" OnClientClick="javascript:void(0);return false;"

      Text="Button" />

    <div style="float: left" id="div1">

      TEst1

    </div>

    <div style="float: left" id="div2">

      TEst2 TEst2 TEst2 TEst2 TEst2 TEst2 TEst2

    </div>

 

Pls check it and let me know your feedback.