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>
Related
I'm no js expert but I've minimised my faulty script and tried to localise the fault without success. You can find the actual page at www.trinitywoking.org.uk. but my minimal test case is
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<title>MinTestCase</title>
<script>window.onload = function () { // Don't run script until page is loaded
var votd = new Array();
votd[129]="Mount Sinai was all smoke because God had come down on it as fire.";
// Prepare today's string for display
document.getElementById("keyverse").innerHTML="<p> " + votd[(129)] + "</p> ";
}
</script>
</head>
<body>
<h1>Target paragraph follows </h1>
<p id="keyverse">
</p>
</body>
</html>
This runs and displays correctly on all browsers except IE lte 8.
A second script runs on all browsers so it doesn't look like a permissions issue.
I'll be very grateful for any help with this.
Thanks.
Remove the <p> tags in document.getElementById() line:
document.getElementById("keyverse").innerHTML=votd[(129)];
There are already tags where you try to edit the innerHTML. IE is a very picky browser.
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>
html is a piece of HTML containing inline Javascript resulting from an AJAX request. The following code:
$(html).filter('script')
returns a jQuery object for each script tag, whereas:
$('script', $(html))
returns an empty array. How is this possible? I'm using Chromium 10.0.
The difference is that $('script', $(html)) is turned into
$(html).find('script')
not
$(htmls).filter('script');
I believe that script tags of a certain type are removed from strings under the guise of keeping IE happy. A year ago, I delved into the jQuery source and found where it did that, but I can't remember why it did that.
Ok got something here, I wonder if answer is still relevant or not anyways here it goes.
Create a new JS file say it as "scriptTagTest.js" add the following js code
var html = '<div>I am DIV</div><script type="text/javascript">alert("I am inline");</script>';
$(document).ready(function(e){
$('#inStr').text(html);
});
$('#test1').live('click', function(e){
var $html = $(html);
var o = $html.filter('script');
check(o);
});
$('#test2').live('click', function(e){
var $html = $(html);
var o = $('script', $html);
check(o);
});
function check($o, $html){
alert('obj len:'+ $o.length);
var $testArea = $('#testArea');
if($o.length > 0){
$testArea.append($o);
}
else{
$testArea.text('No script obj');
}
}
and then the html file as
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="scriptTagTest.js"></script>
</head>
<body>
<p id="hello">Hello World</p>
<div id="inStr">test</div>
<button id="test1">Test $(html).filter('script')</button>
<button id="test2">Test $('script', $(html))</button>
<div id="testArea"> </div>
</body>
</html>
click "Test1" and "Test2" to see the results. Interestingly, the browser didn't parse the variable html with the <script> tag properly which I haven't come across earlier, thats why another JS file.
find() is used to look into the child elements while filter() finds in flat list of objects as well. If you incoming html is is in the form of the html variable then that might explain something.
Tested this in chrome 8 (desktop), FF, IE latest versions. Hope this helps. Best would be to drill down using Firebug!!
OK guys this is intreting,
I'm testing this page
http://static.nemesisdesign.net/demos/ie8-strange/test.html
on IE8 / windows XP.
This is the code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
</body>
</html>
If I open this page with IE8 I get an error.
If I change the code of the script to:
<script>
// note that I added var prefix
var thisgivesmeanerror = 'test';
alert('this alert won\'t be fired on my IE8, what about yours?');
</script>
It works fine.
This happens only on IE 7/8, didn't test it on IE6.
What do you think?
Does it happen to you also? Or is it just my browser that has gone crazy?
Addition
You're saying that is just not using the var prefix that cause the error?
I'm sorry guys but you're wrong, you didn't take time to test the code.
I uploaded a test2 page
http://static.nemesisdesign.net/demos/ie8-strange/test2.html
with the follwing cocde
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="content-language" content="en">
<title>Test 2</title>
</head>
<body>
<div id="thisgivesmeanerror">test</div>
<script>
thisdoesntgiveanyerror = 'test';
alert('This alert will be fired correcly');
</script>
</body>
</html>
That works fine.
So what is actually causing the error? The variable name without the var prefix having the same name as the ID of the DIV element.
Isn't this strange?
May be the answers to this SO-question can help?
You should always precede your variable declarations with var to specify their scope or you might observe inconsistent behavior between different browsers.
use var to declare variables instead of just plugging their name
I'd say the JavaScript interpreter in IE is slightly stricter than on FireFox and others, meaning the script returns an error when it comes to the variable definition line. Putting var in will ensure it actually is a variable.
It's very good practice to declare all your variables with var
James
EDIT
I can't get to IE at the moment, but I can recommend you change your <script> tag to <script type="text/javascript">.
I have a PHP form for discussions. Each message has its own response button, which is dynamically generated. I'm using javascript in the button to make a response form visible at the bottom of the page, but I can't for the life of me get the page to jump down to the form once it's visible. This is a problem for pages that have a lot of discussions on it, as some users may not know to scroll down and will just think the button didn't work.
Here's what I have now for my button code:
<img src="images/reply.jpg" border=0 />
The changeVisibility function looks like this:
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
var el = document.getElementById(elementID);
el.scrollIntoView(true);
}
In my form, I have a div whose id is set to responseForm. When clicking the button, the div does become visible, but the scrollIntoView is not working - I have to manually scroll down to see it. Any ideas?
Use window.location.hash
function changeVisibility(parentID, elementID) {
document.getElementById(elementID).style.visibility="visible";
document.forms[0].parent_id.value=parentID;
window.location.hash = '#' + elementID;
return false;
}
<img src="images/reply.jpg" border=0 />
EDIT: I think the issue before was that you weren't returning false, so the default action (going to #) was still occurring.
OK, I finally found something that works. I've been doing what I was taught to do in the Stone Age: when using javascript calls in what needs to be a link, use
a href="#" onClick="yourFunction()"
Apparently it's the # that's killing things for me; if I just use
a href="javascript:yourFunction()"
it works correctly. This may or may not be considered good practice anymore, but it works.
User window.location.hash to redirect to an ID/anchor. E.g.
HTML:
<p id="youranchor">bla bla</p>
JavaScript:
window.location.hash='youranchor';
EmmyS - This code does work. Here's a complete example for you:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Some title</title>
<script type="text/javascript">
function jumpToParagraph() {
window.location.hash='paragraphjump';
}
</script>
</head>
<body>
<p onclick='jumpToParagraph();'>Jump to the paragraph at the end! [version 1]</p>
<p>Jump to the paragraph at the end! [version 2]</p>
<p style="height: 1500px;">Some nonsense</p>
<p id="paragraphjump">You made the jump</p>
</body>
</html>
Put it into a file and test the file in your browser.
Hmm, you could try using document.body.scrollTop = document.getElementById(elementId).offsetTop; (not tested)
Hum, the following JavaScript code works like a charm:
<script type="text/javascript">
function scrollToPos() {
var el = document.getElementById("abc");
el.style.visibility = "visible";
el.style.display = "block";
el.scrollIntoView(true);
}
</script>
When clicking this link scroll<br />
the following div get's gets visible and scrolls into view (tested in IE6, IE8, FF3.6.3, Google Chrome 4.1 and Opera 10.5, all on windows)
<div id="abc" style="height:100px;color:red;font-weight:bold;visibility:hidden;display:none;">
abc
</div>