Works in Firefox and Netscape but not IE

F

faylau

Hi,
I copied some javascript code off of this group to keep a banner in
view as the user scrolls down the page. The code works fine in Firefox
and Netscape but not in IE. Just wondering if someone can tell me what
I need to change in the code to get it to work as universally as
possible. I don't know javascript and usually just copy code snippets
without really know what's going on. Hopefully this should be simple
for someone who actually knows what's going on.

Here's the code:

<html>

<head>
<title>Gluing banneer</title>

<style type="text/css">
#banneer{
background-color:yellow;
color:red;
border:thin outset;
width:150px;
position:absolute;

}

</style>

<script type="text/javascript">
function f(){
var div_top=0;
var win_top=0;
var x=1;
var div=document.getElementById("banneer");
var ypos=0;

if(div.style.top=="")div.initialTop=div.offsetTop;

win_top=div_top=div.offsetTop;
if(document.body.scrollTop!=undefined){
win_top=document.body.scrollTop;
x=3;
}else if(window.pageYOffset!=undefined){
win_top=window.pageYOffset;
x=6;
}
ypos=(win_top+div.initialTop-div_top)/x+div_top;
div.style.top=(ypos)+"px";

}

//The banneer follows!
setInterval("f()",10);
</script>

</head>

<body>
<div id="banneer">Hello World</div>
<div style="height:2000px"></div>
</body>
</html>

Thanks.
 
Y

Yann-Erwan Perio

(e-mail address removed) wrote:

Hi,
I copied some javascript code off of this group to keep a banner in
view as the user scrolls down the page. The code works fine in Firefox
and Netscape but not in IE.
if(document.body.scrollTop!=undefined){

A test should be made in regards of documentElement, the code as is
would work in IE in quirks mode but not in compat mode.

This looks like something I've written years ago, while in the process
of learning the language; when re-using code you'd better go for the
most recent scripts, which are usually more adapted to new browsers and
coding practices;-)


<style type="text/css">
#banneer{
background-color:yellow;
color:red;
border:thin outset;
width:150px;
position:absolute;
}
</style>

<script type="text/javascript">
Utils = {
getScroll : function(){
var el=Utils.getCompatModeElement(), func;
if(el && typeof el.scrollTop=="number") {
func = function(){
return {x:el.scrollLeft, y:el.scrollTop};
}
} else if(typeof window.pageYOffset=="number") {
func = function(){
return {x:window.pageXOffset, y:window.pageYOffset};
}
} else {
func = function() {return {x:NaN, y:NaN};}
}
return (Utils.getScroll = func)();
},

getOffset : function(el){
var x=0, y=0;
do{
x+=el.offsetLeft|0;
y+=el.offsetTop|0;
el=el.offsetParent;
} while(el);
return {x:x, y:y};
},

getCompatModeElement:function(){
var el=null;
if(document.compatMode &&
document.compatMode.indexOf("CSS")!=-1 &&
document.documentElement) {
el = document.documentElement;
} else if(document.body) {
el = document.body;
}
return (Utils.getCompatModeElement=function(){return el})();
},

getElementWithId : function(id) {
var d=document, func, fail=null;
if(d.getElementById) {
func = function(id) {return d.getElementById(id);}
} else if(d.all) {
func = function(id) {return d.all[id]; }
} else {
func = function() {return fail;}
}
return (Utils.getElementWithId = func)(id);
}
};

window.onload = function() {
var div = Utils.getElementWithId("banneer");
var div_top=0;
var win_top=0;
var x=3;

if(
div &&
typeof Utils.getOffset(div).y=="number" &&
typeof Utils.getScroll().y=="number"
){
div.initialTop=Utils.getOffset(div).y;
setInterval(
function() {
div_top=Utils.getOffset(div).y;
win_top=Utils.getScroll().y;
div.style.top=(win_top+div.initialTop-div_top)/x+div_top+"px";
},
10
);
}
}
</script>

<div id="banneer">Hello World</div>
<div style="height:2000px"></div>


HTH
Yep.
 
F

faylau

Thank you for your help.

At first I thought the code still wasn't working in my IE. But then I
scrolled to the very right side and saw the "hello world" off to the
side. So for some reason, the "hello world" seems to be staying within
my monitor in firefox and netscape, but it's off the monitor on IE.

I think this may be a little more manageable for me to figure out. But
please let me know if you have any ideas how to fix this minor glitch.

Thanks again.
 
Y

Yann-Erwan Perio

(e-mail address removed) wrote:

Hi,
At first I thought the code still wasn't working in my IE. But then I
scrolled to the very right side and saw the "hello world" off to the
side.

The script I've provided should work from IE5+, in the same way as in
Mozilla or Opera 8; what version of IE, on which platform, do you use?
Are you testing the code "as is" or did you plug it within an existing
page? If you could post a short test case demonstrating the issue, or
provide a URL, I might give a deeper look.

As for hints, I think that what you describe could be a styling issue;
start with checking margin/padding, and absolute-positioning (the div
should absolutely-positioned, and as a direct child of the BODY if
possible).


Cheers,
Yep.
 
F

faylau

I knew it was a coding error on my part. I had a spacer image in the
table cell with the div. For some reason, firefox and netscape were
ignoring the image so that's why the box was displaying correctly on
the monitor. Just deleted the image and everything works perfectly now
in all browsers. Thanks for being so helpful!
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top