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")
Related
I have a block of working code that allows me to shift from one set of colored items to another based on a span click event that runs in jQuery. I am using wordpress and it requires I spell out jQuery instead of using '$'. In part, it works by moving a variable to the active selection and changing a variety of other properties based on defined variables in the html of that 'span'
I tried changing .click(function f()... to .touchstart(function f()... and it doesn't work when I load the site on mobile. If you think you know the answer, cool. I will now list things I have tried.
This is what my click function looks like:
jQuery(document).ready(function f($) {
jQuery('.changecolor span').click(function f($) {...
});
});
Attempts:
jQuery('.changecolor span').touchstart(function e()
jQuery('.changecolor span').on("tap", function e() {...
My cache is set to auto clear every time I save a new change in, and I've tested this.
$('.changecolor span').on('touchstart',function(ev) {
$('your seletor').trigger(ev);
});
I'm currently using a 3rd party jquery plugin which when called from a page, pops up with an overlay, and some forms that are not part of my site.
I've been trying (with no joy so far) to be able to detect from my own sites jquery, when this overlay is closed. I'd like to simply jump to a certain part of the page.
I've tried writing jquery to listen for the final button of the 3rd party form being closed, by checking for it's class name being removed, with .remove .destroy and checking for it's existing with .length and some other methods. however, it seems that my on page jquery can't see anything about these elements at all, and therefor I can't do something fun when that dialogue ends.
Anyone got any ideas of how this could be achieved? Am I missing something obvious?
Cheers in advance!
I was able to get this working via the below javascript. Maybe there is a better way, but this seems to be working well
<script>
var bookingInterval;
$("#ViewingButton").click(function () {
setTimeout(function () {
bookingInterval = setInterval(function () {
if ($(".agent-ui-modal")[0]) {
// Do nothing if class exists
} else {
// Do something if class does not exist
window.location = ("#calculator");
stop();
}
}, 500);
}, 5000);
});
function stop() {
clearInterval(bookingInterval);
}
</script>
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
}
}
});
I have a scrolling image script that I'd like to update the scroll speed of on the fly, using a hover function. I've researched and just can't figure out how to get the variable to update inside of the function without calling the function again. I don't want it to start over, I'd just like the speed to increase as it is running.
(function ($) {
$(function () { //on DOM ready
var defspeed = 1;
$(".simply-scroll-list").simplyScroll({
speed: defspeed,
});
});
})(jQuery);
$('.fast-forward').hover(function () {
var defspeed = 5;
});
As you can see above, I don't know how to integrate those two blocks of code properly.
You cannot increase the speed on the fly in a decent way, because the speed is set only once when you initialize the simpleyScroll plugin.
You could reinitialize the plugin but that could have unwanted side effects. jQuery plugins sometimes add extra html to your DOM and reinitializing it would do that multiple times. Multiple event handlers could get attached to the same nodes and all kinds of stuff could go wrong. I do not know if this is the case with this plugin though. Try it :)
I myself would just add it to the plugin. I don't think it would be hard as the plugin is pretty small.
I'm working on an application that uses JQuery layouts and loads only website parts (like Gmail). Every time I load a "panel" using JQuery I have to substitute some links to make it work with panels (i.e., to load this link content in a panel, not in the full page). Is something like this:
function changeMainPane(href) {
$("#screen").load(href);
$("#screen a.ajax-page").click(function () {return
changeMainPane($(this).attr("href"))
});
}
This is a very simplified changeMainPane function, mine has tens of $("#screen ...").click() calls to integrate the new piece of HTML into the page.
The question is: there is any better way to do this? Something like:
$("#screen").ready(function() {
// All my html setups
}
Or something like "always a user clicks on a link, check if has ajax-page class and the call this function" without having to initialize each link independently.
You can have a look at the delegate method. The delegate method can be registered for the common parent element of all the links on which you wants to reload the main panel. It can be the document object or a lower level element like "body" or another div like "div.mylinks".
$(document).delegate("a.ajax-page", "click", function(){
changeMainPane($(this).attr("href"))
})
Maybe jQuery live() is what you're looking for. You use it like this:
$("#screen a.ajax-page").live('click', function () { whatever; });
Then you don't need to reinitizalize after ajax activity.