when I click the add button, a 'li' should be added to container2, this li has a class named 'obj' which I have styled in CSS, the list elements with the same class and which are already added in HTML code is styled well, but the new elements added shows without any styling although they have the same class.
this is my js code:
var bla;
$("#addButton").click(function() {
if ($('#task').val() == '') {
// alert('empty');
$('#task').css("border-color", "#e40017");
var msg = $("<div class='message'></div>").text('You should enter a task.');
$(".container1").append(msg);
} else {
bla = document.getElementById('task').value;
addDiv();
}
});
function addDiv() {
var task = $("<li class='obj'></li>").text(bla);
$(".container2").append(task);
}
.main-container {
background-color: #c7cfb7;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.container1 {
height: 110px;
background-color: #f7f7e8;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
margin: 10px;
}
.container2 {
display: flex;
background-color: #f7f7e8;
flex-direction: column;
align-items: center;
height: 200px;
border-radius: 20px;
margin-left: 10px;
margin-right: 10px;
}
#container1-child1 {
display: flex;
flex-direction: row;
}
#label1 {
margin-top: 10px;
}
#task {
width: 250px;
}
body {
width: 100%;
max-width: 500px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
background-color: grey;
}
#addButton {
margin: 10px;
background-color: #9dad7f;
}
.newTasks {
border: 3px;
width: 100px;
height: 20px;
}
.newTask {
margin-top: 10px;
border: 1px;
border-radius: 10px;
height: 30px;
width: 350px;
background-color: #9dad7f;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.message {
color: red;
font-size: 10px;
align-self: flex-start;
margin-left: 85px;
}
.material-icons {
visibility: hidden;
margin: 5px;
}
.newTask:hover+.material-icons {
visibility: visible;
display: flex;
}
ul {
list-style: none;
}
ul li {}
ul li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
ul li:hover span {
margin-left: 0px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container1">
<label id="label1" for="task" class="inputlabel">Add a new task</label>
<div id="#container1-child1">
<input type="input " class="inputTask " name="task " id='task' required/>
<button id="addButton">ADD</button>
</div>
</div>
<div class="container2" id="cont2">
<ul>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
</ul>
</div>
You are appending it to $(".container2").append(task); whereas you want to append it to the ul inside the container2: $(".container2 ul").append(task);.
var bla;
document.getElementById("addButton").addEventListener("click", function() {
if ($("#task").val() == "") {
// alert('empty');
$("#task").css("border-color", "#e40017");
var msg = $("<div class='message'></div>").text("You should enter a task.");
$(".container1").append(msg);
} else {
bla = document.getElementById("task").value;
addDiv();
}
})
function addDiv() {
var task = $("<li class='obj'></li>").text(bla);
$(".container2 ul").append(task);
}
.main-container {
background-color: #c7cfb7;
border-radius: 20px;
display: flex;
flex-direction: column;
}
.container1 {
height: 110px;
background-color: #f7f7e8;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
margin: 10px;
}
.container2 {
display: flex;
background-color: #f7f7e8;
flex-direction: column;
align-items: center;
height: 200px;
border-radius: 20px;
margin-left: 10px;
margin-right: 10px;
}
#container1-child1 {
display: flex;
flex-direction: row;
}
#label1 {
margin-top: 10px;
}
#task {
width: 250px;
}
body {
width: 100%;
max-width: 500px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
background-color: grey;
}
#addButton {
margin: 10px;
background-color: #9dad7f;
}
.newTasks {
border: 3px;
width: 100px;
height: 20px;
}
.newTask {
margin-top: 10px;
border: 1px;
border-radius: 10px;
height: 30px;
width: 350px;
background-color: #9dad7f;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.message {
color: red;
font-size: 10px;
align-self: flex-start;
margin-left: 85px;
}
.material-icons {
visibility: hidden;
margin: 5px;
}
.newTask:hover+.material-icons {
visibility: visible;
display: flex;
}
ul {
list-style: none;
}
ul li {}
ul li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
ul li:hover span {
margin-left: 0px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div class="container1">
<label id="label1" for="task" class="inputlabel">Add a new task</label>
<div id="#container1-child1">
<input type="input " class="inputTask " name="task " id='task' required/>
<button id="addButton">ADD</button>
</div>
</div>
<div class="container2" id="cont2">
<ul>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
<li class="obj"> <span><i class="fa fa-trash "></i></span> get a new labtob</li>
</ul>
</div>
Change your method in js file
function addDiv() {
var task = $(`<li class='obj'> <span><i class='fa fa-trash '>${bla}</i></span> </li>`)
$(".container2").append(task);
};
And in CSS, replace ul li with li
li {
list-style: none;
}
li span {
display: inline-block;
height: 20px;
width: 20px;
text-align: center;
line-height: 20px;
border-radius: 0 5px 5px 0;
margin-left: -45px;
transition: 0.7s ease;
}
li:hover span {
margin-left: 0px;
}
Related
function replace( hide, show ) {
document.getElementById(hide).style.display="none";
document.getElementById(show).style.display="flex";
}
#import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&family=Bebas+Neue&family=Inter:wght#100;200;300;400;600;700;800&family=Roboto:wght#300;400;700&family=VT323&display=swap');
body {
margin: 0;
padding: 0;
}
.all_guidebook {
width: 100%;
position: absolute;
min-height: 1000px;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.title_guidebook {
position: relative;
top: 50px;
justify-content: center;
}
.disposition_guidebook {
width: 1100px;
display: flex;
position: relative;
align-items: flex-start;
top: 55px;
}
.navigation {
width: 286px;
background: var(--bleu);
position: relative;
height: auto;
padding-bottom: 30px;
border-radius: 35px;
margin-right: 15px;
}
.navigation .all_links {
position: relative;
top: 15px;
}
.navigation h1 {
color: white;
font: 45px 'Bebas Neue';
margin: 0;
text-align: center;
position: relative;
top: 15px;
}
.navigation h2 {
color: white;
font: 34px 'Bebas Neue';
position: relative;
background: var(--fushia);
display: flex;
border-radius: 15px;
height: 45px;
padding-top: 2px;
margin-bottom: 26px !important;
width: 247px;
box-sizing: border-box;
top: 20px;
margin: auto;
justify-content: center;
}
.navigation .menu_deroul, #regl {
display: flex;
background: blue;
width: 300px;
}
#reglhover {
display: flex;
background: blue;
width: 300px;
}
#reglhover img, #staffcredshover img, #ctxhover img, #grphover img, #pvrhover img, #syst1hover img, #syst2hover img, #pihover img, #exphover img, #foirehover img {
transform: rotate(135deg);
top: 5px;
position: relative;
left: 7px;
}
.navigation .menu_deroul img {
float: left;
left: 7px;
position: relative;
cursor: pointer;
}
.navigation span {
color: var(--fushiapp);
margin-right: 3px;
font: 20px 'Bebas Neue';
}
.navigation h3 {
color: var(--white);
font: 20px 'Bebas Neue';
}
.wrap_deroul {
display: flex;
flex-direction: column;
position: relative;
top: -18px;
align-items: flex-end;
}
.ancres_deroul {
list-style: none;
display: flex;
flex-direction: column;
align-items: flex-end;
height: 30px;
padding: 0;
color: white;
top: -16px;
font-weight: 200!important;
right: 16px;
font: 16px 'Bebas Neue';
position: relative;
}
.ancres_deroul ul {
margin: 0;
display: flex;
cursor: pointer;
list-style: none;
align-items: flex-end;
flex-direction: column;
}
.ancres_deroul li {transition: .5s;}
.ancres_deroul li a {
text-decoration: none!important;
color: black;
}
.ancres_deroul li:hover {
letter-spacing: .5px;
transition: .5s;
}
<div class="menu_deroul" id="regl" style="display:flex" >
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" onclick="replace('regl','reglhover')" />
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')" id="defaultOpen">Règlement</h3>
</div>
</div>
<div id="reglhover" style="display:none">
<img src="https://i.ibb.co/cvhdX78/image.png" height="21" width="21" style="cursor:pointer; transform: rotate(135deg); transition: .5s; transition-duration: 2s;" onclick="replace('reglhover','regl')" />
<div class="wrap_deroul">
<div class="titre_deroul">
<span>001.</span>
<h3 class="tablinks" onclick="openCity(event, 'reglement')">Règlement</h3>
</div>
<div class="ancres_deroul">
<ul>
<li><a onclick="scrollWin()">Inscription & RP</a></li>
<li style="margin-top: -5px;">Discord</li>
</ul>
</div>
</div>
</div>
I have this code, it replaces a div by another when clicking on a button.
I want it to close the showed div when clicking outside the div. For example, if the div "reglhover" is showed, I want it to be replaced by the "hide" status (replaced by "regl") when clicking outside the "reglhover" div. And i want it to work for every occurrence (because i use tabs)... But I can't figure out how to do it. Can someone help me? :(
try
const regl = document.getElementById("regl")
const reglhover = document.getElementById("reglhover")
document.addEventListener("click", (e) => {
if (reglhover.style.display === "flex" && e.target.id != "reglhover") {
reglhover.style.display = "none"
regl.style.display = "flex"
}
})
I work with categorys at web page, an i build next view to show categories. And i create one solution how to categorize all data in app.
But i have issues which i cant resolve.
So problem is, when i first time open my web page, all categories from list visible, and i want, categories need only visible after category items press.
My code:
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>
So as u can see i don't have func which show all categorys at main page.
But when i reload page all categorys is visible, at this moment i'ts 3, but i have more then 3, and i want to show this categorys after pressing category items.
You only need add .products-list .product-item { display:none} to your css.
$(document).ready(function () {
$('.category_list .category_item[category="all"]').addClass('ct_item-active');
$('.category_item').click(function () {
var catProduct = $(this).attr('category');
console.log(catProduct);
$('.category_item').removeClass('ct_item-active');
$(this).addClass('ct_item-active');
$('.product-item').css('transform', 'scale(0)');
function hideProduct() {
$('.product-item').hide();
} setTimeout(hideProduct, 400);
function showProduct() {
$('.product-item[category="' + catProduct + '"]').show();
$('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
} setTimeout(showProduct, 400);
});
});
.wrap {
max-width: 1100px;
width: 90%;
margin: auto;
}
.wrap > h1 {
color: #494B4D;
font-weight: 400;
display: flex;
flex-direction: column;
text-align: center;
margin: 15px 0px;
}
.wrap > h1:after {
content: '';
width: 100%;
height: 1px;
background: #C7C7C7;
margin: 20px 0;
}
.store-wrapper {
display: flex;
flex-wrap: wrap;
}
.category_list {
display: flex;
flex-direction: column;
width: 30%;
}
.category_list .category_item {
display: block;
width: 100%;
padding: 15px 0;
margin-bottom: 20px;
background: #E84C3D;
text-align: center;
text-decoration: none;
color: #fff;
}
.category_list .ct_item-active {
background: #2D3E50;
}
.products-list {
width: 70%;
display: flex;
flex-wrap: wrap;
}
.products-list .product-item {
width: 35%;
margin-left: 3%;
margin-bottom: 25px;
box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);
display: flex;
flex-direction: column;
align-items: center;
align-self: flex-start;
transition: all .4s;
display:none;
}
.products-list .product-item img {
width: 100%;
}
.products-list .product-item a {
display: block;
width: 100%;
padding: 8px 0;
background: #2D3E50;
color: #fff;
text-align: center;
text-decoration: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="store-wrapper">
<div class="category_list">
Technical
Organizational
</div>
<section class="products-list">
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Equipment
</div>
<div class="product-item" category="Technical">
<img src="~/images/100004-200.png" alt="">
Tool
</div>
<div class="product-item" category="Organizational">
<img src="~/images/100004-200.png" alt="">
Material
</div>
</section>
</div>
</div>
So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});
I want the arrow to be inserted between two flex items as they are added(Please run the code). It must be added after the first flex item for every added flex item between them so that they appear connected by the arrow. The arrow must be at the midpoint of box boundaries ( not box centre) connecting them.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge{
zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge">
<span>⇢</span>
</div>
You can use a pseudo element with the arrow as content, and to exclude it from the first element, use :not() in your CSS.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row;
/* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
position: relative;
}
.flexActive {
width: auto;
display: block;
flex: 1 1;
margin-right: 0;
}
ul li {
display: inline;
}
.flex-item:not(:first-child) {
margin-left: .75em;
}
.flex-item:not(:first-child):before {
content: '\21E2';
color: black;
position: absolute;
top: 50%;
left: 0;
transform: translate(-100%, -50%);
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container"></ul>
<button id="clickMe">Click Me</button>
Remove the horizontal margins between your block elements, and then conditionally append the arrow before each inserted block when you detect that at least one block has already been added.
var first = true
$('#clickMe').click(function() {
var demos = $('#Demosss')
if (!first) {
demos.append('⇢')
} else first = false
demos.append($('<li class="flex-item">').text('text'))
$(this).insertAfter($('.flex-item').last());
});
$(document).on('click', '.flex-item', function (){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge{
zoom: 350%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge">
</div>
Try to something like this.
$('#clickMe').click(function() {
$('#Demosss').append($('<li class="flex-item">').text('text'))
$('.enlarge').css('display','none');
$('#Demosss').append($('<div class="enlarge1"><span>⇢</span></div>'))
$(this).insertAfter($('[class^="flex-item"]').last());
});
$(document).on('click', '.flex-item' ,function(){
$(this).toggleClass('flexActive')
})
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap: wrap;
}
.flex-item {
background: green;
padding: 5px;
width: 100px;
height: 150px;
margin-top: 10px;
margin-right: 15px;
line-height: 150px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
display: inline-block;
}
.flexActive{
width:auto;
display:block;
flex: 1 1;
margin-right:0;
}
ul li{
display: inline;
}
.enlarge1{
zoom: 350%;
}
.enlarge{
zoom: 350%;
}
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<ul id="Demosss" class="flex-container">
<!-- add LI here -->
</ul>
<button id="clickMe">Click Me</button>
<div class="enlarge"><span>⇢</span></div>
<div class="arrow">
</div>
I am testing out some alignment issues i had in the past and trying to solve this.
I am trying to do two things Here.
What I want to do is move texts in green box aligned all the way to left so that its on the edge like 'SHOP BY' above. Yes Both of them.
Yes you can see from the color boxes, green boxes are not meeting exactly on the edge of its parent blue box. I tried everything. And i cannot find the solution.
Thanks in advance!
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding: 5px;
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0 -3px;
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
This Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Is this what you are looking for, I just changed li and li>a
li {
vertical-align: top;
padding-top: 8px;
display: inline-block; }
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px 0px; }
Is this what u want?
.main-nav {
background: #000;
height: 30px;
position: relative;
overflow: visible;
z-index: 2;
width: 100%;
left: 0;
cursor: default;
}
.main-nav .inner{
height: 100%;
}
.nav-whats-new:hover a.nav-level-1{
background: white;
color: black;
}
.main-nav>.inner{
text-align: justify;
}
.nav-links-container {
position: static;
/* background: red; */
height: 100%;
}
.nav-links{
padding: 0 0 0 3px;
display: inline;
margin-bottom: 20px;
overflow: hidden;
/*background-color: green; */
}
li {
vertical-align: top;
padding-top: 7px !important; //here is the change
display: inline-block;
/* background: blue; */
}
li>a {
color: #FFF;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 10px 9px 9px;
margin: 0px; //here is the change
}
/*li>a:hover {
background-color: white;
color:#000;
}*/
.nav-level-2 {
/* display: none; */
position: absolute;
top: 30px;
left: 0;
width: 100%;
height: auto;
border-bottom: 5px solid #000;
background: white;
text-align: left;
}
li>a:hover + .nav-level-2{
display: block;
}
.nav-level-2:hover{
display: block;
}
.nav-level-2-container {
padding-top: 40px;
padding-bottom: 40px;
background: lightgreen;
-webkit-box-flex: 0;
}
.row{
display: flex;
flex: 0 1 auto;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-direction: row;
}
.list-container {
padding: 0px;
position: relative;
}
.col-lg-2{
flex-basis: 16.666666667%;
max-width: 16.666666667%;
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-flex: 0;
background: red;
margin-left: 5px;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
text-transform: uppercase;
color: #000;
letter-spacing: 1px;
font-size: 14px;
margin: 0 0 20px;
}
.main-nav .nav-links .nav-level-2 ul {
width: 100%;
margin: 0px;
padding: 0px;
background: blue;
display: block;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li {
margin-bottom: 12px;
}
.invisible{
display: none;
}
.main-nav>.inner .nav-level-2 .nav-level-2-container li a {
font-size: 13px;
line-height: 17px;
letter-spacing: .5px;
color: #000;
display: inline;
background: green;
}
<nav class="main-nav">
<div class="inner max-girdle-width">
<div class="nav-links-container">
<ul class="nav-links">
<li class="nav-whats-new">
<a class="nav-level-1" href="#">What's New</a>
<div class="nav-level-2">
<div class="nav-level-2-container row max-girdle-width">
<div class="list-container shop col-lg-2">
<h3 class="heading"> Shop by</h3>
<ul>
<li class="invisible"></li>
<li >
Week
</li>
<li >
This Month
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>