I got those numbers working but the letter "T" has been replaced so that it won't show. Do you guys have any idea of how to get it works. Thank you very much.
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
$('.number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 8000,
easing: 'swing',
step: function (now) {
$(this).text(commaSeparateNumber(Math.ceil(now)));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="count"><div class="number">30</div></div>
<div class="text">text 1</div>
</div>
<div class="col-md-4">
<div class="count"><div class="number">3000</div></div>
<div class="text">text 2</div>
</div>
<div class="col-md-4">
<div class="count"><div class="number">700<span>T</span></div></div>
<div class="text">text 3</div>
The problem with your code was it was replacing whole the DOM structure include span containing 'T' so DOM structure has been updated.
Here is your updated code
function commaSeparateNumber(val){
while (/(\d+)(\d{3})/.test(val.toString())){
val = val.toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
}
return val;
}
$('.number').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 8000,
easing: 'swing',
step: function (now) {
$(this).text(commaSeparateNumber(Math.ceil(now)));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<div class="count"><div><span class="number">30</div></div>
<div class="text">text 1</div>
</div>
<div class="col-md-4">
<div class="count"><div><span class="number">3000</span></div></div>
<div class="text">text 2</div>
</div>
<div class="col-md-4">
<div class="count"><div><span class="number">700</span><span>T</span></div></div>
<div class="text">text 3</div>
Related
I have problem with getting value of a div with class="idC". I need this value to remove object from my array. I know I probably gonna need to use parseInt but all I'm getting with this code is rowid: undefined when I use console.log("rowid: " + bikeId.value). bikeRow.remove(); works fine. It removes the row I want to.
const buttonDel = document.querySelectorAll(".deleteC");
buttonDel.forEach(button => {
console.log("jazda");
button.addEventListener('click', () => {
const bikeRow = button.parentNode;
const bikeId = bikeRow.firstChild;
if (!window.confirm())
return;
console.log("rowid: " + bikeId.value);
bikeRow.remove();
//bikeStorage.removeBike(bikeId.value);
})
})
<div class="bikeRows">
<div class="bikeRow">
<div class="idC"></div>${bike.id}</div>
<div class="frameC">${bike.frame}</div>
<div class="suspC">${bike.susp}</div>
<div class="wheelC">${bike.wheel}</div>
<div class="typeC">${bike.constructor.name}</div>
<div class="deleteC"><button class="delButton" id="${bike.id}">Delete</button></div>
</div>
</div>
You have invalid HTML and you really should delegate
I added the ID as a data-attribute to the row like this
<div class="bikeRow" data-id="${bike.id}">
Makes the code much simpler to debug and extend
document.querySelector(".bikeRows").addEventListener("click", e => {
const tgt = e.target.closest("button");
if (!tgt.matches(".delButton")) return; // not a delete button
if (!window.confirm("Sure?")) return; // they cancelled
const bikeRow = tgt.closest("div.bikeRow"),
id = bikeRow.dataset.id; // the ID to remove from the storage
bikeRow.remove();
//bikeStorage.removeBike(id);
})
<div class="bikeRows">
<div class="bikeRow" data-id="ID1">
<div class="idC">ID1</div>
<div class="frameC">Frame 1</div>
<div class="suspC">Susp 1</div>
<div class="wheelC">Wheel 1</div>
<div class="typeC">Constructor name 1</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID2">
<div class="idC">ID 2</div>
<div class="frameC">Frame 2</div>
<div class="suspC">Susp 2</div>
<div class="wheelC">Wheel 2</div>
<div class="typeC">Constructor name 2</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
<div class="bikeRow" data-id="ID3">
<div class="idC">ID 3</div>
<div class="frameC">Frame 3</div>
<div class="suspC">Susp 3</div>
<div class="wheelC">Wheel 3</div>
<div class="typeC">Constructor name 3</div>
<div class="deleteC"><button class="delButton">Delete</button></div>
</div>
</div>
How can I easily toggle/switch the classes between three or more divs in a sequence by click?
Example html:
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="next">Next</div>
<div class="back">Back</div>
This way just works with two:
$(".next, .back").click(function(){
$(".box").toggleClass("active");
});
Simply to check if nth-child has the active class and loop.
$(".next").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i+1)%$(".box").length)+1)+")").addClass('active');
return false;
}
});
});
$(".back").click(function(){
$(".box").each( function(i, j) {
if( $(this).hasClass('active') ) {
$(this).removeClass('active');
$(".box:nth-child("+(((i-1)+$(".box").length)%$(".box").length+1)+")").addClass('active');
return false;
}
});
});
.active {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<div class="back">Back</div>
<div class="next">Next</div>
</div>
This is pretty generic
$(".nav").on("click", function() {
var dir = $(this).is(".next") ? 1 : -1; // which direction are we going?
var active = $(".box.active").index() - 1;
var $boxes = $(".box");
active += (1 * dir);
if (active < 0) active = $boxes.length - 1; // wrap
else if (active >= $boxes.length) active = 0;
$(".box").removeClass("active");
$(".box").eq(active).addClass("active");
});
.active {
color: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box active">Box 2</div>
<div class="box">Box 3</div>
<br/>
<div class="nav back">Back</div>
<div class="nav next">Next</div>
I've created another solution that gets the button's ID (which I've added) and uses that to dictate where to go.
var box = $('.box');
var maxBoxes = box.length;
$("#nextBtn, #backBtn").click(function() {
var getBtn = $(this).get(0).id,
activeBox = $('.box.active'),
position = activeBox.index();
activeBox.removeClass('active');
if (getBtn === 'nextBtn') {
(position == maxBoxes) ? box.eq(0).addClass('active'): activeBox.next().addClass('active');
} else {
(position === 1) ? box.last().addClass('active'): activeBox.prev().addClass('active');
}
});
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box active">Box 3</div>
<div id="nextBtn" class="next">Next</div>
<div id="backBtn" class="back">Back</div>
I think that the following should be efficient, because it will not do unnecessary checks.
var last = $(".active")
function toggle(dir){
var future = last[dir]();
if(!(future.length && future.hasClass('box'))) {
return;
}
last.toggleClass("active")
last = future
last.toggleClass("active");
}
$(".next").click(toggle.bind(void 0, 'next'));
$(".back").click(toggle.bind(void 0, 'prev'));
I have created a counter section on my site which animates on page load, however I am trying to trigger the animation when the user gets to that section.
Currently I have this, however the animation only triggers when the div is beyond the nav, ie: the top of the screen including the nav. How would I change this so that the animation triggers as the div becomes visible?
I'm also having an issue that it shows to start as the full number without the commas, and then goes to 0 and animates, how can I make it show a 0 to begin with?
I'm pretty new to JS so would appreciate any explanation into this.
Heres what I have:
const convert = str => {
// Find the number
let regx = /(\d{1,3})(\d{3}(?:,|$))/;
// Set a variable
let currStr;
// Start loop
do {
// Replace current string, split it
currStr = (currStr || str.split(`.`)[0])
.replace(regx, `$1,$2`)
} while (currStr.match(regx)); // Loop
// Return our result from function
return (str.split(`.`)[1]) ?
currStr.concat(`.`, str.split(`.`)[1]) :
currStr;
};
$(window).scroll(startCounter);
function startCounter() {
if ($(window).scrollTop() > $('#counter').offset().top) {
$(window).off("scroll", startCounter);
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
$(this).text(convert($(this).text()))
}
});
});
}
}
.section-counter {
margin-top: 150vh;
margin-bottom: 150vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">
<div class="row">
<h2>Headline Data Figures</h2>
</div>
<div class="row">
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count">1688019</span>
<h3>Contributions</h3>
</div>
</div>
<div id="shiva"><span class="count">82150</span>
<h3>Items of Business</h3>
</div>
</div>
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count">10505</span>
<h3>Meetings</h3>
</div>
</div>
<div id="shiva"><span class="count">168260</span>
<h3>Written/Oral Questions</h3>
</div>
</div>
</div>
<div class="row arrow-dark arrow__7 animated pulse infinite">
<i class="ion-md-arrow-dropdown"></i>
</div>
</section>
If I understand correctly, the problem is that you're comparing the offset of the div to the top of the screen, when actually you'd want to find out where the bottom of the screen is, and compare that to the position of the div.
Regarding starting from 0, you can have the elements use a data attribute to determine the max instead of the text, that way you can have the elements read 0 until they start counting:
const convert = str => {
// Find the number
let regx = /(\d{1,3})(\d{3}(?:,|$))/;
// Set a variable
let currStr;
// Start loop
do {
// Replace current string, split it
currStr = (currStr || str.split(`.`)[0])
.replace(regx, `$1,$2`)
} while (currStr.match(regx)); // Loop
// Return our result from function
return (str.split(`.`)[1]) ?
currStr.concat(`.`, str.split(`.`)[1]) :
currStr;
};
$(window).scroll(startCounter);
function startCounter() {
var bottomOfScreen = $(window).scrollTop() + $(window).innerHeight();
if (bottomOfScreen > $('#counter').offset().top) {
$(window).off("scroll", startCounter);
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).attr('data-max')
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
$(this).text(convert($(this).text()))
}
});
});
}
}
.section-counter {
margin-top: 150vh;
margin-bottom: 150vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="section-counter" id="counter">
<div class="row">
<h2>Headline Data Figures</h2>
</div>
<div class="row">
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count" data-max="1688019">0</span>
<h3>Contributions</h3>
</div>
</div>
<div id="shiva"><span class="count" data-max="812150">0</span>
<h3>Items of Business</h3>
</div>
</div>
<div class="col span-1-of-2">
<div class="row">
<div id="shiva"><span class="count" data-max="10505">0</span>
<h3>Meetings</h3>
</div>
</div>
<div id="shiva"><span class="count" data-max="168260">0</span>
<h3>Written/Oral Questions</h3>
</div>
</div>
</div>
<div class="row arrow-dark arrow__7 animated pulse infinite">
<i class="ion-md-arrow-dropdown"></i>
</div>
</section>
I will give you the logic to kickstart an animation once the user gets to an element.
The relevant event trigger is the ONMOUSEOVER, so to incorporate it...
<div id="abc" onmouseover="AnimateIt();"></div>
Needless to mention that our element must have its animation PAUSED in its styling to begin with, like this...
animation-play-state:paused;
So the JavaScript logic to animate...
function AnimateIt(){ abc.style.animationPlayState='running'; }
That's it.
How can I count the number of elements with a specific class and add the count to each one as a new class name with jquery?
$('.full-screen').each(function(i) {
$(this).addClass('.full-screen-', i);
});
I want to create:
<div class="full-screen full-screen-1"></div>
<div class="full-screen full-screen-2"></div>
<div class="full-screen full-screen-3"></div>
<div class="full-screen full-screen-4"></div>
<div class="full-screen full-screen-5"></div>
Also you can use .addClass( function ) instead of using .each()
$('.full-screen').addClass(function(i) {
return 'full-screen-'+(i+1);
});
$('.full-screen').addClass(function(i) {
return 'full-screen-'+(i+1);
});
console.log($('.full-screen'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>
<div class="full-screen"></div>
You can do
$('.full-screen').each(function(i) {
$(this).addClass('full-screen-'+(i+1));
});
$('.full-screen').each(function(i) {
$(this).addClass('full-screen-'+(i+1));
console.log($(this)[0].outerHTML)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-screen full-screen-1"></div>
<div class="full-screen full-screen-2"></div>
<div class="full-screen full-screen-3"></div>
<div class="full-screen full-screen-4"></div>
<div class="full-screen full-screen-5"></div>
Try this
$(".full-screen").each(function((i){
$(this).addClass("full-screen-" + (i+1));
});
I need to sort items that are within div with the same id and class. I have problems to return the value of tkEmail tag. I can not get the value.
example:
item 1
Order: 0 Value: 1
HTML:
<div id="sortable">
<div class='sortear' tkEmail='1'>Item 1</div>
<div class='sortear' tkEmail='2'>Item 2</div>
</div>
<br>
<div id="sortable">
<div class='sortear' tkEmail='3'>Item 3</div>
<div class='sortear' tkEmail='4'>Item 4</div>
</div>
JS:
$(document).ready(function () {
$('div#sortable').sortable({
update: function () { novaOrdem() },
});
});
function novaOrdem(){
$('div#sortable').each(function (i) {
alert($(this).attr('tkEmail'))
});
}
Ids have to be unique and you're not actually checking the child divs in the call to each. $('div#sortable').children() will get you what you want. Also, tkEmail is not valid and it would be better practice to use a data attribute e.g. data-tk-email:
HTML:
<div id="sortable">
<div class='sortear' data-tk-email='1'>Item 1</div>
<div class='sortear' data-tk-email='2'>Item 2</div>
<div class='sortear' data-tk-email='3'>Item 3</div>
<div class='sortear' data-tk-email='4'>Item 4</div>
</div>
JQuery:
$(document).ready(function() {
$('div#sortable').sortable({
update: function() {
novaOrdem()
},
});
});
function novaOrdem() {
var items = $('div#sortable').children();
$.each(items, function() {
alert($(this).html() + ', Order: ' + $(this).index() + ', Value: ' + $(this).data('tkEmail'))
});
}
Fiddle Demo