I am making a sexual health app as part of a uni project. I have a form which is driving me crazy. I have realised that a common problem in jquery mobile is that fixed footers move to the middle of the page when the keyboard opens, I have fixed this problem with the follow JS
//hide footer when input box is on focus
$(document).on('focus', 'input, textarea, select', function() {
$("div[data-role=footer]").hide();
});
//show footer when input is NOT on focus
$(document).on('blur', 'input, textarea, select', function() {
$("div[data-role=footer]").show();
});
This code fixes the problem with the keyboard perfectly, however, on the questions that require a select input from a range of answers (picture link below), as you cycle through with the left arrow key and answer each question the footer moves. The footer does not move is you cycle through and leave the answers at the default "choose one". It is very strange and probably a really easy fix that I don't know about so any help would be really appreciated.
PS. The green bar in the photo is the footer and not the header :P
Image link
http://imgur.com/olWSrfu
I'd use the onscroll event in your body.
Try it out, I think it's gonna fix your problem
Related
This is driving me a little crazy as I just can't get it to work :(!
I have jQuery tabs set-up as follows (all working) :
$(".tabs_area" ).tabs({
fx: { duration: 'slow', opacity: 'toggle' }
});
I then have a scroll to anchor focus mechanism (again works fine in terms of the function itself) :
$('.tabs_area li a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 500,'easeInOutExpo');
event.preventDefault();
});
My problem is that sadly they won't work simultaneously. When I click the tab, it correctly displays the corresponding tab content BUT it doesn't scroll you to the start of this content. You have to click the tab again for it to then do the scroll to the content, which isn't good.
Sadly the reason I need is that I am using this on a mobile website, and when you click the tab, although it does actually change the content, it is bellow the tabs menu, and therefore below the visible area of the screen, hence why I want it to swap the content then scroll you down to this so you can see it, and of course with one click only.
So I think I need to combine the scroll functionality within the tabs set-up code... somehow... as a callback or something... but I just keep breaking it :(!!
Any help would be so much appreciated.
Thanks in advance,
TJ
Why don't you use the show option for jQuery Tabs?
Seems to do what you wish to do.
Check the solution
$(".tabs_area" ).tabs({
show: function(e,ui){
$('html, body').stop().animate({
scrollTop: $(ui.tab.getAttribute('href')).offset().top
}, 500,'easeInOutExpo');
}
});
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 am using jQuery mobile and trying to show jQuery pop on page load. But when the page is loaded popup is not appearing in center, instead popup's TOP LEFT corner is appearing in center.
But as soon as browser window size gets change popup automatically shifts to center (Even if I press F12 for developers tool). And then all frequent calls to $('#popupBasic').popup("open"); make it to appear in center of the screen.
But first time top left corner of the popup box appearing in center.
try this: data-position-to="window".
this is the source
You may try repositioning the popup on pageshow:
$( '#popupLogin' ).popup( 'reposition', 'positionTo: window' );
I reckon what you are experiencing is down to the positioning happening prior the page is fully drawn by the browser. You can overcome this by repositioning the popup like this:
$(document).on('pageshow', '.selector', function(){
$('#popupBasic').popup('reposition', 'positionTo: window');
});
$(document).on("popupafteropen", function() {
$('#popup').popup('reposition', 'positionTo: window');
});
You can use the custom pop up events to reposition it after opening
I was getting the same error. You only want to show the popup after the page has been painted.
Adding your code to listen to the pageshow event instead of the pageinit event will probably fix your problem. It fixed it for me.
This is a very vague question.
A few items you should provide:
What browser are you testing on and what version?
What version of JQM?
Are there any custom CSS interacting with JQM?
As of JQM 1.2, Popup options available:
default: "origin"
Sets the element relative to which the popup will be centered. It has the following values:
"origin" When the popup opens, center over the coordinates passed to the open() call (see methods page).
"window" When the popup opens, center in the window.
jQuery selector When the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with ":visible". If the result is empty, the popup will be centered in the window.
Source
It worked for me when I set the width of popup div manually; try:
$("#popupBasic").css("width","200px");
I'm using Jquery mobile and doing some custom stuff.
The default collapsible object just seems to 'show' the hidden content instantly, which I find a bit user unfriendly. A few problems occur with this in that if the button is at the bottom of the screen, and the hidden content is off screen, then the user might not know that anything has even happened.
In my mind two things should happen.
The content should slideDown().
I should have the option to have the page scroll down so that the button finds itself at the top of the screen, in doing so guaranteeing the the previously hidden content is visible.
Any pointers in how I might go about doing either of these?
If I understood you correctly you are talking about a collapsible content block and when a user taps on the header it should scroll down a bit so that the body part is shown to the user.
You can do it by attaching a click event to the header that triggers a scrolling. In the code below I have done it as an animation. I also have adjusted the scroll position with -40px so that the user still sees some part of the elements that are on top of the header.
$('.ui-collapsible-heading-collapsed').on('click.scrollintoview', function (event) {
$('body').animate({ scrollTop: $(event.target).offset().top - 40}, 500);
});
I have been googlgling around and it seems I don't get any answer :/
I'd like to know how can I make sure that the dialog title will "stick" to the top of the document even if I've scrolled down in the main page?
I tried the option "position" top, bottom but with no luck.
Thanks for answering!
Finally I come up with the solution:
Using the "open" event to trigger the window.scrollBy(0,window.innerHeight - dialogHeight);
$("#open").click(function (){
$("#dialog").dialog({
open:function(){
window.scrollBy(0,window.innerHeight - 850);
},
modal:true,
width:850,
height:850
});
});
This will ensure the title of the dialog will be shown at first rather than the bottom part.