I am trying to achieve a scenario: when you click on a box, it shows a "long box" (full width) in the next row. The problem is that I get a gap after the clicked object.
Is it possible show the "long box" in the next row without changing the structure of the small boxes using CSS?
Link to jsfiddle: jsfiddle.net/mhLv7zj1/
$(document).ready(function(){
$(".box").click(function(){
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function(){
$(this).toggleClass('toggled');
});
})
Here's one option. You can remove all the li class="open" from your HTML and instead have this algorithm on each click:
hide/remove any already open items
calculate the number of items in the flex row where the item that was clicked lives and its position
then you'll know where to make the insertion, so: at the end of this row, dynamically insert an open item (style it in advance so that it takes up an entire row (flex: 0 0 100%;)
Use flex and flex-basis properties.
$(document).ready(function() {
$(".box").click(function() {
$(this).next('.open').toggleClass('toggled');
});
$(".open").click(function() {
$(this).toggleClass('toggled');
});
})
ul {
display: flex;
list-style: none;
flex-direction: row;
flex-wrap: wrap;
}
.box {
background: blue;
height: 80px;
flex: 1 1 32%;
margin-right: 2px;
margin-bottom: 2px;
}
.open {
display: none;
background: red;
width: 100%;
height: 80px;
}
.toggled {
display: flex;
flex-basis: 66.5%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<ul>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
<li class="box"></li>
<li class="open"></li>
</ul>
The problem is that the red boxes are siblings of the blue boxes so when you make them display:block they push the other content around. You need to make the red boxes children of the blue boxes and use relative positioning to achieve your desired result.
let boxes = document.querySelectorAll('ul > li');
boxes.forEach(b => {
b.addEventListener('click', expand.bind(b));
});
function expand() {
this.querySelector('.open').classList.toggle('visible');
}
ul {
width: 100%;
display: flex;
flex-flow: row wrap;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
position: relative;
flex-basis: 33%;
height: 150px;
background: blue;
border: 1px solid white;
}
div.open {
display: none;
position: relative;
top: calc(100% + 1px);
left: -1px;
width: calc(300% + 4px);
height: 150px;
border: 1px solid white;
background: red;
z-index: 1;
}
.visible {
display: block!important;
}
<ul>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
<li> <div class="open"></div> </li>
</ul>
PS. This example isn't a perfect fixed replica of your code but it should get you on the right track.
Related
This question already has answers here:
CSS nth-child for greater than and less than
(6 answers)
Closed 1 year ago.
If I have a screen that will display 6 items in the computer version, but below the mobile device (414px), only three will be displayed.
Is there a way to achieve this effect through css if the HTML structure is not changed?
.list {
width: 300px;
}
.list .item {
width: 100%;
text-align: center;
padding: 16px;
background-color: #fed71a;
}
<ul class="list">
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
</ul>
Here you go.
.list {
width: 300px;
}
.list .item {
width: 100%;
text-align: center;
padding: 16px;
background-color: #fed71a;
list-style: none;
margin-bottom: 1px;
}
#media (max-width: 414px) {
.item:nth-child(4),
.item:nth-child(5),
.item:nth-child(6) {
display: none;
}
}
<ul class="list">
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
<li class="item">about1</li>
</ul>
js
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
dropDown.forEach(element => {
element.addEventListener('click',()=>{
{
navItems.forEach(nav =>{
nav.classList.toggle('drop')
})
}
})
})
HTML
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>
CSS
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
display: none;
}
.drop{
display: block;
}
I have a navbar and each of these navbar items have dropdown items. I want to show these dropdown items when I click on the 'dropdown' class. But the problem is when I click on one of them all the dropdowns are visible. How do I show only the list I've clicked on?
Enter the below code
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Click</button>
<div id="myDropdown" class="dropdown-content">
Clicked
Clicked
Clicked
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
As mentioned in comments it is better to use Event Delegation technique.
The algorithm is quite simple:
Add listener on the parent element
On click check if dropdown-opener was clicked
Get drop-down which I need to open
Close other dropdowns
Open dropdown from 3.
const allDropdowns = document.querySelectorAll('.navbar__items')
const DROP_CLASS = 'drop';
const navbar = document.querySelector('.navbar');
navbar.addEventListener('click', ({target}) => {
if (!target.classList.contains('dropdown')) return;
const parent = target.parentNode;
const navItems = parent
.querySelector('.navbar__items');
allDropdowns.forEach(el => el !== navItems && el.classList.remove(DROP_CLASS));
if (navItems) {
navItems.classList.toggle(DROP_CLASS);
}
});
.navbar{
position: relative;
}
.navbar__items{
position: absolute;
left: 80px;
display: none;
}
.drop{
display: block;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>
Use the event target to get the parentNode, then use the parentNode to query the hidden element as all your elements are grouped in the same parent/child grouping. Also you can set an initial class for hidden, display: none; in each element and add it on click. A forEach loop sets each elements display to none using the hidden class on click.
const navItems = document.querySelectorAll('.navbar__items')
const dropDown = document.querySelectorAll('.dropdown')
// callback function that passes in the event => e from your listener
function showDropdown (e){
// set each navbar__items element display: none using hidden class
navItems.forEach(el => el.classList.add('hidden'))
// query the specific .navbar__items in the event.targets group
let dd = e.target.parentNode.querySelector('.navbar__items')
// remove the hidden class a nd show the dropdown for this event.target
dd.classList.remove('hidden')
}
// iterate over the dropdown element
dropDown.forEach(element => {
// function showDropdown on click
element.addEventListener('click', showDropdown)
})
.navbar {
position: relative;
}
.navbar__items {
position: absolute;
left: 75px;
}
.hidden {
display: none;
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 1</li>
<li>clicked 1</li>
<li>clicked 1</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 2</li>
<li>clicked 2</li>
<li>clicked 2</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown">click</div>
<ul class="navbar__items hidden">
<li>clicked 3</li>
<li>clicked 3</li>
<li>clicked 3</li>
</ul>
</li>
</ul>
Rather than using addEventlistener you should add onclick method in html to every drop-down with same method name but change the ul class name with for each drop-down and then pass class name in method and then toggle the drop-down with parameter class name.
For example,
function onClick(item) {
if (document.getElementsByClassName(item).classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.remove('hidden');
}
if (!document.getElementsByClassName(item)[0].classList.contains('hidden')) {
document.getElementsByClassName('dropdown').classList.add('hidden');
}
}
<ul class="navbar">
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items1')">click</div>
<ul class="navbar__items1 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items2')">click</div>
<ul class="navbar__items2 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
<li class="nav-menu">
<div class="dropdown" onclick="onClick('navbar_items3')">click</div>
<ul class="navbar__items3 hidden">
<li>clicked</li>
<li>clicked</li>
<li>clicked</li>
</ul>
</li>
</ul>
I'm trying to get the following to work:
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</div>
<div class="sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</div>
</ul>
</div>
<script>
$(document).ready(function() {
$("#sortable-basic").kendoSortable({
hint:function(element) {
return element.clone().addClass("hint");
},
placeholder:function(element) {
return element.clone().addClass("placeholder").text("drop here");
},
cursorOffset: {
top: -10,
left: -230
},
items: ".sortable, .sortable-div"
});
});
</script>
So the plan is the following:
You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways.
For the life of me i cannot seem to figure this out.
please try below code.
For your more reference, I was modify given link code:
https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables
$(document).ready(function() {
function placeholder(element) {
return $("<li style='color: red;' class='sortable' id='placeholder'>Drop Here!</li>");
}
$("#sortable-basic").kendoSortable({
connectWith: ".sortable-div",
filter: ".sortable", // Filter only list items that are direct child of the Sortable container.
// Use ".list-item" to allow parent items to use the nested Sortable.
placeholder: placeholder
});
$(".sortable-div").kendoSortable({
connectWith: "#sortable-basic",
filter: ".sortable",
placeholder: placeholder
});
});
#example {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#playlist {
margin: 30px auto;
width: 300px;
background-color: #f3f5f7;
border-radius: 4px;
border: 1px solid rgba(0,0,0,.1);
}
#playlist-title span {
display: none;
}
#sortable-basic {
padding: 0;
margin: 0;
}
li.sortable {
list-style-type: none;
padding: 6px 8px;
margin: 0;
color: #666;
font-size: 1.2em;
cursor: move;
}
li.sortable:last-child {
border-bottom: 0;
border-radius: 0 0 4px 4px;
}
li.sortable span {
display: block;
float: right;
color: #666;
}
li.sortable:hover {
background-color: #dceffd;
}
li.hint {
display: block;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #52aef7;
position: absolute;
left: 216px;
top: 8px;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id="example">
<div id="playlist">
<div id="playlist-title"><span>My Playlist</span></div>
<ul id="sortable-basic">
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Papercut <span>3:04</span></li>
<li class="sortable">One Step Closer <span>2:35</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">With You <span>3:23</span></li>
<li class="sortable">Points of Authority <span>3:20</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Crawling <span>3:29</span></li>
<li class="sortable">Runaway <span>3:03</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">By Myself <span>3:09</span></li>
<li class="sortable">In the End <span>3:36</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">A Place for My Head <span>3:04</span></li>
<li class="sortable">Forgotten <span>3:14</span></li>
</ul>
<ul class="sortable sortable-div">
<li>drag div</li>
<li class="sortable">Cure for the Itch <span>2:37</span></li>
<li class="sortable">Pushing Me Away <span>3:11</span></li>
</ul>
</ul>
</div>
</div>
I am creating tabs that needs to be equal in width, it will come dynamically (2-8 tabs). There is no fixed width, tab bar has fluid width. I had tried to achieve it through css, but didn't worked.
demo:http://codepen.io/anon/pen/JdbMwR
<div class="main">
<ul class="list-inline sub-cat-tabs">
<li>
<div>
<span>2014-2015 2014-2015</span>
</div>
</li>
<li>
<div>
<span>2015-2015</span>
</div>
</li>
</ul>
</div>
You could do it with CSS fixed table layout, browser support: IE8+
http://jsfiddle.net/gashvbp6/
.tabs {
list-style: none;
padding: 0;
margin: 0;
display: table;
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
.tabs li {
display: table-cell;
text-align: center;
vertical-align: middle;
border: 1px solid red;
}
<ul class="tabs">
<li>item - long one</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
I have a css menu I would like to make accessible through keyboard interaction. I want to be able to tab through each link including sub menu links.
If the dropdown focus moves on to the next parent link dropdown then the previous dropdown should hide.
Updated Fiddle
HTML
<ul>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 1</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
<li class="custom-MainMenu-TopNav-li">
<div>
<span>Parent link 2</span>
<div>
<ul class="custom-MainMenu-SubNav-dropdown">
<li>Sub Link</li>
<li>Sub Link</li>
</ul>
</div>
</div>
</li>
</ul>
JavaScript
accessibleDropdown();
function accessibleDropdown(){
jQuery('.custom-MainMenu-TopNav-li a').each(function(){
jQuery(this).focus(function(){
jQuery(this).addClass('focused');
var menuParent = jQuery(this).parent().next().find('ul');
jQuery(menuParent).css('display','block');
});
jQuery(this).blur(function(){
jQuery(this).removeClass('focused');
});
});
}
I am not sure what is your desired outcome and need for this result, but hopefully this will help you out.
I had to redo your example due to naming convention and approach, but I assume this is what you wanted...
Here's a demo, just in case...
JSFiddle
HTML
<ul class="navbar">
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
<li class="navbar-item">
Parent Link
<ul class="navbar-sub">
<li class="navbar-sub-item">
One
</li>
<li class="navbar-sub-item">
Two
</li>
<li class="navbar-sub-item">
Three
</li>
</ul>
</li>
</ul>
CSS
body {
margin: 10px;
}
.navbar,
.navbar .navbar-sub {
list-style: none;
margin: 0;
padding: 0;
}
.navbar > .navbar-item {
float: left;
}
.navbar > .navbar-item:last-child {
margin-right: 0;
}
.navbar > .navbar-item.active > .navbar-sub {
display: block;
}
.navbar > .navbar-item a {
text-decoration: none;
}
.navbar > .navbar-item > a {
background-color: #999;
padding: 10px 20px;
color: #696969;
display: block;
}
.navbar > .navbar-item > a:hover,
.navbar > .navbar-item > a:focus,
.navbar > .navbar-item.active > a {
background-color: #ccc;
}
.navbar .navbar-sub {
display: none;
}
.navbar .navbar-sub > .navbar-sub-item > a {
color: #ccc;
display: block;
padding: 5px 10px;
text-align: center;
background-color: #696969;
}
.navbar .navbar-item.active .navbar-sub-item > a:hover,
.navbar .navbar-item.active .navbar-sub-item > a:focus {
background-color: #999;
}
jQuery
$('.navbar').on('mouseenter focusin', '.navbar-item > a', function () {
$(this)
.parent('.navbar-item')
.addClass('active')
.siblings('.navbar-item')
.removeClass('active')
});
here you go, simple jquery :)
// display drop down box when mouse is over
$(".custom-MainMenu-TopNav-li a").mouseover(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "block");
});
// hide drop down box when mouse leaves
$(".custom-MainMenu-TopNav-li a").mouseleave(function(){
$(this).find(".custom-MainMenu-SubNav-dropdown").css("display", "none");
});
This basically displays/hide each the dropdown when the mouse is over/leaves the parent div.
I don't think it would be a good idea to display the dropbown menu on focus, cause i believe you can only focus on certain elements like inputs.
Hope this helps!