JavaScript broken after doctype was added - javascript

I inherited some pages that uses Java Script to do calculations and draw on graphs on canvas tag.
Their JS pages do not have <!DOCTYPE html>; they only just start with the <html> tag.
My site has <!DOCTYPE html> and now that I added that code to my site it doesn't work.
Any idea how to go about this?

That's because your browser is operating in "quirks mode" if there is no DOCTYPE statement right before the <html> tag.
That means whoever wrote the javascript was relying on quirks mode to execute it. Therefore, now that you have a DOCTYPE tag, your browser is operating under a different set of behaviors, as defined by whichever version is specified in the DOCTYPE.
The difference between the two is subtle until your code breaks. I used to never put a DOCTYPE tag until this exact issue came to bite me in the butt.

Related

How to determine doctype if none was set in the document?

Suppose, as an example, the following exact test.html document, saved in UTF-8 encoding:
<html>
<head>
<title>Test</title>
</head>
<body>
Test document.
</body>
</html>
How can I determine in IE11 and Chrome latest what the browser decided to guess for a doctype, if any? (Note that the document above is merely an example, I'm looking for a method to determine doctype as assumed by the browser, not an answer to this instance. (Teach me how to fish!))
I searched and found this related question where answers mention document.doctype, but that's null in Chrome and undefined in IE11.
I also tried all sorts of other searches, for example this one, but this only results in posts about setting a correct doctype.
I've gone through the developer tools of both Chrome and IE11 but didn't find it (perhaps just didn't see it).
I've carefully reviewed all suggested duplicate questions on Stack Overflow, as well as the "Similar Questions" in the side bar, but none quite answer my question.
Bottom line: can JavaScript (preferred) or the browser's developer tools be used to find out what document mode was assumed? Or are there specs or known rules for this?
Short answer: If no doctype is specified, no doctype is available.
According to this answer, browsers don't assume a doctype but rather enter a "quirks mode":
The usual method of setting quirks mode is not not include a doctype, or include content before the doctype.
(Read the full answer for a comparison of the three basic modes.)
You can find an overview over the different doctypes and which modes they trigger on Wikipedia. It confirms that all browsers enter a quirks mode if no doctype is present.
This thread contains information about how to check whether a browser is in quirks mode, primarily by checking document.compatMode.

Html inside html etc causes quirks mode to kick in?

We are trying to add a cookie policy to an old website, made a long time ago. The cookie policy (javascript) works fine in chrome, ff etc, but IE kicks into quirks.
I inspected the generated html and.. oh my.
It looks something like:
html
head
/head
html
body
head
/head
/html
/body
html
You get the picture, its ugly. When it was built they included separate .shtml files, all which come inclusive with their own html, head etc.
There is nothing above the doctype so I have erased that as the problem. The doctype is:
<!doctype HTML PUBLIC "-//w3c//DTD HTML 4.01 Transitional//EN">
jsfiddle with html from the index page, not there for presentation, its there if you want to look at the demons that be (code).
So, the question I am asking, is what could be causing quirks mode to kick in? Is there a 'hack' to prevent it?
When I display it explicitly as ie7+ its fine, so as a cheat can we just set it to not go to quirks?
Thanks.
Generally, quirks mode is turned on when there is no correct DOCTYPE declaration, and turned off when there is a DOCTYPE definition. However, invalid HTML - with respect to the chosen DOCTYPE - can also cause the browser to switch to quirks mode.

Internet Explorer Javascript Slideshow

I have a very strange issue going on here. It's only occurring on Internet Explorer (what a surprise).
Basically I'm trying to fix a site that was given to me after some third-rate developers finished it and obviously did not test on IE.
They've setup a javascript slideshow, now on the pages with the slideshow active, the whole enclosing "body_section" div is being pushed all the way to the left. Have a look for yourselves:
http://sapaconstruction.com.au/sapa/
That's the homepage which floats everything to the left. Now on this page:
http://sapaconstruction.com.au/sapa/?page_id=4
Everything looks normal, so it must have something to do with the javascript slideshow. Here's what the javascript they've written looks like (it's embed on the page).
<script type="text/javascript" src="<?php bloginfo('template_url') ?>/js/compressed.js"></script>
<script type="text/javascript">
$('homeslideshow').style.display='none';
$('wrapper').style.display='block';
var homeslideshow=new TINY.slideshow("homeslideshow");
window.onload=function(){
homeslideshow.auto=true;
homeslideshow.speed=5;
homeslideshow.init("homeslideshow","image","imgprev","imgnext","imglink");
}
</script>
Any help with this issue would be amazing, I've wracked my brain for hours trying hacks and margin fixes and things like that.
Well, I can tell you this. This site has way more problems than just that. In looking at the source, there is a div that comes before the html node. I would first of all fix that, as even in firefox, this is causing some strange things to happen. As a matter of fact, I think this "ieonly" div is what is causing the issue, as in IE this div becomes the wrapper in the body. Whoever built this site was not very familiar with cross browser design, and tried to bake in way too many IE hacks.
EDIT:
The problem was IE was in quirks mode due to the lack of a doctype. The following doctype should work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Delphi, EmbeddedWB/TWebbrowser - jQuery not executing

I am using EmbeddedWB (A TWebbrowser extension) to do like a "live preview" of some dynamically generated content.
I am trying to add jQuery into the mix, so I can get some fancy effects going on, however since IE9 always asks "Allow blocked content" for each and every damn page, a dynamically generated one (Webbrowser.LoadFromString) certainly wont be allowed to have fun. To put it simple: It wont allow Javascript execution.
I tried adding a SecurityManager to my TEmbeddedWB, however that did not do it either. I tested my dynamic code in Firefox, and in IE9, and it works (of course, in IE9 I have to allow first, which was how I found it was a security issue).
Is there a painless way to get around this, without having to manually go into IE and tweak something? Or am I completely wrong about the cause of the issue?
EDIT: After trying this article's method, IE does not ask if it should allow stuff anymore, however my script is still not being executed within my TEmbeddedWB/TWebbrowser..
EDIT 2: Okay, by removing the jQuery code, and displaying a plain Alert, I am forced to conclude that JS is now being executed, however jQuery is not.
EDIT 3: Here is the (stripped down) HTML code that my app generates, where jQuery is not working in my EmbeddedWB/TWebbrowser control - however, it works in Internet Explorer 9 itself:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="file://C:\jQuery.js"></script>
</head>
<body>
<center>
<p>
Some stuff here!
</p>
</center>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
alert('I Am jQuery!!!!');
});
</script>
</body>
</html>
EDIT4: I have also tried switching the src to a Google Hosted jQuery, and that did not work either. Removing the Metatag did not fix it either. Just letting you know of stuff I tried before you waste time on suggesting it :)
EDIT5: By navigating to a site that uses jQuery (Webbrowser.Navigate) the site was working as expected. However when doing it from my local test.html, or by doing .LoadFromString();, it will not work.
Will not work = jQuery code not executing.
It seems to work if you use correct URL for the jquery.js file:
<script type="text/javascript" src="file://C:/jQuery.js"></script>
<script type="text/javascript" src="file:///jQuery.js"></script>
or a relative path, you can also omit the file:// protocol:
<script type="text/javascript" src="../../jQuery.js"></script>
The above works when you load the HTML from a file. The question is however, if content from memory and javascript from file system is not considered crossing a security context boundary and rejected for that reason by the embedded browser. In that case, embedding jquery directly in the HTML content (using the <script> tag) should work.

Handling browser native click before dom:loaded

I have an issue with Cross-Browser native events vs CallBack events.
I have an HTML link "Click Me" with a given href="". On dom:loaded I attach a function to this link (to do Ajax Stuff).
JavaScript code is loaded at the end of the page to follow YSlow Recommandation.
Issue:
If you load this page really quickly (pressing F5) then click on link then
the alert() is not called
the link is followed (reloading the page)
It happens when the server lags. In fact the page has not finished loading and the browser execute the code.
Demo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
Click Me
<!-- According to YSlow Recommandation load at the bottom -->
<script src="../js/lib/prototype.js" type="text/javascript" language="JavaScript"></script>
<script>
/* <![CDATA[ */
document.observe('dom:loaded', function() {
$('action').observe('click', function(event){ alert("click"); Event.stop(event); });
});
/* ]]> */
</script>
</body>
</html>
Turn Around:
A turn around is to add onClick="return false;":
Click Me
It works for lags but not for quick click. And I don't like this kind of turn around because my goal is to remove the onclick on all <a href="">
You could look into this:
JQuery has a handy little function that
launches your javascript as soon as
the Document Object Model is ready…
which happens before the page has
finished loading.
$(document).ready(function(){ //
Your code here...
});
via
You could also put a big disabled div in front of everything while the page is loading to forbid clicking, but I wouldn't recommend it.
Not sure if I got your question right, let me know if I didn't
We have done many many test on our CMS on many browsers.
Sorted by speed:
JavaScript can't execute before a really fast click
onclick="return false" works fine in most case
JavaScript doing 2.) onLoad is too slow but could be enought
DIV using as shield brings other issues and is not a good choice
It seems like you have things pretty well in hand, and all you're looking to do is create some links which do nothing in areas where graceful degradation is not possible.
In these cases I suggest a link with the following format:
Linktext
This link should functionally do absolutely nothing with javascript enabled or disabled.
Important Notes
The number zero in the void is absolutely necessary. Internet Explorer will complain otherwise.
The use of "javascript:void(0);" is strongly discouraged by Microsoft because odd things can happen. To avoid the majority of the bugs, do not wrap anything but text in your void(0) links.
Before you make a decision make sure to carefully consider if adding "javascript:void(0);" is really a better solution than adding an onclick which returns false.
On removing the href attribute:
Removing the href attribute from a link is valid XHTML. Despite being valid XHTML, your link will lose its automatic link styling. No more underline, no more colors, no more hover, and no more automatic color change if the link is visited.
You can't fix the lack of styles with CSS either due to the spotty support of :hover in Internet Explorer.

Categories