I'm developing a RhoMobile appand I've been having lot of trouble with page transitions.
At the end, I just decided to turn them off for a better user experience. Every button click works perfectly, except for one where I have a button inside a Collapsible element.
For the click event on the button not to get interpreted as a click on the collapsible, I use this js code, which I suspect is causing trouble:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
e.stopImmediatePropagation();
});
});
And in the HTML:
<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
<div data-role="collapsible-set" class="uurbon-block">
<div data-role="collapsible" data-collapsed="false">
<h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>
<span style="float:right;" class="button-span">
<a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
Button
</a>
</span>
</h3>
</div>
</div>
</div>
This will cause a blank page to be shown for 1-2 secs before transitioning. I'd be looking for a fix, but if not, i'd be happy with that page just beeing black (my app background is black also, so this blink wouldnt be so noticeable).
Note: I have alredy tried setting body background color in css, won't work.
Thanks for your ideas!
As pointed by Omar, if you want to put a button inside a collapsible and prevent the collapsible from capturing the click while also handling the page in the same browser, the correct way to do this is (Take notice that this may only apply to RhoMobile, but its worth a try on other jquerymobile-based frameworks):
and avoid RhoMobile trying to open this in a new browser is by using:
javascript:
$(document).on('pagebeforeshow', '#index',function(e){
$('.details').bind('click', function (e) {
e.stopPropagation();
$.mobile.changePage("your_page");
});
});
HTML:
Button
Notice the href="javascript:;". I had this first set to "#" and also "", but that didn't work.
Related
I created this snippet in a simple Phonegap 3.1 app, based on the JQuery Mobile popup documentation:
<div data-role="popup" id="popupMenu" data-theme="e">
<ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="e">
<li>Help</li>
<li>About</li>
</ul>
</div>
<a href="#popupMenu" data-rel="popup" data-role="button">
Click for menu
</a>
Clicking the button brings up the menu.
I also have this snippet in an external .js file:
$(document).ready( function() {
document.addEventListener("menubutton", onMenuKeyDown, false);
})
function onMenuKeyDown() {
alert("Menu key pressed!");
// what goes here?
}
Pressing the menu button brings up the alert, so I know the listener is working. Now, I want to add some code to the onMenuKeyDown() function so it will bring up the menu loaded by the button in the first snippet. The code needs to be equivalent to clicking
Click here
How would I do that?
Thanks.
Well, I found a way to do this. It works, but it seems kind of hacky. Suggestions for other ways to do this are welcome.
First, make the original link invisible and give it an ID:
<a href="#popupMenu" style="display: none;" id="hammerTime" data-rel="popup" data-role="button" >
Can't touch this!
</a>
Then have the menu button click the invisible link:
function onMenuKeyDown() {
// alert("Menu key pressed!");
$("#hammerTime").click()
}
Hopefully someone else will find this useful along the way.
I am currently building a website for an indie game development team I am working with.
Right now I am writing the alpha sign up page and I have created layout which needs to make use of the slideToggle() and fadeToggle() methods, however after a few hours of faffing around in my editor I cannot seem to fathom a solution for the behavior I want.
When the page loads I want the form container to be in its slid up position and when the user clicks on the div I want the form container to animate down.
I have tried to animate the display property from hidden to block and I have also tried to hide the element when the document loads and then re-show it on click, however when I did that I noticed a strange behavior as the div would slide down and then up, which would cause the user to have to press the button again to view the sign-up form.
The code below handles the click event,
<a href="#" >
<div onclick="$('#showForm .inner').fadeToggle({queue:false});$('#showForm').slideToggle();" id="alpha-container" class="alpha-off"></div>
</a>
And this is the div I want to be hidden and re-appear
<div id="formContainer" class="form container">
<div id="showForm" class="outer">
<div class="inner">
<form method="post" action="verify.php">
<table>
<tr>
<td class="intro">
<h1 class="header-orange">Liberico Alpha Application</h1>
<p class="body-text">So you think you have what it takes to brave the battlefield?
</p>
</td>
</tr>
</table>
</form>
</div>
</div>
</div>
I have created a jsfiddle demonstrating how my page currently renders - http://jsfiddle.net/alexmk92/54EUC/ - any pointers would be greatly appreciated.
Firstly, i removed the javascript code from html and added a class "clickable" to the clickable element:
<a class="clickable" href="#" >
<div id="alpha-container" class="alpha-off">CLICK ME FOR ANIMATION</div>
</a>
And then, i've created a custom javascript toggle function with slideDown and up:
$('.clickable').click(function(){
var showFormObj = $('#showForm');
if(showFormObj.hasClass('active')){
showFormObj.removeClass('active');
showFormObj.slideUp();
}else{
showFormObj.addClass('active');
showFormObj.slideDown();
}
});
On the css part i hid the 'showForm' element:
#showForm {display:none;}
Here is the fiddle: http://jsfiddle.net/Karzin/54EUC/2/
If you need to hide the form when page loads. For form container use
display : none
Eg:
http://jsfiddle.net/54EUC/1/
On my jQuery mobile app;
On menu.html and inside body I do something like this to go help.html;
....
$(document).off('pageinit', '#menupage').on('pageinit', '#menupage', function() {
$(document).off('click', '#help').on('click', '#help', function(){
$.mobile.changePage("help.html", {
reloadPage: true,
transition: "flip",
reverse: false
});
});
}
....
<li><a id="help" href="#" role="link" data-role="none">
<div class="img help"></div>
<div class="menuTitle langMenuItem3">Help</div>
<div class="arrow"></div>
</a></li>
Then on the help.html page I have a back button like this to go back to menu.html:
<header data-role="header">
<a href="#" data-rel="back" class="button" data-role="none">
<div class="arrow_reverse"></div><span class="langBack">Terug</span>
</a>
<div class="pageTitle">Over deze app</div>
</header>
My problem is this works under normal conditions, BUT if I make a refresh on menu.html, then go to help.html and then go back to menu again, menu.html does not load properly, I can see the page visually loaded ok but on firebug I see that some necessary javascripts inside tags does not hit anymore, It never hits any javascripts anywhere on menu.html anymore, just loads the previous html from cache thats all. Also the page title of menu.html does not change correctly and stays as "Help" after that point.
my full menu.html looks like this;
http://jsfiddle.net/M5CYZ/
Any ideas?
Do it this way.
Give back button an ID
<a href="#" id="backbtn" class="button">
<div class="arrow_reverse"></div><span class="langBack">Terug</span>
</a>
and then add the below code in help.html
$('#backbutton').off('click').on('click', function () {
$.mobile.changePage("menu.html", {
reloadPage: true,
transition: "flip",
reverse: true
});
});
This is a wild guess but according to your code this is a normal behaviour.
jQuery Moible event pageinit will trigger only once during the initial page load and unless page is refreshed (manually, with rel="external" or in your case reloadPage="true") it will never trigger again.
If you want javascript to execute again each time page is visited then use pagebeforeshow event instead. As seen in your example, removing pageinit and adding it back will not help you.
If you want to find more, read my other answer/article about page events: jQuery Mobile: document ready vs page events
And here's an example to prove my point: http://jsfiddle.net/Gajotres/Q3Usv/
$(document).on('pageinit', '#index', function(){
alert('Pageinit');
});
$(document).on('pagebeforeshow', '#index', function(){
alert('Pagebeforeshow');
});
I am trying to use JQuery toggle, so when a user clicks the info icon, the hidden div containing item information is shown / hidden. For some reason it is not working for me.
While trying to debug, I noticed that show(), correctly shows the target element that I would like to toggle. However, when I replace show() with toggle(), it does not work and does not return any error.
I was wondering if someone can help me identify the cause of this problem.
My Markup
<div class="option">
<div class="prod-text">Toy Whistle </div>
<div>
<img class="info-icon" src="Info-icon.png">
</div>
<div class="option-info" style="display:none;">
<div>
<div class="price-text">Price: $100</div>
<div class="prod-id-text">Item Number: 231912</div>
<div class="quantity-text">Quantity: 72</div>
</div>
</div>
</div>
JQuery (does not work)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').toggle();
});
JQuery (works!)
$(".info-icon").click(function(){
$(this).parent().parent().find('.option-info').show();
});
Many thanks in advance!
Perhaps the click event handler is getting bound twice, and thus fire twice for each click. The show() would work fine in this case, but the toggle() would show and then immediately hide the element each time you click. Try this:
$(".info-icon").click(function(){
console.log('click handler fired');
$(this).parent().parent().find('.option-info').toggle();
});
And run this with Web Inspector or Firebug enabled to see how many messages are logged for each click.
I am using jQueryMobile's $.mobile.changePage(...) method to switch to a different page within my project.
$.mobile.changePage("#foo", {
transition:"slide"
});
When I run that method, the transition works perfectly but when I hit the browser's return button I see no reverse transition.
I played around with some of the parameters described in http://jquerymobile.com/test/docs/api/methods.html but had no luck.
Especially setting reverse:true just reversed the transition when moving forward to the target page but there is still no transition when I hit the back button.
Update: It seems like seeing data-rel="back" does the trick for "orginary links" defined via the <a>-tag BUT what I need is the JavaScript equivalent when calling the $.mobile.changePage() function.
Have a look at this page, http://jsfiddle.net/nachiket/mDTK2/show/light/
Works fine with me.
Click (on page 1) shows transition from Left to right, & Back button (on page 2) shows transition from right to left.
Source: http://jsfiddle.net/nachiket/mDTK2/
If it is not working fine, than please share your browse and other details.
If example is working fine, but not your code, make a jsfiddle highlighting your problem, so I can check and update code/answer.
For the links you want to have the reverse transition on you can use data-direction="reverse" with data-rel="back"
Example:
<div data-role="page" >
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
Page 2
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header"><h3> Header </h3> </div>
<div data-role="content" >
<a href="#" data-rel="back" data-role="button" data-direction="reverse" >Back</a>
</div>
</div>
jsFiddle:
http://jsfiddle.net/GEDcF/
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/data-attributes.html
UPDATE
From your comment
"Yeah, but how do I do that with the JavaScript function $.mobile.changePage()?"
Docs:
http://jquerymobile.com/demos/1.1.1/docs/api/methods.html
Quote:
Properties:
reverse (boolean, default: false) Decides what direction the transition will run when showing the page.
Found it.
One of our developers turned off all return transitions globally, so no wonder that it didn't work.
This is what he used. Removing that line did the trick.
$.mobile.changePage.defaults.transition = "none";