Solved

How to set div.style.display = "inline" in c#?

Posted on 2008-11-02
8
5,402 Views
Last Modified: 2012-05-05
hi all,
i have a div and check box in web page, when check box is ticked, that div will be displayed on the page, otherwise, div is hidden. how to do it in c# code?

thanks a lot
viola
<asp:CheckBox runat=server ID=cbChart OnCheckedChanged="cbChart_CheckedChanged" />
<div id="chartDiv" style="position:relative; height:300px; width:300px;"></div>
 
------------------------------
protected void cbChart_CheckedChanged(object sender, EventArgs e)
    {
        if (cbChart.Checked)
        {
            //how to set div to inline in c#? 
            //getElementById("chartDiv").style.display = "inline"
        }
    }

Open in new window

0
Comment
Question by:viola123
  • 5
  • 2
8 Comments
 
LVL 16

Expert Comment

by:ororiole
ID: 22863730
first put a runat="server" attribute in your div tag. Then you can use this code:
chartDiv.Style["display"] = "inline";  //or "none" etc.
0
 
LVL 6

Author Comment

by:viola123
ID: 22863791
i need to use this div in both javascript and c#, so if i put a runat="server" attribute in my div tag, will it affect my client javascript?
0
 
LVL 16

Expert Comment

by:ororiole
ID: 22863852
No, it will still work fine with javascript.
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 6

Author Comment

by:viola123
ID: 22863871
hi,
i tried this solution, i got error when trying to draw a chart and put it into the Div. it seems the javascript cannot recognize the Div when i put a runat="server" attribute in its tag.

0
 
LVL 6

Author Comment

by:viola123
ID: 22863874
is it possible to do it in javascript?
0
 
LVL 8

Expert Comment

by:mkosbie
ID: 22863951
Yes, it's very easy in JS.  Here's a sample DIV:
<html>
<head>
<script type="text/javascript">
<!--
function sh(obj) {
	if(obj.style.display == "none") obj.style.display = "inline";
	else obj.style.display = "none";
}
//-->
</script>
</head>
<body>
<asp:CheckBox runat=server ID=cbChart OnClientClick="sh(document.getElementById('chartDiv'));" />
<div style="position:relative; height:300px; width:300px;" id="chartDiv">This is text in the chart DIV</div>
</body>
</html>

Open in new window

0
 
LVL 6

Author Comment

by:viola123
ID: 22864088
hi,
i dont find OnClientClick attribute in Checkbox tag.
0
 
LVL 6

Accepted Solution

by:
viola123 earned 0 total points
ID: 22864535
hi,
i worked out.

thanks
<html>
<head>
<script type="text/javascript">
<!--
 
function onload() {
   if(!getElementById("cbChart").checked) {
	    getElementById("chartDiv").style.display = "none";
	}
	else{
	    getElementById("chartDiv").style.display = "inline";
	}
   getElementById("cbChart").attachEvent('onchange', SaveRequiredActionCB ); 
}
 
function SaveRequiredActionCB() {
	if(!getElementById("cbChart").checked) {
	    getElementById("chartDiv").style.display = "none";
	}
	else{
	    getElementById("chartDiv").style.display = "inline";
	}
}
//-->
</script>
</head>
 
<body onload="onload()">
<asp:CheckBox runat=server ID=cbChart OnCheckedChanged="cbChart_CheckedChanged" />
<div id="chartDiv" style="position:relative; height:300px; width:300px;"></div>
</body>

Open in new window

0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article aims to explain the working of CircularLogArchiver. This tool was designed to solve the buildup of log file in cases where systems do not support circular logging or where circular logging is not enabled
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question