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

Posted by Shameer.Ali87 under JavaScript on 11/15/2012 | Points: 10 | Views : 9869 | Status : [Member] | Replies : 7
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


Responses

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

Up
0
Down

Resolved
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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Up
0
Down
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

Login to post response