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);
});
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>
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!
So, I was using the root JS Fiddle of the below URL (part before 761) and I got a nice design that works exactly how I wanted it. Here's the link:
Click here to see whole JSFiddle and here is the Javascript code:
$('#trigger').click( function() {
if ($('#popout').hasClass('hidden')) {
$('#popout').removeClass('hidden');
showPopout();
}
else {
$('#popout').addClass('hidden');
hidePopout();
}
});
function showPopout() {
$('#popout').animate({
top: 49
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
function hidePopout() {
$('#popout').animate({
top: -150
}, 'slow', function () {
$('#trigger span').html('|||'); //change the trigger text at end of animation
});
}
But when I implement it here: http://m.bwpcommunications.com/agency.php it doesn't work.
Anyone know why that might be?
It looks like you may be setting the click handler before the DOM has loaded.
You can see that, by changing your fiddle to load jQuery "in head" (like your live site), your code stops working.
http://jsfiddle.net/tzDjA/764/
You may need to add the following around your click handler.
This will configure your handler after the DOM has loaded.
$(function() {
$('#trigger').click( function() {
[...]
}
});
http://jsfiddle.net/tzDjA/762/
Alternatively, try delegating the handler so that it will be applied to elements that are added to the DOM later.
$(document).on('click','#trigger',function() {
[...]
});
http://jsfiddle.net/tzDjA/763/
You need to load jQuery on this page: http://m.bwpcommunications.com/agency.php
jQuery UI is not the equivalent of jQuery.
https://developers.google.com/speed/libraries/devguide#jquery
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'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.