Javascript with jQuery for slider. Strange loop - javascript

This is a script that I'm using for a slider. In this slider I've 2 button left and right for visit the slides. I've used jQuery and a bit of Javascript for do this. I'm using a button for play/pause but after the 3rd time the slider crash and it goes really fast.
The button
<input type="button" class="pausa" value="PAUSE" />
The script
$(document).ready(function(){
var one = "label#arrow-";
var x = 2;
var y = 0;
var two = ".arrows";
function clickin() {
if(jQuery('.pausa').data('clicked')) {
jQuery('.pausa').click(function(){
$(this).data('clicked', false);
$(this).val('PAUSE');
return setTimeout(clickin, 4000);
});
}
else {
while ((x != 7) && (y == 0)) {
$(one + x + two).trigger('click');
x++;
if (x != 7)
return setTimeout(clickin, 4000);
}
if (x == 7) {
y = 1;
x = 5;
}
while ((x != 0) && (y == 1)) {
$(one + x + two).trigger('click');
x--;
if (x != 7)
return setTimeout(clickin, 4000);
}
if (x == 0) {
y = 0;
x = 2;
return setTimeout(clickin, 4000);;
}
}
}
setTimeout(clickin, 4000);
jQuery('.pausa').click(function(){
$(this).data('clicked', true);
$(this).val('PLAY');
return clickin();
});
});

I've fixed it:
You can check the complete code here
$(document).ready(function(){
var one = "label#arrow-";
var two = ".arrows";
var x = 2; //Value of the button
var point = 0; //Check if you are pressing for play or pause
function clickin() {
if(point % 2)
$('.pausa').val('PLAY'); //Rotation Pause
else
$('.pausa').val('PAUSA'); //Rotation Play
if(!(point % 2)) //If it's in Play (Pause for button)
{
$(one + x + two).trigger('click');
x++;
if(x == 7)
x = 1;
return setTimeout(clickin, 4000)
}
else return 1; //If it's in Pause (Play for button)
}
setTimeout(clickin, 4000);
jQuery('.pausa').click(function(){ //Waiting input click
point++;
return clickin()
});
});

Related

jQuery plugin that bind mousedown prevent click in client code

I have plugin jQuery-splitter that bind to document.documentElement:
$(document.documentElement).bind('mousedown.splitter touchstart.splitter', function(e) {
if (splitter_id !== null) {
current_splitter = splitters[splitter_id];
$('<div class="splitterMask"></div>').css('cursor', current_splitter.children().eq(1).css('cursor')).insertAfter(current_splitter);
current_splitter.settings.onDragStart(e);
}
}).bind('mouseup.splitter touchend.splitter touchleave.splitter touchcancel.splitter', function(e) {
if (current_splitter) {
$('.splitterMask').remove();
current_splitter.settings.onDragEnd(e);
current_splitter = null;
}
}).bind('mousemove.splitter touchmove.splitter', function(e) {
if (current_splitter !== null) {
var limit = current_splitter.limit;
var offset = current_splitter.offset();
if (current_splitter.orientation == 'vertical') {
var pageX = e.pageX;
if(e.originalEvent && e.originalEvent.changedTouches){
pageX = e.originalEvent.changedTouches[0].pageX;
}
var x = pageX - offset.left;
if (x <= current_splitter.limit) {
x = current_splitter.limit + 1;
} else if (x >= current_splitter.width() - limit) {
x = current_splitter.width() - limit - 1;
}
if (x > current_splitter.limit &&
x < current_splitter.width()-limit) {
current_splitter.position(x, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
} else if (current_splitter.orientation == 'horizontal') {
var pageY = e.pageY;
if(e.originalEvent && e.originalEvent.changedTouches){
pageY = e.originalEvent.changedTouches[0].pageY;
}
var y = pageY-offset.top;
if (y <= current_splitter.limit) {
y = current_splitter.limit + 1;
} else if (y >= current_splitter.height() - limit) {
y = current_splitter.height() - limit - 1;
}
if (y > current_splitter.limit &&
y < current_splitter.height()-limit) {
current_splitter.position(y, true);
current_splitter.find('.splitter_panel').
trigger('splitter.resize');
//e.preventDefault();
}
}
current_splitter.settings.onDrag(e);
}
});
And in user code when I use this code the click don't work when I click on splitter (div between panels) it work when I click on the panel.
var counter = 0;
$(document.documentElement).on('click', function(e) {
console.log('x');
var $target = $(e.target);
if ($target.is('.vsplitter, .hsplitter')) {
if (++counter == 2) {
console.log('double click');
$target.parents('.splitter_panel').eq(0).data('splitter').position(20);
counter = 0;
}
} else {
counter = 0;
}
});
When I comment out the $(document.documentElement).bind('mousedown.splitter touchstart.splitter' code I can double click on the splitter. Anybody have a clue why is this happening?
It was caused by .splitterMask div.

Can anyone help me correctly define a function in JS?

I have created a button with HTML and am trying to run a function I programmed with JavaScript. I cannot get the function to work and receive the error message:
reference error: myFunction is not defined
Here is my code. Can anyone help me define this function?
....<button type="button" onclick="myFunction(shot)">...
<script lang="JavaScript">
var shot = Math.random();
if (shot < .001) {
shot = 1;
} else if (shot < .18) {
shot = 2;
} else if (shot < .5) {
shot = 3;
} else if (shot < .84) {
shot = 4;
} else if (shot < .94) {
shot = 5;
} else if (shot < .991) {
shot = 6;
} else {
shot = 7;
};
function myFunction(x) {
if (x === 1) {
console.log("-2");
} else if (x === 2) {
console.log("-1");
} else if (x === 3) {
console.log("0");
} else if (x === 4) {
console.log("+1");
} else if (x === 5) {
console.log("+2");
} else if (x === 6) {
console.log("+3");
} else {
console.log("+4");
}
};
</script>
That is most likely because the script is after your <button> in your HTML. Place it above and everything should be fine.
Because your button is before your script the button doesn't know your function. When you press your button the function ins't defined yet. You have to place your script for the button.
Also it would be better to put type="text/javascript" in your <script> tag.
Your script would be like this:
<script type="text/javascript">
var shot = Math.random();
if (shot < .001) {
shot = 1;
} else if (shot < .18) {
shot = 2;
} else if (shot < .5) {
shot = 3;
} else if (shot < .84) {
shot = 4;
} else if (shot < .94) {
shot = 5;
} else if (shot < .991) {
shot = 6;
} else {
shot = 7;
};
function myFunction(x) {
if (x === 1) {
console.log("-2");
} else if (x === 2) {
console.log("-1");
} else if (x === 3) {
console.log("0");
} else if (x === 4) {
console.log("+1");
} else if (x === 5) {
console.log("+2");
} else if (x === 6) {
console.log("+3");
} else {
console.log("+4");
}
};
</script>
<button type="button" onclick="myFunction(shot)">
I'd do this using jQuery:
var shot;
$(document).ready(function () {
shot = Math.random();
if (shot < 0.001) {
shot = 1;
} else if (shot < 0.18) {
shot = 2;
} else if (shot < 0.5) {
shot = 3;
} else if (shot < 0.84) {
shot = 4;
} else if (shot < 0.94) {
shot = 5;
} else if (shot < 0.991) {
shot = 6;
} else {
shot = 7;
}
});
$("#myButton").click(function () {
var x = shot;
if (x === 1) {
console.log("-2");
} else if (x === 2) {
console.log("-1");
} else if (x === 3) {
console.log("0");
} else if (x === 4) {
console.log("+1");
} else if (x === 5) {
console.log("+2");
} else if (x === 6) {
console.log("+3");
} else {
console.log("+4");
}
});
With your button as so:
<button id="myButton" type="button">Test</button>
Demo here
With this, however, your result is going to be the same per page load unless you do the calculation for 'shot' in the click function!
I believe it is the call to your button onClick method that makes the problem.
<button type="button" onclick="myFunction(shot)">
At that point in code the shot variable is not defined.
You need to first declare the variable before usage. Or better yet remove it from button call and defined it in your myFunction as below:
<script type="text/javascript">
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getShot() {
return getRandomInt(1, 7);
}
function myFunction() {
var x = getShot();
if (x === 1) {
console.log("-2");
} else if (x === 2) {
console.log("-1");
} else if (x === 3) {
console.log("0");
} else if (x === 4) {
console.log("+1");
} else if (x === 5) {
console.log("+2");
} else if (x === 6) {
console.log("+3");
} else {
console.log("+4");
}
};
</script>
You could either put the code before the button
or
Make the script to execute after the DOM loads by using
document.addEventListener("DOMContentLoaded", function(event) {
//put your function here
});
Also, a good practice (separation of concern), is to not have have the function call on the html. Instead you could add an event listener in your javascript.
document.getElementById("myButton").addEventListener("click", function(){
// your function here
});

Multiple instance of object interfering

So, I'm creating a game in HTML/JS (Mostly Jquery).
I got an array of objects initialized at the beginning of the game (when user press P to play).Each object is a falling object (I know it's failing with a boolean named "working"), with "move" method setting a position going from 1 to 22. Each time it move, it show the current div with a number as ID (representing the position), and hide the previous div.
The problem is that, the game work perfectly with only one instance of the Object (so only one cell in the array), but when I try to put few other object, they don't move.
Here is the object constructor :
function flyers(){
this.pos = 0;
this.working = false;
this.jump = 0;
this.interval;
this.move = function(){
if (this.working == true){
if (this.pos == 22)
{
$("#perso21").hide();
this.pos = 0;
this.startWork();
}
checkSave();
if (this.jump == 0)
{ if ((this.pos == 5 && playerPos != 1) || (this.pos == 13 && playerPos != 2) || (this.pos == 19 && playerPos != 3))
{
this.die();
}
if ((this.pos == 4 && playerPos == 1) || (this.pos == 12 && playerPos == 2) || (this.pos == 18 && playerPos == 3))
this.jump = 1;
}
else
{
if (this.pos == 5 || this.pos == 13 || this.pos == 19)
{
score++;
this.jump = 0;
}
$(".score").html("" + score + "");
}
$("#perso" + (this.pos - 1) + "").hide();
$("#perso" + this.pos + "").show(); this.pos++;
}
else
clearInterval(this.interval);
};
this.startWork = function()
{
clearInterval(this.interval);
this.working = true;
this.interval = setInterval(this.move, 1000 - (score / 10 * 100));
}
this.die = function(){
this.working = false;
this.pos = 0;
this.jump = 0;
if (miss < 2)
{
miss++;
}
else
{
quitGame();
}
clearInterval(this.interval);
};
return this;}
And the array initialization :
flyerstab[0] = new flyers();
flyerstab[1] = new flyers();
flyerstab[2] = new flyers();
flyerstab[3] = new flyers();
flyerstab[0].startWork();
The spawner (only possible to have 4 objects falling at the same time)
spawn = setInterval(function()
{
var i;
for (var i = flyerstab.length - 1; i >= 0; i--) {
if (flyerstab[i].working == false)
{
flyerstab[i].startWork();
break;
}
else
console.log(i + " is working");
};
}, 5000 - (score / 10 * 100));
I tried to find why all the day, but I didn't manage to.. Am I constructing them bad ?
Inside of this.interval = setInterval(this.move, 1000 - (score / 10 * 100));, this.move is called with this as the global context. Instead, use
this.interval = setInterval(this.move.bind(this), 1000 - (score / 10 * 100));

Random "spawn" of divs

I'm trying to create a "spawn point" for a div. I have made it work and I have a working collision detector for it. There are two things I wanted to ask regarding my code.
How do I get my code to work with more than one player (window.i). - At the moment, after an hour of fiddling, I've only broken my code. This whole area screws up the collision detector, I have more than one player showing at times, but I'm unable to move.
How do I make it so that it detects the contact before it happens - I've tried working with the "tank's" margin and subtracting it's width, so that before it makes contact it calls an event, but it has been unsuccessful and completely stopped the collision function working.
I'm sorry that it's asking a lot, I really do understand that, but the issues come into eachother and rebound off so I thought it was best I put it all into one question rather than 2 separate ones an hour apart.
function animate() {
var tank = document.createElement("div");
tank.id= "tank";
tank.style.marginLeft="0px";
tank.style.marginTop="0px";
tank.style.height="10px";
tank.style.width="10px";
document.body.appendChild(tank);
x = parseInt(tank.style.marginLeft);
y = parseInt(tank.style.marginTop);
document.onkeydown = function () {
e = window.event;
if (e.keyCode == '37') {
if (x > 0) {
if (collisionDetector() == false) {
x = x - 10;
tank.style.marginLeft = x + "px";
} else {
alert();
}
}
} else if (e.keyCode == '39') {
if (x < 790) {
if (collisionDetector() == false) {
x = x + 10;
tank.style.marginLeft = x + "px";
} else {
alert();
}
}
} else if (e.keyCode == '38') {
if (y > 0) {
if (collisionDetector() == false) {
y = y - 10;
tank.style.marginTop = y + "px";
} else {
alert();
}
}
} else if (e.keyCode == '40') {
if (y < 490) {
if (collisionDetector() == false) {
y = y + 10;
tank.style.marginTop = y + "px";
} else {
alert();
}
}
}
}
}
window.lives = 3;
function playerSpawn() {
window.i = 1;
while (i > 0) {
var player = document.createElement("div");
randMarL = Math.ceil(Math.random()*80)*10;
randMarT = Math.ceil(Math.random()*50)*10;
player.id = "player";
player.style.marginLeft= randMarL + "px";
player.style.marginTop= randMarT + "px";
player.style.height="10px";
player.style.width="10px";
document.body.appendChild(player);
i--;
}
}
function collisionDetector() {
x1 = tank.style.marginLeft;
x2 = player.style.marginLeft;
y1 = tank.style.marginTop;
y2 = player.style.marginTop;
if ((x1 == x2 && y1 == y2)) {
return true;
} else {
return false;
}
}

Moving right immediately pushes div far off screen region

When I attempt to move the div (tank) to the right ONLY in the first "movement command", and only in that direction, I come across in issue whereby my div shoots off a few thousand pixels to the right, way off of the screen region. Was hoping someone would assist me to see why this is.
function animate() {
var tank = document.getElementById("tank");
tank.style.marginLeft="360px";
tank.style.marginTop="440px";
window.xpos = tank.style.marginLeft;
window.ypos = tank.style.marginTop;
window.x = xpos.replace("px","");
window.y = ypos.replace("px","");
document.onkeydown = checkKey;
function checkKey(e) {
e = e || window.event;
if (e.keyCode == '37') {
if (x > 0) {
x = x - 20;
tank.style.marginLeft = x + "px";
}
} else if (e.keyCode == '39') {
if (x < 70) {
x = x + 20;
tank.style.marginLeft = x + "px";
}
} else if (e.keyCode == '38') {
if (y > 0) {
y = y - 20;
tank.style.marginTop = y + "px";
}
} else if (e.keyCode == '40') {
if (y < 440) {
y = y + 20;
tank.style.marginTop = y + "px";
}
}
}
checkKey(e);
}
window.lives = 3;
function destroy() {
if (lives != 0) {
alert("Life Lost!");
lives--;
window.collision == false;
animate();
} else {
alert("Try Again!");
}
}
window.collision = true;
function state() {
if (collision == false) {
window.state = 1;
} else if (collision == true) {
window.state = 0;
}
return state;
}
state();
if (state == 1) {
animate();
} else {
destroy();
}
You think you are doing a math operation but what you really are doing a string concatenation. In Javascript "360"-20 equals 340 because in this case the string is converted to a number and then an arithmetic subtraction is performed with both numeric values, however a different set of rules apply for the plus operator: in this case "360"+20 yields "36020" because the number is converted to a string and then both strings are concatenated.
Do this:
window.x = Number(xpos.replace("px",""));
window.y = Number(ypos.replace("px",""));

Categories