I tried to handling,
if content text length < 0
then set class match-name & divider style to display none.
it seem like not working with below code.
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
for (var i = 0; i < newsMatchName.length; i++) {
if (newsMatchName[i].length < 0) {
console.log(newsMatchName[i].length)
for (var i = 0; i < elem.length; i++) {
newsMatchName[i].style.display = "none";
newsMatchNameDivider[i].style.display = "none"
}
}
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider"></div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>
I have corrected the code for you:
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
for (var i = 0; i < newsMatchName.length; i++) {
if (newsMatchName[i].innerText.length <= 0) {
newsMatchName[i].style.display = "none";
newsMatchNameDivider[i].style.display = "none"
}
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider"></div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>
I test the length of the text in match-name
Length can be 0 or more, not <0, so use
newsMatchName[i].textContent.length === 0
but I suggest this:
var newsMatchName = document.querySelectorAll(".match-name");
var newsMatchNameDivider = document.querySelectorAll(".divider");
newsMatchName.forEach((name, i) => {
const textLen = name.textContent.trim().length;
name.classList.toggle("hide", textLen === 0);
newsMatchNameDivider[i].classList.toggle("hide", textLen === 0);
})
.hide {
display: none;
}
<div class="news-content">
<div class="match-name"></div>
<div class="divider">This will be hidden</div>
<div class="title">Title Text</div>
<div class="footer">
<span class="author">Author</span>
<span class="spacer"></span>
<div class="timeline">
<span class="date">2021-04-01</span>
<span class="time">12:15</span>
</div>
</div>
</div>
Related
I'm trying to show the next image by just adding the style: display(none) but it is not working at all
<script>
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
displayBanner();
</script>
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"></div>
<div class="banner_img" id="banner_img2"></div>
<div class="banner_img" id="banner_img3"></div>
</div>
</div>
</header>
Your element does not exist when you execute the script before the element. Move the script to after the elements or move displayBanner into a load event
I assume you want to rotate the images
var count = 0, max;
function displayBanner() {
document.getElementById("banner_img"+count).style.display = "none";
count++
if (count === max ) count = 0
document.getElementById("banner_img"+count).style.display = "block";
}
window.addEventListener("load", function() {
max = document.querySelectorAll(".banner_img").length;
document.getElementById("banner_img0").style.display = "block";
setInterval(displayBanner, 3000);
})
.banner_img { display:none; text-align:center }
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img0"><img src="http://lorempixel.com/output/animals-q-c-640-480-1.jpg" /><br/>Image 1</div>
<div class="banner_img" id="banner_img1"><img src="http://lorempixel.com/output/animals-q-c-640-480-2.jpg" /><br/>Image 2</div>
<div class="banner_img" id="banner_img2"><img src="http://lorempixel.com/output/animals-q-c-640-480-3.jpg" /><br/>Image 3</div>
</div>
</div>
</header>
your div didn't have any source add a source using <img src=""></img> for the div try below code for that
<header>
<div class="banner">
<div id="banner">
<div class="banner_img" id="banner_img1"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg" ></div>
<div class="banner_img" id="banner_img2"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
<div class="banner_img" id="banner_img3"><img src="http://templatesforcv.com/wp-content/uploads/06.jpg"></div>
</div>
</div>
</header>
window.onload=displayBanner();
function displayBanner() {
var count = 1;
if (count == 1) {
document.getElementById("banner_img3").style.display = "none";
}
}
working demo:https://jsfiddle.net/athulmathew/yh2esp1c/21/
Below javascript code is for cloning the clonedInput1. But below code only creating and appends one clone. But year_no is 3.
cloneid = 0;
function clone_year(year_no)
{
cloneid += 1;
var container = document.getElementById('clone_div');
var clone = $('#clonedInput1').clone();
for (i = 0; i < year_no; i++) {
$('.clone_div').append(clone);
}
}
This is the html code for above code.
<div id="year_sem_details" style="display:none">
<div class="form-group">
<div class="clone_div" id="clone_div">
<div id="clonedInput1" class="clonedInput row">
<div class="row">
<!-- here some html -->
</div>
</div>
</div>
</div>
</div>
Please Help me on this.
cloneid = 0;
function clone_year(year_no)
{
cloneid += 1;
var container = document.getElementById('clone_div');
//var clone = $('#clonedInput1').clone();
for (i = 0; i < year_no; i++) {
$('.clone_div').append($('#clonedInput1').clone());
}
}
clone_year(3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details" style="display:block">
<div class="form-group">
<div class="clone_div" id="clone_div">
<div id="clonedInput1" class="clonedInput row">1
<div class="row">
<!-- here some html -->
</div>
</div>
</div>
</div>
</div>
Please check this.
You're appending the same element (clone) to $('.clone_div'). For each iteration, clone a new element.
for (i = 0; i < year_no; i++) {
$('.clone_div').append($('#clonedInput1').clone());
}
Try using an ID selector like $('#clonedInput1').clone() so you will append a new element on each iteration:
function clone_year(year_no)
{
var container = document.getElementById('clone_div');
var clone = $('#clonedInput1').clone();
for (i = 0; i < year_no; i++) {
$('#clone_div').append($('#clonedInput1').clone());
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div class="clone_div" id="clone_div">
<div id="clonedInput1" class="clonedInput row">
Hello
</div>
</div>
</div>
<input type='button' onclick='clone_year(3);' value='go' />
Here you go with a solution https://jsfiddle.net/u5zw67v3/
cloneid = 1;
function clone_year(year_no) {
for (i = 0; i < year_no; i++) {
cloneid++;
$('.clone_div').append($('#clonedInput1').clone());
$('.clone_div').find('.clonedInput').last().attr('id', 'clonedInput' + cloneid);
}
}
clone_year(3);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year_sem_details">
<div class="form-group">
<div class="clone_div" id="clone_div">
<div id="clonedInput1" class="clonedInput row">
<div class="row">
here some html
</div>
</div>
</div>
</div>
</div>
Your id should be unique.
Hope this will help you.
I have two divs, wrapping 8 divs each:
<div class="binaries">
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
</div>
<div class="numbers">
<div class="each-number" data-value="128"> 128 </div>
<div class="each-number" data-value="64"> 64 </div>
<div class="each-number" data-value="32"> 32 </div>
<div class="each-number" data-value="16"> 16 </div>
<div class="each-number" data-value="8"> 8 </div>
<div class="each-number" data-value="4"> 4 </div>
<div class="each-number" data-value="2"> 2</div>
<div class="each-number" data-value="1"> 1 </div>
</div>
What I want to achieve, is that clicking, for example, the first div in the numbers section, changes the first div in the binaries section, but I'm not sure how to link them without adding a click handler to every single div in the numbers section.
Codepen:
http://codepen.io/Hyde87/full/zNGXXw/
JS:
"use strict";
let count = 0;
const output = document.getElementById("output");
const gameResult = document.getElementById("gameResult");
const numbers = document.querySelector(".numbers");
const binaries = document.querySelectorAll(".binary-number");
const randomizer = document.querySelector(".randomizer");
/* Get the number value of every number on click using event delegation, then call the testValue function */
numbers.addEventListener("click", getValue);
function getValue(e){
if (e.target.className == "each-number") {
e.target.classList.add("light");
let thisValue = e.target.getAttribute('data-value');
count += parseInt(thisValue);
console.log(count);
testValue()
}}
/* The values are added to the count variable, which is tested against the random number */
function testValue(){
if (count > parseInt(output.textContent)) {
gameResult.textContent = "Wrong value, you went over it."
count = 0;
output.textContent = "";
} else if (count === parseInt(output.textContent)) {
gameResult.textContent = "You got it right!";
output.textContent = "";
}
}
/* Gets a random number between 1 and 128 */
function getRandom() {
return Math.floor(Math.random() * (128 - 1 + 1)) + 1;
}
/* Displays the random number and resets other values so we always start from scratch when we get a new random number */
randomizer.addEventListener("click", function() {
gameResult.textContent = "";
count = 0;
output.textContent = getRandom();
for (let i = 0; i < binaries.length; i++) {
binaries[i].textContent = "0";
}
})
Add classes to binaries as
<div class="binaries">
<div class="binary-number num-128"> 0 </div>
<div class="binary-number num-64"> 0 </div>
<div class="binary-number num-32"> 0 </div>
<div class="binary-number num-16"> 0 </div>
<div class="binary-number num-8"> 0 </div>
<div class="binary-number num-4"> 0 </div>
<div class="binary-number num-2"> 0 </div>
<div class="binary-number num-1"> 0 </div>
</div>
And add these two line in getValue function
let binaryElem = document.querySelector(".binary-number.num-"+thisValue);
binaryElem.textContent = "1";
You don't have to add a click handler to every element inside numbers. Just add it to the parent element and get the index of the clicked event target.
Here is an example.
var bin = document.getElementsByClassName('binaries')[0];
var num = document.getElementsByClassName('numbers')[0];
function numClick(evt) {
var index = 0;
for(var i = num.children.length - 1; i >= 0; i--) {
if (evt.target == num.children[i]) {
index = i;
}
}
bin.children[index].classList.add('mark');
}
num.addEventListener('click', numClick)
.mark {
color: white;
background: red;
}
.binaries , .numbers {
display: flex;
justify-content: space-between;
}
<div class="binaries">
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
<div class="binary-number"> 0 </div>
</div>
<div class="numbers">
<div class="each-number" data-value="128"> 128 </div>
<div class="each-number" data-value="64"> 64 </div>
<div class="each-number" data-value="32"> 32 </div>
<div class="each-number" data-value="16"> 16 </div>
<div class="each-number" data-value="8"> 8 </div>
<div class="each-number" data-value="4"> 4 </div>
<div class="each-number" data-value="2"> 2</div>
<div class="each-number" data-value="1"> 1 </div>
</div>
My code have divs of movies which are used to display movie with poster, now i want jquery to sort divs for me on basis of title,
<!-- Movie -->
<div class="movie" title="Reservoir Dogs">
<div class="movie-image">
<span class="play"><span class="name">Reservoir Dogs |
Reservoir Dogs</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMTQxMTAwMDQ3Nl5BMl5BanBnXkFtZTcwODMwNTgzMQ##._V1_SX300.jpg" alt="movie">
</div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in4">
</div>
</div>
<span class="comments"></span>
</div>
</div>
<!-- end Movie -->
<!-- Movie -->
<div class="movie" title="Saw">
<div class="movie-image">
<span class="play"><span class="name">Saw |
Saw</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMjAyNTcxNzYwMV5BMl5BanBnXkFtZTgwMzQzNzM5MjE#._V1_SX300.jpg" alt="movie">
</div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in4">
</div>
</div>
<span class="comments"></span>
</div>
</div>
<!-- end Movie -->
<!-- Movie -->
<div class="movie" title="Scarface">
<div class="movie-image">
<span class="play"><span class="name">Scarface |
Scarface</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMjAzOTM4MzEwNl5BMl5BanBnXkFtZTgwMzU1OTc1MDE#._V1_SX300.jpg" alt="movie">
</div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in4">
</div>
</div>
<span class="comments"></span>
</div>
</div>
<!-- end Movie -->
<!-- Movie -->
<div class="movie" title="Signs">
<div class="movie-image">
<span class="play"><span class="name">Signs |
Signs</span></span><img src="http://ia.media-imdb.com/images/M/MV5BNDUwMDUyMDAyNF5BMl5BanBnXkFtZTYwMDQ3NzM3._V1_SX300.jpg" alt="movie">
</div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in3">
</div>
</div>
<span class="comments"></span>
</div>
</div>
<!-- end Movie -->
<!-- Movie -->
<div class="movie" title="Stir of Echoes">
<div class="movie-image">
<span class="play"><span class="name">Stir of Echoes |
Stir of Echoes</span></span><img src="http://ia.media-imdb.com/images/M/MV5BMTU0OTAyMDQzNV5BMl5BanBnXkFtZTcwNTg1NjYyMQ##._V1_SX300.jpg" alt="movie">
</div>
<div class="rating">
<p>RATING</p>
<div class="stars">
<div class="stars-in4">
</div>
</div>
<span class="comments"></span>
</div>
</div>
<!-- end Movie -->
Now here is my current code
$(document).ready(function () {
var desc = false;
document.getElementById("sort").onclick = function () {
sortUnorderedList("movie", desc);
desc = !desc;
return false;
}
});
function sortUnorderedList(ul, sortDescending) {
if (typeof ul == "string")
var lis = document.getElementsByClassName("movie");
var vals = [];
for (var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i]);
debugger;
vals.sort(function (a, b) { return a.title - b.title });
//vals[].title.sort();
if (sortDescending)
vals.reverse();
for (var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i].innerHTML;
}
above code is not giving desired result
can u suggest better way to do it
You can significantly simplify your code if you use more jQuery, anyway you are using it. Entire code in this case will be:
$(document).ready(function () {
var desc = false;
$("#sort").click(function () {
sortUnorderedList("movie", desc);
desc = !desc;
});
});
function sortUnorderedList(ul, sortDescending) {
$('.' + ul).sort(function(a, b) {
return sortDescending ? a.title.localeCompare(b.title) : b.title.localeCompare(a.title);
}).appendTo('body');
}
Just note that instead of appendTo('body'), you should append to appropriate container that holds .movie elements. I'm appending to body because this is a container for movie divs in my demo.
Demo: http://jsfiddle.net/212oc0kw/
Here is my HTML
<div id="subscriptionContainer">
<div class="subscription">
<div class="subs-btn">
<div class="subscribed">Subscribed</div>
</div>
</div>
<div class="subscription">
<div class="subs-btn">
<div class="btnGetit">Get It</div>
</div>
</div>
<div class="subscription">
<div class="subs-btn">
<div class="subscribed">Subscribed</div>
</div>
</div>
<div class="subscription">
<div class="subs-btn">
<div class="btnGetit">Get It</div>
</div>
</div>
<div class="subscription">
<div class="subs-btn">
<div class="subscribed">Subscribed</div>
</div>
</div>
<div class="subscription">
<div class="subs-btn">
<div class="btnGetit">Get It</div>
</div>
</div>
</div>
Now I want to rearrange the "subscription" divs withing the "subscriptionContainer" such that the divs that have class = "subscribed" should be moved to bottom and the divs having class = "btnGetit" should all be moved up. Please give solutions in Javascript or JQuery.
var $wrap = $('#subscriptionContainer');
$wrap.find('.subscribed').parents('.subscription').appendTo( $wrap );
Demo: http://jsbin.com/ebudux/2/edit
Here is a pure JavaScript implementation that I finally worked out
var container = document.getElementById('subscriptionContainer');
var allDivs = container.getElementsByTagName('div');
var subsProds = new Array();
var count = 0;
for (i = 0; i < allDivs.length; i++)
{
var currentElement = allDivs[i];
if (currentElement.className == 'subscribed') {
subsProds[count] = currentElement.parentNode.parentNode;
container.removeChild(currentElement.parentNode.parentNode);
count++;
}
}
for (i = 0; i < subsProds.length; i++)
container.appendChild(subsProds[i]);
var $wrap = $('#subscriptionContainer');
$wrap.find('.subscription').children('.subscribed').appendTo( $wrap );