<div style:visibility="hidden">

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • parag1234567
    New Member
    • Jan 2007
    • 3
    #1

    <div style:visibility="hidden">

    Hi,
    I am dynamically generating a html file which will contain only <div> tags which contents are hidden from user( set by style="visibili ty: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?
    Tags: None
    • snowdonkey
      New Member
      • Aug 2006
      • 37
      #2
      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".

        Comment

        • parag1234567
          New Member
          • Jan 2007
          • 3
          #3
          Hi,

          Doc-1:
          <div style="visibili ty:hidden">Line 1</div>
          <div style="visibili ty:hidden">Line 2</div>
          <div style="visibili ty:hidden">Line 3</div>
          <div style="visibili ty:hidden">Line 4</div>
          <div style="visibili ty:hidden">Line 5</div>

            Comment

            • parag1234567
              New Member
              • Jan 2007
              • 3
              #4
              Hi,
              My code is like,

              File--> doc1.html

              <div style="visibili ty:hidden">Line 1</div>
              <div style="visibili ty:hidden">Line 2</div>
              <div style="visibili ty:hidden">Line 3</div>
              <div style="visibili ty:hidden">Line 4</div>
              <div style="visibili ty:hidden">Line 5</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

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  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">Line 1</p>
                  <p id="line2">Line 2</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.

                    Comment

                    • AricC
                      Recognized Expert Top Contributor
                      • Oct 2006
                      • 1885
                      #6
                      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.disp lay == "none")
                      obj.style.displ ay = "";
                      else
                      obj.style.displ ay = "none";
                      }

                      </script>
                      </head>

                      <body>
                      <div id="HideShow">H ello World!</div>
                      <a href="javascrip t:dispHandle(Hi deShow)">Hide Show</a>

                      </body>
                      </html>
                      [/html]

                        Comment

                        • oranoos3000
                          New Member
                          • Jan 2009
                          • 107
                          #7
                          put per element in cell of table and with using display properties

                          Originally posted by parag1234567
                          Hi,
                          I am dynamically generating a html file which will contain only <div> tags which contents are hidden from user( set by style="visibili ty: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?
                          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

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              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.getEle mentById() to refer to elements.

                                Comment

                                Previous template Next
                                Working...