I have a set of divs that can be scrolled through on my jquery mobile page. Each div has an active class in CSS so they change color when they are tapped. For some reason when I try to scroll through my list the items turn active because I am 'clicking' them.
That isn't too serious and it looks fine, but there's also another glitch. If the page is intertial scrolling, so I just flicked it and it hasn't stopped moving, a tap on the screen will activate the div I pressed when I first scrolled it.
Any idea what is causing this/how to stop it?
You could try the stopPropagation
HTML:
<div id='someID'>
<someElement />
</div>
JS:
$('#someID').click(function(e){
e.stopPropagation(); //stops default behaviour
//check to make active/inactive
if( $('#someID').hasClass('active') ){
$('#someID').removeClass('active');
//do what needs to be done when it becomes activated
} else {
$('#someID').addClass('active');
//do what needs to be done when disabled
}
//do whatever you always want to here
});
Note: whatever requires the click event to work will have to be re-enabled afterwards, though if you use a link/button/etc. within the div that has a click event, it'll still function.
Related
The initial task is to handle hardware back button, when Fancybox image is in fullscreen mode.
At now, when user press back button on phone, current page changes to previous and fulscreen image stays on foreground.
The task is to close Fancybox image and stay at current page.
I did it this way:
$(document).on("pagecontainerbeforechange", function (e, data) {
if (typeof data.toPage == "string" && data.options.direction == "back") {
if ($(".fancybox-is-open").length) {
// close fancybox
$.fancybox.close();
// stay at current page
data.toPage = '#' + $.mobile.activePage.data('url');
$.extend(data.options, {
changeHash: true
});
}
}
});
Fancybox is closed, user stays at current page, but when he clicks on Back button again, he gets on page, which is before previous one.
How correctly prevent page change?
Problem was solved by itself, when I started to use fancybox gallery widget.
Old problem link was:
<img src="image_full" />
New link is:
<img src="image_full" />
And no js additional code is required.
there might a solution also. I have the same problem.
I think you have to add a "a" around your image such as, with only href to #:
<img...>
Then you have to create a js function to detect a hash change. With the hash change, you select your modal and close it. Add this javascript:
<script type="text/javascript">
window.onhashchange = function() {
//console.log(location.hash); // for debbuging
if(location.hash=="#biggerImage"){
$('#myModal').show(); // $ is the jQuery selector - it will see the hash is for opening the image and it will show the Modal
}
else{
$('#myModal').hide(); // $ is the jQuery selector - in the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal
}
}
</script>
In the case where the user presses "BACK" button , the hash will not have the #biggerImage anymore, so the code will hide the Modal, giving the effect that the back button closes the Modal
When you click on a JQuery UI slider that is disabled and the page has been scrolled down, the page goes back to the top.
This is happening because the slider widget is implemented with an anchor tag containing an Href of #.
This is my hack solution.
$(".ui-slider-disabled").on("click",
".ui-slider-handle",
function () {return false;});
It works well but, is there a native (API) way to stop this?
How about this (you may need to change the class, depending on how you set it up)
$(".ui-slider").click(function(e){
e.stopPropagation()
});
Is there a reason why the click handler is removed from my button after calling the button() method on it. I am changing the content of my buttons, and as a result I need to refresh them. I noticed refresh does not work, so I tried the button method.
This will restyle my "button", but I lose my click event.
How can I accomplish both?
http://jsfiddle.net/RQZG8/2/
And here is the code:
$("[data-role=button]").html("hello world").button();
$("[data-role=button]").click(function(){
alert("i have been clicked");
});
My big issue is that I have a div which is acting as a button. I want to change the content of the div, but I want to be able to have it continue to look like a button while keeping it's behavior.
Try this: $("[data-role=button] .ui-btn-text").html("hello world"); otherwise the padding is lost.
First of all IMHO, given your example that goes with the question (when you change only caption of a button), there is no much point to use a div as a button when jQM gives you a lot of standard choices.
All of these:
<button>Button element</button>
<input type="button" value="Button" />
<input type="submit" value="Submit Button" />
will be automatically enhanced by jQM to buttons without even specifying data-role="button".
And you can of course use a link as a button
Link button
Now if you still want to use your div as a button you don't need to specify data-role="button" just call button() plugin. That will create all necessary markup for you and your original div will be preserved as hidden.
<div id="button1">By button<div>
$("div#button1").button();
To refresh a button after you changed its caption you need to call refresh method:
$("div#button1").html("Hello World").button("refresh");
Now to normally handle the click event of a particular button (if it's not the only one on the page) you probably need more specific selector than just the data-role=button attribute. id would be perfect for that. So instead of
$("[data-role=button]").click(function(){...});
do
$("div#button1").click(function(){...});
And lastly you most certainly know that, but I didn't see it in your jsfiddle, so I just mention that you better put your code in one of the jQM page handlers. pageinit is recommended way to go.
$(document).on("pageinit", "#page1", function(){
...
});
Here is jsFiddle.
I am trying to set up a JQuery Mobile 1.3 site that uses a panel and a slider.
Problem is, that using the slider triggers the panel, which opens on a "swiperight" event, as I am moving the slider to the right. The slider will be for pagination, the panel for a menu.
Code here:
http://jsfiddle.net/kMARn/1/
Move the slider to the right and the panel will open.
I have tried using the .not() selector for the panel to not react on the slider:
$(document).not("#slider").on("swiperight", function(event, ui) {
$("#myPanel").panel("open");
});
But it won't work, the panel opens when i move the slider to the right. Tried a bunch of variants too, but I'm lost...
Any ideas?
Thanks!
A bit late to the party, but you can disable swipe-to-close by setting the data-swipe-close attribute to "false" on the panel div.
http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/options.html
In my case I used this simple code, without data-swipe-close = "false" in panel.
Keeping panel close with swipe right, outside of the slider.
$('#panel').find('#slider')
.on('slidestop',function(e,ui) {
var value = e.target.value;
//...operations with slider value...
})
.parent().on('swiperight',function(e,ui) {
e.stopPropagation(); //block panel close
})
From the 1.3.0b1 Docs for Swipe:
"Triggers when a horizontal drag of 30px or more (and less than 75px
vertically) occurs within 1 second duration"
This applies to and can be configured for swiperight too. You can make the slider small in length and this would ensure that both the slider event stop and the swipe are not triggered at the same time, yet that may not be practical for all scenarios.
What might be better is to bind the swipe right to a DIV or section of the page. By this, I mean if you have a 75 px div box on the left hand side of the display, and when a swipe event occurred within that div, it could trigger the menu.
I feel the logic here might be better controlled by a button, much like used in the Facebook App to display there slide out menu. In the Dolphin browser on Android, this type of event also triggers a bookmark menu, so if a page has a swiperight event and trigger it, I sometimes get both the event and the bookmark menu from the App. Annoying!
I did fork your jsfiddle and will play with it more (http://jsfiddle.net/Twisty/Hg2pw/). FYI, they have JQM 1.3.0b1 in their available frameworks so you don't have to link it in your HTML. If I find some more info, I will comment here.
The following solution is more a workaround. It should be relatively reliable though.
$(document).ready( function () {
var menu_available = true;
$(document).on("swiperight", function(event, ui) {
if (menu_available) $("#myPanel").panel("open");
});
$("#slider").on("slidestop", function( event, ui ) {
menu_available = false;
window.setTimeout(function() {menu_available= true;},250);
});
});
The variable menu_available is false for a 250 milliseconds right after the slide stops. The window.setTimeout block will reset the variable so that the menu is available again.
This is a stupid workaround, but jQuerys function event.stopEventPropagation(), which IMHO would be the correct way to go, didn't work.
I currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));