I created a mobile app using cordova and jQuery mobile as the UI framework. It is working fine, except that the click event on the jQuery mobile buttons does not trigger when clicking on the corners. I see a hover effect (button color change) when clicking at corner, but click event not triggered. Click event is triggered when clicked a little inside from button corner.
I am using jQuery mobile 1.4.2. Below is my button (anchor tag with class showOptions and ui-btn) markup and click handler:
<div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
<img src="images/logo_small.png" class="appLogoImg dontDisplay ui-btn-left" style="margin-top: 6px;" />
<h1 class="ui-title">All Packages</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
Options
</div>
</div>
$('.showOptions').on('click', function() {
console.log('button clicked');
return false;
});
Is anybody out there also facing same issue? Please help me.
Instead of using <button> or <input type="submit">, it's better to use <a> (like you) with data-role="button" attribute.
Options
Anchors with data-role=button dont get wrapped with a .ui-btn div. Hence, you have will have the whole button responsive to any event.
Related
Using a jQuery Mobile button like:
<ul data-role="listview">
<li><a data-role="button" href="#" id="test">Test</a></li>
</ul>
I am attaching a tap handler like this:
$('#test').on('tap', function(event) {
event.preventDefault();
window.console.log('do something useful here');
});
The problem is that either preventDefault is blocking the JQM css changes to buttons like ui-btn-down/active/up/etc. or just adding the tap handler at all is preventing them. So it doesn't quite feel right to the user cause there is no visual impact of clicking the button.
Is there anyway around this problem? Perhaps manually assigning the classes in each handler - though that seems heavy handed.
Instead of preventing default actions of a link, you can use the button element:
<div role="main" class="ui-content">
<button id="test">Test</button>
<br /><br />
<input type="text" value="" id="output" />
</div>
$('#test').on('tap', function(event) {
$("#output").val(new Date());
});
jQM styles the button the same way, so there is no real difference.
Working DEMO
Upon further testing, my premise for this question was wrong. The issue appears to be the duration of the tap itself. If you tap too quickly the classes don't get applied, but a few ms longer and they do. I am closing this question.
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
This is my first time using the jQUery Mobile popups. I've found documentation here and here. How I'm looking to create the following:
Now according to the doc's, the following code should work:
Open Popup
<div data-role="popup" id="popupBasic" data-dismissible="false">
<p>This is a completely basic popup, no options set.<p>
</div>
But given the code above I still keep getting the stock standard popup:
Any idea what I am doing wrong?
data-dismissible means whether you want the popup to close once clicked outside it. The default value is true, if you set it to false, you have to add a button with data-rel="back" to close it, jQM wont add a close button dynamically/automatically.
Change your markup to the following.
<div data-role="popup" id="popupBasic" data-dismissible="false" data-theme="c" data-overlay-theme="a">
<p>Click button to close this.</p>
Close
</div>
Note that data-theme and data-overlay-theme are different, the latter changes the color of the popup's overlay.
Or, you can close it programmatically.
$("#popupBasic").popup("close");
Demo
What I'd like to achieve is a page that has a couple of buttons inside a div. When the user presses one of these buttons a dialog opens, asking follow up questions. After this the user is returned to the same page but the div with the buttons is hidden.
What I've tried is the following, inside a JQM page i have div called buttons which contains the buttons(logically). this opens the dialog and also calls a function which saves to local storage which button was pressed. Then the dialog opens which actually sends the data to the server.
For some reason the div is never hidden when I return from the dialog. I even tried to save a variable to the sessionStorage and hide the div on pageload, but seems that the page load event does not fire when returning from the dialog. Any suggestions or am I missing something basic?
<div class="ui-grid-b" id="buttons">
<div class="ui-block-a"></div>
<div class="ui-block-b"></div>
<div class="ui-block-c"></div>
</div><!-- /grid-b -->
// the dialog:
<div data-role="dialog" id="Popup" data-overlay-theme="b" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Heading</h3>
<textarea name="comments" id="popuptextarea"></textarea>
<button type="submit" data-theme="b" onClick="save()">Selvä</button>
</div>
</form>
</div>
I have two javascript functions which try to save the data and also hide the div,
function savePushedButton(color) {
//save which button was pressed to local storage
$('#buttons').hide();
console.log("asd");
}
function save() {
//send data to server
}
onclick is your problem (onchange also), do not use it with jQuery Mobile. jQuery Mobile has already started transition to the dialog, before onclick has been triggered. You will need to manually bind a click event to the button and hide buttons before transition to dialog can occur.
Here's a working example: http://jsfiddle.net/Gajotres/uhsfs/
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button', function(){
$('#buttons').hide();
savePushedButton($(this).attr('data-color'));
});
});
function savePushedButton(color) {
console.log(color);
$.mobile.changePage('#Popup', {transition: 'pop', role: 'dialog'});
}
I've got a page with jQuery tabs, and I'm trying to link a div element inside a secondary tab with zeroclipboard. Unfortunately, it's not working because I suspect the secondary tab is initially hidden when the page is loaded.
The html is the following:
<span id="form" class="tabs tabs-normal grid100">
<!-- HEADER BUTTONS -->
<div class="row_btns_header">
<button class="btn_neutral">Cancel</button>
<button class="btn_primary last save">Save</button>
</div>
<!-- TABS -->
<div class="row">
<ul id="tabs-list">
<li>Blog</li>
<li>Links</li>
<li>Images</li>
<li>More..</li>
</ul>
</div>
<!-- DEFAULT TAB -->
<div id="blog" class="container">
</div>
<!-- LINKS TAB -->
<div id="links" class="container">
<div id="embed" style="position: relative">
Copy into the clipboard
</div>
</div>
<!-- etc. -->
The javascript is:
$(".tabs").tabs();
$("#embed").zclip({
path: "http://www.steamdev.com/zclip/js/ZeroClipboard.swf",
copy: "aaaaaaaaaaaa"
});
zeroclipboard works correctly, if I move the #embed div inside the #blog div. I suspect this is because #blog is visible by default.
Any ideas what I need to do in order to get the zeroclipboard element to work when it's located inside a secondary non-default tab?
Much thanks.
Bardi
I realize this is an old thread, but hopefully this helps someone out there.
I just had the same problem and the solution I came up with was to bind the creation of the zclip object to a mouseover event tied to the desired trigger button/link. Also, to prevent the script from reinitializing the zclip object each time a mouseover event occurs, just turn it off when it is first called. Here's an example:
The HTML:
<input type='text' value='Text being copied.'/> <input type='button' class='clipcopy' value='Copy'/>
The Javascript:
$(document).ready(function(){
$(".clipcopy").on('mouseover', function(){
//turn off this listening event for the element that triggered this
$(this).off('mouseover');
//initialize zclip
$(this).zclip({
path: "js/zclip/ZeroClipboard.swf",
copy: function(){return $(this).prev().prop('value');}
});
});
});
Hope it helps!
The tabs plugin sets the tab panels to display: none, which means the Flash doesn't get started right away. You could try hacking it with CSS:
.container.ui-helper-hidden {
display: block !important;
position: absolute;
left: -99999px;
}
This will override the display: none and instead position the panel off the screen - this way the content is loaded and the panel is measured, but won't be visible to the user. (This is the same way the .ui-helper-hidden-accessible used to work)
The point is initialize it on a mouseover event, I am use jquery.clipboard and this also work
$("a.button-copy-shortcode").on('mouseover', function(event){
event.preventDefault();
//initialize clipboard
$(this).clipboard({
path: pluginDir+'/tonjoo-tom/assets/js/jquery.clipboard.swf',
copy: function() {
var shortcode = $(this).find('.shortcodeValue').text();
return shortcode;
}
});
});