We Keep Coding

.on('click', function(){}) only working on first click

I'm making a Blackjack game to exercise my Javascript skills. I had a bunch of alert() messages tied to the betting function to prevent invalid entries. In updating the code to have a more elegant message style than a browser alert, I wrote a function called alertModal() that pops up a message on the screen and then fades away. The message pops up the first time a user tries to enter an invalid bet, but does not pop up any other messages if the bet is invalid-- nothing happens. I know the placeBet() function is still running when the user clicks again, because if the bet is valid, dealFirstCards() runs and the game proceeds. So it seems to me that for some reason, the if/else portion of the placeBet() function is only running on the first click...
The game is live and running with this code at http://cnb-blackjack.netlify.com/game.html
Here is the javascript code in question:
// Player places a bet
$('div.bet').on('click', function() {
$(this).removeClass('glow');
$('.bet-button').addClass('glow');
});
$('.bet-button').on('click', function() {
event.preventDefault();
if (!placeBet.called) {
placeBet();
}
});
// PLACE BET
function placeBet() {
var $bet = parseInt($('.bet-input').val())
var $bank = parseInt($('.player-bank').text())
var $currentBet = $('.current-bet');
if (!isNaN($bet) && $bet <= $bank && $bet !== 0) {
$currentBet.text(' $' + $bet);
$('.bet input[type="text"]').val('');
$('.place-bet .hideaway').slideUp();
$('.player-bank').text($bank - $bet);
placeBet.called = true;
dealFirstCards();
} else if ($bet > $bank) {
var $message = 'Bet cannot exceed the amount in your Bank!';
alertModal($message);
} else if (isNaN($bet)) {
var $message = 'Enter a number, without "$".';
alertModal($message);
} else if ($bet === 0) {
var $message = "Betting nothing won't get you very far...";
alertModal($message);
}
}
// SHOW MODAL
function alertModal(message) {
$popUp = $('.alert-message');
$('.modal').removeClass('hide');
$popUp.text(message);
setTimeout(function() {
$('.modal').fadeOut(1000);
}, 1000);
}

function alertModal(message) {
$popUp = $('.alert-message');
$('.modal').show();
$popUp.text(message);
setTimeout(function() {
$('.modal').fadeOut(1000);
}, 1000);
}
As comments have explained, fadeOut is leaving the modal hidden after the first time it's clicked. Just call $(element).show(); on the modal to show it again and let fadeOut remove it.

Javascript Countdown that loads ahref

I'm totally a beginner with JavaScript and I'm trying to make a Javascript Countdown that loads an
I'm using this code for the countdown
<script language="Javascript">
var countdown;
var countdown_number;
function countdown_init() {
countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
if(countdown_number > 0) {
countdown_number--;
document.getElementById('countdown_text').innerHTML = countdown_number;
if(countdown_number > 0) {
countdown = setTimeout('countdown_trigger()', 1000);
}
}
}
function countdown_clear() {
clearTimeout(countdown);
}
</script>
I want to load exactly this after the count reaches 0... I am totally lost... what should I do?
It is basically a countdown that stops a music player after reaching 0. I would like to set up several countdowns with 10 mins, 15 mins, and 30 mins.

var countdown;
var countdown_number;
function countdown_init(time) {
countdown_number = time;
countdown_trigger();
}
function countdown_trigger() {
if (countdown_number > 0) {
countdown_number--;
document.getElementById('countdown_text').innerHTML = countdown_number;
setTimeout('countdown_trigger()', 1000)
} else { // when reach 0sec
stop_music()
}
}
function stop_music(){
window.location.href = "bgplayer-stop://"; //will redirect you automatically
}

Here is a simple example using mostly what you had above. This will need to be expanded a bit in order to have multiple countdowns but the general idea is here.
Fiddle: http://jsfiddle.net/zp6nfc9b/5/
HTML:
<a id="link_to_click" href="bgplayer-stop://">link</a>
<span id="countdown_text"></span>
JS:
var countdown_number;
var countdown_text = document.getElementById('countdown_text');
var link_to_click = document.getElementById('link_to_click');
function countdown_init() {
countdown_number = 11;
countdown_trigger();
}
function countdown_trigger() {
countdown_number--;
countdown_text.innerHTML = countdown_number;
if (countdown_number > 0) {
setTimeout(
function () {
countdown_trigger();
}, 1000
);
}
else {
link_to_click.click();
}
}
link_to_click.addEventListener('click',
function () {
countdown_text.innerHTML = 'link was clicked after countdown';
}
);
countdown_init();
To explain some portions a little I think overall you had the correct idea.
I only added the eventListener so you could see the link was actually being clicked and displays a message in the countdown_text for you.
You didn't need to check countdown_number more than once so I removed that if block.
Also you don't really need to clear the timeout either. It clears itself once it executes. You only really need to clear a timeout if you want to stop it before it completes but since we rely on the timeout completing in order to do the next step its not necessary.

Hide DIVs after function has completed his task

I wrote a piece of code that auto replies to user text input.
An automated "live chat" so to say.
Though when the script runs out of responses I want it to disable the subit form and button, I don't really have any clue on how to do such a thing.
My code:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#typing").hide();
var n = "You:<br>";
var o = $('#outputWindow');
var i = $('#inputWindow');
var s = $('#sendButton');
var t = $('#typing');
var r = -1;
//arrays
var msg = ['msg1', 'msg2', 'msg3'];
//fire send events
$(s).click(function() {
runAI();
});
$(i).keydown(function(e) {
if (e.keyCode == 13) {
runAI();
}
});
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
i.val('');
i.focus();
}
}
i.focus();
});
});//]]>
</script>
The idea is to hide the submit form and button after (in the case) the script has responded with: msg1, msg2 and msg3.
If anyone can help, that'd be great !

This will do that. Place at the bottom of the runAI() function.
this will check r+1 each time runAi() is invoked. When it detects that it's greater than or equal to the message array length it will hide the user input possibilities after the last message is sent.
function runAI() {
if (i.val().length > 0) {
r = r + 1;
o.html(o.html()+n+$("#inputWindow").val()+"<br><hr>" );
setTimeout(function(){ $("#typing").show(); }, 3000);
setTimeout(function(){ o.html(o.html()+"Username:<br>"+msg[r]+"<br><hr>") }, 7000);
setTimeout(function(){ $("#typing").hide(); }, 8000);
if (r+1 >= msg.length)
{
$('#inputWindow').hide();
$('#sendButton').hide();
return true; // end the function here;
}
else
{
i.val('');
i.focus();
}
}
}
When r reaches a length greater than or equal to the length of the array the input and button is hidden.

Well, simply use CSS to hide it:
$(<your object>).css('display', 'none');
use this for every object you want to hide. Go to www.w3schools.com and check out the posible values for the display property.

HTML5 Progress Bar Pause when in another tab

My progress bar loader which i'm using to display a sorten amount of seconds while my page is loading in Javascript is having some trouble.
If i click another tab while its counting it will pause, and will only resume when you go back.
How would i go by allowing it to count even though you're in another tab
$(document).ready(function() {
if(!Modernizr.meter){
alert('Sorry your brower does not support HTML5 progress bar');
} else {
var progressbar = $('#progressbar'),
max = progressbar.attr('max'),
time = (800/max)*10,
value = progressbar.val();
var loading = function() {
value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');
if (value == max) {
clearInterval(animate); $(".demo-wrapper").remove(); $("#details").fadeIn("slow"); $("#motion1").html("Report for Registration."); $("#motion").remove();
}
if (value == 1) {
$("#motion").html("Loading Page..");
}
if (value == 86) {
$("#motion").html("Connecting..");
}
};
var animate = setInterval(function() {
loading();
}, time);
};
});
Here's an example http://jsfiddle.net/w977Q/

Maybe have a look at the accepted answer here: How can I make setInterval also work when a tab is inactive in Chrome?
It appears this is basically a function of the browser not wanting to use processing power on tabs that aren't in focus.

Hope this helps you
setInterval('yourFunction();', 1000); // this will work even on other tab
and
setInterval(yourFunction, 1000); // this will run only if on current tab

Timer for Slideshow does nothing

Sorry for that short and meaningless title, but it really is the only one that really describes my problem.
I want (or have to) script a slideshow which (if a checkbox is checked and a time is given) automatically switches the focus on another image.
I already have everything but the automation and am currently working on it.
I thought that comparing the current time with a target time (currentTime + user-input seconds (in Integer)) every 1000 millisecs would be the best way to do it.
However, I don't get why, but it's not working. The calculated target time seems to be correct, since I get a correct difference of the pre-calculated date.getTime() and the calculated one.
I would be very thankful if you could help me.
Here's the JS:
var checkbox_checked;
function timerfn() {
if (checkbox_checked === null || checkbox_checked === false) {
checkbox_checked = true;
var targetTime = new Date();
alert(targetTime.getTime());
var target_sec = targetTime.getSeconds() + dauerSwitch;
targetTime.setSeconds(target_sec);
alert(targetTime.getTime());
// update currentTime every 1 Seconds (1000 Milliseconds)
setInterval(function () {
var current_time = Date.now();
if (targetTime.getTime() == current_time) {
gallery("zur");
}
}, 1000);
} else {
checkbox_checked = false;
}
}
And here's the HTML:
<form>
<input type="checkbox" id="timer" name="timer" onClick="timerfn()">
<input type="text" id="textbox" name="timerParam"
placeholder="Seconds between slides" value=""
onBlur="boxConv()"> //boxConv just converts the String to an Integer. It also checks if it's only numbers
</form>

Thats how i would do it with a little help of jquery ($). I moved the inline code into JS event listener and used the user input as parameter for the interval to make it work.
$(function () {
var intervalTime = 1000,
counter = 1,
interval;
$("#textbox").on("blur", function () {
var inputValue = $(this).val();
try {
//parses the user input into a integer
intervalTime = parseInt(inputValue, 10) * 1000;
} catch (e) {
//could not parse input
}
});
$("#timer").on("click", function () {
if ($(this).is(":checked")) {
interval = setInterval(function () {
//gallery("zur");
//fills the test output
$("#testOutput").val(counter);
counter++;
}, intervalTime); //intervall time is given in milliseconds
} else {
clearInterval(interval);
}
});
});
And here the link to a working example:
http://jsfiddle.net/9Yeuh/2/