How to load a pdf file in ipad using sencha?
I have tried the following methods:
html:'<div id="scroller" style="width:99%;overflow:scroll;">' +
'<img style="width:100%;overflow:scroll;"' +
'src="resources/pdfFiles/help.pdf">' +
'</img></div>'
and
html:'<div id="scroller" style="width:99%;overflow:scroll;">' +
'<iframe style="width:100%;overflow:scroll;"' +
'src="resources/pdfFiles/help.pdf">' +
'</iframe></div>'
and
html:'<div style="height:99%;width:99%;overflow:scroll;">' +
'<embed type="application/pdf" width="100%" height="100%" src="resources/pdfFiles/help.pdf" /></div>'
and
html:'<object data="resources/pdfFiles/help.pdf" TYPE="application/x-pdf" width="100%" height="100%" </object>'
iframe works fine in chrome browser and opens up the pdf. But in ipad it opens up blank. img tag opens up only the first page of the pdf in ipad. How to load the entire pdf in ipad on tap of a button? Any help appreciated.
As far as I know, Sencha Touch applications do NOT work well with iframe, especially when pdf is embedded in it.
You had better open up as a new link in browser and let the browser do the remaining tasks.
Here is a discussion on official forum: Displaying PDF and other non-HTML content in Sencha Touch 2
Related
I'm using "embed" to show pdf file in Razor component of Blazor Server
<embed src="#showedPdfContent" visible="false" width="1100" height="730" type="application/pdf"/>
public void SetPdfContent(byte[] content)
{
showedPdfContent = $"data:application/pdf;base64,{Convert.ToBase64String(content)}";
StateHasChanged();
}
when I run with Firefox, it works correctly to show pdf file. But, when I run with Chrome or Edge, it shows empty.
embed in chrome
I tried to use "object" or "iframe". But they also didn't work as well. Any ideas to this issue?
I'm using Magnific popup our product product pages as a method for image hot points. Right now when you click on a hot point a popup appears with larger image and text. I received a request to open the popup on a mouseover.
Is there a way to trigger open Magnific Popup on a mouseover not on a mouse click?
I was trying to call the mouseover event on the link first, but it seems the Popup still requires a click. How to I make it so it opens up just with a mouseover?
<!-- Popup link -->
Show inline popup
<!-- Popup itself -->
<div id="test-popup" class="white-popup mfp-hide">
Popup content
</div>
Javascript:
$('.open-popup-link').mouseover(function(){
$(this).magnificPopup({
type: 'inline'
});
});
Answering my own question. After a bit more research I found that I needed to open the popup directly via API. It works now:
$('.open-popup-link').mouseover(function(){
$.magnificPopup.open({
items: {
src: '.white-popup' // can be a HTML string, jQuery object, or CSS selector
}
})
});
Working example: https://codepen.io/pen/ZKrVNK
Taking it further with multiple links opening separate slides of a gallery, using event delegation:
http://codepen.io/pen/EmEOMa
I have a webview with HTML contents. And I have few links in that HTML content. when i clicked the link,corresponding webpage opens within my application. Can i open the webpage in mobile browser when i clicked a particular link?
I have tried using target="_blank" property within anchor tag,which doesn't works.
and also i have used "openURL" webview property, but fireEvent is not working properly.
my main js file;
var mywebview = Ti.UI.createWebview({
height : 'auto',
width : '100%',
html : '<!DOCTYPE html><html><body>Visit W3Schools.com!<br>Visit Google.com!</body></html>',
)};
In app.js;
Ti.App.addEventListener("openLink", function(e){
alert(e.linkUrl);
Ti.Platform.openURL(e.linkUrl);
});
Ti.App.fireEvent works for me in this form:
youatnotes.com
and in app.js:
Ti.App.addEventListener('ynOpenURL', function(e) {
Ti.Platform.openURL(e.url);
});
You could the URL of the webview in the event in order to open the link inside the WebView.
On xulrunner 1.9.2 I could put the Adobe Reader plugin into /plugins of my xulrunner application and load content with:
<vbox minwidth="200">
<html xmlns = "http://www.w3.org/1999/xhtml" >
<div id="htmlDiv">
<embed
id = "pdfObject"
type = "application/pdf"
src = "chrome://manuals/content/test.pdf#toolbar=1&navpanes=1&scrollbar=1&page=1&view=FitH"
height = "850px"
width = "1100px"
/>
</div>
</html>
</vbox>
I am moving now to xulrunner 17.0.1 and I couldn't get it to work - the Adobe Reader gives an error witin its own popup.
I checked the versions to what is in the current Firefox installation and it is correct. I also deleted pluginsreg.dat from the application profile - no success.
Any ideas on how to get back that content into xulrunner based apps would be great.
xuldev
Never mind - a chrome path was missing a trailing slash in the chrome.manifest ;)
Paul
I have a hybrid mobile app built on Trigger.io that opens links (some of them are user generated content) in the in-app child browser (forge.tabs module) per default. When trying to open a .pdf document the screen will stay blank white (tested on both Android and iOS).
Here is a cut down version of the code I'm using:
$(document).on('click', 'a', function() {
window.forge.tabs.open( $(this).attr('href') );
return false;
});
I would expect to either view the document in the in-app browser or be able to download it to the device.
Assuming your PDFs are local, you'll need to do a "getURL" first.
Here's a function that works just fine for me:
function showPDF (pdfName) {
forge.tools.getURL(pdfName, function (myPDF ) { forge.tabs.open(myPDF); });
}
Then just call showPDF with a relative or absolute url i.e.
<button class="btn" type="button" onclick="showPDF('assets/pdf/sample.pdf');">