Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have a list in which I need to had a break for every two elements:
Original:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Need:
<ul>
<li></li>
<li></li>
</br>
<li></li>
<li></li>
</ul>
Fiddle: http://jsfiddle.net/9uksT/
Is this possible with Jquery?
EDIT: Oh wow sorry for the question. I am also open to using CSS. I just need to have a space between every 2 pairs of list items
Don't abuse <br> tags this way. Give every second element a wider bottom margin using CSS:
.root ul li:nth-child(2n) {
margin-bottom: 1em;
}
http://jsfiddle.net/mblase75/9uksT/3/
That said, I would replace your <ul> sub-list with a definition list, which is more semantically correct in this case:
.root dl {
margin: 0 0 0 2em;
}
.root dl dd {
margin-bottom: 1em;
}
http://jsfiddle.net/mblase75/E7gAA/
You can use a class and jQuery to assign the class to the right elements
.menu-vertical li.even{
margin-bottom: 10px;
}
then
$('.menu-vertical > ul li:nth-child(2n)').addClass('even')
Demo: Fiddle
Note: As I shown in the comments it can be done using nth-child selector, but it is not supported by IE < 9
As described that would be invalid HTML, but you can add <br/> inside the end of every second <li> element
http://jsfiddle.net/TrueBlueAussie/9uksT/2/
$('ul:not(.root) li:odd').append("<br/> ");
Update:
As the question has now changed, to include CSS, I would not do it this way, but would use a selector to set a style on the LIs (as Arun P Johny shows). e.g.
$('ul:not(.root) li:odd').addClass('second')
This works on all browsers.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I am trying to display string as
. string1
. string2
. string3
By using Append function of Jquery how to build string with bullet format.
Seeing as html lists are set up using ul and li tags, we can create a html list as follows:
<ul class="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
To append to it using jQuery:
$(".myList").append("<li>New Item</li>");
See the following JSFiddle to see it in action: JSFiddle -
That code adds an item to the list after 3 seconds, so you can see it being appended.
<ul style="list-style-type: normal;" id="list"></ul>
<script>
$('#list').append('<li>string1</li>');
</script>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
What I need to get value "Bra" inside the second li, i didn't use clas category64 because the class change every page.
<div class="breadcrumbs">
<ul>
<li class="home"><li>
<li class="category63">
Panty
<span>/ </span>
</li>
<li class="category93">
<a href="http://asdasd.com/xyz" title=>Pierre Cardin</a>
<span>/ </span>
</li>
<li class="category64">
<strong>Bra</strong>
</ul>
</div>
I have problem to get the value,
if i get the value on 2nd li , why the output "Pierre Cardin/", the output have "/", how to not include the "/" ?
Use nth-child selector, it matches the element for given index
var text = document.querySelector('.breadcrumbs li:nth-child(2)').innerText;
alert(text);
<div class="breadcrumbs">
<ul>
<li class="category63">
Panty
<span>/ </span>
</li>
<li class="category64">
<strong>Bra</strong>
</ul>
</div>
You can try:
var a = document.querySelectorAll(".breadcrumbs li")[1].innerText;
alert(a);
demo
Used to this code in jquery
var code = $('.breadcrumbs > li:nth-of-type(2) strong').text(); alert(code);
You have several option:
First: Attach an id to the <strong> tag
<strong id="myId">Bra</strong>
and get the value with:
var text = document.getelementById('myId').innerHTML;
Second: Use getElementsByTagName() to get it as:
var text = document.getelementByTagName('li')[1].innerHTML;
But personally I do not recommend it, since the value of the li could vary if you add more li tags to the DOM tree above the one you want to get.
It could be possible add the id attribute to the li instead than to the strong tag, but then you will nned to get the firstchild before get the innerHTML as:
var text = document.getelementById('myId').firstChild.innerHTML;
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
How do i make the black box reach the full height?
trulyamped.com/dropit
When you click on dropdown I want the entire background to be black. I Tried to do height:100% with position:abosulute but it does not seem to work. Please let me know how to get around this. Also an added bonus if you would like to help with it too is creating a animation so that the items on the nav appear with a small delay and fade-in.
Thanks
I want it to look similar to the MENU/Navigation on www.domanistudios.com/mobile/
You can use jQuery to find the height of the browser window and then you can apply this height to the ul element. A simple example for this
fiddle: http://jsfiddle.net/8hKEd/
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$('#clickme').click(function(){
$('#showme').css({'height' : $(window).height()});
$('#showme').slideToggle('slow');
});
});
</script>
</head>
<body>
<a id="clickme" href="#">Click Me</a>
<ul id="showme" style="display:none; background-color: #000; color: #fff;">
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
<li>
Some Text
</li>
</ul>
</body>
</html>
You need to increase the height of the ul rather than the height of body. body has height based on the elements in it. Increase the height of ul menu class to 1000px. That should give you what you need.
.menu ul {
display: none;
height: 1000px;
}
Edit: This HTML is output from a Flash application & its badly formed because it contains li elements NOT inside a ul or ol element. Is there a way to get the desired indentation with this HTML(using CSS)? Hopefully I wont have to parse the HTML & insert my ol tags where I need to, hopefully :(
<textformat leading="2">
<li>
<font style=" font-family: 'arial'; font-size: 14px; color: #FFFFFF; letter-spacing: 0px; ">
Remaining optimistic and focused while paying attention to the doubts of others
</font>
</li>
</textformat>
Is there a way to make EVERY line of text inside a HTML li element be indented?
Example of what I am trying to achieve:
This is what currently happens which is what I am trying to avoid:
So I have this html:
<ol>
<li><font>text here <b>some bold</b></font></li>
</ol>
Add a padding and text-indent:
li {
text-indent: -1em;
padding-left: 1em;
}
Try it on JSFiddle.
It displays like that fine in all majors browsers by default. The only way you'll get the wrap around like the second example is if you actually wrote the numbers themselves instead of using:
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
There shouldn't be a problem as long as you use these tags. The only way you should be getting the second image is with the CSS style list-style-position: inside;. Should you have some strange stylesheet interfering with your example, you could add style="list-style-position: outside;" to the <ol> tag to ensure that the numbers are outside of the text.
Oh, gah... post edit:
<li> isn't really gonna work, then. Why not use a div for each one like this: http://jsfiddle.net/aMdm9/
I've got an unordered list with a list style using indented dots. I'd like to maintain those dots but remove the text from view. I originally guessed that I could simply set text-indent:-999px; but that removes the dot as well.
Any recommendations?
I know that it will work if the text inside the li is set to  , but that feels like cheating.
HTML
<div id="page_nav">
<ul>
<li class="showlink" id="show_one">PAGE ONE</li>
<li class="showlink" id="show_two">PAGE TWO</li>
<li class="showlink" id="show_three">PAGE THREE</li>
</ul>
</div>
CSS
#page_nav ul{
margin:0;
display:block;
}
#page_nav li{
width:15px;
height:15px;
margin:0 0 0 5px;
float:left;
font-size:3.5em;
}
<li><span class="list_item">Item</span></li>
.list_item { display: none; }
some context as to why you are hiding the text would help answer the question
How about using a span inside the list item with display:block, and setting text-indent on the span?
$('li.your_style').each(function()
{
$(this).html($(this).html().toString().replace(/([^\.]+)/g,''));
});
this can help you
All you need to do is leave a blank <li></li> and that will display the dots without any text
We need to know why you want this... the context...
Wo you want something to happen later that makes the text visibile? If so, you should put all the text within the <li> in a <span> that is visibility:hidden then upon wanting it to be displayed/read you should make it visible..
If you want to maintain the dot but lose the text... what would you want the screen reader to say? "dot?"..
If you really don't want to set the text to a then you could use wrapInner as follows:
Try this:
$(function(){
$("li.showlink").wrapInner("<span style='display:none'></span>");
});