I'm trying to get the progress bar animation to run when I click the .trigger. I'm getting the data-percentage value in the logs but the animation isn't running. It works without using $(this).closest() but I cannot figure out why the animation isn't running with my current JS code.
$(".list").on("click", ".trigger", function() {
var e = $(this).closest(".item");
$(".progressbar").attr("data-percentage", e.find("#percent").text());
var t = e.find("#percent").text();
return (
$(".progressbar").each(function() {
var n = e,
r = t;
console.log(t),
parseInt(n.data("percentage"), 10) < 2 && (r = 2),
n.children(".bar").animate({
width: r + "%"
}, 500);
}), !1
);
});
.item {
width: 50px;
height: 50px;
border: 1px solid;
}
.trigger {
height: 30px;
width: 30px;
border: 3px solid blue;
cursor: pointer;
}
.progressbar {
position: relative;
display: block;
height: 10px;
background: #f5f5f5;
}
.bar.money-green {
background: #3cd3ad;
}
.bar {
position: absolute;
display: block;
height: 100%;
background: #fcb31c;
width: 0%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list">
<div class="item">
<div class="trigger">
<p id="percent">22</p>
</div>
</div>
</div>
<div class="progressbar" data-percentage="">
<div class="money-green bar"><span></span></div>
</div>
I updated the code for you. Clean and clear way
You don't need to return in onclick function. And you should use $(this) inside .each to get current index element
$(".list").on("click", ".trigger", function() {
var e = $(this).closest(".item");
var t = e.find("#percent").text();
$(".progressbar").attr("data-percentage", t);
$(".progressbar").each(function() {
$(this).find(".bar").animate({
width: t + "%"
}, 500);
});
});
See the codepen
Related
I am trying to create a div resizer and due to some restrictions, I cannot use jQuery and I am forced to use pure JavaScript for that. In the current state, it works, but it breaks if the div that will have the slider does not have the position set to absolute. Is there a way to solve that issue? Thank you very much.
I am a student learning to write JavaScript/CSS/HTML code and so I am relatively new to this.
const BORDER_SIZE = 4;
const panel = document.getElementById("left_panel");
const StationaryPanel = document.getElementById("right_panel");
const parent = document.getElementById("parent");
const label1 = document.getElementById("lb1");
const label2 = document.getElementById("lb2");
const label3 = document.getElementById("lb3");
let m_pos;
function resize(e) {
const dx = m_pos - e.x;
m_pos = e.x;
lb1.innerHTML = panel.offsetWidth;
lb2.innerHTML = StationaryPanel.offsetWidth;
lb3.innerHTML = parent.offsetWidth;
//lb3.innerHTML = document.body.clientWidth;
panel.style.width = (parseInt(getComputedStyle(panel, '').width) + dx) + "px";
StationaryPanel.style.width = (parent.offsetWidth - panel.offsetWidth) + "px";
//StationaryPanel.style.width = (document.body.clientWidth - panel.offsetWidth) + "px";
}
panel.addEventListener("mousedown", function(e) {
if (e.offsetX < BORDER_SIZE) {
m_pos = e.x;
if (panel.style.width < panel.minWidth || panel.style.width > panel.maxWidth) {
return;
}
document.addEventListener("mousemove", resize, false);
}
}, false);
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", resize, false);
}, false);
#left_panel {
position: absolute;
width: 96px;
min-width: 50px;
max-width: 500px;
padding-left: 4px;
height: 100%;
right: 0;
background-color: #f0f0ff;
}
#left_panel::before {
content: " ";
background-color: #ccc;
position: absolute;
left: 0;
width: 4px;
height: 100%;
cursor: w-resize;
}
#right_panel {
width: 1000px;
height: 100%;
background-color: #ff0000;
}
#parent {
width: 800px;
}
<body>
<div id="parent">
<div id="left_panel">
This is the left div, the one that moves
</div>
<div id="right_panel">
This is the right div, the one that stays the same
</div>
</div>
<p id="lb1"></p>
<p>This is the left panel width ^</p>
<p id="lb2"></p>
<p>This is the right panel width ^</p>
<p id="lb3"></p>
<p>This is the parent width ^</p>
</body>
Here is the simplest way you can do it using CSS if that is not an issue here no need to use JS for this feature, it is just an example but it definitely help you on your way.
#MainDiv {
display: flex;
flex-direction: row;
height: 200px;
width: 400px;
border: 1px solid red;
position: relative;
}
#leftDiv {
width: 200px;
border: 1px solid yellow;
}
#rightDiv {
border: 2px solid;
padding: 20px;
width: 300px;
/* you can make this vertical/auto to make resize both ways */
resize: horizontal;
overflow: auto;
}
<div id="MainDiv">
<div id="leftDiv">
Left Div
</div>
<div id="rightDiv">
Right Div
</div>
</div>
Here is it in Javascript:
var h = $('#handle'),
l = $('#left'),
r = $('#right'),
w = $('body').width() - 18;
var isDragging = false;
h.mousedown(function(e) {
isDragging = true;
e.preventDefault();
});
$(document).mouseup(function() {
isDragging = false;
}).mousemove(function(e) {
if (isDragging) {
l.css('width', e.pageX);
r.css('width', w - e.pageX);
}
});
#left,
#right {
border: 1px solid #aaa;
float: left;
height: 100px;
width: 48%;
}
#handle {
background: #000;
float: left;
height: 100px;
margin: 1px;
/* Slider width */
width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="left"> Left</div>
<div id="handle"></div>
<div id="right">Right</div>
My Code:
window.addEventListener('scroll', scrollWhere);
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
var idScroll = $('.me').offset().top;
var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
I want to add a class when the scroll is past a certain point and remove it when is smaller than that certain point.
Get your idScroll value outside scrollWhere function as because it re-initiate calculation again and again and returns different values each time as because it has a fixed position. check below snippet for reference.
window.addEventListener('scroll', scrollWhere);
var idScroll = $('.me').offset().top;
function scrollWhere(e) {
var windowScroll = $(window).scrollTop();
//var height = $("#half-who").height();
if (windowScroll > idScroll) {
$('.me').addClass('me-fixed');
} else {
$('.me').removeClass('me-fixed');
}
}
.container {
height: 300vh;
width: 100%;
background-color: grey;
padding: 0;
margin: 0;
}
.content {
height: 100px;
width: 100%;
background-color: cyan;
}
.me {
height: 50px;
width: 100%;
background-color: red;
}
.me-fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content"></div>
<div class="me"></div>
</div>
Here's a simple example to add a class when scroll passing a certain point. Hope you can get an idea. >>> JSFiddle
$(window).scroll(function(){
var winH = $(window).scrollTop();
var ruler = $('.ruler').position().top;
if(ruler < winH){
$('.nav').addClass('me-fixed');
}
else{
$('.nav').removeClass('me-fixed');
}
});
body{
height: 1500px;
}
.nav{
height: 50px;
background: #a1bfbe;
color: #000;
width: 100%;
position: relative;
top: 250px;
text-align: center;
}
.nav.me-fixed{
background: #c2debf;
}
p{
font-size: 20px;
display: none;
}
.me-fixed p{
display: block;
}
.ruler{
position: fixed;
top: 150px;
border-bottom: 1px solid red;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
<p>
Fixed
</p>
</div>
<div class="ruler">
</div>
Also if you can provide the html and css structure, it will be easy to identify the issue.
my name is Daniel and i'm making a drinking game for school, I want to let a div to become visible when the bar is full (so you know when the bar is full and you win the game), but i have no idea how to do this...
Could you help me out?
HTML:
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
</div>
</div>
CCS:
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
JS:
var jumpsize = 2.77, // %
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
set(topcnt(bar.width()) + jumpsize);
});
set(0);
The reason its not working is because u forgot to put the if statement in the function u run on click. So the if statement only runs once. and on first load it will result in false. To fix your code move the if statement in your Body.onclick.
Next time it would be smart to include the full javascript that is relative to the function.
By looking at the online code i was able to find the issue.
Hope this resolves your issues.
~Yannick
When you hit your target you need to remove the CSS styling of Display = none.
W3 schools page here for some helpful info to help you learn some more.
https://www.w3schools.com/jsref/prop_style_display.asp
The line below inserted when you reach your goal to display should make the bar appear.
document.getElementById("hiddenText").style.display = "block";
I'm not sure you want this, but try this:
var jumpsize = 2.77, // %
width = 0,
body = $("body");
(container = $("#bar")), (bar = container.children("div")), (topcnt = function(
px
) {
return 100 * px / container.width();
}), (set = function(pcnt) {
bar.css({ width: pcnt + "%" });
if(pcnt >= 100) {$('#hiddenText').show();}
});
body
.on("click", ".card1, .card2, .card3, .card4", function() {
width += jumpsize;
set(topcnt(width));
});
set(0);
#bar {
background-color: #F8F8F8 ;
width: 340px;
height: 24px;
margin-right: auto;
margin-left: auto;
}
#bar > div {
margin-top: 30px;
max-width: 334px;
width: 100%;
height: 16px;
background: #9d3349;
position: relative;
top: 4px;
left: 3px;
transition: width 500ms;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-xs-12" style="display: none;" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button class="card1">click me</button>
You are using jQuery so quicker will be:
$('#hiddenText').show();
Edit:
sooo
if($('#bar').children('div').width() >= 334){
$('#hiddenText').show();
}
As You can see the div with progress bar can have max od 334 px. Check if it has it and if yes then show the text. Put this in that click event
Seems to me like you're overcomplicating things a little bit with the percentage calculations. I would just add a variable for the width of the bar that starts at 0 and increase this with the jumpsize on every click. Once this new variable goes over or equals 100 you show the hidden div.
HTML
<div class="col-xs-12" id="hiddenText">
<div id="bar" class="animated bounceInUp">
<div></div>
</div>
</div>
<button id="button">Click me</button>
<div id="showOnComplete">Show me when the bar is full!</div>
CSS
#bar {
width: 340px;
height: 24px;
padding: 4px 3px;
margin: 30px auto 0;
background-color: #f8f8f8;
}
#bar > div {
position: relative;
float: left;
height: 100%;
width: 0;
max-width: 100%;
background: #9d3349;
transition: width 500ms;
}
#button {
margin: 20px auto;
display: block;
}
#showOnComplete {
width: 400px;
padding: 20px;
margin: 20px auto;
background: blue;
color: #fff;
text-align: center;
display: none;
}
JS
(function($) {
var jumpSize = 20, //increased this for the fiddle, so we don't have to click as often
barWidth = 0,
$bar,
$showOnComplete;
$(function() {
$bar = $("#bar").children("div");
$showOnComplete = $("#showOnComplete");
$(document).on("click", "#button", function() {
barWidth += jumpSize;
$bar.width(barWidth + "%");
if (barWidth >= 100) $showOnComplete.show(); //optionally add a setTimeout of 500 here to account for the final transition of the bar
});
});
})(jQuery);
I've made a fiddle for it here.
I have a function that creates a grid of divs that are generated and sent to a container div when the document loads (or when the user resets it). When one hovers over the divs, they highlight (change color). When the user clicks the highlighted div, it changes to black. For some reason, the div that was black reverts back to the original color when I hover over a different div. I'm puzzled as to why that is. Any help or guidance would be greatly appreciated. Here's my jsfiddle example: https://jsfiddle.net/psyonix/1g9p59bx/79/
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).css({
'background-color': '#000000'
});
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
Once you click on a DIV, you should maintain a flag that tells you hover function to stop changing colors
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if ($(this).data("clicked")) return; //ADDED LINE
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).data("clicked", true); //ADDED LINE
$(this).css({
'background-color': '#000000'
});
});
it changed because of hover function.
https://jsfiddle.net/1g9p59bx/82/
$('.square')
.height(squareSize)
.width(squareSize)
.hover(
function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#FFFFFF'
});
}, function () {
if($(this).hasClass('active'))return;
$(this).css({
'background-color': '#C8C8C8'
});
})
.click(
function () {
$(this).addClass('active');
$(this).css({
'background-color': '#000000'
});
});
For some reason, the div that was black reverts back to the original color when I hover over a different div
Not quite. It reverts to the original colour when you leave the current div, because that's what you tell it in the second argument to $('.square').hover. You would need to remember that the square was clicked, and build extra logic into the "unhover" function.
Fortunately, there is an easier way: use CSS. Note the very bottom of the CSS definitions.
var d = ("<div class='square'></div>");
function createGrid(numSquares) {
var area = $('#g_area');
var squareSize = Math.floor(area.innerWidth() / numSquares);
for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
area.append(d);
}
$('.square')
.height(squareSize)
.width(squareSize)
.click(function () {
$(this).addClass('clicked');
});
}
function resetGrid() {
$(".square").remove();
}
$(document).ready(function () {
createGrid(8);
$("#button").click(function () {
var numSquares = prompt("Please enter the size");
resetGrid(numSquares);
createGrid(numSquares);
});
});
.container {
background-color: #252525;
width: 600px;
height: 700px;
margin: 0 auto;
border-radius: 5px;
}
.inner {
background-color: #C8C8C8;
position: absolute;
width: 580px;
height: 600px;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
border-radius: 5px;
}
.knob {
background-color: #575759;
width: 60px;
height: 60px;
border-radius: 60px;
}
#left_b {
position: absolute;
margin-left: 30px;
margin-top: 625px;
margin-bottom: 10px;
}
#button {
position: absolute;
margin-left: 265px;
margin-top: 640px;
margin-bottom: 10px;
}
#right_b {
position: absolute;
margin-left: 510px;
margin-top: 625px;
margin-bottom: 10px;
}
#g_area {
background-color: #C8C8C8;
position: relative;
width: 580px;
height: 600px;
margin-right: auto;
margin-left: auto;
margin-top: auto;
border-radius: 5px;
overflow: hidden;
}
.square {
display: inline-block;
position: relative;
margin: 0 auto;
}
.highlight {
background-color: #FFFFFF;
outline: #C8C8C8;
outline: 1px;
outline: solid;
margin: 0 auto;
}
.square {
background-color: #C8C8C8;
}
.square:hover {
background-color: #FFFFFF;
}
.square.clicked {
background-color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="outer">
<div class="inner">
<div id="g_area"></div>
</div>
<div class="knob" id="left_b"></div>
<div id="button">
<button>RESET</button>
</div>
<div class="knob" id="right_b"></div>
</div>
</div>
</body>
I have created a lightbox in javascript and I have placed inside it a progress bar that I have also created it in javascript. My problem is that when I was trying to insert a second progress bar inside my lightbox only the first works. Any idea how to fix this?
this is my jsfiddle :http://jsfiddle.net/QHMKk/3/
and my code is this:
my javascript is:
function show() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler = document.getElementById("filler"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
function start() {
var stepSize = 50;
setTimeout((function() {
var filler2 = document.getElementById("filler2"),
percentage = 0;
return function progress() {
filler.style.height = percentage + "%";
percentage +=1;
if (percentage <= 100) {
setTimeout(progress, stepSize);
}
}
}()), stepSize);
}
this is my html:
OPEN
<div id="light" class="white_content_stats">
<div class="prog">
<div id="filler" class="filler"></div>
</div>
</br>
<div class="prog2">
<div id="filler2" class="filler2"></div>
</div>
<a href = "javascript:void(0)" onclick = " document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'; ">
</br>CLOSE</a>
and this is my CSS:
.black_overlay_stats{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 50%;
z-index:1001;
-moz-opacity: 0.6;
opacity:.70;
filter: alpha(opacity=70);
}
.white_content_stats {
display: none;
position:fixed;
top: 15%;
width: 300px;
padding: 30px;
margin-left:10px;
background-color:#F2F2F2;
border-radius: 0px;
box-shadow: 0px 0px 0px 20px rgba(0,0,0,0.6);
z-index:1002;
}
.prog {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
.prog2 {
height: 100px;
width: 30px;
border: 1px solid white;
position: relative;
}
.filler2 {
height: 0%;
width: 30px;
position: absolute;
bottom: 0;
background-color: grey;
}
You define 2 functions with the same name start, so the second will be used and only it will be run, hence you can see only 1 progress bar works. You can modify the function start to make it accept an argument of id like this:
function start(id) {
//...
var filler = document.getElementById(id)
//...
}
Then call both start('filler') and start('filler2'):
OPEN
Updated Demo.
Note that you should not use inline event property.