By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,528 Members | 915 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,528 IT Pros & Developers. It's quick & easy.

<div style:visibility="hidden">

P: 3
Hi,
I am dynamically generating a html file which will contain only <div> tags which contents are hidden from user( set by style="visibility:hidden")
Now the next step is i am enabling some of these tags by setting style="visible" here the problem is, the hidden items also occupy the space on html form is there any other ways such that all the content should present on html form in hidden form and run time I can make visible some of them as per requirement thru javascript?
Jan 12 '07 #1
Share this Question
Share on Google+
7 Replies

snowdonkey
P: 37
CSS "visibility" property hides an element but retains its space in the flow of the document. If you want to remove an element from the flow of a document (not just make it invisible, but allocate its space to other elements, which is what I think you want to do) then use "display: none".
Jan 12 '07 #2

P: 3
Hi,

Doc-1:
<div style="visibility:hidden">Line1</div>
<div style="visibility:hidden">Line2</div>
<div style="visibility:hidden">Line3</div>
<div style="visibility:hidden">Line4</div>
<div style="visibility:hidden">Line5</div>
Jan 12 '07 #3

P: 3
Hi,
My code is like,

File--> doc1.html

<div style="visibility:hidden">Line1</div>
<div style="visibility:hidden">Line2</div>
<div style="visibility:hidden">Line3</div>
<div style="visibility:hidden">Line4</div>
<div style="visibility:hidden">Line5</div>

File --> doc2.shtml

This file will include all the content of above html file under body tag using Shtml include tag.
A java script function will make the Line1 and Line4 visible.

Now my target is to show the visible lines one by one. In current situation it appears as:

Line1
<blank>
<blank>
Line4
<blank>


Is there any alternative to this implementation?
Please guide me..
Thanks
-Parag
Jan 12 '07 #4

drhowarddrfine
Expert 5K+
P: 7,435
Perhaps you can do the same for each line. Identify each line with an id or class and turn each one on/off as required. Such as:

<div id="para1">
<p id="line1">Line1</p>
<p id="line2">Line2</p>
</div>

Then you can turn each line on/off using javascript and display:none or hidden as required, if I'm following this all correctly.

That can become a little complicated if it gets too big but you might give it more thought than I can right now.
Jan 12 '07 #5

Expert 100+
P: 1,892
Using javascript you can do this:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function dispHandle(obj)
{
if (obj.style.display == "none")
obj.style.display = "";
else
obj.style.display = "none";
}

</script>
</head>

<body>
<div id="HideShow">Hello World!</div>
<a href="javascript:dispHandle(HideShow)">Hide Show</a>

</body>
</html>
[/html]
Jan 12 '07 #6

oranoos3000
100+
P: 107
@parag1234567
hi
you can put per element of form in a cell of table
an allocate id to per cell
then you should write a fuction
that show or hide per cell with display properties
document.all[id].style.display="none" for hide cell this code for IE
or
document.layers[id].display="none" for hide cell this code for netscape
and with allocate "" to this property cell has shown
be successful
Jun 22 '09 #7

acoder
Expert Mod 15k+
P: 16,027
There's no need for a table. Any container element (span/div/p, etc.) will do.

Your suggestion of document.all and document.layers is very old and unsupported in most modern browsers. Use the standard document.getElementById() to refer to elements.
Jun 22 '09 #8

Post your reply

Sign in to post your reply or Sign up for a free account.