I am using css3 columns to display an unordered list in 3 columns. The list items contain lists as well that can be shown or hidden by clicking on the title using jQuery.
The html looks like (with class names to describe the layout and interactions):
<ul class="i-display-in-3-columns">
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 1</h3>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
<li>
<h3 class="slide-toggle-sibling-list-on-click">column title 2.</h3>
<p>This can be very long with perhaps an additional paragraph as well.</p>
<ul class="i-am-initially-hidden">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</li>
/* some more items */
</ul>
This works, but every time a sub-list is opened or closed, the columns get redrawn.
I would like to freeze the columns after they have initially been drawn to avoid this reflow so that every item stays in the column it is initially drawn in.
I can of course write a masonry-like solution in javascript to convert my list in 3 lists that are displayed next to each other, but I was hoping that there was an easier solution, preferably in just css or in javascript that keeps my list as a list.
Is that possible or would I just have to rewrite the DOM?
I don't think you can achieve that with CSS columns. There is the option to toggle visibility instead of display of the child lists, but I'm assuming you don't want that.
Another possible CSS solution is using the flexbox module (and deal with the browser support issues). For example, I believe this might be what you want (working on Chrome 29):
.i-display-in-3-columns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.i-display-in-3-columns>li {
flex: 1 1 200px; /* 200px is the column width */
}
Demo
Related
This question already has answers here:
Is it possible to change the order of list items using CSS3?
(3 answers)
Closed 8 months ago.
I have an unordered list like this -
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
I would like the first item of the list be automatically moved to the last when the website is being browsed in tablet/mobile screen view, and automatically moved back to the top when changing back to desktop screen view, i.e. responsive. The output in tablet/mobile screen view should be like this -
<ul>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 1</li>
</ul>
May I know it this can be achived by using JavaScript/CSS? Thank you.
Use order properties to achieve this
#media(max-width: 991px){ /*you can change width according to your requirement*/
ul {
display: flex;
flex-direction: column;
}
ul li:first-child {
order: 4;
}
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
Hi, I'm trying to implement something like this where the user can click on an item and move it from left to right div or list and vice versa (refer to attached image). The list of items needs to be tracked so I'm able to use javascript to do some processing. I saw some websites done this before but not sure what this is called, is there any terminology for this? I'm don't really know what to search on google so I'm a bit stuck currently. Greatly appreciated it if anyone can help with this, thanks.
You can add a click event listener to both lists that appends the event target to the other list and deletes the event target.
row1.addEventListener('click', function(e){
if(e.target != this){
row2.appendChild(e.target.cloneNode(true));
e.target.remove()
}
})
row2.addEventListener('click', function(e){
if(e.target != this){
row1.appendChild(e.target.cloneNode(true));
e.target.remove()
}
})
.row {
display: flex;
}
<div class="row">
<ul id="row1">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ul id="row2">
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
There is no real formal name dedicated for this, but you can find many things resembling what you are looking for with 'multi list', 'multi select list' and 'multi select box'. Angular Material also has a CDK for this called 'droplist', but they seem to be the only one really using the term.
I am trying to make tabbing cyclical within a dropdown menu.
Here's my JSFiddle: https://jsfiddle.net/Lc7saks3/
<nav id="primary_nav_wrap">
<div>
<ul>
<li tabindex="0">Menu
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<input type="text" />
</nav>
Click on the Menu element and then tab through the options.
Currently, the tabbing goes through the 5 options within the dropdown menu and then moves on to the input element.
How can I make it such that the dropdown options are tabbed again,
cyclically, from option 1, once the last option (option 5) is reached?
You would need to use script listen for the Tab key while on the last item and, when pressed, immediately move focus back to the first item (or dynamically adjust tabindex values when you get to the last item).
However, DO NOT DO THIS as it constitutes a keyboard trap and is a failure of WCAG 2.0 item 2.1.2, No Keyboard Trap. There is a lengthy technique for handling this that essentially says to not do what you are trying to do: G21: Ensuring that users are not trapped in content
Finally, I suggest you take the tabindex off the li as that is not an interactive / actionable control and no place for a tabindex.
The great Google and SO didn't render search results regarding this. Some were similar but didn't quite get me there.
I am in need of making a classless submenu that will attach a style attribute to each individual <li> in the sub <ul> in order to set a min-width property based on the number of sub list items.
The HTML
<nav>
<ul>
<li>HOME</li>
<li>ABOUT COMPANY</li>
<li>
ABOUT PRODUCT
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>GETTING STARTED</li>
<li>
PATIENT SUPPORT
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>CONTACT</li>
<li>eUPDATES</li>
</ul>
</nav>
The JavaScript
$('.sub').text(function() {
var count = $(this).next().find('li').length;
var totalwidth = count * 115;
$(this).next().find('li').parent('ul').attr('style','min-width:'+totalwidth+'px');
});
I need to be able to do this without searching based off the class "sub". I've tried a few times, but none of it seems as powerful as the code I'm currently using. The backend developer I'm working with is requiring it to all be simple <ul><li></li></ul> structure with no classes.
If anyone can help point me in the right direction on this, I'd greatly appreciate your time and help!
Target all LI items that contain UL's, find the number of LI's in those UL's, and multiply for width :
$('ul', 'li').css('min-width', function() {
return ( $(this).find('li').length * 115 ) + 'px';
});
Let's say that menu has the following structure:
<li class="parent-of-all">Parent
<ul class="sub-menu level-0">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul class="sub-menu level-1">
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3
<ul class="sub-menu level-2">
<li>Item 2.1</li>
<li>Item 2.2
<ul class="sub-menu level-3">
<li>Item 3.1</li>
<li>Item 3.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
And this is how it looks like when styled (please note that nested sub-menus are position: absolute; left: 100%;).
Now the questions is - can I avoid it being pushed off the screen? I'm looking for a solution that Windows7 menus use (they never go off the screen). Is there some simple Javascript check? I think that doing just left: -100%; would work but under what conditions? I just need some idea and I can code that in Javascript :)
As far as i know, there is no way to do this check with CSS only. You will have to use javascript. The most straight forward approach would be binding mouseover/mouseout (or hover if you use jquery) to the items, then comparing the elements x-offset + width with window width.
With a pure CSS solution you could always alternate the position of the submenus. When the first was left positioned to appear right to its parent, the following (third) submenu could be positioned on the left and so on. Maybe you could even use the :nth-child-selector to do so.
Afterwards you can create exceptions for wider screens, just alternating the left position starting off the nth child submenu (using CSS media queries).
No, you need to use JavaScript in order to calculate positions