div tag with Scroll

Question

0.00/5 (No votes)

See more:

Hi,

I have a div tag in my aspx page. In that i placed a checkbox list. I want the div tag to be hidden on the page load and on click of the button i want the div tag to be displayed with the checkbox list. and the div tag should be scrollable. Please help me

Thanks

Posted 6-Jun-13 2:34am

komaliks

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Ankur^\m/ · Answer 1 · 2013-06-06T02:43:00

Solution 1

In the declaration, add style="display:none;". So your div will look like:

<div id="someDiv" style="display:none;"></div>

This makes it hidden by default.

To show it, add following code in the button click:

<asp:Button ID="Button1" runat="server" OnClientClick="javascript:document.getElementById('someDiv').style.display='inline';" Text="Button" />

This will show the div back. Or if you are using jQuery, the syntax is

JavaScript

$('#someDive').show();

For showing scroll by default, check css overflow property[^]

Hope this helps!

Posted 6-Jun-13 2:43am

Ankur^\m/

Comments

komaliks 6-Jun-13 23:58pm

Hi Ankur, I tried this option. but when i click on the button the div tag is appearing for few seconds and then disappearing. please help me on this

Prince Sagayaraj 7-Jun-13 1:12am

you have to give "return false" in the OnClientClick. Otherwise it will call the server side event. So you lost the div.

Collapse | Copy Code
<asp:Button ID="Button1" runat="server" OnClientClick="javascript:document.getElementById('someDiv').style.display='inline';return false;" Text="Button" />

Ankur^\m/ 7-Jun-13 7:19am

Yes exactly. Thank you for adding.

Prince Sagayaraj · Answer 2 · 2013-06-06T03:07:00

Hi,

Add the below Javascript code

C#

function ShowDiv() {
           document.getElementById("dv").style.display = ""
       }

Then Add the Below HTMl in the aspx page

ASP.NET

<asp:button id="btnShowDiv" runat="server" text="Show Div" onclientclick="ShowDiv(); return false"  />
        <div id="dv" style="overflow-y: scroll; height: 100px; background-color: #FFFFFF;           width: 200px; display: none">
            <asp:checkboxlist id="cb" runat="server" xmlns:asp="#unknown">
                <asp:listitem text="Check Box 1" value="1"></asp:listitem>
                <asp:listitem text="Check Box 2" value="2"></asp:listitem>
                <asp:listitem text="Check Box 3" value="3"></asp:listitem>
                <asp:listitem text="Check Box 4" value="4"></asp:listitem>
                <asp:listitem text="Check Box 5" value="5"></asp:listitem>
                <asp:listitem text="Check Box 6" value="6"></asp:listitem>
                <asp:listitem text="Check Box 7" value="7"></asp:listitem>
                <asp:listitem text="Check Box 8" value="8"></asp:listitem>
                <asp:listitem text="Check Box 9" value="9"></asp:listitem>
                <asp:listitem text="Check Box 10" value="10"></asp:listitem>
                <asp:listitem text="Check Box 11" value="11"></asp:listitem>
                <asp:listitem text="Check Box 12" value="12"></asp:listitem>
                <asp:listitem text="Check Box 13" value="13"></asp:listitem>
                <asp:listitem text="Check Box 14" value="14"></asp:listitem>
                <asp:listitem text="Check Box 15" value="15"></asp:listitem>
                <asp:listitem text="Check Box 16" value="16"></asp:listitem>
                <asp:listitem text="Check Box 17" value="17"></asp:listitem>
                <asp:listitem text="Check Box 18" value="18"></asp:listitem>
                <asp:listitem text="Check Box 19" value="19"></asp:listitem>
                <asp:listitem text="Check Box 20" value="20"></asp:listitem>
            </asp:checkboxlist>
        </div>

I hope this one will help you.

Thanks