473,324 Members | 2,268 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

This code to move image does not work in Netscape

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
2 1969
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
by: Robert Oschler | last post by:
I have a web page where I want to make sure that an image HTTP request is successfully made before the page unloads. The request is made by setting the image element's SRC property to the desired...
3
by: Csaba2000 | last post by:
I have set onmousedown to change the cursor, but this setting is ignored (IE 5.5; NN 6.1 on Win 2K Pro) until the mouse is either moved or the mouse button is released. On Opera 7.01, the setting...
4
by: miarte | last post by:
I have a form to allow the user upload images. The user browse for an image in their computer and click open, th image to be upload is preview on the img tag. The script works fine with IE, but...
2
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/authoring-faq Posting-Frequency: twice a week (Mondays and Thursdays) Last-modified: August 28, 2002 Version: 1.15 URL: http://css.nu/faq/ciwas-aFAQ.html...
0
by: Jan Roland Eriksson | last post by:
Archive-name: www/stylesheets/authoring-faq Posting-Frequency: twice a week (Mondays and Thursdays) Last-modified: April 10, 2003 Version: 1.16 URL: http://css.nu/faq/ciwas-aFAQ.html Maintainer:...
5
by: Rhino | last post by:
I would like to know if something specific is possible with HTML and CSS and, if it is possible, how best to do it. I have a large JPEG showing an open book and would like to overlay the right...
7
by: Dayo | last post by:
Hello folks. Sorry if this seems a bit silly, I have no experience with this type of code. Here is a fading script for an Image Gallery I am looking to fix. It works with IE and Safari but not...
10
by: Muir | last post by:
I am needing, and would appreciate expert assistance for a Javascript program that I am using in a Website. The script is a Text and Image Fader, which only works on IE, but what I am trying to do...
4
by: Ty | last post by:
Hello all, I am creating a web site with Visual Stuido 2008. I am trying to use a java script file to create a busybox for login from this page http://blogs.crsw.com/mark/articles/642.aspx. I...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.