I want to do one of those cool dashboard counter animations using my Django variables. My code isn't rendering any numbers yet so I'm doing something wrong.
Something like this if what I'm after:
Here's my code so far:
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-users"></i>
<h2 class="users-count"></h2>
<h3 class="count-label">Users</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-handshake-o"></i>
<h2 class="dealers-count"></h2>
<h3 class="count-label">Dealers</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-address-card"></i>
<h2 class="staff-count"></h2>
<h3 class="count-label">Employees</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="card m-2 p-4">
<i class="counter-icon fa fa-eye"></i>
<h2 class="visitors-count"></h2>
<h3 class="count-label">Visitors Today</h3>
</div>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {
function counter(id, start, end, duration) {
let obj = document.getElementsByClassName(id),
current = start,
range = end - start,
visitors_range = 11 - start,
increment = end > start ? 1 : -1,
step = Math.abs(Math.floor(duration / range)),
timer = setInterval(() => {
current += increment;
obj.textContent = current;
if (current == end) {
clearInterval(timer);
}
}, step);
}
counter("users-count", 0, {{users.count}}, 3000);
counter("dealers-count", 100, {{dealers.count}}, 2500);
counter("staff-count", 0, {{staff.count}}, 3000);
counter("visitors-count", 0, {{visitors.count}}, 3000);
});
</script>
Related
I want to get the value in a single card selected by the user and post it to the backend
<div class="card-body">
<div class="swiper-container swipercards">
<div class="swiper-wrapper pb-4">
<div class="swiper-slide ">
<div class="card border-0 bg-default text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Visa</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide ">
<div class="card border-0 bg-warning text-white">
<div class="card-header">
<div class="row">
<div class="col-auto">
<i class="material-icons vm text-template">credit_card</i>
</div>
<div class="col pl-0">
<h6 class="mb-1">Maestro</h6>
</div>
</div>
</div>
<div class="card-body">
<h5 class="mb-0 mt-3">4444 5264 2541 26651</h5>
</div>
<div class="card-footer">
<div class="row">
<div class="col">
<p class="mb-0">26/21</p>
<p class="small ">Expiry date</p>
</div>
<div class="col-auto align-self-center text-right">
<p class="mb-0">Agnish Carvan</p>
<p class="small">Card Holder</p>
</div>
</div>
</div>
</div>
</div>
Welcome AegisFor. It looks like you're using Swiper.js?
According to the docs, under events, here is how you determine the selected item in the carousel:
const swiper = new Swiper('.swiper', {
// ...
});
swiper.on('slideChange', function () {
console.log('slide changed', swiper.activeIndex);
});
https://swiperjs.com/swiper-api#events
You could get the values by referring to the slide's attributes, like this:
....
<div class="swiper-wrapper pb-4" >
<div class="swiper-slide " id="card-1" data-card-number="12345">
....
When you change slides, refer to the div that matches the activeIndex of the carousel:
var activeCard = document.getElementById("card-" + swiper.activeIndex);
Now you can get the card number:
var cardNumber = activeCard.getAttribute("data-card-number")
How you send it to your backend depends on what backed you have. You might do something similar to this:
fetch('http://example.com/card?card-number=' + cardNumber)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
The documentation at https://swiperjs.com/swiper-api is quite good. Remember to read the docs thoroughly before posting to SO.
I am beginner web developer.
My code retrieves data from php and dynamically displays it on the page.
This code get data from php.
I have this code:
let productCount = 0;
function loadProducts() {
$.ajax({
type: 'GET',
url: '/pobierz-produkt',
dataType: "text",
data: {
slug: slug,
queryString: queryString,
filterDrawer: $(".filter-drawer option:selected").val(),
filterMounting: $(".filter-mounting option:selected").val(),
filtershelfs: $(".filter-shelfs option:selected").val()
},
success: function (data) {
$('.dynamic-products').html(data);
let productCount = 5;
if (productCount == 1) $('.dynamic-products-count').html('5 produktów');
if (productCount >= 2 && productCount <= 5) $('.dynamic-products-count').html(productCount + ' produkty');
else $('.dynamic-products-count').html(productCount + ' produktów');
}
});
}
It's work fine.
This code return me:
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/produkt-1">
<img src="http://name.test/upload/products/thumbs3/559c3b396bca9c33e6dcc32ad36bc732.jpeg" class="img-fluid">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Produkt 1 tv blue
</div>
</div>
<div class="product-card-category text-center text-md-left">mini opis
</div>
</div>
</div>
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/produkt-2">
<img src="http://name.test/upload/products/thumbs3/38ae98e033d9c2dddc7b2ca7fff9acd4.jpeg" class="img-fluid">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Produkt 2
</div>
</div>
<div class="product-card-category text-center text-md-left">
</div>
</div>
</div>
<div class="product-card">
<div class="mt-5 w-100">
<div class="w-100 mb-3 product-card-img-box text-center text-md-left">
<a href="http://name.test/produkt/szafka-z-szufladami">
</a>
</div>
<div class="product-card-name-box text-center text-md-left">
<a class="product-card-new-info" href="#">Nowość</a><br/>
<div class="product-card-name pt-3">
Szafka z szufladami
</div>
</div>
<div class="product-card-category text-center text-md-left">
</div>
</div>
</div>
I need save to productCount how many "product-card" was returned from php.
How can I make it? I need count "product-card"
Please help me
If your data is pure HTML returned, you can use :
success: function (data) {
// create fake div
var $data = $('<div />').html(data);
var count = $data.find('.product-card').length;
}
Here is a fiddle : https://jsfiddle.net/hfwuznvd/
You can count the length of JSON objects using Object.keys(myObject).length;
var myObject = {'name':'Kasun', 'address':'columbo','age': '29'}
var count = Object.keys(myObject).length;
console.log(count);
I am working on my own portfolio and I want to put a delay between 2 pages with a setTimeout function. I've tried some ways but haven't worked yet. I am already using a function to open my "href" with all my box but now I just want to put a delay to go from accueil.html to presentation.html.
"accueil.html":
document.addEventListener('DOMContentLoaded', function()
{
var items = document.querySelectorAll('.ouverture');
for (var i = 0; i < items.length; i++)
{
var item = items[i];
item.addEventListener('click', function()
{
var url = this.getElementsByTagName('a');
url = url[0];
window.location = url;
});
}
});
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>Présentation</h4>
</div>
</div>
</div>
</div>
</div>
</div>
Just add a timeout add the part where you redirect to another page:
item.addEventListener('click', function() {
var url = this.getElementsByTagName('a');
if(url.length > 0)
url = url[0];
setTimeOut(() => {
window.location = url;
}, 2000); // 2000 = 2000ms === 2sec
});
More info is found here
A general-purpose snippet that "delays" clicks. Just add the script at the top of the page and use the delay-click[=numberOfMilliseconds] attribute.
document.body.addEventListener("click", function(event) {
var target = event.target;
var currentTarget = target.closest("[delay-click]:not(.delay-click-ignore)");
if (!currentTarget) return;
var delay = +currentTarget.getAttribute("delay") || 2000;
currentTarget.classList.add("delay-click-ignore");
setTimeout(function() {
target.click();
currentTarget.classList.remove("delay-click-ignore");
}, delay);
event.preventDefault();
});
.delay-click-ignore,
.delay-click-ignore a,
.delay-click-ignore input,
.delay-click-ignore button {
cursor: progress !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="box">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<!-- on the element itself -->
<h4><a href="presentation.html" delay-click>default delay</a></h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<!-- or somewhere up the ranks -->
<div class="box-part text-center ouverture" delay-click=5000>
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>delay 5s</h4>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="box-part text-center ouverture">
<i class="fa fa-address-book fa-3x" aria-hidden="true"></i>
<div class="title">
<h4>immediate</h4>
</div>
</div>
</div>
</div>
<div class="form-group">
<!-- works here too -->
<input type="checkbox" class="form-control" delay-click />
</div>
</div>
</div>
I'm just learning Javascript, and this is my first attempt to make something for myself, so forgive me if the solution is very simple. I'm trying to automate score keeping for a card game. When I click the submit button, nothing happens.
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne">
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber">
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="golf.js"></script>
And the javascript:
var round = 0;
var scoreShayne = 0;
var scoreAmber = 0;
function tallyScore() {
round += 1;
document.getElementById(round).innerHTML = "Round: " + round;
scoreShayne += document.getElementById("inputShayne").value;
scoreAmber += document.getElementById("inputAmber").value;
document.getElementById(shayne).innerHTML = scoreShayne;
document.getElementById(amber).innerHTML = scoreAmber;
}
some recommandations in this code, just to see ;)
// global values
var round = 0
, scoreShayne = 0
, scoreAmber = 0
;
// use constants to prevent the JS interpreter from recalculating each call
const hmi_round = document.getElementById('round')
, hmi_shayne = document.getElementById('shayne')
, hmi_amber = document.getElementById('amber')
, hmi_inputShayne = document.getElementById('inputShayne')
, hmi_inputAmber = document.getElementById('inputAmber')
;
function tallyScore()
{
hmi_round.textContent = "Round: " + ++round; // ++round is a direct increment (different from round++ )
hmi_shayne.textContent = scoreShayne += hmi_inputShayne.valueAsNumber; // HTML5 as valueAsNumber
hmi_amber.textContent = scoreAmber += hmi_inputAmber.valueAsNumber; // instead of parseInt(hmi_inputAmber.value)
hmi_inputShayne.value = "0"; // reset values for the next round
hmi_inputAmber.value = "0";
}
<div class="container body-content">
<div class="row mt-4 justify-content-center">
<div class="col-auto">
<img class="img-fluid logo" alt="cards" src="img/cards.png">
</div>
<div class="col-4">
<h1>Shayne's Golf Tally</h1>
</div>
</div>
<div class="row justify-content-center text-center round">
<div class="col">
<h2 id="round">Round: 0</h2>
</div>
</div>
<div class="row justify-content-center text-center mt-3">
<div class="col-3">
<h3 class="names">Shayne</h3>
<h3 id="shayne">0</h3>
</div>
<div class="col-3">
<h3 class="names">Amber</h3>
<h3 id="amber">0</h3>
</div>
</div>
<div class="row justify-content-center">
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputShayne" type="number"min="0" value="0"> <!-- don't forget to set the type -->
</div>
<div class="col-3 centered input-spacing">
<input class="form-control input-form" id="inputAmber" type="number" min="0" value="0"> <!-- don't forget to set the type -->
</div>
</div>
<div class="row justify-content-center text-center mt-4">
<div class="col">
<button class="btn btn-primary" onclick="tallyScore()">Submit</button>
</div>
</div>
</div>
So, I'd like to fire a function only once on scroll.
The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.
It does work... but it works whenever I scroll! :(
I don't think it's difficult, but.. I didn't get to make it work so far.
here's my code:
$(window).scroll(function(){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);
});
CSS:
.sr-icons.scrolled {
opacity: 0.2;
}
and HTML:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-superpowers text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Sturdy Templates</h3>
<p class="text-muted mb-0">Our templates are updated regularly so they don't break.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-paper-plane text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Ready to Ship</h3>
<p class="text-muted mb-0">You can use this theme as is, or you can make changes!</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-newspaper-o text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">Up to Date</h3>
<p class="text-muted mb-0">We update dependencies to keep things fresh.</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5 mx-auto">
<i class="fa fa-4x fa-cog fa-spin text-primary mb-3 sr-icons"></i>
<h3 class="mb-3 text-dark">I Work For You</h3>
<p class="text-muted mb-0">Just think about any website you want to have, I will make that a reality.</p>
</div>
</div>
</div>
</div>
If I understood you, you can do something like :
$(window).on('scroll', function(){
if($(this).scrollTop() > 950) {
$('.sr-icons').toggleClass('scrolled', true);
$(window).off('scroll');
}
});
As said in other comments, you should check wether you want $(this).scrollTop() > 950 or $(this).scrollTop() < 950
Edit : A more proper solution would be to remove only that specific handler, so you can attach other events on scroll if you ever want to :
var handler = function(){
if($(this).scrollTop() > 950) {
$('.sr-icons').toggleClass('scrolled', true);
$(window).off('scroll', handler);
}
}
$(window).on('scroll', handler);
You can use a flag variable, initially 0, then increment on scroll.
Then you can add check as
var flag=0;
$(window).scroll(function(){
if(flag==0){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);
flag++;
}
});