I have a HTML page containing some hardcoded/static text.
The text string does not have any class/id/name. It's just there.
How to hide it on page load?
P.S: I really hope this is not a repeat question. I have done my 'homework'.
You can hide an element that doesn't have any direct identifiers by using a CSS selector which examines structure. You didn't post your markup, so it's impossible to give an exact solution.
Example 1
HTML
<body>
<section>
<div>Div I want to hide</div>
</section>
</body>
CSS
SECTION > DIV { display: none; }
There are many permutations of this pattern and many selectors available.
See: CSS2 Selectors (very wide support) and CSS3 Selectors (supported in most newer browsers).
Example 2
Here's a more complex example:
HTML
<div id="foo">
<ul>
<li>Hide this item</li>
<li>Don't hide this</li>
<li>Don't hide this</li>
</ul>
</div>
CSS
/* hide the first child of any UL which is a direct descendant of #foo */
#foo > UL > LI:first-child { display: none; }
In CSS, display: none? That'd be the easiest way. Or you could go with javascript once the page has loaded.
If you're talking about doing it with javascript, you would have to do a window.onload and set the style.display = "none"; but that would require an id/class/some way to reference it (there are ways to reference it without them but it's a lot better style to just give it an id/class. The function would look something like this.
window.onload = function() {
document.getElementById("text").style.display = none;
};
where your string has an id of "text"
Although if you are determined to have the text just appear as none on startup, why not just set the style/css to originally to have a display of none?
Related
I'm very new to HTML and I'm having a lot of trouble properly formatting my list to my liking. In my current code, I have a numbered list. My objective is to create an indentation or space between the number itself and the text that follows. For example:
1.(indent) For all date/fields/etc etc
2.(indent) A "full-text query"
3.(indent) narrow your searches etc
I've tried searching for tips on w3schools and other StackOverflow posts but can't seem to find a solution. I believe it is due to having a list instead of regular text such as a paragraph. Any help would be appreciated.
Since the text of each item in your example is contained in a span, you can style each span.
For example I have added a padding-left: 30px in the first item of your code: https://jsfiddle.net/02xbseuo/
This will intent the first line of the text.
If you want to intent the whole paragraph, you can convert the span elements to div.
Use the text-indent rule like so (see also my slightly altered JSFiddle:
<style type="text/css">
li {
padding-right: 5px;
}
</style>
The style tag belongs in the head section (I put mine on line 20 of the fiddle I linked).
I'd recommend adding a class to your li elements so that you can change only the specific elements you want, rather than all li elements on the page.
Also, you didn't ask about this, but in general I'd recommend avoiding inline styles. Once your pages get larger, they're very hard to maintain and modifying each inline style will take much longer and can lead to additional errors.
With margin and padding you can have the indentation that you need. I used 10px but you can put any value that needed for your solution.
Html code
<ol>
<li>element 1 </li>
<li>element 2</li>
<li>element 3 </li>
<li>element 4</li>
</ol>
Css code
ol li {margin-left: 10px; padding-left: 10px;}
You can see this sample in JSFiddle
I've written this code to create simple CSS and Javascript dropdown menu.
HTML:
<li>XYZ
<ul id="rankSubMenu" onmouseover="showRanksSubmenu()" onmouseout="hideRanksSubmenu()">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
</li>
CSS:
#rankSubMenu {
display: none;
position: absolute;
bottom: 10px;
left: 278px;
}
JS:
function showRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'block';
}
function hideRanksSubmenu() {
document.getElementById('rankSubMenu').style.display = 'none';
}
Menu items have of course some height, background and other stuff to make them look like buttons. The problem is that, there is some empty space between this buttons (like a few pixels) and when user stops mouse cursor there, menu disappear (in fact menu always does that, unless you move your cursor real fast). I tried to define this whole area as div or try any other ideas that I thought about, but with no success. Any suggestions how can I solve this?
First off, welcome to the wonderful world of web development. Based on your use of inline styles, li as a top-level container, and attempted use of Javascript for a simple menu show/hide I can tell you're pretty new. No matter! Its a learning process, and web development is fun. :)
First, for what you want, you can do this via CSS only, and without the need for position:absolute in your menu items or anything crazy like that. Here is a working example of a cleaner menu display:
jsFiddle example
My recommendations for the learning process:
Get comfortable with external CSS sheets, use of inline styles is pretty ancient, and very difficult to maintain
Learn about the benefits of classes over IDs when styling; rarely (never?) do you need to use IDs for styling, and class is usually preferred because you can apply it to multiple elements
Get familiar with proper semantic markup; for example li should not be a top-level container, only the container of another ul if there is a sub list or something
Learn external JS event handlers; using inline onwhatever handlers in HTML is another pretty ancient method, and again makes maintenance very difficult
Best of luck!
CSS
.dropdown li{
float:left;
width: 240px;
position:relative;
}
.dropdown ol{
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than
display:none;) */
}
.dropdown li:hover ol{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
HTML
<ul class="dropdown">
<li>
<a href="#" >Your Link</a>
<ol>
<li> Your Link 1 </li>
<li> Your Link 2 </li>
</ol>
</li></ul>
What else would u need for this? Is there any reason to use javascript to create this?
Take a look at this Fiddle. Perhaps it's what you're looking for.
it's only using HTML and CSS.
#rankSubMenu is probably 0px high, try to add some height, also you can do this js free by using :hover
My guess would be set your anchor tags to display block. If an anchor tag is not a block it will ignore a few css properties, width and height being the two main ones, so your click is just the text.
another possible reason is that the submenu coming in is partially covering the link (check your inspector to see what area it's covering).
if you set the height to that of the original item with overflow hidden and then on hover set height to auto
HTML
<nav class="navigation">
<ul>
<li>Menu</li>
<li>Home</li>
<li>About</li>
</ul>
</nav>
CSS
.navigation {
height: 20px;
overflow: hidden;
}
.navigation {
height: auto;
}
no javascript needed
I have an unordered list whose lis are invisible (display:none) to begin with.
I want to make a specific li visible with a JS function. How can I do that?
I've tried $("#my-list li:nth-child(1)").fadeIn() but that only works if the ul is visible to begin with.
Here's my code:
ul.hide > li {
display: none;
}
<ul class="hide" id="my-list">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
I'm trying to answer this question. Feel free to take a stab at it!
Like bdares said, an invisible element cannot have a visible child. So what you said about the code is true: ul has to be visible to begin with.
Looking at the html code you could probably just remove class="hide" which will make the ul visible.
However if you can't do that, an alternative is to use Javascript to make ul visible on the fly. Instead of just:
$("#my-list li:nth-child(1)").fadeIn();
Do
$("#my-list").show();
$("#my-list li:nth-child(1)").fadeIn();
Use this way:
$("#my-list").show(0).children("li:nth-child(1)").fadeIn();
$("#my-list").show().children("li:nth-child(1)").fadeIn();
Let me explain you why .show(0) is better than .show(). When you use .show(), it gives a transition, which eases out the DOM Element, which is not needed. It is like showing a hidden element and hiding it smoothly, which is not accepted.
In my website, in asp.net 4 / vb, I have a situation where I need to include a class, "noprint", in my footer, as defined in print.css. But I already have a span class, so I wrapped div tags around it. And my tr's and td's all have classes in them already.
Basically, I have this in my footer:
Knowledge Base | Contact USS | Copyright © USS Vision Inc. 2012 | 888-888-8888
And the only thing I want printed out is the phone number.
I use
<div class="noprint">whatever I want omitted when printing</div>
And that works fine. But when viewing the webpage, I don't want the 888-888-8888 to appear below everything else, so I can't use div tags, I suppose. The noprint works great, but is there any way I can use the noprint in my footer without putting the phone number below the rest of the footer due to the div tags? Thanks for any help anybody can offer!
Update: My print.css stylesheet looks like this:
#media screen
{
/* whatever styles you have for display */
}
#media print
{
.noprint { display: none; }
}
So I don't know how to make the div tags display: inline, but I will search around and try to figure it out!
gd1 is absolutely right about span/div and display inline/block, but on a side note I'd add that what you're trying to achieve is often done with a list (as it really is a list of links in your footer)
<ul class="footer">
<li class="no-print">KnowledgeBase</li>
...
<li>888-888-888</li>
<ul>
with a css like
.footer li {
list-style-type: none;
display: inline;
padding: 0 10px;
border-right: 1px solid black;
}
.footer li:last-child {
border-right: none;
}
hope that helps
Use <span>.
However you can make a div "inline" using the style display: inline, but in this case you just need a <span>.
use css
<div style="display:inline" class="noprint">whatever I want omitted when printing </div>
If not use the inline counterpart span, as a answer already said. But remember inline display donot have block properties like height, top-margin, bottom-margin.
If you still want to use an extra div, I recommend using display:inline, but if you just want the whole footer to have both classes you can do that as well.
You can add multiple classes like this:
<span class='footer lower noprint'></span>
In CSS this would look like:
.footer.lower.noprint{ display:none; }
Alternatively, the 'noprint' class will also work without specifying all three classes.
Here's an example: http://jsfiddle.net/yKRyp/
well set the specific width and height of the div using CSS and apply float
<div style='float:left; border:1px solid blue; width:100px; height:100px'>
div 1
</div>
<div style='float:left; border:1px solid red; width:100px; height:100px'>
div 2
</div><div style='float:left; border:1px solid orange; width:100px; height:100px'>
div 3
</div>
a live example here
http://jsfiddle.net/AGWGs/
div is a block-type element, it is usually used as to group and contain block-type elements.
Using CSS, you can change the display type of any element, however.
In a quick example:
display:inline Makes an element to show inline, they can be put side by side. span element is an inline element. This cannot use block-type-only css rules such as: margin, padding, width, height ...
display:block Makes an element to be displayed as a block. Unless inherited values or given CSS rules, they will take a line long, blocked. They can take block-type CSS rules. And they can be stacked side-by-side using float. However, unless the line is cleared(clear: left, clear:right or clear:both), following elements after the floated element will overflow the previous container.
display:inline-block Makes an element have block features, with inline displaying. This is pretty similiar to using float and making block-type elements shown in-line. However this rule is IE8+ support only, so I would encourage you to use floating to keep the maximum compatibility.
P.S: There are hacks that can be used to have display:inline-block feature used on IE5.5+.
Say I have a basic website with a navbar that has a few links. When I am on a page (say, Terms of Use), I want the "Terms of Use" link in the navbar to be highlighted. When I switch to a different page, I want that page's link to be highlighted (i.e. I switch to privacy page, and then "Privacy" is highlighted in the navbar).
Does anyone know a simple way to do this with HTML/CSS/JS?
A simple way to do it without using javascript or php etc would be to add a different class to the body tag on each page.
<body class="nav-1-on">
Then in your css file:
body.nav-1-on a.nav-1, body.nav-2-on a.nav-2 { color:red )
SO you need XXX classes for however many nav items you have and you put a class on each nav item too as illustrated.
Make sense?
Update (brain fade, had wrong selector). For CSS3 browsers, you can easily target the page name itself:
a[href*=pageNameImOn.htm] {color: red;}
The *= will here match all href paths that include pageNameImOn.htm in them, which would match:
<a href="/my/path/to/file/pageNameImOn.htm">
<a href="/pageNameImOn.htm">
<a href="/pageNameImOn.htm#interalJumpLink">
For the link that you want to be a different color, you can manually set the style
<a style="color:red">My link is red</a>
Probably a better way to do would be to define a class where the color is red
<style> .visited { color:red } </style>
and then for the actual link
<a class="visited">My red link</a>
This solution uses jQuery, jQuery is just a compiled code library for javascript really, offering easy to use snippets and functionalities.
The is definitely the easiest way of achieving what you're after, although it is "client-side" so the class will be added by the users machine, rather than being added by the server and then sent to the user. But for smaller sites, it should suffice.
What is happening: This code finds your navigation, here it is looking for the li of .nav, so replace ('.nav li') with whatever your menu class is called, so possibly: ('.mymenu li'). It then sees if the menu link matches the current page, if it does, it adds a class to the li. So you also need to create a class of .active, such as: .active{background-color:blue;}
Hope this helps!
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
jQuery('.nav li').each(function() {
var href = jQuery(this).find('a').attr('href');
if (href === window.location.pathname) {
jQuery(this).addClass('active');
}
});
});
</script>
Just for the fun of it.
What about a Single page and CSS3 only solution, without any backend code or Javascript:
<ul>
<li><a id="home" href="#home">Home</a></li>
<li><a id="terms" href="#terms">Terms of use</a></li>
</ul>
CSS
li a { color: black; }
#home:target { color: red; }
#terms:target { color: red; }
The :target selector in CSS will match an ID selector that matches the current hash-tag.
Here's some more information: http://reference.sitepoint.com/css/pseudoclass-target
Pretty good support in Firefox, Safari, Opera and Chrome.
Incomplete support in IE9 and IE10:
IE doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all. http://www.quirksmode.org/css/contents.html
Set a different id on your body to identify the page.
<body id="terms-of-use">
an example nav:
<nav>
<a class="home" href="#">Home</a>
<a class="terms-of-use" href="#">Terms</a>
</nav>
then in your css:
nav a {
// default style
background: blue;
}
#terms-of-use a.terms-of-use {
// if the id of body is terms-of-use then the link with the class .terms-of-use...
background: red;
}