I have a panel and am trying to always show the panel when the window is wide. I don't need to have a close button at all - just always show it for wider windows.
jQuery Mobile Responsive Panel Dismiss issue helped, along with others, but no luck. I can get everything to almost work, but everytime I navigate to a new page, the panel animates in, which looks weird.
I am now looking at using a fixed div on the left that is not a jquerymobile panel. I can do this from the server. But it seems like a lot of effort to just keep a panel open.
Any hints?
Did you try something like this:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
I also encounter such a problem. Here is my solution:
add the following javascript into your header:
$(document).on("pagebeforeshow", function( event, data ) {
$('#my-panel').panel("open");
})
and in your panel add two attributes:data-swipe-close="false" , data-dismissible="false"
then the panel will be always shown in your html
Related
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
I want to show a popup screen on my page using JQuery UI Dialog widget.
To implement this I have a <div class="popup-placeholder"> on my page. Actually there are more than one on the page (If this makes a difference to the solution)
On click of a button, I am initializing the dialog and 'open'ing it. The initialization of the popup is inside the action click because it is supposed to make an Ajax call to get the content of the popup. (I tried taking the initialization out of the click event, but that did not work $('div.popup-placeholder').dialog(); )
var popupContext = $('#' + contextControl.id + ' > .popup-placeholder');
popupContext.html(formHtml);
$(popupContext).dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
dialogClass: '',
draggable: true,
position: 'center',
resizable: false,
width: 600
});
On click of the action button, the form shows and does what it is supposed to.
Now, I have a close link on the popup WHICH IS NOT A DIALOG BUTTON, but just another link with an event binded to it.
It does this...
$('#popup-placeholder-61').dialog('close');
where #popup-placeholder-61 is the same as $(popupContext)
The problem I am facing now is that, on close of the popup, the same action button does not show the popup again. The issues seems to be that the <div class="popup-placeholder"> has been removed from the mark-up.
I tried the solutions on the following page but did not help -
Jquery Dialog Close on StackOverflow
So, I need more help
After struggling a bit, i came up with a best solution. Please use below line instead of dialog('close')
$('#popup-placeholder-61').dialog("destroy");
This will allow div to retain its position
My issue has been resolved, but I will be looking into why my earlier approach did not work.
What I was doing earlier was that I had multiple place-holders with different IDs, and I was making only one of them the dialog. I used some Jquery selectors to select the appropriate div for the dialog box and had issues as described above.
The only change I did now is that I have a single div which acts as the placeholder. And that now works. It also initialized fine outside my event.
So, maybe it was something to do with my selectors? I will try more and if I find something will post it as a follow up.
Thanks.
Try taking the initialization code out of the click event it may be that by trying to rebind everything again it's failing to pop the dialog open with the second click ... I had a similar problem which I "resolved" by creating the the markup for the dialog every time the dialog was to be opened.
The ajax bit of your problem is not hold back for you to take the initialization out of the click event, just load your ajax content on the click event and show the dialog with dialog('open').
The main problem was that I was looking for the dialog div in the wrong place.
See this post for more details ...
Jquery Dialog - div disappears after initialization