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.
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
Here is a simple example of some markup I have:
HTML:
<input type="checkbox" name="ex1">
<input type="checkbox" name="ex2">
<ul class="reveal">
<li>Hi</li>
<li>Bye</li>
</ul>
The checkboxes are used as filters to remove <li>s with certain tags. This all works fine. My issue is that when the checkbox is checked and the filter logic runs, it uses a display:none to remove the specific <li>s but the css I use to format doesn't get applied correctly after the fact. For example, let's say clicking the first checkbox removes the first <li> and the 'bye' <li> is the only one left. That will work fine, but the border I have defined in the css persists even though the selector shouldn't match it anymore. This is the selector I used:
CSS:
#columns .calendar td ul.reveal li + li {
border-top: 1px dotted #999;
}
This style is applied correctly at first, but after the display:none is applied and the 'bye' li is the only li left it will still have the dotted border.
I've used the browser developer console to check and this is indeed the only style rule that is being applied to create the border.
I've read something along the lines of display:none not repainting the DOM, and to access a variable that forces the browser to repaint (something like $('whatever')[0].offsetHeight) but this does not seem to fix my problem.
jQuery Based Solution
CSS rules by themselves will not work since the DOM is being manipulated by JavaScript.
What you could do is use JavaScript to identify the first li element left in the list.
For example:
$('ul.reveal li').filter(':first').addClass('first-child');
where the CSS rules are:
ul.reveal li {
border-top: 1px dotted #999;
}
ul.reveal .first-child {
border-top: none;
}
Demo fiddle: http://jsfiddle.net/audetwebdesign/BXMaB/
The jQuery action picks out the first li element in each ul list and then applies a CSS rule to know out the top border that appears on all li elements by default.
You would need to apply this jQuery action when ever a check box (event) is checked, in addition to binding it to the document load event.
The CSS selector you have chosen is interested in the structure of the DOM rather than what is and isn't painted. Selector S + S will still apply to S2 even when S1 is being removed, which is why it's still getting a top border.
Given that you are able to manipulate the DOM I would suggest either removing and re-adding the element itself or writing a selector that will respect a class added to S1 (which also applies display:none to it).
For instance:
selector:not(.hidden) + selector { [Only works in IE9+] }
or
selector.active + selector.active { [Works in IE7+] }
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?
I have tried finding this on the net had no luck.
I'm using superfish dropdown and I need the top li to be rounded, but not li's with ul's inside, if you see here this is the test page where its demo'd:
jsfiddle: http://jsfiddle.net/UdvBC/
But i need to say sort of.. only apply the rounding on the top li not the ones in the dropdown, is this doable?
Thanks :)
You are looking to use the :first-child selector from what I gather...
http://www.w3schools.com/cssref/sel_firstchild.asp
It allows you to apply special CSS to the very first item. Just make sure to apply the first-child selector AFTER the styles applying to all items, so as to prevent overriding the first-child properties.
Example:
ul li { background: red; }
ul li:first-child { background: blue; }
Putting it in the opposite order would override the first-child CSS.
Edit: Thanks for the correction!
CSS cannot really accept not statements like that, so I'd suggest defining separate classes for the two types of li's.
i have the following simple code, but it doesn,t work
<ul>
<li id="one" onmouseover="this.style.background-color='white';">
home
</li>
</ul>
could you tell me why.
thanks
edit:
and how can i also change the color of a tag, onmouseover of li
Convert hyphens to camelCase when changing properties of the style object in JS.
backgroundColor
However, you are trying to solve this problem in the wrong way.
If you really wanted to style the list item on hover, then you probably should be using li:hover in your stylesheet. The only downside is that this won't work in IE 6 (although it is just a cosmetic effect on an ancient browser that is increasingly falling in the "Not supported" box).
That said, having a hover effect shouts "You can click now!" at the user — but only the link portion of the list item will do anything when clicked. This means that you should style the a element, not the li … but style it to fill the list item (and this will work in IE6).
Listamatic has many examples.
it'll be onmouseover="this.style.backgroundColor='white';"
Why not use pure CSS for this one?
li:hover {
background-color: #ffffff;
}
Otherwise use gX's and David Dorward's suggestion.
You can also use whatever:hover or a js framework (like jQuery). whatever:hover has only 3kb or so, so I guess is worth to load it :)
As a side note, I think you should take a look at this list to see how CSS styles are converted to JS.