I'm loading into another div with .load('settings.html') function in
The settings.html page being loaded contains:
<div style="text-align: center; border: 1px solid black">
Application Settings: <br>
Reset Application Key
</div>
The problem is that the button is not getting formatted as per jquery mobile button data-role. If I place this on my main page the button is displayed correctly whereas by load function its a simple link.
What am I getting wrong here?
After you load settings.html use enhanceWithin() to enhance the markup and css of the button. Give your div a class and enhance it after load
Read more here -- https://api.jquerymobile.com/enhanceWithin/
Demo Take out the enhance to see that it does not render properly even when you append it
https://jsfiddle.net/5es81kgd/
Code
$('.but').append('Reset Application Key').enhanceWithin();
Related
After I have implemented "hover one DIV - affecting another inner DIV" I noticed strange misbehavior on iPad/iPhones. Now it takes two taps to click on the link in the DIV with hover code:
HTML:
<div class="portfblock">
<div id="portfblock1_imgdiv"> <a href="http://photoRadosti.com" target="_blank">
<div class="portfblock_imgdiv_txt_dsc_over">Baby & Family Photography</div>
</a>
</div>
<!-- #portfblock1_imgdiv -->
<div id="portfblock_desc"> photoRadosti.com
</div>
</div>
<!-- #portfblock -->
CSS:
.portfblock:hover .portfblock_imgdiv_txt_dsc_over {
visibility: visible;
}
First tap only executes on-hover action (the sub-div with the class .portfblock_imgdiv_txt_dsc_over becomes visible as needed by hover), and only the second tap executes the href link jump.
My whole page to look at the misbehavior from iPad/iPhone is here.
And the snippets of HTML and CSS code with one of the section to check are here at JSFiddle:
http://jsfiddle.net/bubencode/5doLj02e/
It works fine on computer with the mouse, but it takes two taps on touchscreens to go to the links in websites thumbnails.
Might be anyone also faced the same effect? Is it possible to omit hover action while tapping on the div with hover from touchscreen devices, and to have the link href jump right after the first tap?
Would appreciate your help!
#bubencode
This is the way hover works on mobile devices. Since the concept of "hover" doesn't exist if you don't have a cursor the choice was to trigger hover on the first tap and click on the second. The reasoning was most likely to not break sites using hover for example when showing drop-down menus or similar.
If the hover is meaningless on touch-devices, consider detecting this and removing it, making your website responsive.
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.
Within our web application we are displaying a PDF document in an iframe using the following line of code:
<iframe id="iframeContainer" src="https://example.com/pdfdoc.pdf"
style="width:100%; height:500px;"></iframe>
This works fine in all the major desktop browsers with the width of the PDF scaling to fit inside the confines of the iFrame and a vertical scroll bar to view all the pages within the document.
At the moment however I can't get the PDF to display correctly in Mobile Safari. In this instance only the top left portion of the PDF is visible without any horizontal or vertical scrollbars to see the rest of the document.
Does anybody know of I workaround for this problem in Mobile Safari?
UPDATE - MARCH 2013
After hours of searching and experimentation I can conclude that this problem is a real mess!! There are a bunch of solutions but each far from perfect. Anybody else struggling with this one I advise to refer to 'Strategies for the iFrame on the iPad Problem'. For me I need to write this one off and look for another solution for our iPad users.
UPDATE - MAY 2015
Just a quick update on this question. Recently I have started using the Google Drive viewer, which has mostly solved the original problem. Just provide a full path to the PDF document and Google will return a HTML formatted interpretation of your PDF (don't forget to set embedded=true). e.g.
https://drive.google.com/viewerng/viewer?embedded=true&url=www.analysis.im%2Fuploads%2Fseminar%2Fpdf-sample.pdf
I'm using this as a fallback for smaller viewports and simply embedding the above link into my <iframe>.
I found a new solution. As of iOS 8, mobile Safari renders the PDF as an image within an HTML document inside the frame. You can then adjust the width after the PDF loads:
<iframe id="theFrame" src="some.pdf" style="height:1000px; width:100%;"></iframe>
<script>
document.getElementById("theFrame").contentWindow.onload = function() {
this.document.getElementsByTagName("img")[0].style.width="100%";
};
</script>
<iframe
id="ifamePdf"
type="application/pdf"
scrolling="auto"
src={"https://docs.google.com/viewerng/viewer?url="+"https://example.com/pdfdoc.pdf"+"&embedded=true"}
height="600"
></iframe>
My solution for this is to use google drive on mobile and a standard pdf embed in an iframe on larger screens.
.desktop-pdf {
display: none;
}
.mobile-pdf {
display: block;
}
#media only screen and (min-width : 1025px) {
.mobile-pdf {
display: none;
}
.desktop-pdf {
display: block;
}
}
<div class="outer-pdf" style="-webkit-overflow-scrolling: touch; overflow: auto;">
<div class="pdf">
<iframe class="desktop-pdf" scrolling="auto" src="URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
<iframe class="mobile-pdf" scrolling="auto" src="https://drive.google.com/viewerng/viewer?embedded=true&url=URL HERE" width="100%" height="90%" type='application/pdf' title="Title">
<p style="font-size: 110%;"><em>There is content being displayed here that your browser doesn't support.</em> Please click here to attempt to view the information in a separate browser window. Thanks for your patience!</p>
</iframe>
</div>
</div>
For using the google preview in 2021, I had to do the following. Some small adjustments to how it was posted above.
"https://drive.google.com/viewerng/viewer?embedded=true&url=" + encodeURIComponent(pdfUrl)
try pdf.js should also work inside mobile safari: https://github.com/mozilla/pdf.js/
I got the same issue. I found that by setting the focus on an input (doesn't work with div tags) the pdf is displayed.
I fix it by adding an hidden input and set the focus on it. this work around doesn't slowdown the application.
<html><head>
<script>
$(document).ready(function () {
$("#myiframe").load(function () { setTimeout(function () { $(".inputforfocus").focus(); }, 100); });
});
</script></head>
<body>
<div class="main">
<div class="level1">Learning</div>
<input type="hidden" class="inputforfocus">
<div>
<iframe src="PDF/mypdf.pdf" frameborder="0" id="myiframe" allow="fullscreen"></iframe>
</div>
</div>
</body>
</html>
Is it possible to add an icon of some kind next to a jQuery Mobile select menu in the image below? If so, what would be the image size required? Thanks in advance!
You can add icons to just about anything by adding the following parameters to the element you want to icon to appear within:
data-icon="arrow-l" data-iconpos="left"
Where arrow-l specifies an arrow pointing left.
If you want to specify your own icon/image rather than use one provided by jQuery Mobile, then you can add an image inside the li (before your text), with a class of either ui-li-icon or ui-li-thumb :
<li>
<img src="images/gf.png" alt="France" class="ui-li-icon">
Social Triangle
</li>
ui-li-icon, appears to be restricted to 16px X 16px, and uses the following css conditions:
ui-li-icon {
max-height: 16px;
max-width: 16px;
}
ui-li-thumb, appears to be restricted to 80px X 80px, and uses the following css conditions:
.ui-li-thumb {
max-height: 80px;
max-width: 80px;
}
If you take a look at the above links to the jQuery Mobile documentation, it shows you how to use them in more detail, just check the source:
I have an image in my jquery mobile fixed header. When the page loads in Google Chrome or Apple Safari the header content overlaps the content div below the header until I resize the page. Firefox and IE work just fine.
Thanks!
I think the problem is that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller so jQuery Mobile puts a padding on the .ui-page element that is too small once the image loads. A simple fix for this is to manually set the size of the header image so that it takes-up it's required space even before its source loads.
You could also do this, although it seems pretty hacky to me, force a redraw by triggering the resize event on document.ready or maybe window.load:
$(window).on('load', function () {
$(this).trigger('resize');
});
I pasted this code into the console while on your page and it re-positioned the title element as expected.
Does applying the following CSS help?
.ui-page {
padding-top: 91px !important;
}
Note that you will have to refine the selector as this will apply to overlay popups either.
I had lots of trouble with this. This worked until I wanted to add a link:
<div data-role="header">
<img border="0" src="logo.png" style="float:left;display:inline"/> <h1></h1>
</div>
Note the empty h1 tag.
I ended up not using a data-role="header" at all, I just couldn't get it to work with a link. I used a ui-bar class instead. Like this:
<div class="ui-bar ui-bar-a">
<a href="/" data-role="none">
<img border="0" src="images/logo.png" style="float: left; display:inline">
</a>
</div>
A solution based on #Jasper answer that worked for me was:
$(document).on('pageshow', "div[data-role='page']", function () {
$(window).trigger('resize');
});
It has an improvement that apply to all the jquery mobile pages
I played with the rather good solutions from Jasper and Carlos487 and found this to be the most up-to-date and reliable way to do it (jQM 1.4.x):
if it's due to an image without specified dimensions that will need some time to load and thus may cause the header to enlarge, then specifying the known dimensions (ideally via CSS) should do it. Otherwise there should be a way to determine if it has finished loading and thus applying the idea of solution 3 below.
if it's is due to some (maybe) unknown header resize event (e.g. through some image loaded later or some other content shrinking the header and thus making it vertically bigger), then this should work with a reasonable big enough timeout value:
$( ':mobile-pagecontainer' ).on( 'pagecontainershow', function(e) {
// maybe value > 100 needed for your scenario / page load speed
setTimeout( function() { $(window).trigger('resize'); }, 100 /*ms*/ );
}
if you know what is causing this (as in my case, where I am right shifting the page content on large screens via some (otherwise hidden/overlayed) left aligned navigation panel), then the following may be even better, beeing independent of the actual time the page needs to load on some device or scenario (which may be longer than your predefined timeout above):
// if its due to some animation like in my case
// otherwise try to find a similar way to determine when the resizing event has
// completed!
$('#someAnimated').animate( 'complete', function() { $(window).trigger('resize'); });
(I am not sure if Jaspers solution using $(window).on( 'load', ... will be correct in all jQM page load scenarios (with AJAX page navigation). That's why I would prefer Carlos487's approach in my example.)
None of the solutions above worked for me. But I found out my problem lies in the events after the page navigation. If the content div is hidden during this time, it doesn't get positioned under the header div, rather stays in its original place:
$(document).on("pageshow", "div[data-role='page']", function()
{
$("#pageContentDiv").hide();
setTimeout(function()
{
$("#pageContentDiv").show();
}, 0);
});
EDIT:
Found a better solution; set header div height and page div top padding to the same value:
<div data-role="page" style="padding-top: 60px">
<div data-role="header" data-position="fixed" style="height: 60px">
Hope this helps.