We Keep Coding

Hide div if agents offline with Live Chat Inc

I am using LiveChat on my website and trying to show a div if no agents are available, using their guide here
Javascript
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
$("#ChatLink2").hide();
} else {
$("#ChatLink2").show();
}
};
HTML
<div class='ChatLink2' id='ChatLink2'>Currently Unavailable</div>
However, the div ChatLink2 is not showing when no agents are available

It appears to be race conditions with both LiveChat and JQuery. Below checks for LC availability and uses vanilla JS instead of jQuery.
Also included state change callback if agents go offline after init.
var waitForLC = setInterval(function () {
if (window.LC_API === undefined) {
return;
}
clearInterval(waitForLC);
var showUnavailableStatus = function(show){
var statusDiv = document.getElementById("ChatLink2");
var style = show ? "block" : "none";
statusDiv.style.display = style;
}
LC_API.on_after_load = function() {
if (LC_API.agents_are_available()) {
showUnavailableStatus(false);
} else {
showUnavailableStatus(true);
}
};
LC_API.on_chat_state_changed = function(data) {
showUnavailableStatus(data.state==="offline");
};
}, 100);

.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.

need to modify this jquery pop menu script to work with ajax

I am using this script from: http://pop.seaofclouds.com/
The problem is if you call the script multiple times it causes a cascading effect of a pop-out within a pop-out for as many times as you call the script.
I'm trying to figure out how to prevent it from executing when the popout has already been set. Here's the script:
//
// pop! for jQuery
// v0.2 requires jQuery v1.2 or later
//
// Licensed under the MIT:
// http://www.opensource.org/licenses/mit-license.php
//
// Copyright 2007,2008 SEAOFCLOUDS [http://seaofclouds.com]
//
(function($) {
$.pop = function(options){
// inject html wrapper
function initpops (){
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
}
initpops();
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });
$("body").on("click", ".pop", function(){
closeInactivePop();
});
// toggle that pop
$("body").on("click", ".pop_toggle", function(){
$(this).parent(".pop").toggleClass("active");
});
}
})(jQuery);
now when i load this script on an ajax call the new pop-out menus work but the old ones do not react to the onclick event.

You shouldn't mess with the plugin. It works exactly like it should.
Better show us how you call this on elements that you already have.
Also I don't like this plugin. Better use something from JqueryUI
You can do such thing in much easier way.
[edit]
I tried your first code (the plugin) and it works correctly for me.
[edit]
OK. I get it. You call $.pop(); multiple times. You shouldn't! Calling $.pop(); will pin up the drop down menu to all elements that has class="pop". This is the reason why you have such funny stack.
Just use $.pop(); once.
Plugin doesn't give ability to connect NEW elements that was dynamically created on the page.

Removed pop from ajax call and just called this on success:
$(".pop").each(function() {
var pop_classes = $(this).attr("class");
if ( $(this).find('.pop_menu').length) {
// do nothing
} else {
$(this).addClass("pop_menu");
$(this).wrap("<div class='"+pop_classes+"'></div>");
$(".pop_menu").attr("class", "pop_menu");
$(this).before(" \
<div class='pop_toggle'></div> \
");
}
});
// assign reverse z-indexes to each pop
var totalpops = $(".pop").length + 100;
$(".pop").each(function(i) {
var popzindex = totalpops - i;
$(this).css({ zIndex: popzindex });
});
// close pops if user clicks outside of pop
activePop = null;
function closeInactivePop() {
$(".pop").each(function (i) {
if ($(this).hasClass('active') && i!=activePop) {
$(this).removeClass('active');
}
});
return false;
}
$(".pop").mouseover(function() { activePop = $(".pop").index(this); });
$(".pop").mouseout(function() { activePop = null; });

jQuery queue in Chrome userscript with popups?

I would like to ask if it is possible to build Chrome or Greasemonkey script witch could open all popups in queue. So far i have 2 seperate scripts for this, but that is not working well since popups have anti-spam feature that don't allow too much of them at the same time.
What i would like to do is to process array of popup links in queue fashion and only open next when previous is closed. I have no expirience when it goes down to queues and any kind of event binding.
So resources i got:
1) Array of links already prepared
var URL_Array = [];
$('form[name="form_gallery"] .img img').each(function(i,e){
// Format URL array here
if($(this).closest('.object').children('.phs_voted_count').length == 0){
var string = e.src;
var nowBrake = string.substring(string.length-7,7);
var splited = nowBrake.split('/');
var urlStr = '/window/friend/gallery_view/'+splited[3]+'/'+splited[4]+'.html';
URL_Array[i] = urlStr;
}
});
2) Script that votes on image in popup
/*######################################################*/
var voteBy = '#vte_mark_12'; // Prefered vote icon
var voteDefault = '#vte_mark_5'; // Default vote icon
var voteFormLoc = 'image_voting'; // Image voting popups form
var buyExtraVote = 'image_voting_buy'; // If run out of votes buy more
var captchaLoc = 'input[name="captcha"]'; // Captcha input field
var captchaTxt = 'Enter captcha text!'; // Captcha alert text
var simpatyFormId = '#sym_send'; // Simpaty window form
var startScript = true;
var formProcessedAlready = false; // Used to check if image already was voted
/*######################################################*/
$(function(){
if(startScript){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
if($('#50').length > 0){
$('#50').attr('checked', true);
$('form').attr('id', buyExtraVote);
$('#'+buyExtraVote).submit();
}else{
$('form').attr('id', voteFormLoc);
if($(voteBy).length > 0){
$(voteBy).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else if($(voteDefault).length > 0){
$(voteDefault).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else{
// If we have simpaty box autocast submit
if($(simpatyFormId).length > 0){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
$(simpatyFormId).submit();
formProcessedAlready = true;
}
}else{
formProcessedAlready = true;
}
}
}
}
if(formProcessedAlready){
self.close();
}
}
});
As far as i can understand it should go like this:
1) Get all unvoted urls and form array (done)
2) Queue all popups to open
3) Start first popup
4) Voting done and popup closes (done)
5) Start second popup
6) When array finished switch to next page (done)
What you think?

What are the exact URL's of the main page(s) and also of the popups?
What version of jQuery are you using, and how are you including it?
The exact URLs are important because the script needs to handle both the main pages and the popups and operate differently on each.
Their are 2 main ways to handle this. Either:
Use include directives to make sure that the script runs on both the main page and the popup, but switches its behavior depending on the page type. This will have two different instances of the script running simultaneously, which is not a problem.
Use include and possibly exclude directives to ensure that the script only runs on the main page. Then have the popup-opening code manipulate the form.
Here's how to do approach 1:
(1) Suppose the main pages were like:
    somewhere.com/main/*
    and the popup pages were like:
    somewhere.com/window/friend/gallery_view/*
    Make sure the script's include-directives fire on both sets of pages.
(2) Ensure that jQuery is available on both kinds of pages. jQuery 1.5.1 is recommended. jQuery 1.3.2 probably won't work for the following code.
(3) Then code like the following should work:
var URL_Array = [];
var PopupQueue = $({}); //-- jQuery on an empty object - a perfect queue holder
//--- Is this a popup window or the main page?
if ( /\/window\/friend\/gallery_view\//i.test (window.location.href) )
{
//--- This is a popup page
/*######################################################*/
var voteBy = '#vte_mark_12'; // Prefered vote icon
var voteDefault = '#vte_mark_5'; // Default vote icon
var voteFormLoc = 'image_voting'; // Image voting popups form
var buyExtraVote = 'image_voting_buy'; // If run out of votes buy more
var captchaLoc = 'input[name="captcha"]'; // Captcha input field
var captchaTxt = 'Enter captcha text!'; // Captcha alert text
var simpatyFormId = '#sym_send'; // Simpaty window form
var startScript = true;
var formProcessedAlready = false; // Used to check if image already was voted
/*######################################################*/
$(function(){
if(startScript){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
if($('#50').length > 0){
$('#50').attr('checked', true);
$('form').attr('id', buyExtraVote);
$('#'+buyExtraVote).submit();
}else{
$('form').attr('id', voteFormLoc);
if($(voteBy).length > 0){
$(voteBy).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else if($(voteDefault).length > 0){
$(voteDefault).attr('checked', true);
setTimeout("$('#"+voteFormLoc+"').submit()", 2000);
}else{
// If we have simpaty box autocast submit
if($(simpatyFormId).length > 0){
if($(captchaLoc).length > 0){
alert(captchaTxt);
$(captchaLoc).focus().css('border', '2px solid red');
return false;
}else{
$(simpatyFormId).submit();
formProcessedAlready = true;
}
}else{
formProcessedAlready = true;
}
}
}
}
if(formProcessedAlready){
self.close();
}
}
});
}
else
{ //--- This is a main page
$('form[name="form_gallery"] .img img').each(function(i,e){
// Format URL array here
if($(this).closest('.object').children('.phs_voted_count').length == 0){
var string = e.src;
var nowBrake = string.substring(string.length-7,7);
var splited = nowBrake.split('/');
var urlStr = '/window/friend/gallery_view/'+splited[3]+'/'+splited[4]+'.html';
URL_Array[i] = urlStr;
}
});
//--- Load up the queue.
$.each (URL_Array, function (PopupNum, PopupURL) {
PopupQueue.queue ('Popups', function (NextQ_Item) {
OpenPopupFromQueue (NextQ_Item, PopupNum+1, PopupURL);
} );
} );
//--- Launch the Popups, one at a time.
PopupQueue.dequeue ('Popups');
}
function OpenPopupFromQueue (NextQ_Item, PopupNum, PopupURL)
{
var PopupWin = window.open (PopupURL, "_blank");
if (!PopupWin)
{
console.log ('Bad URL ' + PopupURL)
setTimeout (function() { NextQ_Item (); }, 2003);
return;
}
/*--- Only after the popup has loaded can we do any processing.
*/
PopupWin.addEventListener (
"load",
function () {
/*--- Setup the listener for when the popup has closed.
We fire the next popup from the queue, there.
*/
PopupWin.addEventListener (
"unload",
function () {
PopupClosed (NextQ_Item);
},
false
);
/*--- We could process the popup here, but it's better to let another instance of this
script do it, instead.
*/
},
false
);
}
function PopupClosed (NextQ_Item)
{
//--- Launch the next popup from the queue.
NextQ_Item ();
}

You could do something like:
var links = get_your_links();
function process_one() {
if(links.length > 0) {
show_popup(links.pop(), process_one);
}
}
function show_popup(link, callback) {
var popup = window.open(link, "mywindow", "width=100,height=100");
$(popup).bind("beforeunload", function() {
process_one();
return true;
})
}
I hope it helps...

How do I move image in the front of Download Now in javascript code?

How do I move this image http://svastara.info/.s/img/icon/download1.png in the front of Download now?
Should look something like this: image Download Now
var CountdownTimer = function( id, count, imgurl ) { this.construct(id, count, imgurl); }
CountdownTimer.prototype = {
construct: function(id,count,imgurl) {
this.id = id;
this.object = document.getElementById(id);
this.count = count;
this.interval = null;
this.counted = false;
this.img = new Image(); // preload
this.img.src = imgurl;
this.img.border = "0";
(function(obj) {
obj.object.onclick = function() {
return obj.onclick();
};
})(this);
},
tick: function() {
this.count--;
this.render();
if(this.count == 0){
clearInterval(this.interval);
this.interval = null;
this.object.appendChild(this.img);
}
},
onclick: function() {
if(!this.counted) {
this.counted = true;
this.render();
(function(obj) {
obj.interval = setInterval(function() {
obj.tick();
},1000);
})(this);
return false;
} else if(this.count == 0)
return true;
else
return false;
},
render: function() {
if(this.count > 0)
this.object.innerHTML = "Download (" + this.count + " second" + (this.count == 1 ? "" : "s") + ")";
else
this.object.innerHTML = "Download Now";
}
};
window.onload = function() {
var c = new CountdownTimer("delayed",3,"http://svastara.info/.s/img/icon/download1.png");
};
<div>
<a id="delayed" class="stop" href="http://www.epiclosers.com/">Download (30sec)</a>
</div>

Have a look at the insertBefore method, the existing text should be a child node of the anchor tag.
Having said that, I'm beginning to wonder why people are doing the fancy thing here... You're not unique, I see this sort of thing all the time. The code can be simplified by allowing HTML and CSS to help you. Put the image in the document, set the display to none, and turn it on when you need it. Also, the text after download can be in a span that is also updated as you require. Then whole thing can be managed with a fraction of the code. Final thought on the simplification, you can just disable the link until you're ready to allow.
Also, using a simple debugger in the client, I can change the count to 0 on the fly and bypass the logic altogether. Or, even easier, I can just turn off javascript and click the link. In other words, make sure you're enforcing it through other means that aren't in the client. It's always a bad idea to rely on the client to enforce policy, so back it up on the server side. You may be doing that, so please don't be offended by the comment.