I've been having some trouble recognising a swipe event on a popup using jquery mobile. I have successfully implemented swiping between pages but can't seem to get it working on a popup.
My popup contains an image and a close button. When I swipe it the page behind it gets swiped and the popup disappears. The callback function bound to the swipe event is never being called.
Here is my HTML code:
<a href="#vikingmanager1popup" data-rel="popup" data-position-to="window"><img src="images/vikingmanager1_thumb.jpg" />
<div data-role="popup" id="vikingmanager1popup" id="pic">
<img class="popphoto" src="images/vikingmanager1.jpg" />
</div>
Here is my js:
$(document).on('swipe',"#pic",function() {
console.log("Hello");
});
Ok seem to have solved it myself...
The ID should not have been placed on the div but on the image itself.
Related
I'm using jquery mobile 1.4.5. In some instances, I generate a pop-up when a user clicks a link and fill that popup with the results of an ajax call. The generated code taken from firebug after the ajax call returns looks like:
<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
...content...
</div>
</div>
</div>
The popup is showing up fine. I'd say 90% of the time, when i click the close button, the popup closes. However, 10% of the time it just sits there. Usually it'll highlight the close button as blue, indicating it is active or something but the window itself stays open. If I click around in the popup box a few times and keep trying, it will eventually close, but it is extremely frustrating and user unfriendly.
I'm not sure why it doesn't work that small fraction of the time? I've included a screenshot of what the modal looks like. I don't know if the parent div (the blue outline) is somehow covering half of the button and so that is catching the clicks sometimes?
any thoughts as to what is going on here? I've only been able to try in android/chrome and not an iphone, so i don't know if it is browser specific.
Thanks!
edit: adding javascript code that parses ajax response and generates window. NOTE: i know i'm putting everything in the header div right now (for padding purposes), however I don't think that's causing the issue. I stripped out a lot of the contents of the window for brevity.
function showPopup(jsonResponse){
// parse json response
var obj = jQuery.parseJSON( jsonResponse );
// close button
var closeBtn = $('Close').button();
// start to construct window contents from response
var content = "<div data-role=\"header\" data-theme=\"a\">";
content += '<table border="0" style="width:100%"><tr>';
content += '<td style="vertical-align:top;">';
content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
content += '</td></tr></table>';
// close header div
content += '</div>';
// Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
var popup = $("<div/>", {
"id": "detailsPopup",
"data-role": "popup",
"class": "ui-content"
}).css({
"width": $(window).width() / 1.3 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("#detailsPopup").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
//x: 150,
//y: 200
});
}).popup({
"dismissible": false,
"history": false,
"theme": "a",
"overlayTheme": "b",
"class" : "ui-content"
}).popup("open");
} // end showPopup
ok, so i finally figured it out. was 100% my fault (as expected). i was overriding some default JQM css, and of course it caused the error. on another part of the page i had to try to fit 3 buttons on the same row, and had used the following to do it.
.ui-btn{
font-size:12px;
}
(originally: 1em)
That shrunk the buttons enough to fit that other requirement, but that also caused the close button to not show properly (as you can see below it was missing the outer border). Thus, I'm guessing it was just a weird offset/padding/etc error caused by the differing font-size that was the reason behind the clicks not registering or being handled properly.
(insert advice to never override jqm css)
thanks!
I have a button at the top of the page:(Button-A)
<div class="menu-btn-right loginandadd" >
<a href="#" id="A" class="some_class" title="something"</a>
</div>
Then I have another button half way through the page (Button-A is not visible anymore):(Button-B)
<a id="B"><img class="start1addproductbutton" src="#" alt="empty" width="1" height="1" />
</a>
Also, I have the following script:
<script>//
<![CDATA[ jQuery("#B").click(function(){
jQuery("#A").trigger('click');
return false; });
// ]]></script>
In this current setting, when the Button-B is clicked, Button-A is clicked automatically.However since the Button-B is located in the middle and Button-A is not visible, when the Button-B is clicked, users do not know that Button-A is clicked unless they manually scroll to the top.
I tried to add an anchor so that when the button-B is clicked, the page is scrolled to the top and users can see that Button-A is automatically clicked.
However in my test due to the javascript, the anchor tag is not working.
What can I do so that when Button-B is clicked, the page is scrolled to the top and Button-A is still automatically clicked?
Thanks
Try this code which scrolls to element A manually, instead of triggering the click event of that element.
<script>
jQuery("#B").click(function(){
jQuery('html, body').animate({
scrollTop: jQuery("#A").offset().top
}, 2000);
return false;
});
</script>
Is there anyway to make the button hit area larger in jquery mobile. i have two buttons in the header of the app and if i don't touch theme right in the middle they won't work.
thanks
One way to expand hit area around button is to add invisible wrapper around button with some padding. Then attach tap event to the wrapper and trigger tap event on button itself.
Here is example
html
<div id='button-wrap' style='padding: 20px;'>
<a id='button' href="#" data-role="button" >Button</a>
</div>
javascript
$('#button-wrap').on('tap', function(e){
$(this).find('a').trigger('tap');
});
$('#button').on('tap', function(e){
e.stopPropagation();
alert('tapped!');
});
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.
According to the jQuery 1.1.0 Mobile documentation a button should be defined as a link.
Link button
This loads the referenced page.
When using the # it reloads the current page.
Action
How could we define a button that is not a link and simply triggers an event handler when an event on it occurs ?
Edit: my interpretation of what I saw was wrong. Clicking on a button with href="#" doesn't reload the page. I should delete the question because it doesn't make sense.
To my understanding the href="#" does not refresh the page, Example:
http://jsfiddle.net/XNLWS/
Here are the jQM Docs:
http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-types.html
If you're looking for a custom event, here is an example:
http://jsfiddle.net/XNLWS/1/
JS:
$( "#myButton" ).bind( "click", function(event, ui) {
alert('Custom action here');
});
HTML:
<div data-role="page" id="home">
<div data-role="content">
Link button
</div>
</div>