I have 2 divs like this belonging to different teams. All of them has different names and ids
<div id="joinville">
<div class="gk">
<div id="john">
<img src:xxx ">
<h6 class="namejoinville ">John</h6>
</div>
<div id="jake ">
<img src:xxx">
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src:xxx ">
<h6 class="namejoinville ">Allan</h6>
</div>
</div>
</div>
<div id="thunder ">
<div class="gk ">
<div id="amilcar ">
<img src:xxx">
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src:xxx ">
<h6 class="namethunder ">Peter</h6>
</div>
<div id="jm ">
<img src:xxx">
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
Them I have this:
<div id="onethree">
<div id="grteam">
<img src="xxx"">
<h6 id="j1">GK</h6>
</div>
I want to whenever I click on one of the player to change the "grteam" div to the one selected.
How can i make this with js?
Sorry, if this is basic stuff but i'm still a begginner
when you click on the player name his data moves to #grteam
document.querySelectorAll('.gk div h6').forEach(player => {
player.addEventListener('click', updateSelectedPlayer, this);
});
function updateSelectedPlayer(player) {
let greatPlayerImg = document.querySelector('#grteam>img'),
greatPlayerName = document.querySelector('#grteam>h6'),
selectedPlayerImg = player.target.parentNode.querySelector('img').src,
selectedPlayerName = player.target.innerHTML;
greatPlayerImg.src = selectedPlayerImg;
greatPlayerName.innerHTML = selectedPlayerName;
}
<div id=Joinville>`
<div class="gk">
<div id="john">
<img src='xxx'>
<h6 class="namejoinville">John</h6>
</div>
<div id="jake">
<img src='xxx'>
<h6 class="namejoinville">Jake</h6>
</div>
<div id="allan">
<img src='xxx'>
<h6 class="namejoinville">Allan</h6>
</div>
</div>
</div>
<div id=Joinville>`
<div class="gk">
<div id="amilcar">
<img src='xxx'>
<h6 class="namethunder">Amilcar</h6>
</div>
<div id="peter">
<img src='xxx'>
<h6 class="namethunder">Peter</h6>
</div>
<div id="jm">
<img src='xxx'>
<h6 class="namethunder">James</h6>
</div>
</div>
</div>
<div id="onethree">
<div id="grteam">
<img src="xxx">
<h6 id="j1">GK</h6>
</div>
</div>
I suggest as a beginner that you get used to using common class names for similar elements
Here I have two class="team" and each team has a group of class="player" and each player has an inner class="player-name"
Note that the id on player elements is irrelevant this way
You can add other classes as well but this helps styling the structure and makes the javascript simpler to traverse these common items
Working example without the images. You can extend this to work with those yourself
const players = document.querySelectorAll('.player')
players.forEach(function(el) {
el.addEventListener('click', function(e) {
// name of selected player
const name = el.querySelector('.player-name').textContent;
// add selected name to grteam
document.querySelector('#j1').textContent = name;
// remove active class from players
players.forEach(function(el) {
el.classList.remove('active')
})
// add active class to selected player
el.classList.add('active')
})
})
#container{display:flex}
.team{flex-basis:50%;padding:.5em}
h6{ font-size: 1em; margin:0}
.player{ border:2px solid #ccc; padding:.5em; margin-bottom:1em}
.player.active{border-color:red}
<div id="grteam">
Active: <strong id="j1">None</strong>
</div>
<div id="container">
<div class="team">
<div class="player">
<h6 class="player-name">John</h6>
</div>
<div class="player">
<h6 class="player-name">Jake</h6>
</div>
<div class="player">
<h6 class="player-name">Allan</h6>
</div>
</div>
<div class="team">
<div class="player">
<h6 class="player-name">Amilcar</h6>
</div>
<div class="player">
<h6 class="player-name">Peter</h6>
</div>
<div class="player">
<h6 class="player-name">James</h6>
</div>
</div>
</div>
Related
Some of my products have 0 price. Until I fix this issue I want to hide those products from
collection pages.
So,
How can I hide the .productItem or .ItemOrj if the .productPrice span is == ₺0,00 , else show
Look code below:
<div id="ProductPageProductList" class="ProductList sort_4">
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.950,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
</div>
</div>
<div class="ItemOrj col-4">
<div class="productItem" style="display: block;">
<div class="productImage">
<img class="resimOrginal lazyImage" src="/Uploads/" alt="">
</div>
<div class="productDetail videoAutoPlay" data-id="5637" data-variant-id="11091">
<div class="productName detailUrl" data-id="5637"><a title="" href="/"></div>
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0,00
</span>
</div>
</div>
</div>
</div>
</div>
</div>
I have also tried but not worked:
var amount = parseFloat($('.productPrice span').html().replace(",", "."));
if(amount === 0){
$('.productItem').css("display", "none");
}else{
$('.productItem').css("display", "block");
}
I stripped out the additional HTML for my answer since it doesn't affect my answer.
But I loop through each item, and get the text value of the productPrice div and strip out all numeric values then parse it to a Float. Then if its under 0, I hide the parent productItem.
$(document).ready(function(){
$(".productItem").each(function(){
let price = parseFloat($(this).find(".productPrice").text().replace(/[^0-9]/g,""));
if(price == 0){
$(this).hide();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺1.250,00
</span>
</div>
</div>
</div>
<div class="productItem">
<div class="productPrice ">
<div class="discountPrice">
<span>
₺0
</span>
</div>
</div>
</div>
I want the addToCartBar show when the mouse enters the any of the grid-items , it should appear on that grid item only, however it is just working on the first one. What am i doing wrong.
Here is the necessary ejs code
<div class="main-cont">
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img class="rotated-img" src="/AdidasAce.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-5">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-6">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
</div>
</div>
Here is the JS for it
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
let addToCartBar = document.querySelector('.add-to-cart')
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
addToCartBar.style.display = "flex"
})
}
I know that the above code loops through the array of cardItems and for each one, it applies the function so I have no idea what I am doing wrong. Any help is appreciated. Thank you.
The problem is that you actually change the display property of the first card item's button every time because of let addToCartBar = document.querySelector('.add-to-cart'). This will traverse the dom and grab the first matching element. In order to achieve what you want you have to query inside each cardItem like below:
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
let addToCartBar = cardItem.querySelector('.add-to-cart')
addToCartBar.style.display = "flex"
})
}
For the posted code i believe this answers you question:
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 you are applying the event listeners callback to a single element, you can select multiple elements with the .querySelectorAll() .
As well you can use the hover css selector which will simplify your code.
You can create a separate css file and link it into your js file or add the snipet directly into your javascript code.
.add-to-card:hover {
//add wanted behaviour here
}
You can read more about css selectors here
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
JSFiddle
Hey! I've decided to use Masonry, which I find completely awesome.
Although I've ran into the issue where when I use it in a collapsible, it only works on the first collapsible when it's open. I can't seem figure out a way to get it to work when the collapsible is closed and then opened.
I would think it's because when the page loads the images aren't shown/don't exist. I've tried using Juery on click methods for when the collapsible is clicked to load Masonry. That didn't seem to work so I scratched that. I've tried using another on click method to reload Masonry when it's open. That also didn't seem to work correctly.
I am fairly new to JavaScript so I wouldn't be surprised if I had done something wrong. But any help would greatly appreciated. Especially considering I've been banging my head for the last few days on this.
I hope this is enough! Thanks in advance!
HTML :
<ul class="collapsible popout">
<li class="active">
<div class="collapsible-header">
<h1 class="bodyFont noMargin">
Landscapes
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes1" name="Landscapes1">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link to album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes2" name="Landscapes2">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4 hoverable" id="Landscapes3" name="Landscapes3">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
<li>
<div id="secondCategory" class="collapsible-header">
<h1 class="bodyFont noMargin">
Potraits
</h1>
</div>
<div class="collapsible-body">
<div class="grid">
<div class="card deep-purple lighten-4" id="Butterflies" name="Butterflies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Bees" name="Bees">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="RollyPolies" name="RollyPolies">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
<div class="card deep-purple lighten-4" id="Ants" name="Ants">
<div class="card-image">
<img src="https://via.placeholder.com/250x350">
<span class="card-title">Title</span>
</div>
<div class="card-content">
<p>
Description
</p>
</div>
<div class="card-action">
Link To Album
</div>
</div>
</div>
</div>
</li>
</ul>
CSS:
.grid {
margin: 0%;
}
.card,
.grid-sizer {
width: 31.3%;
margin-top: 5px;
margin-bottom: 5px;
}
.gutter-sizer {
width: 2%;
}
JS:
$(".collapsible").collapsible();
var $grid = $(".grid");
$grid.masonry({
itemSelector: ".card",
columnWidth: ".grid-sizer",
gutter: ".gutter-sizer",
percentposition: true,
horizontalOrder: true
});
$grid.imagesLoaded().progress(function() {
$grid.masonry("layout");
});
I am trying to sort these UI cards to display in alphabetical order according to the Last names(.lname) they contain using Jquery.
<div class="main">
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">John</span> <span class="fname">Ike</span></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">Mark</span> <span class="fname">Amos</span></h4>
<p>Architect & Engineer</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">Apple</span> <span class="fname">Joshua</span></h4>
<p>Architect & Engineer</p>
</div>
</div>
</div>
the following function Sort sorts all .card with their childnode .lname
localeCompare determines whether two strings are equivalent in the current locale. from MSDN
function Sort() {
var sortedCards = $('.card').sort(function(a, b) {
return $(a).find('.lname').text().localeCompare($(b).find('.lname').text())
})
$('.main').remove('.card').append(sortedCards)
}
$('.sort_button').on('click',Sort)
img {
width: 5% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<input type="button" class="sort_button" value="Click!">
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">John</span> <span class="fname">Ike</span></h4>
<p>Architect & Engineer(John)</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">Mark</span> <span class="fname">Amos</span></h4>
<p>Architect & Engineer(Mark)</p>
</div>
</div>
<div class="card">
<img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" style="width:100%">
<div class="container">
<h4><span class="lname">Apple</span> <span class="fname">Joshua</span></h4>
<p>Architect & Engineer(Apple)</p>
</div>
</div>
</div>