I have some code that detects if the cursor is being dragged left or right which upon doing so, cycles through an image sequence (similar to that of the Hyundai genesis website and its rotating car).
However, evertime the function is called, it creates white space at the bottom of the html page.
Any idea what might be causing this?
Here's the Javascript for loading the image sequence into the array:
var cache = [];
function imgList(base,firstNum,lastNum) {
var imageFunction;
for(var i = firstNum;i <= lastNum; i++) {
imageFunction = new Image();
if(i <=9){ var EXT = '000'}
else if(i <= 99){var EXT = '00'}
else if(i <= 999){var EXT = '0'}
else{var EXT = ''}
imageFunction.src = base + "." + EXT + i + ".png";
cache.push(imageFunction);
console.log(cache.length);
}
}
Here is the Javascript function that is called when the drag event occurs:
var prevX = -1;
var i = 0;
var drgleft = 0;
var drgright = 0;
function sequence(event){
if(prevX == -1){
prevX = event.pageX;
return false;
}
//drag left
if(prevX > event.pageX){
console.log('dragged left');
drgleft++;
if(drgleft == 2){
drgleft = 0;
i--;
if(i < 0){
i = 30; //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result).
}
document.getElementById("TheBigOne").src = cache[i].src; //use console.log(i); as a method of verifying that the code is executing correctly
}
}
else if(prevX < event.pageX){
console.log('dragged right');
drgright++;
if(drgright == 2){
drgright = 0;
i++;
if(i > 30){ //for optimization reasons, input the cache.length value manually (this avoids unnecessary errors in the console and laggy framerate as a result).
i=0;
}
document.getElementById("TheBigOne").src = cache[i].src;
}
}
else{}
prevX = event.pageX
}
Here is the html:
<div class="The_main_event" ondrag="sequence(event)" id="PlaneTime">
<br/>
<img src="file:///C:/Users/Foo/Desktop/Website/Web_aeroplane/Web%20Test.0031.png" id="TheBigOne" class="planepic">
<br/>
</div>
If there is white space around an image, a small gap will appear underneath it as long as it is an inline element. There are a few ways to fix it, but the easiest is changing it to a block level element.
Try this:
.planepic {
display: block;
}
Here's a demo
div {
background: red;
display: inline-block;
border: 1px solid black;
}
img {
max-width: 100px;
}
.block {
display: block;
}
<div><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"></div>
<div><img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" class="block"></div>
Alright I found the solution to the issue was something completely unrelated. There was a bit of javascript which was used to remove the issue of the image ghosting when the image was dragged:
document.getElementById("TheBigOne").addEventListener("dragstart", function(event) {
var crt = this.cloneNode(true);
crt.style.backgroundColor = "";
crt.style.opacity = "0"; /* or visibility: hidden, or any of the above */
document.body.appendChild(crt);
event.dataTransfer.setDragImage(crt, 0, 0);
}, false);
Once I removed this code, the issue ceased to occur...
looking at this code now, I can understand why, I guess I shouldn't stay up so late and code rubbish like this.
Related
I'm trying to do a multi-key press combination validation for a "little game" test im doing.
Basically is a character from Mortal Kombat which I move with ASDW keys... but what happens if I want to duck and block at the same time (would be S + K) for example. And I couldn't make it work :S
Now... not only that, if I'm pressing only S, which will duck. Then I press K (while keeping S pushed) it should block while ducking. If I release the K, it should keep ducking. Is this one possible as well?
How to handle for example combinations for doing skills in javascript?
Like if I press S->D->Punch would do a skill (not pressed at the same time but a sequence)
Is there any possible way of doing all this?
This is my entire code inside a simple HTML so you can see it entirely:
P.S: Look at the comment in the preload image part, i mean, the animations are choppy while trying to move the character from one way to another... why is that? what am i doing wrong?
<! DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
#reptile_wrapper {
top: 120px;
left: 140px;
position:relative;
}
#container {
margin-top: 240px;
margin-left: 470px;
width: 890px;
height: 301px; /* entire one 547px */
background: url("img/bgs/pit_background.png") no-repeat;
background-size: 100%;
}
#pit {
top: 0px;
position: relative;
width: 890px;
height: 300px;
background: url("img/bgs/pit.png") no-repeat;
background-size: 100%;
}
#pit_chain {
position: absolute;
width: 150px;
height: 340px;
background: url("img/bgs/pit_chains.png") no-repeat;
margin-left: 695;
}
</style>
</head>
<body>
<audio src="sounds/mk3thepit.mp3" preload="auto" loop="true" autoplay="true" autobuffer></audio>
<div id="pit_chain">
</div>
<div id="container">
<div id="pit">
<div id="reptile_wrapper">
<img src="img/reptile_idle.gif"/>
</div>
</div>
</div>
<script>
/* Preload all the images and gifs */
function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.onload = function() {
--remaining;
if (remaining <= 0) {
callback();
}
};
img.src = srcs[i];
imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["img", "img/bgs"];
var images = [];
preloadImages(imageSrcs, images, startGame());
/* End of preloading images and gifs */
var duckImages = ["d01", "d02"];
var defaultY = '120px';
reptileIdleAnimation();
function startGame() {
var keys = [];
window.addEventListener("keydown",
function(e){
keys[e.keyCode] = e.keyCode;
var keysArray = getNumberArray(keys);
if(keysArray.toString() == "68"){
$("#reptile_wrapper img").attr('src', 'img/reptile_walk_forward.gif')
.parent().css({left: '+=5px'});
}else if(keysArray.toString() == "17,65"){
// document.body.innerHTML += " Select all!"
}
},
false);
window.addEventListener('keyup',
function(e){
keys[e.keyCode] = false;
reptileIdleAnimation();
},
false);
function getNumberArray(arr){
var newArr = new Array();
for(var i = 0; i < arr.length; i++){
if(typeof arr[i] == "number"){
newArr[newArr.length] = arr[i];
}
}
return newArr;
}
}
</script>
</body>
</html>
Thanks.
You don't necessarily need to rely on jQuery for capturing the keys.
Here is a plain javascript solution
var keys = [];
document.body.innerHTML = "Keys currently pressed: "
window.addEventListener("keydown",
function(e){
keys[e.keyCode] = e.keyCode;
var keysArray = getNumberArray(keys);
document.body.innerHTML = "Keys currently pressed:" + keysArray;
if(keysArray.toString() == "17,65"){
document.body.innerHTML += " Select all!"
}
},
false);
window.addEventListener('keyup',
function(e){
keys[e.keyCode] = false;
document.body.innerHTML = "Keys currently pressed: " + getNumberArray(keys);
},
false);
function getNumberArray(arr){
var newArr = new Array();
for(var i = 0; i < arr.length; i++){
if(typeof arr[i] == "number"){
newArr[newArr.length] = arr[i];
}
}
return newArr;
}
As you can see, detecting multiple keypresses and releases at the same time is not a problem, technically speaking.
I think the only browser culprit here (for plain JS) is e.keyCode. If you want to use jQuery you can rewrite the listener definitions so that they use jQuery.
In this question i asked for a proper but plain image preloader.
See the answer supplied; you can use this code to handle the preloading properly.
Hope that helps!
I'm developing an app for a TV with an old Gecko engine (1.9 I think). I have a container 250x40 and I'd like to fit 2 lines of text in it, and if it's too long then an ellipsis should be shown (just like in the CSS3 property text-overflow: ellipsis).
However:
- I cannot use CSS3,
- I tried using some jQuery plugins, but they just work too slow - you can accually see the text being shrunk down until it fits in the container.
I tried counting letters, but it doesn't work, because they are all different widths.
I tried mapping each letter to its width, and counting the widht of the whole text, but the fact that it's 2 lines screws it all up - I don't know at which point the text will go to the next line.
Any help appreciated.
Slightly based on #Emissary's answer, here's a reasonably performing pair of jQuery plugins that'll handle adding ellipsis on elements that might hold more than one row of text:
(function($) {
$.fn.reflow = function() {
return this.each(function() {
var $this = $(this);
var $parent = $this.parent();
var text = $this.data('reflow');
$this.text(text); // try full text again
var words = text.split(' ');
while ($this.height() > $parent.height() ||
$this.width() > $parent.width()) {
words.pop();
$this.html(words.join(' ') + '…');
}
});
}
$.fn.overflow = function() {
return this.each(function() {
var $this = $(this);
var text = $this.text();
$this.data('reflow', text);
}).reflow();
}
})(jQuery);
The latter one registers elements for reflowing, and the first one actually does the work. The split is there to allow window resizing to automatically reformat the (original) contents of the element, e.g.:
$('.overflow').overflow();
$(window).on('resize', function() {
$('.overflow').reflow();
});
For higher performance, if it matters, you might consider replacing the .pop sequence with something that uses a O(log n) binary partitioning algorithm to find the optimal cut point instead of just removing one word at a time.
See http://jsfiddle.net/alnitak/vyth5/
It's been a while since I bothered with supporting older browsers but this is how I always did it. Should point out that it trims words rather than characters, I always thought half a word looked daft - if you care about typography...
html:
<div id="el">
<span class="overflow">Lorem ipsum dolor sit amet</span>
</div>
css:
#el {
width: 250px;
height: 40px;
overflow: hidden;
}
.overflow {
white-space: nowrap;
}
js / jQuery:
var el = $('#el'),
ov = $('#el .overflow'),
w = el.text().split(' ');
while(ov.width() > el.width()){
w.pop();
ov.html( w.join(' ') + '…' );
}
jsFiddle
This chap here has a solution that uses javascript and no JQuery: http://blog.mastykarz.nl/measuring-the-length-of-a-string-in-pixels-using-javascript/
Done in jsfiddle: http://jsfiddle.net/ZfDYG/
Edit - just read the bit about 2 lines of text: http://jsfiddle.net/ZfDYG/8/
code (for completeness):
String.prototype.visualLength = function() {
var ruler = $("ruler");
ruler.innerHTML = this;
return ruler.offsetWidth;
}
function $(id) {
return document.getElementById(id);
}
var s = "Some text that is quite long and probably too long to fit in the box";
var len = s.visualLength();
String.prototype.trimToPx = function(length,postfix) {
postfix = postfix || '';
var tmp = this;
var trimmed = this;
if (tmp.visualLength() > length) {
trimmed += postfix;
while (trimmed.visualLength() > length) {
tmp = tmp.substring(0, tmp.length-1);
trimmed = tmp + postfix;
}
}
return trimmed;
}
String.prototype.wrapToLength = function(complete) {
if(complete[this.length] == ' ' || complete[this.length - 1] == ' ') return;
var wrapped = this;
var found = false;
for(var i = this.length-1; i > 0 && !found; i--) {
if(this[i] == ' ') {
wrapped = this.substring(0, i);
found = true;
}
}
return wrapped;
}
var firstLine = s.trimToPx(240).wrapToLength(s);
var secondLine = s.substring(firstLine.length, s.length);
$('output').innerHTML= firstLine+' '+secondLine.trimToPx(240,'...');
Html:
<span id="ruler"></span>
<div id="output"></div>
css:
#ruler { visibility: hidden; white-space: nowrap; }
#output {
width: 240px;
height: 50px;
border: 1px solid red;
}
If that is still too slow on your box, I guess it should be possible to speed up the while loop by starting with bigger additions to oscillate towards the final length (kinda like a spring) rather than increment slowly up to it.
My slideshow is suffering from erratic behaviour. it's driven by pagers which the user clicks. when the corresponding pager is clicked, the next image is made visible (opacity/filter) and set as z-index 5 so that it should sit beneath the present image (z-index 10). The current image is then faded-out and finally, the next image is set to current and the image that has faded out is set to z-index 0. However, this only works when clicking back to a previous image (in Chrome, ie is behaving even more strangely.) in the order of images. That is to say,
chrome:
"list_slide1" to "list_slide3" instant jump with no fade
"list_slide3" to "list_slide1" fade behaves correctly
then...
"list_slide1" to "list_slide3" instant jump no fade "list_slide3" to
"list_slide2" fade behaves correctly
or...
"list_slide1" to "list_slide6" instant jump no fade
"list_slide6" to any preceding list-slide1-5 fade behaves correctly
IE:
"list_slide1" to "list_slide3" instant jump with no fade
"list_slide3" to "list_slide1" a second pause then jump
The pagers and the images are dynamically generated from a database (hence the little piece of PHP at the bottom of the code). it contains as many items as are listed for the page in the database.
a few notes:
1) the fade function is my own take on
http://javascript.info/tutorial/animation and has worked just fine in
another slideshow elsewhere on the site.
2) getElementsByClass is from http://www.robertnyman.com and returns
parent and child elements of the requested class in an array (hence
why I call current[0] etc.)
thanks.
<script type="text/javascript">
var pager = document.getElementById('pager1');
var list_pagers = document.getElementById('pagers')
var i = 0;
var next_slide = function(next) {
if (next.className !== 'slide_current') {
if (getElementsByClassName('slide_pending').length === 0) {
var current = getElementsByClassName('slide_current');
next.className = 'slide_pending';
next.style.zIndex = 5;
next.style.opacity = 1;
next.style.filter = 'alpha(opacity = 100)';
next.style.display = 'block';
fade(current[0], linear, 1000);
var fadeSlide = switcher(next, current);
}
}
}
var switcher = function(now, then) {
setTimeout(function() {
now.className = 'slide_current';
now.style.zIndex = 10;
now.style.opacity = 1;
now.style.filter = 'alpha(opacity = 100)';
then[0].className = 'slide_hide';
then[0].style.zIndex = 0;
then[0].style.opacity = 0;
then[0].style.filter = 'alpha(opacity = 0)';
then[0].style.display = 'none';
}, 1001);
}
<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
echo 'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>
Forgive me for not posting an answer to your exact problem, but I would steer away from writing Javascript plugins yourself for the following reasons:
Hundreds of them exist on the Web already, some of which are developed on GitHub as open source, preventing potential issues through collaborative development.
There is no need to reinvent the wheel; simply spend 20 minutes googling javascript sliders and find one that you can customise to your needs.
A couple I like using are 'caroufredsel', which is responsive and offers a few nice features (dynamically adding items, callbacks etc).
Another is 'flexslider'.
SOLUTION:
the problem was that the <div> tags i was trying to fade each contained an <img> and another <div>... the CSS being applied was either working inconsistently/erratically or - as is IE's wont - not-at-all.... The solution was - rather than animating the fade of the parent <div> - animating the respective child components separately. At first, it looked like the IE solution was completely unto itself; in fact, it was insightful to creating a neat, lightweight non-JQuery slideshow for all the browsers. One trade-off was that I had to incorporate all the styling into the element tags rather than a separate CSS. This seemed like the only viable option in this instance by virtue of the nature of the DOM requests being made...
Questions/feedback gratefully received:
<script type="text/javascript">
var list_pagers = document.getElementById('pagers')
var i = 0;
<?php
// dynamically build event for each pager/slide in the show.
for ($k = 1; $k <= $i; $k++) {
echo 'var next_slide' .$k. ' = document.getElementById("list_slide" +' .$k. '); ',
'addEvent(list_pagers.childNodes[' .($k - 1). '], "click", function () {next_slide(next_slide' .$k. ')}); ';
}
?>
var next_slide = function(next) {
if (next.className !== 'slide_current') {
if (navigator.appName === 'Microsoft Internet Explorer') {
//IE 7 & 8
if ((navigator.appVersion.search('MSIE 8.0') >= 1) || (navigator.appVersion.search('MSIE 7.0') >= 1)) {
var current = getElementsByClassName('slide_current')[0].childNodes[0];
var currentBar = getElementsByClassName('slide_current')[0].childNodes[1];
var nextBar = next.childNodes[1];
var nextSlide = next.childNodes[0];
} else {
//IE 9
var current = getElementsByClassName('slide_current')[0].childNodes[1];
var currentBar = getElementsByClassName('slide_current')[0].childNodes[2];
var nextBar = next.childNodes[2];
var nextSlide = next.childNodes[1];
}
// give the next slide and its header (nextBar) a temporary status of zIndex 5/6
nextSlide.style.zIndex = 5;
nextBar.style.zIndex = 6;
nextSlide.style.filter = "alpha(opacity=100)";
nextBar.style.filter = "alpha(opacity=85)";
fade(currentBar, linear, 500); // fade currentBar out
fade(current, linear, 500); // fade current out
//once we've faded out current slides, it's time to replace them with th
setTimeout(function() {
getElementsByClassName('slide_current')[0].className = 'slide_hide';
next.className = 'slide_current';
nextSlide.style.opacity = 1; // IE 9 includes opacity...
nextBar.style.opacity = 1; // IE 9 includes opacity...
nextSlide.style.filter = "alpha(opacity=100)";
nextBar.style.filter = "alpha(opacity=85)";
nextSlide.style.zIndex = 10;
nextBar.style.zIndex = 11;
}, 500);
} else {
// NON IE TAGS
var current = getElementsByClassName('slide_current')[0];
current.childNodes[1].style.zIndex = 10; // [1] the child <img> tag
current.childNodes[2].style.zIndex = 11; // [2] the child <div> tag
current.childNodes[1].style.opacity = 1;
current.childNodes[2].style.opacity = 0.85;
next.childNodes[1].style.zIndex = 5;
next.childNodes[2].style.zIndex = 6;
next.childNodes[1].style.opacity = 1;
next.childNodes[2].style.opacity = 0.85;
fade(current.childNodes[1], linear, 600); // fade current out
fade(current.childNodes[2], linear, 600); // fade current out
var fadeSlide = setTimeout(function() {switcher(next, current)}, 500);
var switcher = function(now, then, nowBar, thenBar) {
then.className = 'slide_hide';
then.childNodes[1].style.opacity = 0;
then.childNodes[2].style.opacity = 0;
now.className = 'slide_current';
now.childNodes[1].style.opacity = 1;
now.childNodes[2].style.opacity = 0.85;
now.style.opacity = 1;
}
}
}
}
</script>
var bubble = [$('#bubble1'), $('#bubble2'), $('#bubble3'), $('#bubble4'), $('#bubble5'), $('#bubble6')];
var bubbleFirst = 0;
var visibleBubbles = 3;
var bubbleHeight = 200;
var bubbleTimeDelay = 5000;
var bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay/2);
function animateBubbles(){
clearTimeout(bubbleTimer);//stop from looping before this is finished
for(var i = 0; i < visibleBubbles + 1; i++){
count = i + bubbleFirst;
if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
bubble[count].animate({top:'-=' + bubbleHeight}, 2000);
}
bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom
//resetBubbles();
bubbleFirst++;
if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);//start looping again
}
bubble1 starts with top: 0px;
bubble2 starts with top: 200px;
bubble3 starts with top: 400px;
bubble4-6 start with top: 600px;
all are position: absolute in a wrapper div
Apologies for the code dump. My problems are all centered around line 16:
bubble[bubbleFirst].css('top', '600px');
This code is seemingly never executed, there is no error in my console and I have verified that bubble[bubbleFirst] is returning the correct element using console.log. (It's a div)
I'm currently using a workaround, but it is not dynamic:
function resetBubbles(){
/*bubble[bubbleFirst].css('top', '600px');//put elements moving off top to bottom*/
if(bubble[0].css('top') == '-200px') bubble[0].css('top', '600px');
if(bubble[1].css('top') == '-200px') bubble[1].css('top', '600px');
if(bubble[2].css('top') == '-200px') bubble[2].css('top', '600px');
if(bubble[3].css('top') == '-200px') bubble[3].css('top', '600px');
if(bubble[4].css('top') == '-200px') bubble[4].css('top', '600px');
if(bubble[5].css('top') == '-200px') bubble[5].css('top', '600px');
}
I have no idea why this isn't working, it's probably a logical error on my part. But I can't for the life of me find it. Any help would be appreciated. Thanks for your time.
Is it possible that the call to animate conflicts with you custom settings the top property? ie. you set it, but top is immediately altered again by animate. You can pass a callback to animate that will run when the animation has finished. That's when you should reset your bubble position.
function animate_bubble(index) {
bubble[index].animate({ top: "0px" }, 2000 /* 2 seconds */, function () {
bubble[index].css({ top: "600px" });
animate_bubble(index);
}
}
animate_bubble(0);
animate_bubble(1);
// etc .. probably do this in a for-loop
You'll need to find some way to cancel the animation though, shouldn't be too hard.
The problem was that bubbleFirst was incremented before the animation was finished. I changed my function to the following:
function animateBubbles(){
clearTimeout(bubbleTimer);//stop from looping before this is finished
for(var i = 0; i < visibleBubbles + 1; i++){
count = i + bubbleFirst;
if ( count >= bubble.length ) count = count - bubble.length;//keep index inside array
if (count == bubbleFirst)
{
bubble[count].animate({top:'-=' + bubbleHeight, opacity: 0}, bubbleAnimationSpeed, function(){
bubble[bubbleFirst].css('top', displayHeight+'px');
bubble[bubbleFirst].css('opacity', '1');
});
}
else if(i == visibleBubbles)
{
bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed, function(){
bubbleFirst++;
if(bubbleFirst >= bubble.length) bubbleFirst = 0;//bubbles have looped
bubbleTimer = setTimeout(function(){animateBubbles();}, bubbleTimeDelay);/*start looping again*/
});
}
else bubble[count].animate({top:'-=' + bubbleHeight}, bubbleAnimationSpeed);
}
}
Thanks for your input guys!
Sorry about the confusing title, I'll explain better.
I have a 20x20 grid of div's, so its 400 of them each with an id, going from 0 to 399.
Each div is given one of three random values - red, green or blue - and when a div is clicked, a function is run to check if the div to the left, right, over and under are of the same value, if it is of the same value it will be simulated a click and the same function will run again.
The problem, is that the function sets vars, so if it finds that the div below has the same value, it will overwrite the vars set by the first click, hence never click any of the others.
JSfiddle - http://jsfiddle.net/5e52s/
Here is what I've got:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>untiteled</title>
<style>
body {
width: 420px;
}
.box {
width: 19px;
height: 19px;
border: 1px solid #fafafa;
float: left;
}
.box:hover {
border: 1px solid #333;
}
.clicked {
background: #bada55 !important;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$().ready(function(){
var colors = ['red', 'green', 'blue'];
var i = 0;
while(i<400){
var color = colors[Math.floor(Math.random() * colors.length)];
$('.test').append('<div class="box" id="'+i+'" value="'+color+'" style="background:'+color+';">'+i+'</div>');
i++;
}
$('.box').click(function(){
var t = $(this);
t.addClass('clicked');
id = t.attr('id');
val = t.attr('value');
//Set color
up = parseInt(id) - 20;
right = parseInt(id) + 1;
down = parseInt(id) + 20;
left = parseInt(id) - 1;
clickup = false;
clickdown = false;
if($('#'+down).attr('value') === val){
clickdown = true;
}
if(up > -1 && ($('#'+up).attr('value') === val)){
clickup = true;
}
if(clickdown == true){
$('#'+down).click();
}
if(clickup == true){
$('#'+up).click();
}
});
});
</script>
</head>
<body>
<div class="test">
</div>
</body>
I think the biggest root cause of your problem is you don't check if it already has class 'clicked' or not. That could make the infinite recursive. For example, if you click on the div#2 then the div#1 receives a simulated click, and div#2 receives a simulated click from div#1.
$('.box').click(function(){
var t = $(this);
if(t.hasClass('clicked')) {
return;
}
t.addClass('clicked');
var id = t.attr('id');
var val = t.attr('value');
//Set color
var up = parseInt(id) - 20;
var right = (id%20 != 19) ? ((0|id) + 1) : 'nothing' ;
var down = parseInt(id) + 20;
var left = (id%20 != 0) ? ((0|id) - 1) : 'nothing';
console.log(up, right, down, left);
if($('#'+down).attr('value') === val) {
$('#'+down).click();
}
if($('#'+right).attr('value') === val) {
$('#'+right).click();
}
if($('#'+up).attr('value') === val) {
$('#'+up).click();
}
if($('#'+left).attr('value') === val) {
$('#'+left).click();
}
});
You can schedule the clicks onto the event loop instead of calling them directly, eg:
if(clickdown == true){
setTimeout(function () {
$('#'+down).click();
});
}
I don't think that's your root cause though, it's probably a combination of global vars and scope issues. Try reformatting as such:
$('.box').click(function (event){
var t = $(this), id, val, up, right, down, left, clickup, clickdown;
//...
Your variables id and val are not in a var statement, thus are implicitly created as members of the window object instead of being scoped to the local function. Change the semicolon on the line before each to a comma so that they become part of the var statement, and your code should begin working.