Using visibility: hidden and display: none together in CSS?

Question

The reason I want to use the together is that I want to hide the content like display: none does, without leaving any whitespace as visibility: hidden does.

At the same time I want the hidden content not to be copied when the user copies the entire table from the webpage, not because it is sensitive information but because the user hid the field and therefore doesn't want it copied. visibility: hidden doesn't copy but display: none does, so I have quite a dilemma.

Anyone know a solution?

Edit:
What I ended up doing was just what was suggested, save the information as Javascript (as it is not sensitive information anyways) and create/remove dynamically with Javascript.

Answer 1

I do not think giving the element visibility: hidden prevents the user copying the information in the table, although this may be browser specific behavior. Have a look at the test I've set up: http://jsfiddle.net/a9JhV/

The results from Firefox 3.6.8 on Windows 7 is

Copy ME!    Don't copy me :(    Copy ME!    Copy ME!
Copy ME!    Don't copy me :(    Copy ME!    Copy ME!

Which doesn't work as expected.

---

I've cooked up some code, it took the quite a bit work of cook up... have a look here: http://jsfiddle.net/a9JhV/7/

It uses jQuery to hide and show the table columns - actually removes them from the DOM, not just play around with their visibility and whatnot. Whee!

Answer 2

Why not remove the node from the page? You could accomplish this by using:

<script type = 'text/javascript' language = 'JavaScript'>
document.getElementById('yourDivId').innerHTML = '';
//OR
document.removeChild(getElementById('yourDivId')); //(I think this is right...document might need to be replaced by the div's parent)
</script>

Answer 3

You should remove the "hidden" DOM object using javascript and then recreate it again if user wants it back. Data from deleted records can be stored in session storage or hidden inputs for example.

Answer 4

If you want elements HIDDEN from the source, place them in a separate text file and load it using an ajax-like call... this will prevent the html from being in the source.

If you place a clear image OVER the content they also will not be able to highlight it easily (and by using javascript you can likely disable their ability to do a ctrl+a)

hope that helps!

Answer 5

It's a good idea to create an object to represent the table:

var myTable = function(tableName){
    // If you want to assign columns dynamically you could create this.addColumn();
    this.Columns = new Array(
                   new Array("row1","row2","row3","row4"),
                   new Array("row1","row2","row3","row4")
                   );

    this.reBuild = function(){
        for (col in this.Columns){
            for(row in this.Columns[col]){
                // put the cell in the table
            }
        }
    };
};

I didn't test this code, it should just illustrate the gist of storing and building a table.