I have a JavaScript .each() function which check the value of my div tag and toggle a css class. I am just checking the value fetched from my db and giving the a particular color.
$(".c").each(function() {
if ($(this).text() < 4) {
$(".col").toggleClass("yellow");
} else if ($(this).text() >= 4 && $(this).text() <=6) {
$(".col").toggleClass("orange");
} else if ($(this).text() >= 6 && $(this).text() <=10) {
$(".col").toggleClass("red");
}
});
The problem is when I ran the code only the last else if which is the toggleClass("red') runs. And I am only getting one color which in this case is red displayed,don't know why.
My HTML is looped in a php foreach loop:
<div class="col">
<h4 class="c">'.$marks.'</h4>
<h6>Marks</h6>
</div>
<div class="col">
<h4 class="c">'.$highest.'</h4>
<h6>Highest</h6>
</div>
Like thhe above image I was looking to put my text and number in a same color
Your code sets the class on all the .col elements. to isolate just the one you are matching, you need to use .closest() to look for the closest ancestor that matches your criteria.
$(".c").each(function() {
if($(this).text() < 4){
$(this).closest($(".col")).toggleClass("yellow");
} else if ($(this).text() >= 4 && $(this).text() <=6){
$(this).closest($(".col")).toggleClass("orange");
} else if ($(this).text() >= 6 && $(this).text() <=10){
$(this).closest($(".col")).toggleClass("red");
}
});
.col { width: 5em; text-align:center; padding:1em; margin:5px; float:left; }
.yellow { background-color:yellow; }
.orange { background-color:orange; }
.red { background-color:red; }
h4, h6 { margin:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
<h4 class="c">4</h4>
<h6>Marks</h6>
</div>
<div class="col">
<h4 class="c">7</h4>
<h6>Highest</h6>
</div>
<div class="col">
<h4 class="c">2</h4>
<h6>Highest</h6>
</div>
You are setting all .col elements. Change to this:
$(".c").each(function() {
if($(this).text() < 4){
$(this).parent().toggleClass("blue");
} else if ($(this).text() >= 4 && $(this).text() <=6) {
$(this).parent().toggleClass("orange");
} else if ($(this).text() >= 6 && $(this).text() <=10) {
$(this).parent().toggleClass("red");
}
});
.red {
color: red;
}
.blue {
color: blue;
}
.orange {
color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col">
<h4 class="c">2</h4>
<h6>Marks</h6>
</div>
<div class="col">
<h4 class="c">5</h4>
<h6>Highest</h6>
</div>
I used blue color so to make the difference more visible.
Try the below script:
$("div.col h4.c").each(function() {
if($(this).text() < 4){
$("div.col").toggleClass("yellow");
}
else if ($(this).text() >= 4 && $(this).text() <=6){
$("div.col").toggleClass("orange");
}
else if ($(this).text() >= 6 && $(this).text() <=10){
$("div.col").toggleClass("red");
}
});
Related
On entering section (#stake-section) on scroll, I want each letter of the word "STAKE"
to animate like this (See Pic). basically here, I want to change individual letter colors.
<section id="stake-section" class="stake bgColor2">
<div class="container h-100 p-0">
<div class="row h-100">
<div class="col-lg-12 text-center">
<p id="stake">
<span class="active_s">S</span>
<span class="active_t">T</span>
<span class="active_a">A</span>
<span class="active_k">K</span>
<span class="active_e">E</span>
</p>
</div>
</div>
</div>
</section>
You have to use Javascript for this requirement. I would use the wheel as event trigger. Then you can work with the classList function. It is important that you define partial areas here when the next letter is to be manipulated. Now you can add your style and work on the IF conditions.
use this example in the full page view
const el = document.querySelector('.w');
const spans = document.querySelectorAll('#stake span');
let counter = 0;
el.addEventListener("wheel", ev => {
/* code here */
const direction_1 = ev.deltaY;
spans.forEach(i => {
if (direction_1 < 0) {
console.log('scrolling up');
counter = counter - 1;
if (counter < 40) {
document.querySelector('#stake span:nth-child(5)').classList.remove('boom')
}
if (counter < 30) {
document.querySelector('#stake span:nth-child(4)').classList.remove('boom')
}
if (counter < 20) {
document.querySelector('#stake span:nth-child(3)').classList.remove('boom')
}
if (counter < 10) {
document.querySelector('#stake span:nth-child(2)').classList.remove('boom')
}
if (counter < 1) {
document.querySelector('#stake span:nth-child(1)').classList.remove('boom')
}
} else {
counter = counter + 1;
if (! i.classList.contains('boom')) {
if (counter > 1) {
document.querySelector('#stake span:nth-child(1)').classList.add('boom')
}
if (counter > 10) {
document.querySelector('#stake span:nth-child(2)').classList.add('boom')
}
if (counter > 20) {
document.querySelector('#stake span:nth-child(3)').classList.add('boom')
}
if (counter > 30) {
document.querySelector('#stake span:nth-child(4)').classList.add('boom')
}
if (counter > 40) {
document.querySelector('#stake span:nth-child(5)').classList.add('boom')
}
}
}
console.log(counter);
//i.classList.toggle('boom');
})
})
.w {
background: gray;
height:120px;
overflow:scroll;
overflow-x:hidden;
text-align:center;
}
.w span {
font-size:40px;
font-weight: bold;
}
.boom {
color: red
}
<div class="w">
<section id="stake-section" class="stake bgColor2">
<div class="container h-100 p-0">
<div class="row h-100">
<div class="col-lg-12 text-center">
<p id="stake">
<span class="active_s">S</span>
<span class="active_t">T</span>
<span class="active_a">A</span>
<span class="active_k">K</span>
<span class="active_e">E</span>
</p>
</div>
</div>
</div>
</section>
</div>
You could have a common class to apply standard styling to the letters, and unique classes for each of the letters for individually customized styles.
<span class="active s">S</span>
<span class="active t">T</span>
The class .active would allow you to apply common styling to all the letters.
While .s would allow you to apply some styling to the letter S only and so on.
I need to check if a div is empty and ignore white spaces.
If you type one or more spaces inside the below div and click the button, it logs "empty" instead of "not empty".
$('button').on('click', function(){
let a = $('#wrap').html();
if(a == '' || a.trim() == ''){console.log('empty');}
else{console.log('not empty');}
});
.wrap{
background:gold;
min-height:25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You should use .text() instead. Also, the first check for an empty string is superfluous. The root cause of this issue is that spaces are represented as in HTML, which you can see if you console.log(a).
$('button').on('click', function() {
let a = $('#wrap').text();
if (a.trim() == '') {//or simply, if(!a.trim()){
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
You can simply jQuery .text() to check for length of any text in div. This will avoid (not count) spaces.
The way .html() works is that it will count white spaces as well.
Run snippet below.
$('button').on('click', function() {
let a = $('#wrap').text();
if (a == '' || a.trim() == '') {
console.log('empty');
} else {
console.log('not empty');
}
});
.wrap {
background: gold;
min-height: 25px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrap' id='wrap' contenteditable></div>
<button>CLICK</button>
I have one input and span. When I type in input value is passed to span. Now I want to hide other div/button or something if my span have specific value. My code don't work. What's wrong?
$('#input').on('keyup', function(){
$('#status').html($(this).val());
});
$('#status').on('change', function(){
var status = $('#status').html();
if (status == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test"></div>
Instead of checking changes on span element, it is better to do this logic inside of input event listener. Something like this:
$('#input').on('keyup', function(){
var val = this.value;
$('#status').html(val);
if (val == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
Liste the keyup event and change the background
$('#input').on('keyup', function(){
$('#status').html($(this).val());
console.log($(this).val());
if ($('#status').html() == "OK") {
$('#test').css("background", "red");
} else {
$('#test').css("background", "blue");
}
});
#test {
width: 50px;
height: 50px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<span id="status"></span>
<div id="test-container">
<div id="test"></div>
</div>
what i am trying to do is make the first 12 elements hidden and show the next 12 elements.
//this is dynamic loaded content
<div class="inner-content">
<div class="front-pro">1</div>
<div class="front-pro">2</div>
<div class="front-pro">3</div>
<div class="front-pro">4</div>
<div class="front-pro">5</div>
<div class="front-pro">6</div>
<div class="front-pro">7</div>
<div class="front-pro">8</div>
<div class="front-pro">9</div>
<div class="front-pro">10</div>
<div class="front-pro">11</div>
<div class="front-pro">12</div>
<div class="front-pro hidden">13</div>
<div class="front-pro hidden">14</div>
..... etc (200 divs more)
</div>
<div onclick="SearchNext();">next</div>
This is my javascript/jquery:
function SearchNext(){
var first = $('.inner-content').children('.front-pro:hidden:first');
first.prevAll(':lt(12)').hide();
first.nextAll(':lt(12)').show();
}
It works one time, after it stops working. (and it skips number 13)
i want to have 12 new elements visible with each Next click and hide the previous.
UPDATE - this is my end result that works perfectly
JSFIDDLE DEMO
Thanks to Alex Char
PHP for creating page numbers, you could do this also with javascript
//$counter is search results
$x = 1;
$Pnumbers = '';
while($x <= ceil($counter/12)) {
if($x == 1){ $ecl = 'bold'; } else{ $ecl = ''; }
$Pnumbers .= ' <span class="number '.$ecl.' numbering" onClick="GoTo('.$x.');">'.$x.'</span> ';
$x++;
}
if($counter > 12){ echo'<div class="page-numbers">
<span class="prev number" onclick="GoTo(\'prev\')">Prev</span>
'.$Pnumbers.'
<span class="next number" onclick="GoTo(\'next\');">Next</span>
</div>'; }
Javascript:
function GoTo(nn) {
var nng = parseInt($('.page-numbers .numbering.bold').text());
if(nn == 'next'){
nn = nng+1;
}if(nn == 'prev'){
nn = nng-1;
}
//get all child elements with class front-pro
//of element with class .inner-content
var childElems = $(".inner-content .front-pro");
var totalpages = Math.ceil(childElems.length/12);
//iterate through the elements
var first = (nn-1)*12;
var last = first+11;
childElems.each(function(i, el) {
//show the elements that match the criteria removing css class
if (i >= first && i <= last) {
$(el).removeClass('hidden');
} else {
//hide rest
$(el).addClass('hidden');
}
});
if(nn > 1){ $('.page-numbers .prev').show(); }else{ $('.page-numbers .prev').hide(); }
if(nn < totalpages){ $('.page-numbers .next').show(); }else{ $('.page-numbers .next').hide(); }
$('.page-numbers .numbering').removeClass('bold');
$('.page-numbers .numbering:eq('+(nn-1)+')').addClass('bold');
}
CSS:
.front-pro.hidden{ display:none !important; }
.prev { display: none; }
.page-numbers .number{
background: #ff0000; }
.page-numbers{ text-align:center; }
.page-numbers .number.bold{ font-weight:bold; background:#000; }
.page-numbers .number:hover{ background:#000; cursor: pointer; }
Make sure that the first 12 divs do not contain the "hidden" class, all the divs that come after should have "hidden" in there class
I change a bit the implementation to support and previous. I use a css class to hide content.
function searchNext() {
$('.inner-content').children('.front-pro:lt(12)').addClass('hidden');
$('.inner-content').children('.front-pro:gt(11)').removeClass('hidden');
$(".next").hide();
$(".prev").show();
}
function searchPrev() {
$('.inner-content').children('.front-pro:lt(12)').removeClass('hidden');
$('.inner-content').children('.front-pro:gt(11)').addClass('hidden');
$(".next").show();
$(".prev").hide();
}
.front-pro.hidden {
display: none;
}
.prev {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
<div class="front-pro">1</div>
<div class="front-pro">2</div>
<div class="front-pro">3</div>
<div class="front-pro">4</div>
<div class="front-pro">5</div>
<div class="front-pro">6</div>
<div class="front-pro">7</div>
<div class="front-pro">8</div>
<div class="front-pro">9</div>
<div class="front-pro">10</div>
<div class="front-pro">11</div>
<div class="front-pro">12</div>
<div class="front-pro hidden">13</div>
<div class="front-pro hidden">14</div>
</div>
<div class="next" onclick="searchNext();">next</div>
<div class="prev" onclick="searchPrev();">prev</div>
I create a general solution after your comment with next and previous(I use step 3 for demo purposes but you can use what ever you want):
var pager = (function() {
/*declare private variables*/
var first = 0,
last = 2,
step = 3;
function searchNext() {
//next function
//increasing first and last variables
first += step;
last += step;
pagerHelper();
}
function searchPrev() {
//previous function
//decrease first and last variables
first -= step;
last -= step;
pagerHelper();
}
function pagerHelper() {
//get all child elements with class front-pro
//of element with class .inner-content
var childElems = $(".inner-content .front-pro");
//iterate through the elements
childElems.each(function(i, el) {
//show the elements that match the criteria removing css class
if (i >= first && i <= last) {
$(el).removeClass('hidden');
} else {
//hide rest
$(el).addClass('hidden');
}
});
nextPreviousToggle(childElems.length);
}
function nextPreviousToggle(maxEle) {
//here the code is to show/hide next/previous buttons
if (last >= maxEle) {
$(".next").hide();
} else {
$(".next").show();
}
if (first === 0) {
$(".prev").hide();
} else {
$(".prev").show();
}
}
return {
searchNext: searchNext,
searchPrev: searchPrev
}
})();
.front-pro.hidden {
display: none;
}
.prev {
display: none;
}
.prev:hover,
.next:hover {
text-decoration: underline;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner-content">
<div class="front-pro">1</div>
<div class="front-pro">2</div>
<div class="front-pro">3</div>
<div class="front-pro hidden">4</div>
<div class="front-pro hidden">5</div>
<div class="front-pro hidden">6</div>
<div class="front-pro hidden">7</div>
<div class="front-pro hidden">8</div>
<div class="front-pro hidden">9</div>
<div class="front-pro hidden">10</div>
<div class="front-pro hidden">11</div>
<div class="front-pro hidden">12</div>
<div class="front-pro hidden">13</div>
<div class="front-pro hidden">14</div>
</div>
<span class="next" onclick="pager.searchNext();">next</span>
<span class="prev" onclick="pager.searchPrev();">prev</span>
References
:gt()
:lt()
You use the following code to handle any number of divs,
var x = $(".inner-content div").hide();
$("div:contains(next)").click(function() {
var cnt = $(this).data("cnt") || 0;
if((cnt * 12) > x.length){ cnt = 0; }
x.hide().filter(":eq("+ (cnt * 12) + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
$(this).data("cnt", ++cnt);
});
DEMO
Try this instead
$('.inner-content').children().each(function (i, x) {
if (i < 12) // Hide First 12 i.e 0-11
$(x).addClass('hidden');
else if (i < 24) // Show Next 12 i.e 12-23
$(x).removeClass('hidden');
})
Also make sure you have css rule defined as
.hidden {
display: none;
}
I have a requirement to add 5 divs one by one on each click of a div button. ( the new div should be added below the existing div)
I done the code, but the news ones are getting attached on the top of existing div. please help to correct this.
I have another button which removes the added divs one by one(new ones to be remove first)
here is my code.
<div class="clearFix"></div>
<div id="containershowmore" >
<div id="dragbtnmore" style="cursor: default;">Show more buttons</div>
<div id="dragbtnless" style="cursor: default;">Show Fewer buttons</div>
</div>
<div class="toAdd" style="display:none;" >
<div id="dragdashboardmain" style="cursor: pointer;">dash</div></div>
<div class="toAdd" style="display:none;" >
<div id="dragrcalendar" style="cursor: pointer;">Calendar</div></div>
<div class="toAdd" style="display:none;">
<div id="dragresourcelist" style="cursor: pointer;">Rlist</div></div>
<div class="toAdd" style="display:none;">
<div id="dragdailynotes" style="cursor: pointer;">D Notes</div></div>
<div class="toAdd" style="display:none;">
<div id="dragweeklynotes" style="cursor: pointer;">W Notes</div></div>
script:
$("#dragbtnmore").click(function () {
$('.toAdd').each(function () {
if ($(this).css('display') == 'none') {
$(this).css('display', 'block');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'none') {
i++;
}
});
if (i == 5)
$('#dragbtnmore').click(function () { return false; });
});
$("#dragbtnless").click(function () {
$('.toAdd').each(function () {
if ($(this).css('display') == 'block') {
$(this).css('display', 'none');
return false;
}
});
var i = 0;
$('.toAdd').each(function () {
if ($(this).css('display') != 'block') {
i++;
}
});
if (i == 5)
$('#dragbtnless').click(function () { return false; });
$('#dragbtnless').click(function () { return true; });
});
$("#containershowmore").mouseleave(function () {
$(this).hide();
});
function showmore() {
document.getElementById('containershowmore').style.display = "block";
}
style:
#containershowmore
{
margin-top: -75px;position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
float: right;
padding-left: 5px;
}
.toAdd
{
background-color: blue;
margin-top: -55px;
position: relative;
margin-bottom: 14px;
}
*I referred this Fiddle *
**Solution:
Thankyou Shivam Chopra for helping me . Thanks a TON!! :)
for others, HEre is the solution**
jsfiddle.net/coolshivster/YvE5F/12
Remove margin top from both the div.
#containershowmore
{
position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
float:right;
padding-left: 5px;
}
#dragbtnmore{
margin-bottom:10px;
border:1px solid black;
}
.toAdd
{
height:20px;
width:70px;
background-color: blue;
position: relative;
margin-bottom: 14px;
}
Then, it will work accordingly.
Here, the code : http://jsfiddle.net/coolshivster/YvE5F/
I have rewritten your code according to your requirement.
Some explanation about the code
I have create a parent div element with id="Add-element" that covers every element which contains class .toAdd .
Then I created data attribute for every div containing class .toAdd .
Now, I display the element one by one. But after first element. Every other element will prepend on the parent div i.e., #Add-element class.
Now, the code which I have rewritten.
jsfiddle link : http://jsfiddle.net/YvE5F/10/