I am trying to have a title bar appear when the user clicks on a box. It works perfectly in I.E. 8.0 but not at all in firefox 3.6.3.
HTML
<html>
<head>
<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="sample.js"></script>
<style type="text/css">
@import url('style.css');
</style>
</head>
<body>
<div id="edit2" style="background:#dddddd;height:200px;width:200px;word-wrap:break-word">
<div id="editpane">
<b>blah</b> blah blah
</div>
</div>
<a href="#" onclick="var t = document.getElementsByTagName('html')[0].innerHTML;alert(t);">
save changes
</a>
</body>
</html>
Javascript
$(document).ready(function(){
$("#edit2").live('click',function(){
if($("#menu").length == 0){
$("#edit2").before('<div id="menu" style="height:10px;width:100%"><span style="width:10px;background-color:red"></span><span style="width:10px;background:blue"></span></div>');
}
if($("#menu2").length == 0){
$("#edit2").after('<div id="menu2" style="height:10px;width:100%"><span style="width:10px;background:red"></span><span style="width:10px;background:blue"></span></div>');
}
this.contentEditable = true;
this.focus();
});
$("#edit2").live('blur',function(){
$("#menu").remove();
//$("#menu2").remove();
this.contentEditable = false;
});
});
Could anyone suggest why it's not working? I have managed to use similar code to add/remove new table rows in both browser but I just can't see why this doesn't also work.