PDA

View Full Version : How to create a floating box without flickering on changing position?

Deevakar
12-06-2007, 06:33 PM
I created a floating box, which always positions in the left top corner of the webpage. But I see that when you scroll, the change in position of the box appears flickering.

The code:


function change_pos()
{
var scrolledX = self.pageXOffset;
var scrolledY = self.pageYOffset;
var postionX = self.innerWidth;
var positionY = self.innerHeight;

//width of the box is 200px, height of the box is 200 px;

var leftOffset = scrolledX + (positionX - 200);
var topOffset = scrolledY;

document.getElementById("ad").style.top = topOffset + "px";
document.getElementById("ad").style.left = leftOffset + "px";
}

//function to trigger the floating ad <div> box with absolute position;

function load_div()
{
change_pos();
document.body.onscroll = change_pos;
window.onscroll = change_pos;
window.onresize = change_pos;
}

How can i make it something like Gmail Chat box, which appears to be attached firmly attached to the page and even on scrolling, the change in position is not so obvious and is without flickering?

-Deevakar
rnd me
12-08-2007, 01:26 AM
dont use javascript at all. use CSS, and apply a fixed position, instead of absolute.
felgall
12-08-2007, 11:19 PM
Just remember to override the position fixed with position absolute for IE6 and keep your JavaScript inside conditional comments for that browser only. That way you get as close as possible to the same effect for that antiquated browser which some people still insist on using.
rnd me
12-09-2007, 01:11 AM
Just remember to override the position fixed with position absolute for IE6 and keep your JavaScript inside conditional comments for that browser only. That way you get as close as possible to the same effect for that antiquated browser which some people still insist on using.

does:
.class1 {position: absolute; position: fixed; }

not work for IE6? i don't think it takes a conditional comment. IE6 should ignore the (unknown) 'fixed' assignment, but keep the 'absolute'.
Actinia
12-09-2007, 10:25 AM
Stu Nicholls has a fix that allows IE6 to emulate position: fixed without using javascript. He calls it 'another one bites the dust (http://www.cssplay.co.uk/layouts/fixed.html)'!

John Rostron
Ancora
12-09-2007, 03:01 PM
Floating Div Smooth Scrolls Back In To Position. IE and FF:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Permanently Positioned Div - Smooth Scrolls Back In To Position</title>
<script type="text/javascript">

var useWidth = "185"; // this is the width of the image;
var useHeight = "139"; // this is its height;
var useFloat = "";
var slideTimer = "";
var initTop = 0;
var nScrollTop = 0;
var prevVal = 0;
var currVal = 0;
var throttlePx = 0;
var resizeTick = 0;
var IE = true;
if (navigator.appName != "Microsoft Internet Explorer"){IE = false}

function realign(){

if (!IE)
{
init();
}
if (IE && resizeTick == 2)
{
self.location.reload();
}
resizeTick++;
}

function throttle(){

clearTimeout(slideTimer);
throttlePx += Math.floor((nScrollTop - throttlePx) * .5);
useFloat.style.top = initTop + throttlePx + "px";
if (Math.abs(throttlePx - nScrollTop) > 1)
{
setTimeout("throttle()", 40);
}
else {
useFloat.style.top = initTop + nScrollTop + "px";
slideTimer = setTimeout("stayHome()", 500);
}
}

function stayHome(){

if (document.documentElement && document.documentElement.scrollTop)
{
nScrollTop = document.documentElement.scrollTop;
document.getElementById('nScroll').value = nScrollTop;
}
else {
nScrollTop = document.body.scrollTop;
document.getElementById('nScroll').value = nScrollTop;
}
prevVal = document.getElementById('nScroll').value;
if (prevVal == currVal)
{
clearTimeout(slideTimer);
if (Number(nScrollTop) + Number(initTop) != useFloat.offsetTop)
{
throttle();
}
}
currVal = document.getElementById('nScroll').value;
prevVal = currVal;
slideTimer = setTimeout("stayHome()", 500);
}

function init(){

useFloat = document.getElementById('isFloat');
if(!document.body.scrollTop)
{
// commented lines center the floating div element
//useFloat.style.top = (document.documentElement.clientHeight - useHeight) / 2 + "px";
//useFloat.style.left = (document.documentElement.clientWidth - 15 - useWidth) / 2 + "px";
useFloat.style.top = "5px";
useFloat.style.left = "5px";
}
else {
// commented lines center the floating div element
//useFloat.style.top = (document.body.clientHeight - useHeight) / 2 + "px";
//useFloat.style.left = (document.body.clientWidth - 15 - useWidth) / 2 + "px";
useFloat.style.top = "5px";
useFloat.style.left = "5px";
}
initTop = useFloat.offsetTop;
stayHome();
}

onload = init;
onresize = realign;

</script>
<style type="text/css">

body
{
height:3967px; <!-- a meaningless value used for testing -->
}

#isFloat
{
position:absolute;
width:auto;
border: 1px solid black;
background-color:#90ee90;
}

#nContainer
{
padding: 3px;
}

</style>
</head>
<body>

<div id='isFloat'>
<div id="nContainer"><input type="hidden" id="nScroll"><img src="./Rock_Hall.jpg" alt="Rock Hall" title="Rock Hall"></div>
</div>

</body>
</html>