Uploading bar is not syncing with actual progress. what should i do? - javascript

Below is my code:
<script type="text/javascript">
window.onload = function ()
{
hideProgress();
}
function showProgress()
{
$(function ()
{
$("#dialog-modal").dialog(
{
height: 70,`
width: 450,
modal: true,
resizable: false
});
$(".ui-dialog-titlebar").hide();
$("#progressbar").progressbar({
value: 0
});
});
updateProgessBar();
}
function hideProgress()
{
$("#dialog-modal").dialog('close');
}
function updateProgessBar() {
var currentProgress = $("#progressbar").progressbar("value");
currentProgress = currentProgress + 2;
$("#progressbar").progressbar("value", currentProgress);
if (currentProgress < 10) {
var temp = setTimeout("updateProgessBar();", 500);
}
else if (currentProgress >= 10 && currentProgress < 30) {
var temp = setTimeout("updateProgessBar();", 1000);
}
else if (currentProgress >= 30 && currentProgress < 45) {
var temp = setTimeout("updateProgessBar();", 1500);
}
else if (currentProgress >= 45 && currentProgress < 60) {
var temp = setTimeout("updateProgessBar();", 2000);
}
else if (currentProgress >= 60 && currentProgress < 80) {
var temp = setTimeout("updateProgessBar();", 2500);
}
else if (currentProgress >= 80 && currentProgress < 95) {
var temp = setTimeout("updateProgessBar();", 3000);
}
else if (currentProgress >= 95) {
}
}
function CheckValidation() {
if (Page_ClientValidate()) {
// Call Your custom JS function and return value.
showProgress();
return true;
}
else {
return false;
}
}
</script>

Related

I do not know how to limit the time in between calling my function

//let screenWidth = window.screen.width;
//let screenHeight = window.screen.height;
let screenWidth = 800;
let screenHeight = 600;
let assets = {};
let frames = 60;
let score = 0;
let lives = 3;
let player;
// let enemie;
//let enemies;
let bullet;
//let bullets;
let powerup = 0;
let gameOver = true;
function drawScoreBoard() {
textSize(20);
fill('white');
text(`Score: ${score} / Lives: ${lives}`, 20, 40);
}
function preload() {
assets.player = loadImage('assets/Player.png');
assets.enemie = loadImage('assets/Enemie.png');
assets.bulletRight = loadImage('assets/Bullet_Right.png');
assets.bulletLeft = loadImage('assets/Bullet_Left.png');
assets.bulletUp = loadImage('assets/Bullet_Up.png');
assets.bulletDown = loadImage('assets/Bullet_Down.png');
}
function setup() {
bullets = createGroup();
enemies = createGroup();
assets.player.resize(30, 30);
assets.enemie.resize(30, 30);
assets.bulletRight.resize(30, 30);
assets.bulletLeft.resize(30, 30);
assets.bulletUp.resize(30, 30);
assets.bulletDown.resize(30, 30);
createCanvas(screenWidth, screenHeight);
}
function createBullet(){
let numList = [0, 90, 180, 270, 360];
let bulletDirection = [assets.bulletLeft, assets.bulletUp, assets.bulletRight, assets.bulletDown];
let randomdirection = numList[Math.floor(Math.random() * numList.length)];
let bullet = createSprite(bulletDirection[(Math.round(player.getDirection()/90))]);
enemie.centerX = random(0, screenWidth);
enemie.setSpeed(random(1,10));
enemie.setDirection(randomdirection);
enemie.setCollider("circle");
bullets.add(bullet);
}
function createPlayer(){
player = createSprite(assets.player);
player.bottom = screenHeight - 20;
player.centerX = screenWidth / 2;
}
function shoot(amountofbulletstobeshot) {
let bulletDirection = [assets.bulletLeft, assets.bulletUp, assets.bulletRight, assets.bulletDown];
let bullet = createSprite(bulletDirection[Math.abs(((Math.round(player.getDirection()/90))))]);
bullets.add(bullet);
// bullet.direction = player.direction;
bullet.centerX = player.centerX;
bullet.centerY = player.centerY;
bullet.setVelocity(11, player.getDirection());
// console.log('The players current direction right now is: ' + player.getDirection());
}
function shooting() {
if (keyIsDown(KEY.SPACE)) {
if (powerup === 1) {
shoot(3);
}
else {
shoot(1);
}
}
if (bullet) {
if (bullet.centerX[1] === screenWidth) {
bullets.remove(bullet);
}
}
}
function updateplayer() {
//movement
if (keyIsDown) {
if (keyIsDown(KEY.RIGHT_ARROW)) {
player.setVelocity(6, 0);
}
if (keyIsDown(KEY.LEFT_ARROW)) {
player.setVelocity(6, 180);
}
if (keyIsDown(KEY.UP_ARROW)) {
player.setVelocity(6, 270);
}
if (keyIsDown(KEY.DOWN_ARROW)) {
player.setVelocity(6, 90);
}
}
//dont go offscreen
if (player.left < 0) {
player.left = 0;
}
if (player.right > screenWidth) {
player.right = screenWidth;
}
if (player.top < 0) {
player.top = 0;
}
if (player.bottom > screenHeight) {
player.bottom = screenHeight;
}
enemies.overlap(player, HandlePlayerEnemieCollision);
//end up updateplayer
}
function updateEnemie() {
if (frameCount % 1 === 0) {
let directions = ["LEFT", "RIGHT", "UP", "DOWN"];
let direction = random(directions);
if (direction === "LEFT" && enemie.left > 0) {
enemie.centerX -= 5;
}
if (direction === "RIGHT" && enemie.right < screenWidth) {
enemie.centerX += 5;
}
if (direction === "UP" && enemie.top > 0) {
enemie.centerY -= 5;
}
if (direction === "DOWN" && enemie.bottom < screenHeight) {
enemie.centerY += 5;
}
}
}
function createEnemie() {
let directions = [270, 180, 0, 90];
direction = directions[(Math.floor(Math.random() * 5))];
enemies.overlap(bullets, HandleEnemieBulletCollision);
if (frameCount % 60 === 0) {
enemie = createSprite(assets.enemie);
enemie.centerX = Math.floor(Math.random() * 300) + 100;
enemie.centerY = Math.floor(Math.random() * 300) + 100;
enemie.setVelocity(Math.floor(Math.random() * 5) + 1, direction);
enemies.add(enemie);
}
}
function HandleEnemieEdgeCollision(enemie, edge) {
if (enemie.centerY === screenWidth) {
enemie.remove();
}
}
function HandleEnemieBulletCollision(enemie, bullet) {
enemie.remove();
bullet.remove();
score++;
}
function HandlePlayerEnemieCollision(player, enemie) {
enemie.remove();
player.remove();
lives--;
if (lives === 0) {
gameOver = true;
}
createPlayer();
}
/*
function updateEnemie() {
player.setVelocity(7, player.direction);
}
*/
function cheat() {
score = (score + 1000000);
lives = (lives + 1000000);
cheats = 'on';
if (cheats === 'on') {
textSize(50);
fill('yellow');
text('CHEATS ACTIVATED', 400, 300);
}
}
/*
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds) {
break;
}
}
}
*/
function drawGameOverScreen() {
background("black");
textAlign(CENTER);
fill("white");
textSize(40);
text("WELCOME", screenWidth/2, screenHeight/2);
textSize(20);
text("Press SPACE to play!", screenWidth/2, screenHeight/2 + 100);
if (keyWentDown(KEY.SPACE)){
resetGame();
gameOver = false;
}
}
function resetGame(){
score = 0;
lives = 3;
createPlayer();
}
function drawGame() {
background('lightgreen');
drawScoreBoard();
updateplayer();
drawSprites();
shooting();
// updateEnemie();
createEnemie();
}
function draw() {
if (gameOver === true) {
drawGameOverScreen();
} else {
drawGame();
}
}
There is my code, I want to add a time limit for how many seconds it takes until you can shoot again, right now you can just spam and make all of the bullets go in a straight line I need to wait before I let the player shoot again, Thanks! This will help out allot and i neede this in as few minutes as possible.
Use a flag to know when shooting is enabled and disabled. After each shot disable the ability to shoot. Then use a setTimeout to enable the shooting after a certain amount of time.
let shootingEnabled = true;
function tempDisableShooting(duration) {
shootingEnabled = false;
setTimeout(() => {
shootingEnabled = true;
}, duration);
}
function shooting() {
if (shootingEnabled && keyIsDown(KEY.SPACE)) {
if (powerup === 1) {
shoot(3);
} else {
shoot(1);
}
tempDisableShooting(1000); // Disable shooting for 1 second.
}
if (bullet) {
if (bullet.centerX[1] === screenWidth) {
bullets.remove(bullet);
}
}
}
Add property to track the disabled state of the shooting and a constant for the delay time in milliseconds.
let shootDisabled = false;
const shootDelayMS = 300;
Update your shoot function to only shoot if shootDisabled == false, update the shootDisabled to true after each shot, and to triggers a setTimeout which waits shootDelayMS milliseconds before setting shootDisabled to false again.
function shoot(amountofbulletstobeshot) {
if (shootDisabled == false) {
let bulletDirection = [assets.bulletLeft, assets.bulletUp, assets.bulletRight, assets.bulletDown];
let bullet = createSprite(bulletDirection[Math.abs(((Math.round(player.getDirection()/90))))]);
bullets.add(bullet);
bullet.centerX = player.centerX;
bullet.centerY = player.centerY;
bullet.setVelocity(11, player.getDirection());
shootDisabled = true;
setTimeout(() => shootDisabled = false, shootDelayMS );
}
}
one way is the hold the data in two variables: is_shooting, shot_reset.
if(is_shooting){
if(shot_reset>=x){ //x is frame count till able to shoot again)
shot_reset==0;
is_shooting=false;
}else{
shot_reset++
}
}

Javascript injection add item to basket

I am trying to run this script which effectively goes through a json list that contains url and a size to go to the link set add the item to cart based on size, check if it is in stock or already added. I have got the link and the size searching algorithms work independently but together they seem to not work and I can't figure out why?
var foundall = false;
var copItems = [{
"url": "https://www.supremenewyork.com/mobile/#products/303518/22745",
"size": "Medium"
}];
for (var i = 0; i < copItems.length; i++) {
AddToCart(copItems[i], function(carted) {
console.log(carted);
});
}
function AddToCart(item, callback) {
location.href = item.url;
var counter = 0;
var waitToAppear = setInterval(function() {
if (document.querySelector('#cart-update > span')) {
if (document.querySelector('#cart-update > span').innerHTML == 'remove') {
return callback("failed");
clearInterval(waitToAppear);
} else if (document.querySelector('#cart-update > span').innerHTML == 'sold out') {
copSelectSize(size, function(data) {
return callback(data);
clearInterval(waitToAppear);
});
} else if (document.querySelector('#cart-update > span').innerHTML == 'add to basket') {
copSelectSize(item.size, function(Sized) {
return callback("failed");
clearInterval(waitToAppear);
})
} else {
counter += 1;
if (counter == 5) {
return callback("failed");
clearInterval(waitToAppear);
}
}
}
}, 100);
}
function copSelectSize(size, callback) {
var counter = 0;
var checkExist = setInterval(function() {
if (document.getElementById('size-options').length) {
var sizes = document.getElementById('size-options').options;
var size_id;
for (var i = 0; i < sizes.length; i++) {
if (sizes[i].innerText == '\(Size)') {
size_id = i;
document.getElementById('size-options').selectedIndex = size_id;
document.getElementById('size-options-link').innerHTML = '\(Size)';
if (document.querySelector('#cart-update > span').innerHTML != 'remove') {
document.querySelector('#cart-update > span').click();
return callback("success");
clearInterval(checkExist);
}
var checkExista = setInterval(function() {
if (document.querySelector('#cart-update > span').innerHTML == 'remove') {
checkExista = '';
}
clearInterval(checkExista);
}, 100);
break;
}
}
}
counter += 1;
if (counter == 5) {
return callback("failed");
clearInterval(checkExist);
}
}, 200);
}

Countdown timer not stopping at 0

For some reason, my timer does not stop when the time reaches 0. JSFiddle. Here is the constructor for the countdown timer I made:
var Timer = function(opts) {
var self = this;
self.opts = opts || {};
self.element = opts.element || null;
self.minutes = opts.minutes || 0;
self.seconds = opts.seconds || 30;
self.start = function() {
self.interval = setInterval(countDown, 1000);
};
self.stop = function() {
clearInterval(self.interval);
};
function countDown() {
if (self.minutes == 0 && self.seconds == 0) {
self.stop();
}
self.seconds--;
if (self.seconds <= 0) {
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
self.element.textContent = self.minutes + ' : ' + self.seconds;
}
};
and here is my usage:
HTML:
<div id="timer"></div>
JavaScript:
var myTimer = new Timer({
minutes: 0,
seconds: 10,
element: document.querySelector('#timer')
});
myTimer.start();
Change your countdown function to
function countDown() {
self.seconds--; //Changed Line
if (self.minutes == 0 && self.seconds == 0) {
self.stop();
}
if (self.seconds < 0) { //Changed Condition. Not include 0
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
self.element.textContent = self.minutes + ' : ' + self.seconds;
}
http://jsfiddle.net/8d5LLeoa/3/
You just need to rearrange your countdown function a bit. It will never be zero when it hits your code that checks for a zero value. The code below works.
function countDown() {
self.seconds--;
self.element.textContent = self.minutes + ' : ' + self.seconds;
if (self.minutes === 0 && self.seconds === 0) {
self.stop();
return;
}
if (self.seconds <= 0) {
self.seconds = 59;
self.minutes--;
}
if (self.seconds <= 9) { self.seconds = '0' + self.seconds; }
}
};

My slider doesn't work as it should after viewing 3 "screens"

I'm trying to build slider and in the first 3 "screens" it work and in the last one is doesn't. Also, is there a way to make the slider to slide and not just to show up?
the js code:
var oldnum = 0
var screen = 1;
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
$("#left_arrow").click(function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
jwerty.key('arrow-right', function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
jwerty.key('arrow-left', function () {
screen--;
if (screen <= 1) {
$("#left_arrow").hide();
screen = 1;
} else {
gotoleft(screen);
}
});
function gotoright(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num - 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
function gotoleft(num) {
if (num <= 0 && num >= 4) {
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {});
} else {
oldnum = num + 1;
$("#b_" + num).show().animate({
"opacity": 1
}, 400, function () {
$("#b_" + oldnum).hide().css({
"opacity": 0
});
});
}
}
here is the full code with the html and css:
http://jsfiddle.net/k6xdq/1/
I want that it will work like http://tobiasahlin.com/spinkit/
I think you should check if screen is == 4 before you ++ it.
Right now you go from 3 to 4 then go to an if statement that only hides the arrow.
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
} else {
gotoright(screen);
}
});
What you want is to gotoright() and if screen is >= 4, hide() it.
$("#right_arrow").click(function () {
screen++;
if (screen >= 4) {
$("#right_arrow").hide();
screen = 4;
gotoright(screen);
} else {
gotoright(screen);
}
});

clearInterval is not clearing

Take a look at the function below, It purpose is to change the button text
to "Abort", "Abort 0", "Abort 1" and so on.
Once the counter reaches 10 another function should be executed, but if
the button is clicked, the counter should stop, and the button text should return
to it's original value ("Sync DB").
It seems I'm trying to clear out the interval in a wrong way.
Any assistance will be appreciated.
function sync_database(abort)
{
if (abort == true) { sync_db_btn.innerHTML = "Sync DB"; return false }
sync_db_btn.innerHTML = "Abort"
var i = 0;
sync_db_btn.addEventListener("click", function() { sync_database(true) } );
var x = setInterval(function() {
if (abort == true) {
clearInterval(x);
}
if (i < 10) {
sync_db_btn.innerHTML = "Abort " + i++;
}
}, 1000);
}
var x;
sync_db_btn.addEventListener("click", function() {
sync_database(true);
clearInterval(x);
} );
function sync_database(abort)
{
if (abort == true) { sync_db_btn.innerHTML = "Sync DB"; return false }
sync_db_btn.innerHTML = "Abort"
var i = 0;
x = setInterval(function() {
if (i < 10) {
sync_db_btn.innerHTML = "Abort " + i++;
}
}, 1000);
}
I think you need something like this:
var sync_db_btn = document.getElementById('but'),
abortSync = -1,
interval,
sync_database = function () {
var i = 0;
abortSync *= -1;
if (abortSync < 0) {
sync_db_btn.innerHTML = 'Sync DB';
clearInterval(interval);
return false;
}
sync_db_btn.innerHTML = 'Abort';
interval = setInterval(function () {
if (i < 10) {
sync_db_btn.innerHTML = 'Abort ' + i++;
} else {
sync_db_btn.innerHTML = 'Sync DB';
clearInterval(interval);
abortSync = -1;
}
}, 1000);
};
sync_db_btn.addEventListener('click', sync_database);
A live demo at jsFiddle.

Categories