PDF embedded with <object> acting odd - html

I am trying to embed a pdf in a web page. I am using the following code:
<object data='pdf/main.pdf#nameddest=fun&view=FitH'
type='application/pdf'
width='740'
height='800'>
This works in chrome(apart from FitH doesn't work) and firefox and ie for me. However, when viewing on a mac it doesn't work with named destinations(just loads to the top of the pdf if Safari). Also, it doesn't seem to work in Firefox as firefox seems to have disabled adobe plugin by default. Is there a better way to embed a pdf with relative ease and wide compatability?

The best approach at the moment is to use PDF.js You can check out the demo here : Demo for pdf.js and download the source from here
It is by mozilla and very widely supported / used.

Related

images are not rendering in firefox

I have created a basic html and css page with images in it.
the page is working fine in chrome but image are not rendering in firefox
and have taken image with svg format can u help me to find out the solution.
Use SVG image can create restrictions on some browsers like Firefox, here are some examples :
Javascript disabled
External ressources cannot be loaded
visited link aren't rendered
The onliest way to dodge these issues is to embed the SVG images with <iframe>, <object> or <embed>.
I think you should try to embed your image to see if they show again, else check if you're following the supported context to use SVG
You'll find further information on this link.

Prefetching solution for Safari browser?

According to this link prefetch , prefetching is working only for specific browsers. Unfortunately for me, I need it to work mostly on mobile devices.
Anyone have a solution how to preload, prefetch, cache page so it works for iOS? (Safari)
Use Jquery mobile, here is the documentation
and here is the download link.
One solutions here is to go with base64 images.
Following links might be useful for further investigation.
https://en.wikipedia.org/wiki/Data_URI_scheme
How to display base64 encoded image in html
There are similar options with prefetch like "dns-prefetch", "preconnect" and "subresource" but support on IOS safari is not great(as of today).
https://css-tricks.com/prefetching-preloading-prebrowsing/
Nowadays Safari mobile supports preload https://caniuse.com/?search=preload

SVG won't display unless previously loaded in Chrome

I embed a svg like: <img src="http://example.com/path/to/picture.svg" />
Displays fine in IE, but does not render in Chrome (Version 34.0.1847.131)
However, if I then load http://example.com/path/to/picture.svg
directly, it renders fine- and strangly reloading the original page then does display the graphic.
Using renders the first time around, but since I am using these for links... would be best if can work
This seemed to be a bug in chrome when using SVGs with embedded bitmap data. Using pure vector-based SVGs works fine

Displaying vertical videos with html5 on chrome

I'm building a simple page to display videos uploaded from my iphone using the html5 video tag.
if you're watching it with chrome you probably see this video is presented horizontal, although it's not- try to download it or watching it from safari (haven't tried another browsers).
I havne't found anything on the net mention this problem, is it a known chrome bug? does this tag any attribute that I can change to display it properly?
Thanks.
Edit:
looks like this also happen in IE
you could use style="-webkit-transform: rotate(90deg);" on the video tag along with a html5 compatible video player solution (otherwise you get rotated controls as well)
It's an encoding issue from iPhones. I downloaded the video and it was still displayed horizontally using mplayer. There is more information here:
http://help.videojs.com/discussions/problems/1508-video-orientation-for-iphone-wrong
and as suggested you'll need to re-encode the videos using a library that uses a more supported standard encoding. (Or try to transform the video, on the page but that would be ugly)

Safari HTML5 offline problem

I am trying to run a script that supports for HTML5 offline working. It works fine in Firefox but not in safari. I want it to work in safari too. You can see here.
http://vps.sunztech.com/clock.html
HOW TO CHECK OFFLINE WORKING: open the URL when internet is connected.close the browser after loading all contents. now disable internet and load that URL again it should show the the data from cache.
The above is working fine in Firefox but not in Safari.
May anyone can give me the solution...
I will be thankful
Make sure that the manifest file is served as type text/cache-manifest. There are several other guidelines worth checking in Apple's developer documentation for iPhone and Mobile Safari.