What is the error in the startAction() function?

What is the error in the startAction() function? - javascript

After I destroying 2 fruits by hovering my mouse over them the third fruit doesn't show up.
var playing = false;
var score;
var trialsLeft;
var step;
var action;
var fruits = ['apple', 'banana', 'cherries', 'grapes', 'mango', 'orange', 'peach', 'pear', 'watermelon'];
$(function() {
$("#startreset").click(function() {
//we are playing
if (playing == true) {
location.reload();
} else {
playing = true;
score = 0; //set score to 0
$("#scorevalue").html(score);
$("#trialsLeft").show();
trialsLeft = 3;
addHearts();
$("#gameOver").hide();
$("#startreset").html("Reset Game");
startAction();
}
});
$("#fruit1").mouseover(function() {
score++;
$("#scorevalue").html(score);
// document.getElementById("slicesound").play();
$("#slicesound")[0].play();
clearInterval(action);
$("#fruit1").hide("explode", 500);
setTimeout(startAction, 500);
});
function addHearts() {
$("#trialsLeft").empty();
for (i = 0; i < trialsLeft; i++) {
$("#trialsLeft").append('<img src="images/heart.png" class="life">');
}
}
})
So startAction() function is supposed to create fruits. I have images of fruits saved in my folder and I decide which fruit to show by random function and array of fruits.
function startAction() {
$("#fruit1").show();
chooseFruit(); //choose a random fruit
$("#fruit1").css({ 'left': Math.round(550 * Math.random()), 'top': -50 }); //random position
step = 1 + Math.round(5 * Math.random());
action = setInterval(function () {
$("#fruit1").css('top', $("#fruit1").position().top + step);
if ($("#fruit1").position().top > $("#fruitsContainer").height()) {
if (trialsLeft > 1) {
$("#fruit1").show();
chooseFruit();
$("#fruit1").css({ 'left': Math.round(550 * Math.random()), 'top': -50 });
step = 1 + Math.round(5 * Math.random()); // change step
trialsLeft--;
addHearts();
} else {
playing = false;
$("#startreset").html("Start Game");
$("#gameOver").show();
$("#gameOver").html('<p>Game Over!</p><p>Your score is ' + score + '</p>');
$("#trialsLeft").hide();
stopAction();
}
}
}, 10);
}
function chooseFruit() {
$("#fruit1").attr('src', 'Images/' + fruits[Math.round(8 * Math.random())] + '.png');
}
function stopAction() {
clearInterval(action);
$("#fruit1").hide();
}

The problem was the function $("#fruit1").hide("explode",500);
and setTimeout(startAction,500);; both had same time and that's why the startAction wasn't executing. I reduced the time of the first function by 100 like that:
$("#fruit1").hide("explode",400);
setTimeout(startAction,500);
It worked!

Related

js / css flip card game bug in shuffle function

I have created a js memory game. It has a 24-card grid, and it is supposed to shuffle randomly out of a deck of 15 cards in order to create a little variety. The game should be different every time. However, at random the game shuffles the initial deck and builds the board with 11 pairs and one non-pair of cards. Here's the whole js file:
`var score;
var cardsmatched;
var ui = $("#gameUI");
var uiIntro =$("#gameIntro");
var uiStats = $("# gameStats");
var uiComplete = $("#gameComplete");
var uiCards = $("#cards");
var uiScore = $(".gameScore");
var uiReset = $(".gameReset");
var uiPlay = $("#gamePlay");
var uiTimer = $("#timer");
var matchingGame = {};
matchingGame.deck = ['grilledfish', 'grilledfish','barbacoa', 'barbacoa','tripa', 'tripa','bajafish', 'bajafish','carneasada', 'carneasada','carnitas', 'carnitas', 'chorizoasado','chorizoasado','shrimptaco','shrimptaco','decabeza','decabeza','alpastor', 'alpastor','dorados','dorados', 'lengua','lengua','chicharron','chicharron','sudados','sudados', 'polloasado','polloasado',];
$(function(){
init();
});
function init() {
uiComplete.hide();
uiCards.hide();
playGame = false;
uiPlay.click(function(e){
e.preventDefault();
uiIntro.hide();
startGame();
});
uiReset.click(function(e){
e.preventDefault();
uiComplete.hide();
reStartGame();
});
}
function startGame(){
uiTimer.show();
uiScore.html("0 seconds");
uiStats.show();
uiCards.show();
score = 0;
cardsmatched= 0;
if (playGame == false) {
playGame = true;
matchingGame.deck.sort(shuffle);
for (var i=0; i<25; i++){
$(".card:first-child").clone().appendTo("#cards");
}
uiCards.children().each(function(index) {
$(this).css({
"left" : ($(this).width() + 20) * (index % 6),
"top" : ($(this).height() + 20) * Math.floor(index / 6)
});
var pattern = matchingGame.deck.pop();
$(this).find(".back").addClass(pattern);
$(this).attr("data-pattern",pattern);
$(this).click(selectCard);
});
timer();
};
}
function timer(){
if (playGame){
scoreTimeout = setTimeout(function(){
uiScore.html(++score = "seconds");
timer();
}, 1000);
};
};
function shuffle() {
return 0.5 - Math.random();
}
function selectCard(){
if($(".card-flipped").size()> 1){
return;
}
$(this).addClass("card-flipped");
if($(".card-flipped").size() == 2) {
setTimeout(checkPattern, 1000);
};
};
function checkPattern(){
if (isMatchPattern()) {
$(".card-flipped").removeClass("card-flipped").addClass("card-removed");
if(document.webkitTransitionEnd){
$(".card-removed").bind("webkitTransitionEnd", removeTookCards);
}else{
removeTookCards();
} else {
$(".card-flipped").removeClass("card-flipped");
}
}
function isMatchPattern(){
var cards = $(".card-flipped");
var pattern = $(cards[0]).data("pattern");
var anotherPattern = $(cards[1]).data("pattern");
return (pattern == anotherPattern);
}
function removeTookCards() {
if (cardsmatched < 12) {
cardsmatched++;
$(".card-removed").remove();
}else{
$(".card-removed").remove();
uiCards.hide();
uiComplete.show();
clearTimeout(scoreTimeout);
}
}
function reStartGame(){
playGame = false;
uiCards.html("<div class='card'><div class='face front'></div><div class='face back'></div></div>");
clearTimeout(scoreTimeout);
matchingGame.deck = ['grilledfish', 'grilledfish','barbacoa', 'barbacoa','tripa', 'tripa','bajafish', 'bajafish','carneasada', 'carneasada','carnitas', 'carnitas', 'chorizoasado','chorizoasado','shrimptaco','shrimptaco','decabeza','decabeza','alpastor', 'alpastor','dorados','dorados', 'lengua','lengua','chicharron','chicharron','sudados','sudados', 'polloasado','polloasado',];
startGame();
}
`

Looping gifs is crashing my html page

I have a loop that creates 4 divs that is generating random numbers. those divs are also assigned gifs. I have another loop that is fading in and fading out those images. After clicking the gifs a few times to generate the random number guesses the whole page freezes up, how do i fix this? does it have to do with the cache? I am looping the the fadeIn and fadeOut after the on click function.
here is my code:
var startGame = function () {
$(".crystals").empty();
var images = [
'https://thumbs.gfycat.com/WeightyAgreeableDanishswedishfarmdog-max-1mb.gif',
'http://31.media.tumblr.com/224595f52671895de1608de69012d1d6/tumblr_nfk2itPn1tqou9go1_500.gif',
'http://pictures.willowsgraphics.com/compybackup/pics/animatedicons/shootingstar.gif',
'https://media.giphy.com/media/yfoeIMBjzVw52/giphy.gif',
];
randomNumber = Math.floor(Math.random() * 101) + 19;
$("#result").html('Catch this many stars: ' + randomNumber);
for (var i = 0; i < 4; i++) {
var cardRandom = Math.floor(Math.random() * 11) + 1;
var crystal = $("<div>");
crystal.attr({
"class": 'crystal',
"data-random": cardRandom
});
crystal.css({
"background-image": "url('" + images[i] + "')",
"background-size": "cover",
"background-position": "center"
});
$(".crystals").append(crystal);
$("#previous").html("Total Score: " + previousNumber);
}
}
startGame();
$(document).on("click", '.crystal', function () {
var num = parseInt($(this).attr('data-random'));
var loopImages = function () {
$('.crystal').fadeIn(1500, function () {
$('.crystal').fadeOut(1500, loopImages);
});
}
loopImages();
previousNumber += num;
$("#previous").html("Total Score: " + previousNumber);
if (previousNumber > randomNumber) {
losses++;
$("#losses").html("Your Losses: " + losses);
previousNumber = 0;
startGame();
}
else if (previousNumber === randomNumber) {
wins++;
$("#wins").html("Your Wins: " + wins);
previousNumber = 0;
startGame();
}
});

I figured it out, i was trying to loop the fades for the wrong div :)

Javascript how to set interval time to stop scrolling

This is the demo in jsfiddle, demo
What I want is let the scrolled items('one ', 'two', 'three', '4', '5', '6', '7') automatically scroll up like the demo showed, and stop 2 sec when it's in the middle position. But in my demo, it will shack for a while after stopping in the middle position.
Here is the place in my demo code for setting position.
if ((x == 0) || (x % 35== 0)) {
setTimeout(function () {
i.top = x + 'px';
}, 1000);
} else {
i.top = x + 'px';
}
Any one can help me? Thanks!
UPDATE:
The reason why I set 35 is because I found that the scrolled items are approximately in the middle position when it equals to 0, -35,-70,-105,.... But when I console all x, I found that the value of x is between (31, -251). Do you know how to find the exact position when each items are in the middle of position? Thanks!

i modified your code a bit,
i set a variable "k" that the interval is assigned to and i clear the interval on stop and start it again after the timeout
looks good for me -> http://jsfiddle.net/ato0mf7u/3/
no funny shakin anymore ;-D
window.onload = addScrollers;
var i = 1;
var arr = ['one ', 'two', 'three', '4', '5', '6', '7'];
var mid;
var k;
function addScrollers() {
var txt = arr[0];
while (i < arr.length) {
txt += '<p>' + arr[i] + '</p>';
i++;
}
startScroll('myscroller', txt);
}
var speed = 10; // scroll speed (bigger = faster)
var dR = false; // reverse direction
var step = 1;
function objWidth(obj) {
if (obj.offsetWidth) return obj.offsetWidth;
if (obj.clip) return obj.clip.width;
return 0;
}
function objHeight(obj) {
if (obj.offsetHeight) return obj.offsetHeight;
if (obj.clip) return obj.clip.height;
return 0;
}
function scrF(i, sH, eH) {
var x = parseInt(i.top) + (dR ? step : -step);
if (dR && x > sH) {
x = -eH;
} else if (x < 1 - eH) {
x = sH;
}
//when x is the times of 35, the positio is in middle
if ((x == 0) || (x % 35== 0)) {
clearInterval(k);
setTimeout(function () {
i.top = x + 'px';
k = setInterval(function () {
scrF(i, sH, eH);
}, 1000 / speed);
}, 1000);
}
else {
i.top = x + 'px';
}
return x;
}
function startScroll(sN, txt) {
var scr = document.getElementById(sN);
var sW = objWidth(scr);
var sH = objHeight(scr);
scr.innerHTML = '<div id="' + sN + 'in" style="position:absolute; left:3px; width:' + sW + ';">' + txt + '<\/div>';
var sTxt = document.getElementById(sN + 'in');
var eH = objHeight(sTxt);
mid = (eH - sH) / 2;
sTxt.style.top = (dR ? -eH : sH) + 'px';
sTxt.style.clip = 'rect(0,' + sW + 'px,' + eH + 'px,0)';
k = setInterval(function () {
scrF(sTxt.style, sH, eH);
}, 1000 / speed);
}

Randomized HMTL5 Video Array Playing Only One Video

I want to randomize a 179-video loop that is randomized anew each time the site is visited, but cannot get more than one video to play at a time.
{
function getRandom(min, max) {
if (min > max) {
return -1;
}
if (min == max) {
return min;
}
var r;
do {
r = Math.random();
}
while (r == 1.0);
return min + parseInt(r * (max - min + 1));
}
function randomSrc(videoId) {
console.log("randomSrc, " + videoId);
var vid = $("#" + videoId);
//var rndm = videoArray[getRandom(0, videoArray.length - 1)];
var rndm = "001.webm";
$(vid).attr("src", rndm).get(0).play();
$(vid).get(0).addEventListener('ended', function () {
randomSrc("v" + getRandom(1, 3));
}, false);
}
var videoArray = ["001.webm", "002.webm", "003.webm", "004.webm", "005.webm", "006.webm", "007.webm", "008.webm", "009.webm", "010.webm", "011.webm", "012.webm", "013.webm", "014.webm", "015.webm", "016.webm", "017.webm", "018.webm", "019.webm", "020.webm", "021.webm", "022.webm", "023.webm", "024.webm", "025.webm", "026.webm", "027.webm", "028.webm", "029.webm", "030.webm", "031.webm", "032.webm", "033.webm", "034.webm", "035.webm", "036.webm", "037.webm", "038.webm", "039.webm", "040.webm", "041.webm", "042.webm", "043.webm", "044.webm", "045.webm", "046.webm", "047.webm", "048.webm", "049.webm", "050.webm", "051.webm", "052.webm", "053.webm", "054.webm", "055.webm", "056.webm", "057.webm", "058.webm", "059.webm", "060.webm", "061.webm", "062.webm", "063.webm", "064.webm", "065.webm", "066.webm", "067.webm", "068.webm", "069.webm", "070.webm", "071.webm", "072.webm", "073.webm", "074.webm", "075.webm", "076.webm", "077.webm", "078.webm", "079.webm", "080.webm", "081.webm", "082.webm", "083.webm", "084.webm", "085.webm", "086.webm", "087.webm", "088.webm", "089.webm", "090.webm", "091.webm", "092.webm", "093.webm", "094.webm", "095.webm", "096.webm", "097.webm", "098.webm", "099.webm", "100.webm", "101.webm", "102.webm", "103.webm", "104.webm", "105.webm", "106.webm", "107.webm", "108.webm", "109.webm", "110.webm", "111.webm", "112.webm", "113.webm", "114.webm", "115.webm", "116.webm", "117.webm", "118.webm", "119.webm", "120.webm", "121.webm", "122.webm", "123.webm", "124.webm", "125.webm", "126.webm", "127.webm", "128.webm", "129.webm", "130.webm", "131.webm", "132.webm", "133.webm", "134.webm", "135.webm", "136.webm", "137.webm", "138.webm", "139.webm", "140.webm", "141.webm", "142.webm", "143.webm", "144.webm", "145.webm", "146.webm", "147.webm", "148.webm", "149.webm", "150.webm", "151.webm", "152.webm", "153.webm", "154.webm", "155.webm", "156.webm", "157.webm", "158.webm", "159.webm", "160.webm", "161.webm", "162.webm", "163.webm", "164.webm", "165.webm", "166.webm", "167.webm", "168.webm", "169.webm", "170.webm", "171.webm", "172.webm", "173.webm", "174.webm", "175.webm", "176.webm", "177.webm", "178.webm", "179.webm"];
//var rndm = videoArray[getRandom(0, videoArray.length - 1)];
var rndm = "004.webm";
$("#v1").attr("src", rndm);
randomSrc("v1" + getRandom(1, 3));
this.removeEventListener("load", arguments.callee, false);
})
</script>

Ahem? first you set the source of #v1 to "004.webm", then hard-code the source for element with id #v11, #v12, or #v13 to "001.webm", there is absolutely no way this is ever going to work like this.
Instead try something like this
var videoArray = [ ... ];
function getRandom(...) { ... };
function randomize(videoId) {
var vid = $('#' + videoId);
function setRandom() {
var index = getRandom(0, videoArray.length - 1)
vid.attr("src", videoArray[index]).get(0).play();
};
setRandom();
vid.bind("ended", function() {
setRandom();
});
};
randomize('v1');

Coinslider...adding code to stop looping

I'm using the Coin Slider on my website but encountered a very unexpected surprise today when my client asked me to have the slideshow stop on the last slide. Apparently it's not built in and there's no option to have it stop.
I was hoping someone could help me find where it's looping in the script and suggest a way to add in this option.
I don't even mind having 2 versions of the script, one that loops and one that doesn't.
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load("http://localhost/auxtest/"+sourceURL+"");
}
(function($) {
var params = new Array;
var order = new Array;
var images = new Array;
var links = new Array;
var linksTarget = new Array;
var titles = new Array;
var interval = new Array;
var imagePos = new Array;
var appInterval = new Array;
var squarePos = new Array;
var reverse = new Array;
$.fn.coinslider= $.fn.CoinSlider = function(options){
init = function(el){
order[el.id] = new Array(); // order of square appereance
images[el.id] = new Array();
links[el.id] = new Array();
linksTarget[el.id] = new Array();
titles[el.id] = new Array();
imagePos[el.id] = 0;
squarePos[el.id] = 0;
reverse[el.id] = 1;
params[el.id] = $.extend({}, $.fn.coinslider.defaults, options);
// create images, links and titles arrays
$.each($('#'+el.id+' img'), function(i,item){
images[el.id][i] = $(item).attr('src');
links[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('href') : '';
linksTarget[el.id][i] = $(item).parent().is('a') ? $(item).parent().attr('target') : '';
titles[el.id][i] = $(item).next().is('span') ? $(item).next().html() : '';
$(item).hide();
$(item).next().hide();
});
// set panel
$(el).css({
'background-image':'url('+images[el.id][0]+')',
'width': params[el.id].width,
'height': params[el.id].height,
'position': 'relative',
'background-position': 'top left'
}).wrap("<div class='coin-slider' id='coin-slider-"+el.id+"' />");
// create title bar
$('#'+el.id).append("<div class='cs-title' id='cs-title-"+el.id+"' style='position:absolute; bottom:0; left:0; z-index: 1000;'></div>");
$.setFields(el);
if(params[el.id].navigation)
$.setNavigation(el);
$.transition(el,0);
$.transitionCall(el);
}
// squares positions
$.setFields = function(el){
tWidth = sWidth = parseInt(params[el.id].width/params[el.id].spw);
tHeight = sHeight = parseInt(params[el.id].height/params[el.id].sph);
counter = sLeft = sTop = 0;
tgapx = gapx = params[el.id].width - params[el.id].spw*sWidth;
tgapy = gapy = params[el.id].height - params[el.id].sph*sHeight;
for(i=1;i <= params[el.id].sph;i++){
gapx = tgapx;
if(gapy > 0){
gapy--;
sHeight = tHeight+1;
} else {
sHeight = tHeight;
}
for(j=1; j <= params[el.id].spw; j++){
if(gapx > 0){
gapx--;
sWidth = tWidth+1;
} else {
sWidth = tWidth;
}
order[el.id][counter] = i+''+j;
counter++;
if(params[el.id].links)
$('#'+el.id).append("<a href='"+links[el.id][0]+"' class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></a>");
else
$('#'+el.id).append("<div class='cs-"+el.id+"' id='cs-"+el.id+i+j+"' style='width:"+sWidth+"px; height:"+sHeight+"px; float: left; position: absolute;'></div>");
// positioning squares
$("#cs-"+el.id+i+j).css({
'background-position': -sLeft +'px '+(-sTop+'px'),
'left' : sLeft ,
'top': sTop
});
sLeft += sWidth;
}
sTop += sHeight;
sLeft = 0;
}
$('.cs-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('.cs-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
$('#cs-title-'+el.id).mouseover(function(){
$('#cs-navigation-'+el.id).show();
});
$('#cs-title-'+el.id).mouseout(function(){
$('#cs-navigation-'+el.id).hide();
});
if(params[el.id].hoverPause){
$('.cs-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('.cs-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
$('#cs-title-'+el.id).mouseover(function(){
params[el.id].pause = true;
});
$('#cs-title-'+el.id).mouseout(function(){
params[el.id].pause = false;
});
}
};
$.transitionCall = function(el){
clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw*params[el.id].sph*params[el.id].sDelay;
interval[el.id] = setInterval(function() { $.transition(el) }, delay);
}
// transitions
$.transition = function(el,direction){
if(params[el.id].pause == true) return;
$.effect(el);
squarePos[el.id] = 0;
appInterval[el.id] = setInterval(function() { $.appereance(el,order[el.id][squarePos[el.id]]) },params[el.id].sDelay);
$(el).css({ 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
if(typeof(direction) == "undefined")
imagePos[el.id]++;
else
if(direction == 'prev')
imagePos[el.id]--;
else
imagePos[el.id] = direction;
if (imagePos[el.id] == images[el.id].length) {
imagePos[el.id] = 0;
}
if (imagePos[el.id] == -1){
imagePos[el.id] = images[el.id].length-1;
}
$('.cs-button-'+el.id).removeClass('cs-active');
$('#cs-button-'+el.id+"-"+(imagePos[el.id]+1)).addClass('cs-active');
if(titles[el.id][imagePos[el.id]]){
$('#cs-title-'+el.id).css({ 'opacity' : 0 }).animate({ 'opacity' : params[el.id].opacity }, params[el.id].titleSpeed);
$('#cs-title-'+el.id).html(titles[el.id][imagePos[el.id]]);
} else {
$('#cs-title-'+el.id).css('opacity',0);
}
};
$.appereance = function(el,sid){
$('.cs-'+el.id).attr('href',links[el.id][imagePos[el.id]]).attr('target',linksTarget[el.id][imagePos[el.id]]);
if (squarePos[el.id] == params[el.id].spw*params[el.id].sph) {
clearInterval(appInterval[el.id]);
return;
}
$('#cs-'+el.id+sid).css({ opacity: 0, 'background-image': 'url('+images[el.id][imagePos[el.id]]+')' });
$('#cs-'+el.id+sid).animate({ opacity: 1 }, 300);
squarePos[el.id]++;
};
// navigation
$.setNavigation = function(el){
// create prev and next
$(el).append("<div id='cs-navigation-"+el.id+"'></div>");
$('#cs-navigation-'+el.id).hide();
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-prev-"+el.id+"' class='cs-prev'> </a>");
$('#cs-navigation-'+el.id).append("<a href='#' id='cs-next-"+el.id+"' class='cs-next'> </a>");
$('#cs-navigation-'+el.id).append("<a href='javascript:loadContent('#world', 'auxworld.php');' id='cs-back-"+el.id+"' class='cs-back'> </a>");
$('#cs-prev-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'left' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el,'prev');
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
$('#cs-next-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'right' : 0,
'z-index' : 1005,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(e){
e.preventDefault();
$.transition(el);
$.transitionCall(el);
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
$('#cs-back-'+el.id).css({
'position' : 'absolute',
'top' : params[el.id].height/2 - 15,
'right' : 0,
'z-index' : 1001,
'line-height': '30px',
'opacity' : params[el.id].opacity
}).click( function(){
window.location.replace('index.php');
// loadContent('#world', 'auxworld.php');
}).mouseover( function(){ $('#cs-navigation-'+el.id).show() });
// image buttons
$("<div id='cs-buttons-"+el.id+"' class='cs-buttons'></div>").appendTo($('#coin-slider-'+el.id));
for(k=1;k<images[el.id].length+1;k++){
$('#cs-buttons-'+el.id).append("<a href='#' class='cs-button-"+el.id+"' id='cs-button-"+el.id+"-"+k+"'>"+k+"</a>");
}
$.each($('.cs-button-'+el.id), function(i,item){
$(item).click( function(e){
$('.cs-button-'+el.id).removeClass('cs-active');
$(this).addClass('cs-active');
e.preventDefault();
$.transition(el,i);
$.transitionCall(el);
})
});
$('#cs-navigation-'+el.id+' a').mouseout(function(){
$('#cs-navigation-'+el.id).hide();
params[el.id].pause = false;
});
$("#cs-buttons-"+el.id).css({
'left' : '50%',
'margin-left' : -images[el.id].length*15/2-5,
'position' : 'relative'
});
}
// effects
$.effect = function(el){
effA = ['random','swirl','rain','straight'];
if(params[el.id].effect == '')
eff = effA[Math.floor(Math.random()*(effA.length))];
else
eff = params[el.id].effect;
order[el.id] = new Array();
if(eff == 'random'){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
$.random(order[el.id]);
}
if(eff == 'rain') {
$.rain(el);
}
if(eff == 'swirl')
$.swirl(el);
if(eff == 'straight')
$.straight(el);
reverse[el.id] *= -1;
if(reverse[el.id] > 0){
order[el.id].reverse();
}
}
// shuffle array function
$.random = function(arr) {
var i = arr.length;
if ( i == 0 ) return false;
while ( --i ) {
var j = Math.floor( Math.random() * ( i + 1 ) );
var tempi = arr[i];
var tempj = arr[j];
arr[i] = tempj;
arr[j] = tempi;
}
}
//swirl effect by milos popovic
$.swirl = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var x = 1;
var y = 1;
var going = 0;
var num = 0;
var c = 0;
var dowhile = true;
while(dowhile) {
num = (going==0 || going==2) ? m : n;
for (i=1;i<=num;i++){
order[el.id][c] = x+''+y;
c++;
if(i!=num){
switch(going){
case 0 : y++; break;
case 1 : x++; break;
case 2 : y--; break;
case 3 : x--; break;
}
}
}
going = (going+1)%4;
switch(going){
case 0 : m--; y++; break;
case 1 : n--; x++; break;
case 2 : m--; y--; break;
case 3 : n--; x--; break;
}
check = $.max(n,m) - $.min(n,m);
if(m<=check && n<=check)
dowhile = false;
}
}
// rain effect
$.rain = function(el){
var n = params[el.id].sph;
var m = params[el.id].spw;
var c = 0;
var to = to2 = from = 1;
var dowhile = true;
while(dowhile){
for(i=from;i<=to;i++){
order[el.id][c] = i+''+parseInt(to2-i+1);
c++;
}
to2++;
if(to < n && to2 < m && n<m){
to++;
}
if(to < n && n>=m){
to++;
}
if(to2 > m){
from++;
}
if(from > to) dowhile= false;
}
}
// straight effect
$.straight = function(el){
counter = 0;
for(i=1;i <= params[el.id].sph;i++){
for(j=1; j <= params[el.id].spw; j++){
order[el.id][counter] = i+''+j;
counter++;
}
}
}
$.min = function(n,m){
if (n>m) return m;
else return n;
}
$.max = function(n,m){
if (n<m) return m;
else return n;
}
this.each (
function(){ init(this); }
);
};
// default values
$.fn.coinslider.defaults = {
width: 1230, // width of slider panel
height: 500, // height of slider panel
spw: 20, // squares per width
sph: 1, // squares per height
delay: 7000, // delay between images in ms
sDelay: .1, // delay beetwen squares in ms
opacity: 0.9, // opacity of title and navigation
titleSpeed: 1160, // speed of title appereance in ms
effect: 'rain', // random, swirl, rain, straight
navigation: true, // prev next and buttons
links : false, // show images as links
hoverPause: true // pause on hover
};
})(jQuery);

I've updated the code of coin slider with extra option stopAtLastSlide, that can be passed to coinslider function stop the automatic rotation when it reaches last image.
Check working example here http://jsfiddle.net/wtk_pl/Lrsj2/7/. Source code for updated coin slider can be found here https://github.com/WTK/Coin-Slider.

I would try to modify the $.transitionCall function. This set's the new timeout for displaying the next element.
Maybe you can find out here if it wants to render the last element and then skip setting the interval
$.transitionCall = function(el) {
clearInterval(interval[el.id]);
delay = params[el.id].delay + params[el.id].spw * params[el.id].sph * params[el.id].sDelay;
interval[el.id] = setInterval(function() {
$.transition(el)
}, delay);
}
Another option for not stopping the interval is setting params[el.id].pause = true;

We Keep Coding

JavaScript is the programming language of the Web.

What is the error in the startAction() function? - javascript

The problem was the function $("#fruit1").hide("explode",500); and setTimeout(startAction,500);; both had same time and that's why the startAction wasn't executing. I reduced the time of the first function by 100 like that: $("#fruit1").hide("explode",400); setTimeout(startAction,500); It worked!

Related

js / css flip card game bug in shuffle function

Looping gifs is crashing my html page

Javascript how to set interval time to stop scrolling

Randomized HMTL5 Video Array Playing Only One Video

Coinslider...adding code to stop looping

Categories

Resources