Suppose my web page has a struture like this:
<body>
<div id="fee">
<div id="fi">
<div id="actual_content">
<p>Content</p>
<div id="some_important_stuff">Blah</div>
<p>More content</p>
<span class="and_another_thing">Meh</span>
...
</div>
<div id="fo>
...
</div>
...
</div>
<div id="fum">
...
</div>
...
</div>
<div id="fazz">
...
</div>
...
</body>
I want to create a print CSS style that hides everything except for the contents of actual_content.
My first attempt was like this:
body * {
display: none; /* Hide everything first */
}
/* Show content div and all of its ancestors */
body > #fee {
display: block;
}
body > #fee > #fi {
display: block;
}
body > #fee > #fi > #actual_content {
display: block;
}
/* Unhide contents of #actual_content */
#actual_content * {
display: block; /* Not ideal */
}
However, since there's no "display: auto" or "display: default", I mess up the styles of actual_content's items when I try to unhide them. I also don't like hard coding the path to actual_content since it might change.
You probably want to use the visibility property. W3Schools describes the difference between the display and visibility properties: the visibility property affects the visibility of an element without affecting its structure, i.e. the space it would normally occupy on the page.
on the top level div set visibility:hidden, then on the div you want set visibility:visible
You'll need to go in and target everything that you don't want to show up individually by setting display:none. If you can change class names, etc, you should un-nest the actual_content <div>, then add classes like hide_div to the other <div>s so they're easy to turn off.
I know your tags show you want a CSS solution, but the PrintArea jQuery plugin is perfect for your needs:
PrintArea sends a specified dom element to the printer, maintaining
the original css styles applied to the element being printed.
http://plugins.jquery.com/project/PrintArea
Related
I have below piece of code and want to hide img tag using css pseudo elements.
<body>
<div>
<img src="hi.png">
<div class="container1">
<p>somevalue </p>
</div>
</div>
<div>
<img src="hi.png">
<div class="container2">
<p>somevalue </p>
</div>
</div>
</body>
<style>
.container :: before{
display: none;
}
</style>
unfortunately above code is not working and my image is not being hidden. Please help me out how to get this done by using CSS.
In above code i want to hide only the image tag which is present before container2 class. I will have a cycle of classes (i just added only 2 for example) please help me out.
From MDN:
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an
element with the content property.
By using .container::before, you aren't targeting the element before .container, you're simply creating a new element there.
You can see this when you try this code:
.container::before {
content: 'lol';
}
One way to hide your img element using pseudo-classes would be to use for example
img:first-child {
display: none;
}
I was trying to parse from a complicated html page, but someone told me a better way is to inject my own css into that html. So I have the following situation:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
</body>
</html>
As you can see the div with id is sandwiched between a parent div and a child div.
I wonder if it is possible to hide the parent and child, making the page only show layer two div line. I try doing
div { display: none; }
div#center { display: inline;}
but without success.
I am using the indent method now, thank you for all the help, guys! : )
Here is kind of a hack, but it works:
HTML
<div>
layer one div
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
CSS
div {
text-indent: -9999px;
}
div#center {
text-indent: 0px;
}
div#center div {
display: none;
}
Fiddle: http://jsfiddle.net/fPdda/2/
As far as I know, there is no option to show element which is placed under hidden element. So CSS will not do the trick. The only possible option is use javascript, which move element which is supposed to be visible out of parent. This can be easily done with jQuery.
However I don't know why you need this and what you mean with word "parse". CSS will affect only what you see, but under "parse" I understand processing data - and for processing is not important how it is shown. Maybe if you specify more detailed what you need, I can help.
This method will not work. Sadly, because your displayed div is inside a hidden div, you're sunk if you're stuck with that markup. You could get fancy and use text-indent: -9999px instead of display: hidden, then text-indent: 0px on the one you want to show, but the negative indented elements will still take up vertical space. Alternately, you could use JS to duplicate the node and re-insert it into the DOM at a different point, maybe inside an element that isn't hidden.
var nodeToShow = document.getElementById('center').cloneNode();
nodeToShow.setAttribute('id', 'centerClone');
document.body.appendChild(nodeToShow);
I don't think that is possible. Hiding the parent div takes precedence on the child, so your child with id is visible but only in the scope of parent div which is hidden. In order to accomplish what you trying to do just wrap the parent text in a span and hide the span;
div span{
display:hidden;
}
div#center div{
display:hidden;
}
You can't hide a parent yet make a child element visible, it just doesn't work that way. I would suggest doing something like this:
<div class="layer-one">
<span class="layer-one">layer one div</span>
<div id="center">
layer two div
<div>
layer three div
</div>
</div>
</div>
.
div,
span.layer-one {
display: none;
}
div.layer-one,
div#center {
display: block;
}
I have a list of items that can be displayed in "grid or list" mode.
This is implemented in HTML this way :
<!-- List mode -->
<div class="items list">
<ul></ul>
</div>
<!-- Grid mode -->
<div class="items grid">
<ul></ul>
</div>
When the user clicks a button, I just switch between the grid/list CSS classes using jQuery. In my stylesheets I'm styling the .items.grid > ul / .items.list > ul, sometimes hiding sub elements in grid mode, something like :
.items.grid .hidden-grid {
display: none;
}
.items.grid ul li {
float: left;
display: inline-block;
width: 80px;
height: 80px;
}
The number of elements displayed in the list can vary, and is loaded via "infinite scroll" until there are remaining items.
This is working fairly good, but it starts being slow when the number of elements grows. I was expecting this to be instantaneous, but it blocks the browser.
What could I do to make it faster ?
The looks related to the browser having to render the elements again.
Could this be related to the CSS structure ?
This was actually related to CSS selectors and the way the browser parses them to render the page, or render elements again.
It is very logical when you know, but browsers evaluate CSS selectors from right to left, starting from the element they will finally have to style. Even CSS IDs don't make a big difference. This is different from the jQuery way of thinking.
Writing efficient CSS selectors
Optimize browser rendering
Why do browsers match CSS selectors from right to left?
So I replaced element selectors by classes selectors, remove deep selectors, and the difference is noticeable.
HTML
<div class="items">
<ul class="grid">
<li class="item>...</li>
</ul>
</div>
CSS
.grid .item {
...
}
.grid .hidden-grid {
display: none !important;
}
.list .item .description {
...
}
Is it possible to make a div invisible without commenting it out? If so, how?
You need to hide that with CSS:
div { /* this will hide all divs on the page */
display:none;
}
If it is a particular div with certain class or id, you can hide it like:
<div class="div_class_name">Some Content</div>
CSS:
div.div_class_name { /* this will hide div with class div_class_name */
display:none;
}
Or
<div id="div_id_name">Some Content</div>
CSS:
div#div_id_name { /* this will hide div with id div_id_name */
display:none;
}
Note: You need to wrap CSS tyles in between <style type="text/css"></style> tags, example:
<style type="text/css">
div#div_id_name {
display:none;
}
</style>
More Information :)
You can do this by inline style
<div style="display:none"></div>
or by defining CSS Style like
In css add
.HideableDiv{display:none;}
and in your HTML write
<div class="HideableDiv" ></div>
Its Easy. The only thing you need is, adding a style to it, like following example shows:
CSS:
<style type="text/css">
div.myInvisibleDiv {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
</style>
HTML:
<div class="myInvisibleDiv"><p>My invisible content</p></div>
This div, and it content does definitely not show, and it wont disturb surrounding elements.
if you want it to be essentially gone from your layout:
.element_class {
display:none;
}
if you want to just make it invisible (but still keeping it's space seemingly empty)
.element_class {
visibility: hidden;
}
and then your element (if a div) would look like this:
<div class="element_class"></div>
basically anything you add the class="element_class" to will be either invisible or completely hidden.
position: absolute;
left: -99999px; /* big number */
will make the content accessible to most screen readers but will render the element off-screen.
May be, its not the required solution, but you can tackle this kind of issues by these little tricks.
You can use jQuery to achieve the solution.
If you want to totally hide/show the div, then you can use:
$('#my_element').show()
$('#my_element').hide()
Or if you want that your div become invisible and its still existing in the page, then you can use efficient trick:
$('#my_element').css('opacity', '0.0'); // invisible Maximum
$('#my_element').css('opacity', '1.0'); // visible maximum
i noticed that in the following example, note the classes, i am using 960gs in case the classes css interfered
html
<section id="main" class="container_12">
<div class="grid_12">
<article>
...
css
header, footer, section, article, nav, aside { display: block; }
#main { background: #fff; }
i noticed that #main has a height of 0 in firebug. also if i do a
#main .grid_12 { background: #fff; }
it works
i noticed that if i use a div instead of section the css works
UPDATE
turns out that its because of the div.grid_12 or rather div.grid_x that causes the problem, if i remove that <div> it will work even if i am using <section>
<section id="main" class="container_12">
<div class="grid_10"> <!-- <<< this div -->
From the spec:
The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
i found the answer, grid_x has float: left i need to clear it