<div style:visibility="hidden">

parag1234567

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?

Post Reply

snowdonkey

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".

parag1234567

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>

parag1234567

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

drhowarddrfine

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.

AricC

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]

oranoos3000

@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

acoder

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.

<div style:visibility="hidden">

Post your reply

Question stats

Most Active

Most Questions Answered

Top Questions

Latest Questions

Similar topics

More