I'm trying to use the sample code on this page. I copy paste it into an html file and try to open it using IE9 and FF but nothing shows up. Any idea what I might be missing?
http://code.google.com/apis/youtube/iframe_api_reference.html#Getting_Started
One thing that can help is making sure your page is rendered in standards mode by declaring it as <!doctype html>. However, that does not seem to fix all circumstances where the embed fails to load. (For example, it also doesn't like to load if the containing element isn't displayed.)
Works for me only after deleting browser history.
So I'm guessing it may have something to do with resource de-allocation of some sort (although, I would expect the IE's Javascript interpreter to do it).
Related
I recently added some text effects to my website in HTML and CSS. It runs perfectly on VS Code live sever but whenever I upload the code files on to my cpanel, the effects just seem to go away when I actually click and go on my website and I am not sure why. Does anyone know a fix for this? Here is my website julianwsanchez.com
And this how it is supposed to look:
How It Looks When I open it:
The output I'm seeing on your site matches the output of the code snippet here, effects and all.
Check to see if you have some browser extension that affects the way a site might look (e.g. a dark mode extension). Also, try going to your site in a different browser and/or in Incognito mode.
it Works for me just fine, both the link given, and the files running on localhost
You might need to do a hard reload.
try Ctrl-Shift-R on chrome when viewing the page.
This clears the browsers cache for that webpage,
alternative: open the web page in another browser.
I'm currently using a solution which converts a pdf file to a data URI. The data URI is then set as an iframe's source and displays the pdf on almost every major browser, I have learned that IE 11 does not like this though. After reading up on it, i realize that iframes don't support data URI's as the source (nor do any elements other than an image URI) and that I can't set a source for an element so I'm unsure how I could achieve the same with Internet Explorer.
I've tried using an embed (learned that it doesn't like data URIs either), an iFrame, initiating a download in a new tab of the file itself (to mimick viewing a it in the browser - no avail) and I'm running out of ideas but unfortunately a lot of people still use Internet Explorer so I'd like to make it compatible. Is there any way to recreate this behavior in Internet Explorer like other browsers do?
Thanks in advance :)
I ended up giving up on this for lack of time to research/test. The final solution was just as well I suppose. I ended up writing the PDF to subdirectory in the website and then setting the source ofthe iframe to the download method of the file. Tad slower than my original implementation but it works for legacy purposes. When will IE die!
I have object tag that look like this :
<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf" width="820" height="1135" type="application/pdf"></object></div>
In chrome this tag works the way I want it to. In firefox it doesn't work at all and it's messed up in IE. Here's album with screenshots in each browser. What are my options here ?
Also on firefox I figured out that this pdf doesn't work with default firefoxe's pdf viewer. When I choose to use adobe acrobat extenstion for pdf documents it works perfectly.
You can just write the link to the pdf directly into the data attribute like this:
<div id="embeddedPdfContainer"><object data="/download-pdf/some.pdf" id="embeddedPdf" width="820" height="1135" type="application/pdf"></object></div>
I tested it with Chrome and Internet Explorer (different versions) and it works
If you want to stay with the c:url option you should change the second " to '
so changing this:
"<c:url value="/download-pdf/${id }"/>"
into this:
"<c:url value='/download-pdf/${id }'/>"
in order to not "escape" the string
When you deliver dubious HTML:
<div id="embeddedPdfContainer"><object data="<c:url value="/download-pdf/${id }"/>" id="embeddedPdf" width="820" height="1135" type="application/pdf"></object></div>
^ ^
| |
Start End?
... browsers try to figure out what you had in mind, with a varying degree of success that depends on the algorithms they implement and how imaginative the webmaster is. Different browsers can't always agree on how to handle valid code (where there're clear rules and specs) so it's to expect that the level of disagreement increases with invalid code.
IMHO, the simplest path to obtain cross-browser compatibility is to generate valid code. As help, you can use the on-line W3C HTML validator or whatever equivalent tool your IDE provides.
Your jsp code seems to be syntactically correct, but we can't know if the generated code is meaningful. Instead of writing the jsp code, you should write the generated html code, and its related css code.
Anyway, regarding the Firefox's issue, I think it is due to this Firefox bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=937663
Lastest version avaible (Firefox 28) seems to be still affected, maybe next one will fix it.
Regarding Explorer issue, it could be due to a difference in page's rendering. Writing an IE-specific ccs code will fix the issue.
I wonder that this works in any browser!
c:url is part of the JSP Standard Tag Library (JSTL). And to use JSTL core tags you should include in the JSP page at least:
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
Next thing is that the PDF format is also no HTML (format)!
The handling of PDF files depends heavily on the users system settings and configuration.
Any browser would need an (integrated) plugin to display PDF files!
See e.g. this question here at SO: Embed Pdf in html5
As you can see therefore normally an embed element is used with a type attribute of type="application/pdf".
But this is also far from ideal and won't work in every browser!
What are my options here?
As written in the accepted answer of the above linked question, you should "convert the PDF to HTML5 and embed the HTML5 version."
First of all the c:url tag has nothing to do with the browser-side behavior. The tag should be rewritten by server and the browser should receive an absolute path. (Maybe you can post source from your browser?)
So the problem is only the browser compatibility of PDF embed in <object>. Most modern browsers should work with this tag including Firefox, so you should check whether you have pdf plugin properly installed on your Firefox.
For the IE problem you didn't mention which version you are using, so it may be solved by using <embed> other than <object> to solve this problem. According to this answer, you may try this style for better compatibility:
<object data="abc.pdf" type="application/pdf">
<embed src="abc.pdf" type="application/pdf" />
</object>
Does the use of an external viewer, morelike https://docs.google.com/viewer , within an <iframe> or an <object> would help ? This a compromise as far as you cannot change configuration of visitor browser to add/load an extra plugin.
For the styling part, you can set display:block to <iframe> or <object> , set size and margin.
<edit> this is not the problem </>
are you sure of the use of your quotes and this part ? "<c:url value="/download-pdf/${id }"/>"
You are wrapping value and data together
We are displaying an inline PDF via an object tag:
<object data='myPDF.pdf' type='application/pdf' width='100%' height='100%'></object>
On most loads, this works just fine - the browser will display the PDF using adobe's browser plugin-in. However, sometimes the browser will not display the PDF - it will load either a transparent or blank white background with no content inside it. This is occuring in both Firefox and Chrome browser. IE does not seem have this issue.
Even more bizarre - after the issue occurs, if we resize or move the browser, the PDF magically re-appears.
Has this ever happened to anyone else? Any ideas on how to improve this performance?
I think it has something to do with Adobe, I've encountered it too but never found a solution. It doesn't matter wich browser I use or wich computer. It just happens some times...
I know this is an old post but I've just had a similar problem and couldn't find a solution online.
I discovered some of my pdf's had a capitalised extension (.PDF), once I lower-cased them all it works fine for both in iframe and embed.
I have converted my existing website to Smarty template (my very first project with 1 day of smarty experience under the belt)
Prior to conversion my website looked fine in IE and FF.
After the conversion FF still looks okay however in IE everything falls apart.
I have tried comparing the source code in IE and FF and everything looks exactly the same.
Any help is appreciated.
Since Smarty is just the templating system that generates the HTML sent to the browser, the issue probably occurred when you split up your existing site into parts. Unfortunately it isn't very easy to find out what is wrong with a full project on SO. That said, here are some tips on debugging the issue.
Load your old site and copy the source from the browser (doesn't matter which browser as the server sends the same HTML*).
Load your new site and copy the source from the browser.
Diff the two sources to find the differences.
I think that's the best place to start. If the new site is sending the exact same HTML to the browser, then it would seem that some resource isn't being loaded (bad link) or javascript isn't being executed in IE, which should be separate from Smarty. For that check IE's Developer Tools and make sure no CSS is getting a 404 and no js exceptions are being thrown.
*As long as you aren't modifying things on the server based off the User-Agent sent, which is not common.