How to change width of div on button click..? [Resolved]

Posted by Shameer.Ali87 under JavaScript on 11/15/2012 | Points: 10 | Views : 20147 | Status : [Member] | Replies : 7

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

hi all,

I have a div in my page of width 400px and height 500px, and I have a button on top of div,
when I click the button, the div's width should change to 600px, and when I reclick the button, the div should come back to original position..

any one can help me...

thanks
shameer ali shaik

shameer ali shaik

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Sandhyab on: 11/19/2012 [Member] Starter | Points: 50

0	Hi, <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <input type="button" id="btnClick" value="Click" onclick="fun()" /> </div> <div id="divExample" style="background-color: Green; width:500px;"> This is div text</div> <script type="text/javascript" language="javascript"> function fun() { var div1 = document.getElementById("divExample"); if (div1.style.width != "100px") { w = div1.style.width; h = div1.style.height; div1.style.width = "100px"; div1.style.height = "100px"; } else { div1.style.width = w; div1.style.height = h; } return false; } </script> </form> </body> </html> Thanks & Regards Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Hi,

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

      <input type="button" id="btnClick" value="Click" onclick="fun()" />

    </div>

    <div id="divExample" style="background-color: Green; width:500px;">

        This is div text</div>

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

        function fun() {

          

            var div1 = document.getElementById("divExample");

            if (div1.style.width != "100px") {

                w = div1.style.width;

                h = div1.style.height;

                div1.style.width = "100px";

                div1.style.height = "100px";

            }

            else

             {

                div1.style.width = w;

                div1.style.height = h;

                }

            return false;



        }

    </script>

    </form>

</body>

</html>

Thanks & Regards

Shameer.Ali87, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sabarimahesh on: 11/15/2012 [Member] Bronze | Points: 25

0	Check this link http://stackoverflow.com/questions/8255870/change-div-height-on-button-click Life is a Race Thanks & Regards By Sabari Mahesh P M Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Sabarimahesh on: 11/15/2012 [Member] Bronze | Points: 25

0	Check this link http://stackoverflow.com/questions/5616823/jquery-change-height-of-div-on-button-click Life is a Race Thanks & Regards By Sabari Mahesh P M Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Sabarimahesh on: 11/15/2012 [Member] Bronze | Points: 25

0	This is more use think so http://www.w3schools.com/jquery/css_height.asp Life is a Race Thanks & Regards By Sabari Mahesh P M Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Ranjeet_8 on: 11/15/2012 [Member] [MVP] Gold | Points: 25

0	Try this, Java Script <script type="text/javascript" language="javascript"> function DivResize() { document.getElementById('Resize').style.width = '600px'; document.getElementById('Button1').style.display = "none"; document.getElementById('Button2').style.display = "block"; return false; } function DivResizeO() { document.getElementById('Resize').style.width = '400px'; document.getElementById('Button2').style.display = "none"; document.getElementById('Button1').style.display = "block"; return false; } </script> Aspx Design Page <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return DivResize();"/> <asp:Button ID="Button2" runat="server" Text="Button" style="display:none;" OnClientClick="return DivResizeO();"/> <div id="Resize" style="height:500px;width:400px;border:1px solid black;"> </div> Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Try this,
Java Script


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

        function DivResize() {

            document.getElementById('Resize').style.width = '600px';

            document.getElementById('Button1').style.display = "none";

            document.getElementById('Button2').style.display = "block";

            return false;

        }

        function DivResizeO() {

            document.getElementById('Resize').style.width = '400px';

            document.getElementById('Button2').style.display = "none";

            document.getElementById('Button1').style.display = "block";

            return false;

        }

    </script>

Aspx Design Page


    <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="return DivResize();"/>

    <asp:Button ID="Button2" runat="server" Text="Button" style="display:none;" OnClientClick="return DivResizeO();"/>

    <div id="Resize" style="height:500px;width:400px;border:1px solid black;">

    

    </div>

Shameer.Ali87, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Shameer.Ali87 on: 11/19/2012 [Member] Starter | Points: 25

0	Hi all, thanks for the replies.. I am having only one button.. on first click, the width should increase and on the second click, the div comes to its initial position... that's my requirement.. thanks shameer ali shaik Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Shameer.Ali87 on: 11/19/2012 [Member] Starter | Points: 25

0	thanks sandhyab, it was cool.. i made changes as per my requirement... thanks shameer ali shaik Shameer.Ali87, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts