I am using PDF.js to display PDF documents in my JSF page. My input is a blob which I pass to pdf.js . It works fine for documents with single pages but if a document has more than 1 page I see only the first page and I am unable to scroll. I tried encapsulating it with a <div> with overflow:scroll; property but I cannot navigate to the next page.
<div id="the-container" style="width:1000px;height:600px;overflow-y:scroll;">
<canvas id="the-canvas"></canvas>
</div>
A sample link for what I have used is below. Please help !
https://jsfiddle.net/qj9tau8e/
The sample document has 2 pages but only 1 is displayed
Related
I have a strange problem with jQuery Mobile page transitions.
Demo can be found here:
http://www.dev.theorie24.ch/mobile_index.php
If you click on "ANMELDEN" the new page gets loaded, but without the background gradient and some other styles missing.
After refreshing the new page, it looks fine. But then, if you go back (browser back button or arrow to the left on top), the first page gets displayed with some styles messed up.
What is happening here? How can I enforce the correct display of the whole page after the transition?
EDIT:
After the page transition, this is how the DOM looks like:
The body-tag actually closes much too early. This can't be right. Is that a bug in jQuery Mobile?
Thanks a lot!
Chris
I think the problem is that in your second html file data-role attribute applied to the body.
Try to wrap the content with div element with data-role="page", like so:
<html>
...
<body>
<div data-role="page">
<!-- content -->
</div>
</body>
</html>
I'm developing a Cordova project, building the user interface with jQuery Mobile (first project using any of them), and I'm having problems adding a logo image to the header.
Since it makes the header bigger than default, the header overlaps the content in the main div as in this capture:
If I navigate to other page and return to this one, then everything looks like it should:
I've read that when jQuery Mobile initializes the page, the header image is not loaded and the header is much smaller, so I've tried
this is my html for the image:
<div data-role="header" data-id="header" data-position="fixed">
<h1>
<img src="img/flycosette_logo-88cb7efa9f6acfcaf246f8523e87805d.png" alt="FlyCosette"/>
</h1>
</div><!-- /header -->
And this my css in a custom file called after jQM files:
.ui-header img {
width: 100%;
}
I've tried the approach in the quoted link:
$(window).on('load', function () {
$(this).trigger('resize');
});
but it doesn't work for me.
I've also tried placing the image inside a div, instead <h1>, and setting the code for it instead of the image, playing with several properties, but it doesn't solve the problem and the image size does not display as well as in the screencaptures...
So, any idea on how to fix it?
When you get back to the page, JQM internally triggers an event called upateLayout which probably also adapts the content positioning relative to the header. Try triggering this yourself by doing something like:
$([your_page]).trigger("updatLayout");
See if this works. Maybe you need to call it on the header or content instead of the page.
After refactoring my code, I've been trying all different solutions once again, and it turns out that the initial solution:
$(window).on('load', function () {
$(this).trigger('resize');
});
from the post: https://stackoverflow.com/a/11110607/3708095
is what finally solved my problem.
I'm calling the script with that code after the </body> tag, below all the html (not sure about how was it being called before), and now is working.
Sorry for the inconveniences.
I am displaying HighChart in a page and showing this page in a Iframe.
But I am unable to export the chart from the page which has iframe.
If I open the highchart page seperately, I am able to export the chart.
What is the issuue?
I tried so many searchs
May see this Fiddle
EDIT:
In the html page linked with the iframe, make sure you have something like this-
i.e. For the index2.html , check this Fiddle
I have faced a pretty strange issue. I'm trying to display pdf files using iframe. Little documents, consisting of 1-2 pages, are displayed correctly. But when it comes to documents consisting of for example 5 "heavy" pages, the iframe doesn't display the whole document - the document is cropped and as a result about 2-3 pages are displayed only.
Below is my code. As you can see it's pretty straightforward.
<html>
<head>
<title>Testing iFrames on iPad</title>
</head>
<body>
<iframe id="iframe" name="iframe" height="100%" width="100%" scrolling="no" src="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/SafariWebContent.pdf" />
</body>
Can anyone help me to find out what is the reason for such strange behavior?
From what I understand iframe's height is what's responsible for the page cutting off, as you're actually scrolling the frame, and not the pdf inside the frame (i.e. setting height to "400%" will potentially give you the space you need, but it's sloppy).
This solution uses JavaScript to scroll the pdf contents itself, and may help:
how to properly display an iFrame in mobile safari
periodically_call_remote is a great rails feature, but with ease comes novices so here I am.
I have a div that is getting updated with content every 5 seconds. Looks great and was easy to setup. This page is the homepage so people will not be staying here long. So when they click another link, such as link_to "All Products", periodically_call_remote creates two displeasing issues.
1) For one thing, periodically_call_remote doesn't stop when a html link is clicked and I believe that this is causing the lag in response to open the selected page.
2) Also, when an html link is clicked the content inside the updated div disappears.
Any conceptual solutions?
This only occurred in FF because I had a div inside the updating div which had my content and that middle div had no purpose.
For example.
<div id="main_div">
<div class="div_with_no_purpose"> <<=== problem div
<div id="div_getting_updated"> <<=== content goes here
</div>
</div>
</div>