Hello I use javascript stylesheet object, with a specfic style and place it on dom ready. When i do exactly my code IE crash.
The problem is the UL with exactly this style set after the page is load. If I place the styleSheet.cssText = css; before the page load, everyting is correct. If i remove the char f in <DIV>f everything work. I need to use my code after the page is load. Any suggestion to pass over this trouble ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<script type="text/javascript" src="./jquery-1.4.2.min.js" ></script>
<script type="text/javascript">
var styleSheet = document.createStyleSheet();
var css= "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
$(document).ready(function(){
styleSheet.cssText = css;
});
</script>
</head>
<body>
<DIV>f
<UL>
<LI><a>dfgfdg</a></LI>
<LI><a>fdgdfg</a></LI></UL>?
</DIV>?
</body>
</html>
The problem is IE8 specific. It seems to work on ie7 and ie9.
In order to reproduce the bug it is important to apply the stylesheet after the page is loaded.
We used jquery.ready() for this example but the code also crashes for click and load events.
This bug is very specific. It requires the precise css and html used in the example above. We have tried adding the stylesheet in different ways ( stylesheet.rules[i].lisStyleType='none' for example and adding the stylesheet in a .css file) with no success. We absolutely need to add the style dynamically where this probleme is happening.
createStyleSheet is not a cross-browser friendly solution... Try this code instead:
$(function(){
var styles = "UL{list-style-type:none;display:inline;}LI{padding:0px;}";
var newSS=document.createElement('link');
newSS.rel='stylesheet';
newSS.href='data:text/css,'+escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
});
I can't tell you exactly why IE is crashing, but this code works for me and it shouldn't trigger any unexpected errors.
I tried your code in a jsfiddle and it doesn't bug with IE7 .. what's the problem ?
What version of IE are you using ? Do you have an url of a demo that's crashing for you ? I can't reproduce your problem, please see my jsfiddle ...
Btw why do you use jquery 1.4.2 and not a more recent version ? 1.4.4 or 1.5.2 , in the jsfiddle I choosed 1.4.4
Please Try this. Tested in IE6,7,8,9 FF, Opera, Googlechrome, Safari
<script type="text/javascript">
function createRuntimeStyle(){
//create a style tag
var rStyle=document.createElement("style");
//create the content of the style tag
var cssDef=document.createTextNode(".myclass{display:block;font-family:Verdana;font-weight:bold;}");
//assign the type
rStyle.type="text/css";
if(rStyle.styleSheet){ //check for IE
rStyle.styleSheet.cssText=cssDef.nodeValue;
}else{ //check for Other Browsers
rStyle.appendChild(cssDef);
}
//append to document head
document.getElementsByTagName("head")[0].appendChild(rStyle);
}
//call to the function
createRuntimeStyle();
</script>
Related
I'm using a tumblr theme which is structured like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<style>
</style>
<body>
</body>
</html>
There are no head tags which I thought was strange but it works fine; because when you run the site it places head tags automatically. However, since I'm using plugins I added the head tags myself to give me better control as some required me to place it in <head>. This worked fine in chrome and safari but it disabled one of my scripts in firefox and IE:
$(document).ready(function () {
var speed = 25,
timer;
$("#hoverscroll").hover(function () {
$(this).css({cursor: 'none'});
$(this).css({opacity: '0'});
var div = $('body');
(function startscrolling(){
timer = setTimeout(function () {
var pos = div.scrollTop();
div.scrollTop(pos + 1);
startscrolling();
}, speed);
})();
},
function () {
$("#hoverscroll").css({opacity: '1'});
clearTimeout(timer);
speed = 25;
})
.click(function(){
speed = 1;
});
});
It's a simple script where it scrolls the page when an element is hovered.
I reproduced the problem in these 2 demo-sites:
http://testmycode.tumblr.com/ This site has head tag, scrolls in chrome, does not scroll in Firefox.
http://testmycode2.tumblr.com/ This site has no head tag, works perfectly and scrolls in all browsers.
you can add code to your head tag using JQuery like below
$("head").append("<script src=\"mypluginscript.js\"></script>");
this will let you add any new code to it without having to write the head tag
an example!
'However, since I'm using plugins I added the head tags myself to give
me better control'
What you mean by that?
Most of the times there is an alternative solution.
A proper html needs a html tag a head tag and a body tag
inside the head tag you put meta,script and style tags
minimal structure is
<html>
<head>
</head>
<body>
</body>
</html>
Else it's not a html file.
Almost TEN years html5 was launched....
and as it is similar to the basic structure it works on all browsers.
<!doctype html> // html5
<html lang="en"> // language set to english
<head>
<meta charset="utf-8"> // can decode almost al charachters éçàò..
<style></style>
<script></script>
<title>Title</title>
</head>
<body>
</body>
</html>
now reguarding your code.
<script>
goes inside head (or at the end of the body [or just after each element])
if you put the code in the head..
to handle elements inside the body
you need to add a window.onload // DOMContentLoaded
else you have no access to the dom elements.
Now looking at your code from Chrome the errors starts on the html tag..
Why the html has a webkit animation?
Then your talking about the doctype tag and not the head tag.
So if you tell us why you need that we can probably find a solution.
I realize this is a horribly newbie question, but Ive been trying to fix it for days trying different methods so I just wanted to ask what would you do.
I am attempting to create a web program to use at work, and I have this setup:
Windows 7
IE 7 - Cannot Upgrade.
The "website" is not a webhost, basicly I have a folder on my desktop with html/css/js files and I use IE to run the scripts, no host.
I want to keep a set of vars, mostly strings, in an external JS file and pull the JS into different HTML pages. I want it to write on load of the document.. not on ready. It does not have to be user dynamtic.
Also, When I make the js file, does it have to have a header.. like HTML has doctypes?
I really appreciate your help as I am trying to learn and will cont on my own from here. My setup is much different than most, and im not sure which part was causing my problem so I finally broke down and posted.
When you write your JavaScript file it doesn't have to have any header or doctype. For example you can have a variables.js file that looks just like this:
var x = "abc";
var y = "def";
and have many HTML files that include variables.js like this:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<!-- page content -->
<script src="variables.js"></script>
<script>
alert(x);
</script>
</body>
</html>
and your variables should be available there. Any script that is included after the reference to your variables.js should have access to everything that was included before without the need to listen to any events.
If you need to listen to the events then I suggest to use jQuery or some other JavaScript framework. An example for jQuery would be:
$(window).load(function() {
alert(x);
});
A more advanced example of changing the DOM elements:
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>title</title>
</head>
<body>
<p>Select variable:</p>
<p>
Show x
Show y
</p>
<p>Value:</p>
<p id="value"></p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="variables.js"></script>
<script>
$('#show-x').click(function (e) {
e.preventDefault();
$('#value').html(x);
});
$('#show-y').click(function (e) {
e.preventDefault();
$('#value').html(y);
});
</script>
</body>
</html>
If it's not a global variable, you can't display/print/access or whatever you call it because it has a local scope, defined in a function.
You can probably only use a debugger simply to debug it
Im adding an element to my page using:
var di = document.createElement("div");
di.id='container';
document.body.appendChild(di)
now when im trying to remove the element using internet explorer 8 and jQuery like :
jQuery(di).remove();
im getting inconsistent behavior .. meaning it is working on all browsers except for internet explorer 8 (probably the same on ie7 but i dont care anymore :-) )
any thoughts ?
thanks
Maybe if the element was added with jQuery :
var di = jQuery("<div/>").attr('id','container').appendTo('body');
Then :
di.remove();
Are you sure that the code is not working in IE8? It looks like that you have to refresh the content of the Developer Tools to see the added/removed div.
I just did a test with the following code and it is working in FF and in IE8
<!DOCTYPE html>
<html class="main" lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript">
function add() {
var di = document.createElement("div");
di.id='container';
di.appendChild(document.createTextNode('Testing'));
document.body.appendChild(di)
}
function remove() {
document.body.removeChild(document.getElementById('container'));
}
</script>
</head>
<body>
<button onclick="add();">Add</button>
<button onclick="remove();">Remove</button>
</body>
</html>
I believe that I've identified a bug in Opera (version 12.01 running on Windows 7), but am looking for assistance with a possible workaround (presuming that others can confirm that this is a bug).
If I have an HTML page containing the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
</head>
<body onload="window.alert(0);">
</body>
</html>
The "onload" event is never fired. Oddly, if I close the script tag instead of self closing it, and change:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
to:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
(which unfortunately I can't do), the event will fire and my alert will be shown.
Had anyone else run into this problem? If so, have they found a way around it besides changing the script tag from <script /> to <script></script>?
NOTE: Yes, I have opened a bug report with Opera. No response back from them yet.
This "bug" exists in all browsers, not only in Opera (I've tested Chrome, FF and IE).
Self-closing script tags just don't work. See this question on SO: Why don't self-closing script tags work?
EDIT:
I have no idea why you can't close the script tag with </script>, but one possible workaround would be loading the scripts with JavaScript:
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
newScript.onload = function(){
// jQuery code...
};
document.getElementsByTagName("head")[0].appendChild(newScript);
(OK, admittedly this actually forces you to use </script> somewhere, but at least the part between <script> and </script> now isn't empty... :P)
What Opera does is correct per HTML5. To understand why the onload doesn't run, you need to remember that the contents of a SCRIPT tag with SRC set should be ignored. Since /> is not a correct way to close the first SCRIPT tag, the subsequent end-of-head and start-of-body tags end up inside the SCRIPT tag. It would be a bit like writing this:
<script src="foo.js">
</head><body><p>This doesn't appear anywhere, does it?</p></body>
</script>
So onload is never set in the first place because the BODY inside the SCRIPT tag will be ignored.
I have been playing around with Scala/Lift/Comet/Ajax etc. recently. I came across a problem which boils down to this:
Summary
I want to update a specific div (by id) when a certain event occurs. If the div does not exist yet, it must be created and appended to the HTML body.
Currently I cannot get this to work when using the Lift framework.
Source File
LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
updateOrCreateMouseDiv('123', 'coords')
});
function updateOrCreateMouseDiv(uniqueId, coords) {
if ($('#mouse_'+uniqueId).length == 0) {
$('body').append('<div id=' + uniqueId + '>' + coords + '</div>');
}
$('#mouse_'+uniqueId).html(coords)
}
// ]]>
</script>
</head>
<body></body>
</html>
The Error
If I open the above file directly in a browser (file:///LIFT_PROJECT/src/main/webapp/static/mouseViewTest.html) it works i.e. a new div is created.
But if I run it through Lift/Jetty (http://localhost:8080/static/mouseViewTest) I get the following JavaScript error:
Chrome:
Uncaught Error: NO_MODIFICATION_ALLOWED_ERR: DOM Exception 7
Firefox (Firebug):
An invalid or illegal string was specified" code: "12
Comparing the Sources in Browser
When comparing the page sources in the browser, I can see only one difference, namely: Lift adds the following JavaScript just before the closing </body> tag:
<script type="text/javascript" src="/ajax_request/liftAjax.js"></script>
<script type="text/javascript">
// <![CDATA[
var lift_page = "F320717045475W3A";
// ]]>
</script>
Questions
Does anyone have an idea why this happens?
If I would want to move the JavaScript code into the Scala file (using Lift's JavaScript and jQuery support), what would the code look like?
Please note: When I used Jq("body") ~> JqAppend() to create new divs, it worked. I just didn't know how to check whether the div id already existed. Thats why I moved the code into the template, planning on using Lift's Call function to execute the JS function. And thats when these problems started...
Thanks!
I recently ran into a similar problem and, from what I've gathered, the problem is because the page when served by lift is served as XHTML and there are some issues when writing to the DOM if the page is XHTML vs. HTML. I don't know whether this is a bug with jQuery or Safari or if it's just something that's not possible in XHTML, but a quick way to fix it is to modify your Boot.scala to tell Lift to not use XHTML as the mime type with this line:
LiftRules.useXhtmlMimeType = false