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
}
}
});
Related
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>
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")
I'm trying to write a function that hides some text that overlays a video placed on the page through MEJS (the core wordpress integration).
I'm displaying it through the wp_video_shortcode() function, so I'm not actually having to write any JS to get the player to display etc.
I've tried writing a bit of poor code that just checks for a click on the containing div and hides the text, then another click shows it. But I feel like I should be doing something a bit more elegant than that.
Any ideas?
Here's the code I have so far:
$('.wp-video').on('click', function() {
if( $('.video-title').is(':visible') ) {
$('.video-title').fadeOut('2000');
} else {
$('.video-title').fadeIn('2000');
}
});
you can use jquery toggle function to avoid extra "if" statement
$('.wp-video').on('click', function() {
$('.video-title').toggle(2000);
});
I have been spending most of the day troubleshooting and searching for an answer to my question regarding TouchWipe (http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) integration on this custom one-page-site script (http://www.joerg-niemann.de/blog/up-down-left-right-scrolling-single-page-website/) based on Parallax, which was exactly what I was searching for for my latest project.
The script itself does everything I want it to, beautiful transitions and keyboard control straight out of the box, but I can't for the life of me, get the hang of how to integrate TouchWipe.
The idea is, that visiting iOS user should be able to wipe/swipe/slide between the pages with their finger with the same ease, as clicking the navigation arrows, or using a keyboard currently does.
My problem is failing at trying to call the same functions for TouchWipe gestures as clicking the arrows, or using the keyboard. The on-click function calling part of the script looks as follows:
function setRight(page, text) {
$("#rightText").text(text);
$("#rightControl").show().unbind('click').click(function () {
parallax[page].right();
});
rightKey = function () {
parallax[page].right();
};
}
I'm by no means a JavaScript developer, and since I haven't been able to find a decent answer anywhere (shame on me for using a custom script without a FAQ) on how to integrate touch with this lovely script, I'm reaching out to you.
I've tried numerous different variations of calling the necessary functions on wipe/swipe/touch, but all have failed to function. I can't for the life of me figure out why this isn't working:
<script>
$(document).ready(function(){
$('body').touchwipe({
wipeLeft: function(){ parallax[page].left(); },
wipeRight: function(){ parallax[page].right(); },
wipeUp: function(){ parallax[page].top(); },
wipeDown: function(){ parallax[page].bottom(); }
})
})
</script>
I hope I've made myself clear, otherwise feel free to take a jab at me, and I will supply further information if requested. I'm sure there is a simple explanation to why it isn't functioning the way I'd like it to, but I just can't seem to figure it out.
I finally figured out how to implement the TouchWipe script with Parallax.js.
Here's the answer for anyone experiencing the issue as myself in the future:
<script>
$(document).ready(function(){
$('#index').touchwipe({
wipeLeft: function(){ $(".control").hide(); parallax.right.right(); },
wipeRight: function(){ $(".control").hide(); parallax.left.left(); },
wipeUp: function(){ $(".control").hide(); parallax.top.top(); },
preventDefaultEvents: true
});
$('#right').touchwipe({
wipeRight: function(){ $(".control").hide(); parallax.index.left(); },
preventDefaultEvents: true
})
$('#left').touchwipe({
wipeLeft: function(){ $(".control").hide(); parallax.index.right(); },
preventDefaultEvents: true
})
$('#top').touchwipe({
wipeDown: function(){ $(".control").hide(); parallax.index.bottom(); },
preventDefaultEvents: true
})
});
</script>
Turns out I had to call each function seperatly, why, I do not know, but for some reason it wouldn't accept calling both functions in the combined function.
So first, call the functions that hide the controls like so (seperate by semicolon, so you can add another function):
$(".control").hide();
Then you have to call the transition and page change like so (the last ID (parallax.xxxx.ID is used to call from which side you want the new page to slide in from - as I was using TouchWipe to set up the site as a webapp, I would of course slide the page in from the opposite site: wipeUp triggers parallax.top, wipeLeft triggers parallax.right etc.):
parallax.index.bottom();
Here is the new, improved and kickass jsfiddle:
http://jsfiddle.net/Q96uH/2/
Code on my fellow stackers!
Is it possible in javascript to only execute javascript if the user is on the actual tab/page?
Like if he switches to another tab then the javascript process will be paused and when he returns to the tab the javascript will continue the process.
There is no direct way unless you use browser-specific code, or code that's not completely standard (see katspaugh's answer).
'Stop' solution
design your code so that it is "stoppable". That's something you have to figure out for your context.
Then add something like below:
..
<html>
<head>
</head>
<body>
<script>
window.onblur = function() {
yourStopFunctionHere().
}
</script>
</body>
</html>
'Assert' solution
Insert the following code where it really matters that the window has focus:
if(windowHasFocus()) {
//your code here
}
There are different methods for testing if window has focus: JavaScript / jQuery: Test if window has focus
Asyncronous solution
whenWindowHasFocus(fn); //where fn is the function you want to only run when window has focus
One of two possible implementations exist.....
Waiting via setTimeout
function WhenWindowHasFocus(yourFunction){
if(windowHasFocus()) {
yourFunction();
}
setTimeout(function(){ WhenWindowHasFocus(yourFunction); }, 1000);
}
Waiting via custom events
Or even better, if you can wrap the window-focused-dependent functionality (the functionality dependent on the window having focus) into a separate function, then "hook" that function to window.onfocus. Be careful with this one though. You don't wan't to completely overwrite the window.onfocus function (or you undo the previous work you just did). Instead, you may have to use custom events of some sort. Most js frameworks provide custom events. If you go this route, the window.onfocus function will simply trigger some custom event, and you don't have to manually writing any looping code with setTimeout.
//The below is pseudo-code. custom events differ between js frameworks
window.onfocus = function(){
window.FocusEvent.trigger()
}
function WhenWindowHasFocus(yourFunction){
if(windowHasFocus()) {
yourFunction();
}
window.focusEvent.addOnlyOnce(yourFunction);
}