How to hide unnecessary HTML tag when browser renders the page? I'm developing a responsive theme and for now I'm just using display: none; to hide all the tags (<div>/<img>/<span>). But as I know browser will read all DOM and then apply all rule including CSS and JavaScript.
css
.desktop {
display:none;
}
html
<div class="desktop">
<img src= " ..
<div id="container" ...
<span class="font ...
</div>
So what is correct way to hide unnecessary tags rendered by browser when I'm using same HTML page with same CSS file with responsive mode?
Note : If you using firebug, even if you set with display:none browser still load all div including images but just not show to you.
You can set display:none style to the element you do want to be shown (it will not even flink in the UI), and then remove it using javascript:
HTML:
<div style="display: none;" id="hideme">Hide me</div>
JS:
window.onload = function() {
document.getElementById("hideme").style.display = "block";
}
This should be fine. display: none; should do the job. If you are manipulating DOM using JavaScript, you may apply inline styling.
If you want to hide some specific elements it is better to set the style on the element. since this will this reduces the amount of look up for the CSS engine to find which elements match the CSS selector on a external style sheet. so something like this will do the trick:
<div id="container" style="display:none"></div>
Related
I have this https://jsfiddle.net/tbdrLm3q/4/
code on js fiddle
How do I hide the button (which is a link) after clicking it without affectin the height transition?
Only css please.
I think you must add a container like this and change the link to container
<div id="container">
<a href="#container" class='myButton'>Click</a>
<div id='sharebox'></div></div>
then
make your css like this
#container:target #sharebox{
//your style
}
#container:target .myButton{
visibility: hidden;
}
i hope this usefull :)
I'm working on a project where I need to hide a div when the a x is clicked. I'm wanting to target a specific div to be closed, the div that is holding the href nice. I'm getting a bit stuck with targeting the div once the X is clicked. Could you give any pointers for simple designer?
HTML
Div name = footer and the link class is "linky"
CSS
.linky:link {
footer:display: none;
}
Any help would be appreciated.
Regards,
Put the link target directly before the footer:
<body>
hide footer
... other content ...
<div id="linky"></div>
<footer>footer</footer>
</body>
the use the + operator:
#linky:target + footer {
display: none;
}
/* to prevent scrolling to the bottom */
#linky {
position: fixed;
top: 0;
}
see this fiddle
a + b will target b if it is directly after a.
Note the two additional differences from your version:
Use :target instead of :link (:link will target links)
Use id instead of class
I'd like to add that the footer will be visible again as soon as the user clicks on any other #anchor link.
Update: Now preventing scrolling; removed simple version because scrolling can not be prevented there
Try this:
<div id="div1">
Hello, i will be hidden on click the below link
</div>
<b>Click here</b> to hide
## this is the link code
<a href="" id="link" onClick="hide()"><b>Click here</b> to hide
<script>
function hide(){
document.getElementById('div1').style.display="none";
}
</script>
I have few div's like as follows,
<div id="text-2">
<div class="textwidget">
<iframe id="widget-0" src=""></iframe>
<iframe id="widget-1" src=""></iframe>
</div>
</div>
<div id="text-3">
<div class="textwidget">
<iframe id="widget-2" src=""></iframe>
<iframe id="widget-3" src=""></iframe>
</div>
</div>
In the above div's, i want to restrict(block/none) the iframes for particular page using css.
For Example :
(i). If i'm in home page,
I want to display the iframes like "widget-0" and "widget-2",and the remaining iframes "widget-1" and "widget-3" needs to be disabled.
(ii). If i'm in inner page,
I want to display the iframes like "widget-1" and "widget-3",and the remaining iframes "widget-0" and "widget-2" needs to be disabled.
How to do this using css. Can anyone help me in this small css tweaks.
CSS Selector Example For Paragraph tag :
div#test p:first-child {text-decoration: underline;}
div#test p:last-child {color: red;}
Note :
The iframe id's are dynamic, not static. Above one is simple example.
You should be able to reference them by their id's, like:
#widget-2 { display: none }
If you want this to be depended of the page you are currently in, you might want to add a class to the body element that indicates the page. With that, you can enable/disable the iframes the way you want:
<body class="home">
.home #widget-2 { display: none }
In the example above, now the second widget is only disabled on the homepage.
First add body class in home and inner ( like "home-page" "inner-page" )
iframe { display: none }
.home-page iframe#widget-0, .home iframe#widget-0 { display:block }
.inner-page iframe#widget-1, .home iframe#widget-3 { display:block }
How can I make my css sprite back button validate through W3C? Here is my code to call the button.
<div class="icon-backbtn"></div>
I ended up using the below code to pass W3C validation and still using CSS Sprites.
<a id="icon-backbtn" title="Back" href="#" onclick="history.go(-1)"></a>
You shouldn't have a <div> as a child of an <a>, use an <img src="..."/> instead.
EDIT:
If you have a spritesheet, then simply add display:block; for the anchor and it will behave just like a div.
Since you are using a CSS Sprite, I would suggest placing the <a> inside the <div> (proper way to do it) and add some css:
HTML
<div class="icon-backbtn">
</div>
CSS
.icon-backbtn a {
display:block;
cursor:pointer;
text-decoration:none;
text-indent:-9999px;
}
The CSS sets the link to be a block element, thus occupying the width and height of the div. The remaining styles are to prevent the regular link behavior for texts, since you are using an image.
This may be the simplest question ever, but try as I might I simply couldn't figure it out. I'm working on a website right now and I wish to use as few <div> elements as possible to keep the HTML pretty and easy to edit. At the moment I essentially have:
<html doctype etc etc>
<head>
<title and meta tags>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="body"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>
Very simple and elegant, yes? However the client wants their header to consist of a single large image which contains their company name and logo. So my options were pretty clear - either use an <img> tag, or set the background-image property on the header <div>. However then I got to thinking about SEO. For Google's sake it would be nice if the header <div> contained an <h1> element with her website's title, but then this element would have to be hidden so that human users only see the background image.
Although if you were to use the display:none; css property then the entire <div> disappears, including the background. Is there a good way to hide the contents of a <div> without hiding the <div> itself?
Have you tried to apply the hide on the H1 itself?
<div id="header">
<h1>Company title</h1>
</div>
Your style would be: #header h1{display:none;visibility:hidden;}
UPDATE
Apparently, we're both just having one of those days. If you want to make the H1 truly SEO/Screen reader friendly, it would be better to do this with your CSS:
#header h1{
width:XXXpx;
hight:XXXpx;
background:url('image/location.png');
text-indent:-9999px;
overflow:hidden;
}
This way your text is actually there on the page and rendered, it's just kind of off screen.
You could replace #header div with h1 if you want this tag, set background image on said h1 and even put some text in it (company name) and use text-indent to hide it.
Plus, in your quest to minimize number of elements you can use body as a wrapper, and if you need full page background just set in on html element.
Set display: none on the H1 tag rather than the div, and use the background image on the div.