I am making a hybrid app, in which I have a left panel. On opening the left panel my page turns black. I am facing this problem only in windows phone 8. Panels work properly on android devices. Is there a problem with Windows support for jQuery Mobile?
I have an image for the menu button. onclick event of this image i have called a javascript function. the javascript function is as follows
<img src="images/leftnav_icon.png" id="leftnavImage" onclick="OpenLeftPanel()"/>
function OpenLeftPanel() {
$('#myPanel ul').listview();
$('#myPanel ul').listview('refresh');
$("#myPanel").panel("open");
}
How about just opening the panel th default way like described in the docs
<a href="#[your_panel_id]" data-rel="panel">
<img src="..." />
</a>
The data-rel should be optional. To run your listview-foo, bind to panelbeforeopen and run your stuff then (described on the same link as above).
Thank you all for your help. I got this problem solved. I just added a footer to all my pages and the left panel works fine now! CSS for footer is
#yourFooterId{
position: absolute;
bottom: 0px;
width: 100%;
height: 1px;
opacity: 0;
}
I have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
Hi I have a problem and I can't find solution
If you know / used highslide script you know it's amazing, but as always f***g IE has to make life more difficult.
Launch IE9 and go to page http://highslide.com/examples/youtube.html
Then try to open and close video, you will see that it won't close (ESC button works properly). You have to do it more than once. The problem appears only in IE9
Any ideas?
Thanks a lot and sorry for my english :)
This is a known issue in IE9; the flash player throws an error, and unfortunately this JavaScript error somehow affects the Highslide close button the second time we tries to close the popup. Our developer has not been able to find why this error affects the Highslide close button.
You can however still close the popup with the ESC key.
A workaround for IE 9 is to add a message in the caption telling IE 9 users to use the ESC key to close the popup. Demo page: http://roadrash.no/hs-support/youtube-with-alternative-close-method-for-ie9.htmlAdd this code after the regular Highslide settings:
<!--[if IE 9]>
<script style="text/javascript">
hs.captionText = 'Click the ESC key to close';
</script>
<style type="text/css">
.draggable-header .highslide-header ul {
display: none;
}
.highslide-caption {
font-style: italic;
font-size: 11px !important;
text-align: center;
}
</style>
<![endif]-->
I have a web app built with jQuery Mobile that works fine when using it in Safari on an iPad. However, when you add it to the home screen to use it as a standalone app (with the browser navigation removed by , then the page transitions "blink" quickly after each page transition.
I have Googled on this and found that blinking was considered a bug a long time ago, and by now should be fixed. And it seems to be in Safari, but not as standalone from home screen. Does anyone know what is causing this and how to fix it?
Does it have anything to do with the fact that the navigation bar is not there? It works fine as standalone on iPhone though, it's only on the iPad that it occurs...
I would accept as an answer even if someone can show me that this is a known bug (not one of the old bugs that have already been fixed, where it flickered even in Safari mode) or if someone has inside knowledge about that (no one is answering my question at the jQuery forum either...). But of course I would love it if someone actually had a workaround for the problem!
i had exactly the same problem
http://mailinglist-archive.com/rhomobile/2011-08/00656-Re+rhomobile+page+views+and+transitions mentions something that worked for me.
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
I still get the flicker in the toolbar, so I converted my tool bar to :
<ul data-theme="b" data-role="listview" style="margin-top: 0;">
<li data-role="list-divider">Your text goes here</li>...
I was nervous about commenting out focus, but a google search found the following CSS that seems to work:
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
Original link: https://github.com/jquery/jquery-mobile/issues/2856
I was only having a problem with the slide transition (even reverse slide worked fine.
JQ 1.7.1
JQM 1.0.1
PhoneGap 1.5.0
Revision: It should be noted that the discussion below was mitigated with the release of iOS 5.0. It can be a partial influencing factor for anyone who hasn't upgraded but if you're running 5.0, Nitro is ever present. http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
--original answer--
Apple introduced the Nitro javascript engine into the Safari browser. However, they only installed it on the browser, not in the UIWebView (which is what you get when you run form the home screen or embedded in an application like PhoneGap.
There has been some speculation if this performance boost was omitted on purpose. http://www.mobilexweb.com/blog/apple-phonegap-html5-nitro.
So, if it seems like it's actually performing slowly... that's cause it really is. It's not using the Nitro engine.
Adding this line
<style>
/*** patch for jquerymobile page flicker that was happending ***/
.ui-page {
-webkit-backface-visibility: hidden;
}
</style>
helped me.
I fixed it with:
<meta id="viewPortId" name="viewport" content="width=device-width; user-scalable=no" />
This only partially works for me:
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
$(document).bind("mobileinit", function () {
$.mobile.defaultPageTransition = "none";
});
Which prevent's flickering and whitespace at the bottom of the page but notice that transitions are turned off.
Also, id's are not being used more than once which I can verify with:
// an id used more than once??
var ids = new Array();
$.each($("[id]"), function () {ids.push($(this).attr("id"));});
var matches, val1;
for (var i = 0; i < ids.length; i++) {
matches = 0;
val1 = new RegExp(ids[i], "i");
for (var i2 = 0; i2 < ids.length; i2++) {
if (ids[i].length == ids[i2].length && val1.test(ids[i2]) == true)
matches++;
}
if (matches > 1)
alert("This id was used more than once: " + ids[i]);
}
Have also tried:
$.extend($.mobile, {
metaViewportContent: "width=device-width, height=device-height, minimum-scale=1, maximum-scale=1"
});
And loading the page into the DOM and only once that is complete doing the transition as so:
var promise = $.mobile.loadPage(url, {
pageContainer : $("body")
});
promise.done(function () {
var newPage = $("body [data-role='page']:last").attr("id");
$.mobile.changePage($("#" + newPage));
});
I'm still getting the flickering on page transitions.
the answer.... jquery mobile page flicker
Unfortunately, none of the suggestions actually solved the problem, at least not for me. However, finally it has been fixed in the latest stable version of jQuery mobile (1.1.0), so the problem is finally gone! I just had to go in and change the global transition back to slide, because they set it to fade:
$(document).bind("mobileinit", function () {
$.extend($.mobile, {
defaultPageTransition: 'slide'
});
});
Hope this helps someone else who perhaps hadn't noticed the update.
It seems that the following META tag solves the issue:
<meta id="viewPortId" name="viewport" content="width=320; user-scalable=no" />
It is a known bug. See the article in the seaside mailing list.
Rolf van der Vleuten noticed:
flickering can occur when using the same #id more than once in a page,
which is not unlikely when you are using the one page template method. so
be sure to not use #id's more than once.
I don't know why this happens, but I found out that when my first page had
an element that is outlined by default, flickering would occur, this was
fixed by adding:
input {
outline: none;
}
From the currently open issue, "Slide page transition causes screen repaint on iOS 5 chromeless", the recommendation is to comment out pageTitle.focus() from the reFocus function.
This however did not solve my problem. I found it necessary to remove both pageTitle.focus() and page.focus(), basically the entire function.
This issue (and specifically the change to the reFocus function) is also mentioned in issue 2474. It is a fix for iOS4 that did not solve my iOS5 iPad problem.
This seems to be a very very strange bug.I tried to fixed it.But failed.Finally I try to add some code to my project to avoid this issue.
If you deep into jquery mobile's page transition you would know his principle.
It loads another page's (the page you want to go) body into an element such as : .
I just add an wrapper outside of this element and make a setTimeout to delay showing this page.
I made a phonegap app in iPhone 4(ios5) and can't fix this issue.Just pray that jquery mobile team would fix this bug quickly.After spending a few days on this problem I just wanna fuxk jqm...
This only worked partially for me
<style>
body .ui-page
{
height: 100% !important;
-webkit-backface-visibility: hidden;
}
input { outline: none; }
</style>
for data transition "flip" it worked but not for "slide"
I am using MVC2 on VS2010 Express edition.
I Have a (simplified) page that includes RenderPartial for a dialog. The dialog is supposed to pop up when a button is clicked. However, if I include modal:true as one of the dialog options, then when the button is clicked nothing happens. The dialog does not pop up. When I remove modal:true from the dialog options then dialog pops up as expected and closed as expected. Please help. I have sent so much time researching this problem and can't find anything. When at first I had a list several options specified for this dialog and it was not poping up, I removed them one by one to find out if any of them are causing the problem, and sure enough when I removed modal the dialog was rendered on clicking the button. Adding back the option modal: true stopped rendering of the dialog again.
These are in master page:
<link href="<%=ResolveUrl("~")%>App_Themes/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
<%=Html.Script("~/Scripts/jquery-1.4.2.min.js")%>
<%=Html.Script("~/Scripts/jquery-ui-1.8.2.custom.min.js")%>
<%=Html.Script("~/Scripts/jquery.form.js")%>
This is the page that is initially rendered. The first line in bold is the line for the button that when clicked, it would open the dialog. The second line in bold the line that is supposed to actually render the dialog:
Request Dialog
My Menu
<% Html.RenderPartial("get_dlg", ViewData.Model.FName); %>
This is the entire code for the dialog page (get_dlg). As such, the dialog does not show up when the button is clicked. Removing the line in bold will some reason allow the dialog to be rendered!
<script type="text/javascript">
$(document).ready(function () {
$("#get_dlg").dialog({
title: 'Get Dialog',
autoOpen: false,
modal: true
});
$('#requestDialog').click(function () {
$('#get_dlg').dialog("open");
})
});
</script>
show me something!
Any suggestions please?
I got help from someone on ASP.NET Forum: it is a CSS problem. adding the following to the ascx (view) fixed the problem:
<style type="text/css">
.ui-widget-overlay {
background-color: #000000;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
}
.ui-dialog {
background-color: #FFFFFF;
border: 1px solid #505050;
position: absolute;
overflow: hidden;
}
</style>