By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,417 Members | 1,825 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,417 IT Pros & Developers. It's quick & easy.

This code to move image does not work in Netscape

P: n/a
The following code works OK in IE 6.0 but does not work in Netscape 7.
The image does not shift when one scrolls down but stays stationary in
Netscape.

Please help

Thank you
John

function moveImage(e){ //shift image according to scroll
if ((platform == "Win" ) && (IE)){ //Internet Explorer
if (document.all.divStayTopLeft){
var diffY = document.body.scrollTop;
var divPos = document.all.headerpos.offsetTop;
var spanPos = document.all.divStayTopLeft.offsetTop;
var imageHeight = document.all.headerpos.clientHeight;
var posDisclaimer = 4000;
var posDivBottom, maxDivPos, newDivPos;
posDivBottom = divPos + imageHeight + spanPos;
maxDivPos = posDisclaimer - imageHeight - divPos + 20;
newDivPos = diffY - divPos;
document.all.divStayTopLeft.style.pixelTop -=
document.all.divStayTopLeft.style.pixelTop;
if (diffY > divPos) {
if (maxDivPos > newDivPos)
document.all.divStayTopLeft.style.posTop += newDivPos;
else document.all.divStayTopLeft.style.posTop +=
maxDivPos;
}
}
}
else { //other browsers
if (document.getElementByID("divStayTopLeft")){
var diffY = window.pageYOffset;
var divPos = document.getElementByID("headerpos").offsetTop;
var spanPos =
document.getElementByID("divStayTopLeft").offsetTo p;
var imageHeight =
document.getElementByID("headerpos").clientHeight;
var posDisclaimer = 4000;
var posDivBottom, maxDivPos, newDivPos;
posDivBottom = divPos + imageHeight + spanPos;
maxDivPos = posDisclaimer - imageHeight - divPos + 20;
newDivPos = diffY - divPos;
document.getElementByID("divStayTopLeft").style.pi xelTop -=
document.getElementByID("divStayTopLeft").style.pi xelTop;
if (diffY > divPos){
if (maxDivPos > newDivPos)
document.getElementByID("divStayTopLeft").style.po sTop += newDivPos;
else document.getElementByID("divStayTopLeft").style.po sTop
+= maxDivPos;
}
}
}
setTimeout("moveImage()", 3000);
}
Jul 23 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
John wrote:
The following code works OK in IE 6.0 but does not work in Netscape 7.
The image does not shift when one scrolls down but stays stationary in
Netscape. [Snip]
else { //other browsers
if (document.getElementByID("divStayTopLeft")){
var diffY = window.pageYOffset;
var divPos = document.getElementByID("headerpos").offsetTop;

[snip]

You should do feature detection, not browser detection, as
IE will not necessarily work with your code either.
According to the Mozilla site, "offsetTop" is DOM level 0,
which means (AFAIK) that it is not part of the official spec
but is supported as legacy from older browsers. It is not
supported by Firefox.

There is a useful reference below, it is by no means perfect
but provides a start to cross-browser viewport stuff:

http://www.quirksmode.org/viewport/compatibility.html

At the bottom of the page is a good start on a browser
compatability test for viewport characteristics. It would
be nice to extend it cover mor functions and provide a
better layout... spare time project?

Have fun, Rob.
Jul 23 '05 #2

P: n/a
RobG wrote:
[snip]
http://www.quirksmode.org/viewport/compatibility.html

At the bottom of the page is a good start on a browser compatability
test for viewport characteristics. It would be nice to extend it cover
mor functions and provide a better layout... spare time project?

[snip]

What the heck. Below is a modified version of the page.
Interesting is that values for scrollTop, scrollLeft, etc.
are undefined until you actually scroll down or across, so
the "supported y/n" column is not exactly correct. Any
improvements would be greatly appreciated.

Watch for wrapping, I've tried to manually wrap it but I'm
no expert.

Cheers, Rob.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Viewport Tester</title>
<meta name="author" content="Various">
<meta name="keywords" content="">
<meta name="description" content="
This page was orignally from:

http://www.quirksmode.org/viewport/compatibility.html

and has been modified for a table layout that can be
copied and pasted from different browsers to more easily
compile a browser compatability matrix.

It also report user agent (UA) and platform, however
these are not reliable because some UA's allow the user
to sepcify what will reported, regardless of the actual UA
or platform.">

<style type="text/css">
td,th
{font-size: 14px; padding-right: 5; padding-left: 10;
border-bottom: 1px solid #999999;}
..pass
{font-size: 14px; background-color: green;
font-weight: bold; text-align: center; color: gold;}
..fail
{font-size: 14px; background-color: red;
font-weight: bold; text-align: center; color: darkblue;}
..count
{font-size: 14px; text-align: right; font-weight: bold;
padding-right: 10; padding-left: 10;}
p
{font-family: sans-serif; size: 14px;}
</style>

<script type="text/javascript">
var x = navigator;
var props = new Array(
'self.pageXOffset',
'self.pageYOffset',
'self.screenX',
'self.screenY',
'self.innerHeight',
'self.innerWidth',
'self.outerHeight',
'self.outerWidth',
'self.screen.height',
'self.screen.width',
'self.screen.availHeight',
'self.screen.availWidth',
'self.screen.availTop',
'self.screen.availLeft',
'self.screen.Top',
'self.screen.Left',
'self.screenTop',
'self.screenLeft',
'self.screen.colorDepth',
'self.screen.pixelDepth',
'document.body.clientHeight',
'document.body.clientWidth',
'document.body.scrollHeight',
'document.body.scrollWidth',
'document.body.scrollLeft',
'document.body.scrollTop',
'document.body.offsetHeight',
'document.body.offsetWidth',
'document.body.offsetTop',
'document.body.offsetLeft'
);

function uaDetail() {
var p = '<table border=\"0"\>'
+ '<tr><th style=\"text-align: left;\">Property</th>'
+ '<th style=\"text-align: left;\">Value</th</tr>';
if (navigator) {
var x = navigator;
p += '<tr><td>CodeName</td><td>' + x.appCodeName +
'&nbsp;</td></tr>'
p += '<tr><td>MinorVersion</td><td>' + x.appMinorVersion
+ '&nbsp;</td></tr>'
p +='<tr><td>Name</td><td>' + x.appName + '&nbsp;</td></tr>'
p +='<tr><td>Version</td><td>' + x.appVersion +
'&nbsp;</td></tr>'
p +='<tr><td>CookieEnabled</td><td>' + x.cookieEnabled +
'&nbsp;</td></tr>'
p +='<tr><td>CPUClass</td><td>' + x.cpuClass +
'&nbsp;</td></tr>'
p +='<tr><td>OnLine</td><td>' + x.onLine + '&nbsp;</td></tr>'
p +='<tr><td>Platform</td><td>' + x.platform +
'&nbsp;</td></tr>'
p +='<tr><td>UA</td><td>' + x.userAgent + '&nbsp;</td></tr>'
p +='<tr><td>BrowserLanguage</td><td>' +
x.browserLanguage + '&nbsp;</td></tr>'
p +='<tr><td>SystemLanguage</td><td>' + x.systemLanguage
+ '&nbsp;</td></tr>'
p +='<tr><td>UserLanguage</td><td>' + x.userLanguage +
'&nbsp;</td></tr>'
p +='</table>'
} else {
p = 'Your user agent does not support the navigator object,'
+ '\nso I can\'t determine your viewport properties';
}
return p;
}

function viewportDetail() {
var count = 0;
var printstring = '';
printstring += '<table border=\"0\"><tr>'
+ '<th>#</th>'
+ '<th style=\"text-align: left;\">Property</th>'
+ '<th>Supported?<br>y/n</th>'
+ '<th>Value</th>'
+ '</tr>';
for (var i=0;i<props.length;i++) {
if (!self.screen && props[i].indexOf('self.screen') !=
-1) continue;
if (!document.body && props[i].indexOf('document.body')
!= -1) continue;
if (eval(props[i])) {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + props[i]
+ '</td><td class=\"pass\">Yes'
+ '</td><td>' + eval(props[i])
+ '</td></tr>';
} else {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + props[i]
+ '</td><td class=\"fail\">No'
+ '</td><td>' + eval(props[i])
+ '</td></tr>';
}
if (props[i].indexOf('document.body') != -1) {
var end =
props[i].substring(props[i].lastIndexOf('.')+1);
newprop = 'document.documentElement.' + end;
if (eval(newprop)) {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + newprop
+ '</td><td class=\"pass\">Yes'
+ '</td><td>' + eval(newprop)
+ '</td></tr>';
} else {
++count;
printstring +=
'<tr><td class=\"count\">' + count
+ '</td><td>' + newprop
+ '</td><td class=\"fail\">No'
+ '</td><td>' + eval(newprop)
+ '</td></tr>';
}
}
}
printstring += '</table>'
return printstring;
}

function getUA() {
if (!document.getElementById) return;
document.getElementById('uaDetail').innerHTML = getUA();
}

function reGet() {
if (!document.getElementById) return;
document.getElementById('viewportDetail').innerHTM L =
viewportDetail();
}
</script>
</head>

<body>
<h4>Your user agent's properties<sup><a href="#note">1</a></h4>

<pre id="uaDetail">
<script type="text/javascript">
document.write(uaDetail());
</script>
</pre>

<h4>These are the properties that work in your browser:</h4>

<pre id="viewportDetail">
<script type="text/javascript">reGet();</script>
</pre>

<p>(<a href="#" onclick="reGet(); return false">Refresh</a>
list)</p>
<p><a name="note">The user agent values are as reported by
your user
agent (browser). Depending upon the UA you are using, you
may be able
to change these in a preference setting. Some browsers
pretend to
be some other browser by default - please check your UA's
settings
to determine if the values are accurate.</a></p>
</body>
</html>
Jul 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.