Help me ...create a fixed div In ie6 I have written some code but that is not correct

**pankaj.ghadge** · 10-18-2008, 11:03 AM

hello everyone,

I am trying to make a div tag dynamically by using javascript..

Like var divObj=document.createElement("div");
divObj.setAttribute('id',"dhtmlwindowholder");
divObj.className="divCss"; //css class will be applied this way

// i am setting this Div id dynamically. it is not fix.

suppose i have 5 or more link. All of that links are generated dynamically.
On each link click i am creating a div tag and i am setting the position dynamically.
I want to keep the position of Div fix in IE6
It works well in firefox and in IE7 after adding
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Another example is like in Gmail web browser chatting when the user click on his/her friend (chat)link the window gets appear on the right hand bottom side that window position is fix. each chat window position is fix ............... that Div (chat)window appear on predefined positions.

But in IE6 it does not work................
so please guide me.................................

**jscheuer1** · 10-18-2008, 03:02 PM

There have been many ways put forth to deal with this issue, here's one:

http://www.dynamicdrive.com/forums/s...98&postcount=7

There are others, some that require javascript (like the above), some that do not. None are 100% reliable. A non-javascript solution is better in many cases, but those I have seen are more complex and unreliable. However, since your fixed content is generated by javascript, using javascript to position it in IE 6 will do no harm.

Notes: Many of the other solutions that appear not to use javascript do. If they use IE behaviors or css expressions, although the javascript may not be obvious, it is still required for them to work.

Ones that do not use javascript at all rely upon reorganizing the normal flow of the page via style, and therefore are more complex to use and more likely to break a page that already has a complex flow.

No method is 100% reliable, though the one I linked to is about as good as it gets.

**pankaj.ghadge** · 10-20-2008, 01:05 PM

hello,
In this code where to make the change i don't know i have tried every thing,
But it is not working in IE6
I want to apply every thing by javascript.
Like Top,left,width,height,
and i want to make the div fix in IE6
so please help me out....................................................................................................

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</script>
<style type="text/css">
.divClass 
{
	position:fixed;
	border:1px solid gray;
	color:#ccc;
	top:200px;
	left:5px;
	background-color:#666;
}
body 
{
	background:url(foo) fixed;
}
</style>
<style type="text/css">
</style>
<script>
function openDiv()
{
	
	var newDiv=document.createElement("div");
	newDiv.style.width="400px";
	newDiv.style.height="400px";
	newDiv.style.backgroundColor="#488be8";
	document.body.appendChild(newDiv);
	
	newDiv.style.position="absolute";
	newDiv.style.setExpression("top","((document.compatMode && (document.compatMode=='CSS1Compat')) ? document.documentElement.scrollTop+200+'px' : document.body.scrollTop+200+'px')");
        newDiv.style.setExpression("left","((document.compatMode && (document.compatMode=='CSS1Compat')) ? document.documentElement.scrollLeft+200+'px' : document.body.scrollLeft+200+'px')");
	//document.body.style.backgroundImage = "url('/pixel.gif')"; 
	document.body.style.backgroundAttachment = 'fixed'; 
	
	return true;
}

</script>
</head>
<body>
<input type="button" value="click me it will Create Dynamic Div how to make it fix in IE6" onclick="return openDiv();">
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
</body>
</html>

**jscheuer1** · 10-20-2008, 03:03 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cross Browser Fixed - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.divClass {
position:fixed;
border:1px solid gray;
color:#ccc;
top:200px;
left:5px;
background-color:#666;
}
</style>
<script type="text/javascript">
function openDiv(){
var newDiv=document.createElement("div");
newDiv.style.width="400px";
newDiv.style.height="400px";
newDiv.style.backgroundColor="#488be8";
newDiv.className = 'divClass';
document.body.appendChild(newDiv);
};
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
function fixedIE(tl, n){
var sc='scroll'+tl, d=document, c='compatMode';
return d[c] && d[c]=='CSS1Compat'? d.documentElement[sc]+n+'px' : d.body[sc]+n+'px';
}
</script>
<style type="text/css">
body {
background:url(foo) fixed;
}
.divClass {
position:absolute;
top:expression(fixedIE('Top',200));
left:expression(fixedIE('Left',5));
}
</style>
<![endif]-->
</head>
<body>
<input type="button" value="click me it will Create Dynamic Div how to make it fix in IE6" onclick="return openDiv();">
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
</body>
</html>

Or, if you want to use just javascript:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Cross Browser Fixed - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function openDiv(){
var newDiv = document.createElement('div'), s = newDiv.style;
s.border = '1px solid gray';
s.color = '#ccc';
s.width = '400px';
s.height = '400px';
s.backgroundColor = '#488be8';
s.top = '200px';
s.left = '200px';
s.position = 'fixed';
if(typeof fixedIE == 'function'){
s.position = 'absolute';
s.setExpression('top', "fixedIE('Top',200)");
s.setExpression('left', "fixedIE('Left',200)");
document.body.style.background = 'url(foo) fixed';
};
document.body.appendChild(newDiv);
};
</script>
<!--[if lte IE 6]>
<script type="text/javascript">
function fixedIE(tl, n){
var sc='scroll'+tl, d=document, c='compatMode';
return d[c] && d[c]=='CSS1Compat'? d.documentElement[sc]+n+'px' : d.body[sc]+n+'px';
}
</script>
<![endif]-->
</head>
<body>
<input type="button" value="click me it will Create Dynamic Div how to make it fix in IE6" onclick="return openDiv();">
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
<p>Other Content</p>
</body>
</html>

**pankaj.ghadge** · 10-21-2008, 04:49 AM

Hey buddy thanks a lot...................................

Thread: Help me ...create a fixed div In ie6 I have written some code but that is not correct

Thread Tools

Search Thread

How to fix the position of Div In IE6

Help me ...create a fixed div In ie6 I have written some code but that is not correct

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions