My idea is to use JavaScript to change the HTML content of <style> tag, in order to manipulate elements.
Assuming a table with 20,000 cells, i want to hide those who has the hide and hide-me-too class, instead of getting all the elements - i'll add/remove the HTML content
.hide-me-too, .hide{display:table-cell/none;}
of a style element in the page.
what i ask is: should i expect problems with different brwosers? performance? any-other-issue?
If you will try to manipulate the CSSOM to control 20,000 cells you have a problem.
Better if you manipulate the DOM and change classnames.
The any-other-issue, and the most important, is if you have a table structure (<table><tr><td>) and you show cells with display:block you will crash all your layout. The correct display value for cells is display: table-cell. So don't make a single show() or hide() with jQuery, change the classnames so look like this:
.showme {
display: table-cell;
}
.hide,
.hide-me-too {
display: none;
}
And it's another any-other-issue, that you hide some cells, the columns will not match, so you need to play with colspan. Will be hard. Good luck.
Related
Seems that hiding a element can be done 500 ways. I'm looking what what is best for browser compatibility standards, and possibly even performance...
This is what I wish to hide:
<li class="header-menu-user"><a class="header-user" href="/Settings/User/UserProfile">User Settings</a></li>
What I have tried in the past is for another scenario in which I did a display:none on a li with a data- attribute etc..
I just tried to do this and it is not working (not hiding it)
.header-user {
display: none;
}
There are many ways but one of these two usually is appropriate:
display: none;
Will hide the element, meaning surrounding elements will ignore it as if it were not in the DOM, even though it is and you can still target it.
opacity: 0;
Will essentially make the element transparent, not visible but it still occupies space in various layout models.
You can hide a specific <a> tag like this:
li.header-menu-user a[href^="/Settings"] { display: none; }
With just using CSS Display:none; would be the way to go. The only performance impact this is really having is that you are still sending all the content that is hidden to the client browser. If you want to improve performance perhaps consider removing the content on the server side if that is an option for you.
Context: making printable invoices to generate in a browser.
It's common in making printable webpages to use an #media print rule to change the way the content looks for a printed page. Ideally, because I'm printing only a small part of the page, I'd like to hide everything and then display the contents of a particular element.
Structure is something like this:
<body>
<div id="topMenu">...lots of elements...</div>
<div id="sideMenu">...lots more...</div>
<div class="tools">...some tools...</div>
<div class="printing">...some elements I want to print...</div>
<div class="tools">...more stuff I don't want to print...</div>
</body>
Stuff I've tried:
Ideally, I'd like to do something like
body * {
display: none;
}
.printing, .printing * { /* Both parts are needed to make it display */
display: block !important;
}
But this won't work because some elements need to be inline and some need to be block. I've played with some different values for display from MDN and can't find one that easily resets the value to its original. display: initial seems to be treated like inline.
The suggestion in CSS: "display: auto;"? seems to only work for JS.
Of course, it is possible to explicity "hide" the stuff I don't want printed rather than display the stuff I do want, but it seems to me that it should be possible to go the other way.
In this question How to only show certain parts with CSS for Print? suggests body *:not(.printable *) {display:none;} but notes (as backed up on the w3 negation page ) that this is not yet supported.
I note that the w3 draft and the display-outside page seem to recommend using an unknown (to webkit) box-suppress property to preserve the display value while not displaying the element.
My questions:
What is the best way to hide everything and target certain elements for display when they don't all share a common display property?
What exactly does box-suppress do?
Since you specifically tagged this CSS3, try using CSS3!
body>:not(.printing) {
display: none;
}
This should work for the example you gave. I hope it works for your real-world application!
To answer your auxiliary question, as of October 2014, box-suppress is a possible future replacement for display:none that will hopefully make it easier to both hide and remove elements from the flow without worrying about changing its display type (as opposed to visibility still keeps it in the flow, and position:absolute which still keeps it visible). I don't think it's currently supported so I'd stay away from it for now. If you want to know more, see http://w3.org/TR/css-display
You cannot use display for this purpose. See Display HTML child element when parent element is display:none
However, you can use visibility, as long as you use absolute positioning for the hidden content:
body, body * {
visibility: hidden;
position: absolute;
}
.printing, .printing * {
visibility: visible;
position: relative;
}
If you don't use any absolute or fixed elements, you can use an alternative way of hiding elements.
Instead of using display: none to hide your elements, try using:
body * {
position:absolute;
top: -999999px;
left: -999999px;
}
To set it back use:
.printing, .printing * {
position: initial;
/* OR */
position: static;
}
I have an issue related to vertical whitespace in a table. I'm using the border-spacing CSS property to add some space between the table rows (to make them appear less-crammed).
Data is added dynamically in the table, so there can be the situation in which I have no data in the table (no trs) but there is some vertical whitespace due to the border-spacing property (which is currently border-spacing: 0px 10px).
Is there a possibility to fix this through CSS?
Fiddle example with data: http://jsfiddle.net/lav911/QLsah/
Fiddle example without data: http://jsfiddle.net/lav911/yWRS7/
I mention that the intended functionality would be not to display the table at all when there is no data in it.
Edit: Testing on Chrome.
You can use CSS :empty pseudo, and than use display: none;
table tbody:empty {
display: none; /* Than get rid of it */
}
Demo (No display: block; required there)
Still a small black dot remains, it is because of the border of your table element, since there's no way as of now to select the parent element using CSS, you cannot eliminate that without using jQuery, by selecting the parent element and applying border: 0;
like this
DEMO
table {
border-collapse:collapse;
}
CSS is not capable of knowing if selectors have content. Since you're adding it dynamically though, if there is no data present add a class to the table. something like:
<table class="empty"></table>
then, in your CSS, add:
table.empty {
display:none;
}
since you're using a framework that may or may not be editable, you can add this JS (using jQuery):
$(document).ready(function() {
if ($('table tr').length == 0) {
$('table').addClass('empty');
}
});
So I've setup Compass for creating automatic sprites with SCSS. All goes well, it generates some nice CSS for me :-
.icons-sprite, .actions-new, .actions-edit, .actions-save, .actions-delete, .actions-refresh {
background: url('/content/themes/admin/images/icons-s0336d5eb89.png') no-repeat;
}
.actions-new {
background-position: 0 -48px;
}
... ... ...
Now I am creating a table, and in that table there is a "Action column" where you can perform functions on rows (delete or edit).
What is the generally accepted way (in html 5) for showing these buttons using sprites?
I've explored a few options and ran into a few problems
span I can't get this to show unless I place it in display: block mode and if I do that it inserts new lines after the item, and I don't want to have to float everything
div for some reason this one doesn't even show
img The biggest issue I am seeing with this one is the requirement for a src field, this means that I need to duplictate the url over and over again.
What do other people use for sprites inside links?
Use span and display: inline-block. This will make the span behave like an image, so you can apply vertical-align: middle. Support goes all the way back to IE6 if you use it on an inline element.
I have a form where depending on the website's brand one of two input fields should be visible at one given spot.
I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none;
This does hide the field, but it still makes it take up space.
I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.
Untill now all the branding things could be done with css style sheets so I would like to keep it that way.
The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).
why don't you use input type="hidden" ?
What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.
However, setting it to display: none should in theory do the same...
<style>
.hideme
{
display:none;
visibility:hidden;
}
.showme
{
display:inline;
visibility:visible;
}
</style>
<input type="text" name="mytext" class="hideme">
You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.
This does hide the field, but it still
makes it take up space.
This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).
Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.
You can set the display to none if you want to hide the element and display to block or inline if you want to show them.
To have a look on display check this
If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.
Can you please post the complete code?
You can do this if you want to isolate the css code from other input:
input[type="checkbox"] {
display: none;
}
You can also further isolate it from the same type by indicating another class.
I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.