It is possible to create a two column appearance in a list based on a data attribute of an element?
My HTML which can't really be modified into two lists (even using JS breaks other functionality on the page) looks like:
<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>
I want the output to appear as:
general text1 category text1
general text2 category text2
general text3 category text3
category text4
It is same to assume that the will always have the elements grouped in order.
I'm not sure how to achieve this with the desired output. Floating places elements in a left to right fashion instead of a vertical layout.
Any ideas?
If you insert a blank line you can achieve this quite easily using column-count.
div#twoColumn {
-moz-column-count: 2;
-moz-column-gap: 10px;
-webkit-column-count: 2;
-webkit-column-gap: 10px;
column-count: 2;
column-gap: 10px;
line-height:1.5em;
list-style-type:none;
}
<div id="twoColumn">
<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="general_results"> </li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>
</div>
Here's what I did...
HTML CODE.. I get the data-list attr value then filter through it and append on different divs.
<ul>
<li data-list="general_results">general text1</li>
<li data-list="general_results">general text2</li>
<li data-list="general_results">general text3</li>
<li data-list="category_results">category text1</li>
<li data-list="category_results">category text2</li>
<li data-list="category_results">category text3</li>
<li data-list="category_results">category text4</li>
</ul>
<div id="gen_text_here">
</div>
<br />
<div id="cat_text_here">
</div>
JQUERY CODE:
$('ul li').each(function(){
if($(this).attr("data-list") == 'general_results'){
$('#gen_text_here').append($(this).attr("data-list") + '<br />');
}else if($(this).attr("data-list") == 'category_results'){
$('#gen_text_here').append($(this).attr("data-list") + '<br />');
}
});
Not a very elegant solution but it does the trick:
[data-list="general_results"] {
float:right;
clear:right;
}
Fiddle here: http://jsfiddle.net/qUAT6/1113/
But I don't support this. The right solution is to separate your elements in two lists.
Related
I got a multi-select drop-down ordered as a like this:
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>
What I am aiming for is to disable the continents (Africa, Asia, Europe) so that they are not selectable.
I have figured that if I completely remove the aria-selected="false" attribute + value and add aria-disabled="true" for the continents the become un-selectable.
I thought this was the way to do it for a single continent:
(Preferably there should be a more dynamic way so I don't have to repeat this for each continent)
jQuery( document ).ready(function($) {
$("ul li[title='Africa']").removeAttr("aria-selected");
$("ul li[title='Africa']").attr("aria-disabled","true");
});
..but nothing happens. What am I doing wrong?
try this instead,
I created a array for hidden items
var titles= ["Africa", "Asia", "Europe"];
jQuery( document ).ready(function($) {
var titles= ["Africa", "Asia", "Europe"];
for(var i=0;i<=titles.length;i++){
$("ul li[title="+titles[i]+"]").removeAttr("aria-selected");
$("ul li[title="+titles[i]+"]").attr("aria-disabled","true");
}
});
li[aria-disabled="true"]{
color:#888;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li title="Africa" aria-selected="false">Africa</li>
<li title="Egypt" aria-selected="false">Egypt</li>
<li title="Angola" aria-selected="false">Angola</li>
<li title="Benin" aria-selected="false">Benin</li>
<li title="Asia" aria-selected="false">Asia</li>
<li title="Taiwan" aria-selected="false">Taiwan</li>
<li title="India" aria-selected="false">India</li>
<li title="Thailand" aria-selected="false">Thailand</li>
<li title="Europe" aria-selected="false">Europe</li>
<li title="Denmark" aria-selected="false">Denmark</li>
<li title="Italy" aria-selected="false">Italy</li>
<li title="Spain" aria-selected="false">Spain</li>
</ul>
I have three lists:
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
Now i want to write an s there a way to select list2+list3 ( or select list 1 only) , considering they are empty of any <li> children?
I'm aware that the :empty solution none of the above because list3 contains white space, so i need a different solution to select list with <li> only
There is a way using jQuery.
You detect any <li> on the page and add a class to the parent. Then you can do what you want to that class in the CSS.
$('li').parent().toggleClass('has-li', true);
.has-li {
/* your code here */
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mighty-list" id="list1">
<li>Cool</li>
<li>Yah</li>
</ul>
<ul class="mighty-list" id="list2">
<div id="floating_button"></div>
</ul>
<ul class="mighty-list" id="list3">
</ul>
I'm using the jquery package 'listnav' to generate an alphabetical list. The HTML that gets rendered separates each letter into a specific class as such:
<ul id="myList">
<li class="ln-a">
A text
</li>
... more 'A' items ...
<li class="ln-b">
B text
</li>
</ul>
I'm trying to apply a border at the top of every letter 'section' by using the first-child selector:
.ln-a:first-child{
border-top:1px white solid;
}
.ln-b:first-child {
border-top:1px white solid;
}
I get the border above the 'A' section, but not above any of the subsequent sections. Any suggestions? Thanks!
The problem is that .ln-b:first-child matches the elements with class ln-b that are the first child of its parent.
In your case, the first child only has the class ln-a, so there is no match.
What you want is some kind of :first-of-class, but that doesn't exist.
However, you can set the styles to all .ln-b elements, and then remove them for those which are not the first one:
.ln-b { /* Set styles */ }
.ln-b + .ln-b { /* Remove styles */ }
.ln-a,
.ln-b {
border-top: 1px black solid;
}
.ln-a + .ln-a,
.ln-b + .ln-b {
border-top: none;
}
<ul id="myList">
<li class="ln-a">A text</li>
<li class="ln-a">A text</li>
<li class="ln-b">B text</li>
<li class="ln-b">B text</li>
</ul>
You forgot to 'close' the list.
<ul id="myList">
<li class="ln-a">
A text
</li>
... more 'A' items ...
</ul>
<ul>
<li class="ln-b">
B text
</li>
</ul>
Using JQuery:
$(document).ready(function(){
$('.ln-a:eq(0)').css('border-top','1px red solid');
$('.ln-b:eq(0)').css('border-top','1px red solid');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="myList">
<li class="ln-a">
A text
</li>
<li class="ln-a">
A1 text
</li>
<li class="ln-a">
A2 text
</li>
<li class="ln-b">
B text
</li>
</ul>
I have an <ul> to do a menu bar. The bar is vertical on the left of my screen. When an option is selected out of the first visible section, I will use JS to hide the first block and set the remaining blocks to .show()
on the next chunk based on the option selected. Now, I have no problem with the JS portion of this. My problem is - when I .hide() and .show() the <li> groups, they stay as if the others were present (large gaps in between options vs top aligned).
Here is a sample of my list:
<ul class="menu">
<li><a id="mainSuit" href="javascript: void(0)">Suit</a></li>
<li><a id="mainFinances" href="javascript: void(0)">Finances</a></li>
<li><a id="mainMissions" href="javascript: void(0)">Missions</a></li>
<li><a id="mainTerritory" href="javascript: void(0)">Territory</a></li>
<li><a id="mainCompany" href="javascript: void(0)">Company</a></li>
<li><a id="mainTravel" href="javascript: void(0)">Travel</a></li>
</ul>
<!-- More <ul> between the two -->
<ul class="menu">
<li><a id="suitLoadout">Loadout</a></li>
<li><a id="suitEquipment">Equipment Market</a></li>
<li><a id="suitMunitions">Munitions Surplus</a></li>
<li><a id="suitRefuel">Refuel</a></li>
<li><a id="suitRepair">Repair</a></li>
</ul>
For CSS
#suitRepair {
display: none;
}
/* same for all of the IDs */
So when id mainSuit is selected - all of <ul class="menu"> will be hidden and the section for suit is shown.
How would I get it so that any gaps for UL blocks between these too are removed.
Just try specify the id on < li > instead < a >:
<li><a id="suitLoadout">Loadout</a></li>
will be:
<li id="suitLoadout"><a>Loadout</a></li>
Now you will hide the < li > tag not the content of that tag, so the space gap will be solved ;)
UPDATED
Even better - use the <ul> as the identifier and go that route:
<ul id="mainMenu">
<li id="mainSuit"><a onclick="mainSuit()" href="javascript: void(0)">Suit</a></li>
</ul>
<ul id="suitMenu">
<li id="suitLoadout"><a>Loadout</a></li>
<li id="suitEquipment"><a>Equipment Market</a></li>
<li id="suitMunitions"><a>Munitions Surplus</a></li>
<li id="suitRefuel"><a>Refuel</a></li>
<li id="suitRepair"><a>Repair</a></li>
</ul>
With JS of:
function backSelected() {
$("#mainMenu").show();
$("#suitMenu").hide();
}
function mainSuit() {
$("#mainMenu").hide();
$("#suitMenu").show();
}
I'm having a small issue here:
<div id="navbar">
<ul id="navtabs" class="floatcontainer">
<li <?php if ($_GET['dept'] == "home") {echo"class='selected'";} ?>><a class="navtab" href="index3.php?dept=home">Home</a>
<ul class="floatcontainer">
<li>User Panel</li>
<li>Report Bugs</li>
<li>Staff Forums</li>
</ul>
</li>
<li <?php if ($_GET['dept'] == "management") {echo "class='selected'";} ?>><a class="navtab" href="index3.php?dept=management">Management</a>
<ul class="floatcontainer">
<li>User Listing</li>
</ul>
</li>
</ul>
In the code, the correct floatcontainer is meant to show up in each case for the li above, however, the bottom one, the floatcontainer with the User listing li only shows in both cases.
How do I resolve this?
If you don't want the ul showing up unless $_GET['dept'] is some particular value, then put it inside an if() block?