We Keep Coding

JQuery hide() not working after show() and vice versa

Variations of this question have been asked but it appears that most were solved using the toggle() method. My scenario is different in that the hide() and show() should be driven by two different events, the creation of a new game and when the game is won. I don't want each event to do only one thing, so toggle() would not be appropriate.
I'm using socket.io to communicate between the server and browser. Everything loads appropriately to begin. The issue is with trying to start a new game after the previous game has been won. The relevant JavaScript looks something like this:
$(document).ready(function() {
socket.on('gameOver', function() {
$('.yourStatus').hide(700);
$('.winner').show(700);
});
$('button.newGame').on('click', function() {
$('.winner').hide;
$('.yourStatus').show;
});
});
Everything works as it should when the game ends via the socket.io event. Everything else within the button click event function works properly except for hide() and show().
I'm sure the answer to this will be embarrassingly simple.

you should use brackets (invoke the function):
$(document).ready(function() {
socket.on('gameOver', function() {
$('.yourStatus').hide(700);
$('.winner').show(700);
});
$('button.newGame').on('click', function() {
$('.winner').hide();
$('.yourStatus').show();
});
});
Performance tip (of cource if it is possible - element could be unique in DOM):
better if you declare your '.winner' with hash. For example: <div id="winner"/> and use in separator jQuery: $("#winner")

Why do all my jQuery mobile .on() instructions autofire on page load?

I'm currently making a little mobile web-app based on the jQuery mobile framework that is supposed to load a bunch of pages that the user can swipe left or right or touch/click the "Previous"/"Next" buttons to browse. So my code looks like this :
function next(destination) {
alert('next'); // for testing purpose
$.mobile.changePage(destination, {
transition: "slide"
});
}
function prev(destination) {
alert('prev'); // for testing purpose
$.mobile.changePage(destination, {
transition: "slide",
reverse: true
});
}
$(window).load(function(){
$("#btn_next1").on("click", next("index.html#pagetwo"));
$("#btn_prev2").on("click", prev("index.html#pageone"));
$("#btn_next2").on("click", next("index.html#pagethree"));
$("#btn_prev3").on("click", prev("index.html#pageone"));
$("#pageone").on("swipeleft", next("index.html#pagetwo"));
$("#pagetwo").on("swipeleft", next("index.html#pagethree"));
$("#pagetwo").on("swiperight", prev("index.html#pageone"));
$("#pagethree").on("swiperight", prev("index.html#pagetwo"));
});
I can't figure out what I'm doing wrong but when I try this on my browser, I all the ".on()" instructions fire on start without waiting for my clicks or swipes so I get alerts, each one followed by a page change with the right transition. I also tried to put these instructions outside "$(window).load()".
I need your help if someone could tell me what I'm doing wrong or maybe show me an easier way to do this. Thank you

Because you're missing all the anonymous functions that create the references for the event handler, change all of them to this pattern
$("#btn_next1").on("click", function() {
next("index.html#pagetwo"));
});
When you call a function with parenthesis the function is executed immediately and the result is returned, that means you can reference a function directly if you don't need to pass arguments
$("#btn_next1").on("click", next);
But you can't do
$("#btn_next1").on("click", next(argument));
then you would have to do
$("#btn_next1").on("click", function() {
next(argument);
});

Javascript won't load using jQuery Mobile with navigation-geolocation

I am having an issue with jQuery Mobile, javascript and get geolocaton.
I am currently using following to get the code to load, when I enter the page:
$(document).on('pageinit', function(){
If the user has set visibility to visible, a div with the ID visible is shown, this I use to call the geolocation the first time:
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler, errorHandler);
}
After this I call the geolocation every 20th second:
setInterval(function() {
if ($('#visible').length) {
navigator.geolocation.getCurrentPosition(sucessHandler);
}
}, 20000);
My issue is, if I leave the page for one of the subpages, and return to this page, these codes won't run again. I have tried the following to load the javascript, instead of pageinit:
$(document).on('pagebeforeshow', '#index', function(){
and
$(document).on('pageinit', '#index', function()
I tried loading it in the body of the index as well.
Any help would be greatly appreciated =)
Regards, Fred

Firstly, you may want to consider replacing navigator.geolocation.getCurrentPosition() with navigator.geolocation.watchPosition(). This will call your success or error handler functions each time the device receives a position update, rather than you needing to ping it every 20 seconds to see if it has changed.
With regard to page changing, so long as you’re using a multi-page template, then the handler function should get called while navigating to and from any sub-pages.
Here’s a JS fiddle illustrating this
Hope this helps!

How to write a pop-up window in javascript

I need to create a pop-up window like this one:
http://gyazo.com/48a138b2e40fda7e5e72acd1b653a518
in JavaScript.
When the administrator clicks on Delete link one parameter should be passed to JavaScript on-click function.
How can I bind different actions to OK and Cancel buttons ?
My actions are like this one below:
Logout
Could anyone help me writing this piece of code (complete on-click function)?
It would be great if you also show me how to attach this on-click to my link.
Thanks in advance

You could use window.confirm for simple stuff.
It works if you don't mind all your javascript blocking and no control over styling.
confirm and alert are built into all browsers but they're very limited and usually not a terribly good idea for anything beyond one-offs.
For far more control you would have to bring in something like jquery ui dialog or bootbox from bootstrap which is just html and therefore infinitely more flexible. But also more of a hassle to set up unless you're already using the library in question. Also all of these will not block javascript execution which, again, is way more powerful and better "practice" but also harder for people - especially beginners - to get their heads around.
so you can do something like (assuming jQuery):
$('button[name=delete]').click(function() {
if(window.confirm("You really sure?"))
doDelete();
});
or using jQuery ui:
$('button[name=delete]').click(function() {
$('<div>').text("You really sure?") //Create a simple text element to be dialog'ed
.dialog({
buttons: {
"Yes": function(){
doDelete()
$(this).dialog('close');
}
,"No": function() { $(this).dialog('close'); }
});
});
for completeness sake, here's a slick way of removing that redundant code:
$('button[name=delete]').click(function() {
$('<div>').text("You really sure?") //Create a simple text element to be dialog'ed
.dialog({
buttons: {
"Yes": closeAnd(doDelete)
,"No": closeAnd()
});
function closeAnd(fn) { //this function is automatically hoisted
return function() { //return a handler
$(this).dialog('close'); //value of 'this' is determined by who invokes it
fn && fn(); //invoke fn if it was passed
}
}
});

Action-dependant Javascript/Jquery - how to activate a command only AFTER another script has finished?

I'm working on my website and I decided it would be to my advantage to use 'designed' scroll bars instead of the ones browsers come with. I was lucky enough to come across this script http://www.hesido.com/web.php?page=customscrollbar which basically does exactly what I need.
The only problem I've got is that I am trying to apply the custom scrollbars to some divs which are initially hidden and then toggle via a link div between hide/show.
As the programming page (http://www.hesido.com/flexcroll/flexcroll-programming.htm) explains, sometimes the scrollbar needs to be updated and/or manually applied, because being in hidden divs they do not load when the page opens.
I've checked my CSS and my HTML and the code works fine if the div is not hidden, so I am 100% that this has to do with the way I am hiding my divs.
The basic format for that is
$(document).ready(function() {
$('#iddiv').hide();});
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000
);
});});
So I hide it initially, and then toggle it via a button.
Now, in this logic - the manual application of fleXenv.fleXcrollMain("your-div-id"); should be somewhere above the last line of script (the one containing }); ).
This, however, either makes the div unscrollable or messes up the rest of my Javascript (scrollTo functions stop working, etc...)
My question is, as a bit of a noobie JS user - WHERE do I need to place that piece of code that manually activates the custom scrollbar in my code AFTER the toggle is activate and WHAT is the structure?
By which I mean, does fleXenv.fleXcrollMain("your-div-id"); stand on its own, does it need its own separate function, does it get a $ before it?
Loads of thanks to anyone who can help me with this! Final bit stopping me from launching my website.
UPDATE!
HERE is the CSS/HTML and code for an example of what I am trying to achieve; because one of the files in the script needs to be downloaded to work, I think the only way is to copy and paste all the bits in a new HTML document.

The jQuery .animate() function accepts more arguments. One of them is a function that gets called when the animation completes.
function activateScrollbar () {
fleXenv.fleXcrollMain('iddiv');
}
$('#iddiv').animate({
height: 'toggle'
},
2000,
activateScrollbar
);
You can also use an anonymous function, like this:
$('#iddiv').animate({
height: 'toggle'
},
2000,
function () {
fleXenv.fleXcrollMain('iddiv');
}
);
Most functions in jQuery that include an animation, (like .hide() or .fadeOut()), allow you to pass a function that gets called when the animation completes. Most of these jQuery functions allow you to pass these extra arguments in a configuration object which can be more readable:
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
See the .animate() documentation for more details.
Here's a full example with the click behavior included:
$('#myButton').click(function () {
$('#iddiv').animate({
height: 'toggle'
},
{
duration: 2000,
complete: function () {
fleXenv.fleXcrollMain('iddiv');
}
}
);
});

Try this:
$(document).ready(function() {
$('#id').click(function() {
$('#iddiv').animate({
height: 'toggle'
}, 2000,
function(){
fleXenv.fleXcrollMain( $(this).attr('id') );
}
);
});
That function is callback executed after animate function is complete.