473,747 Members | 2,280 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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.d ivStayTopLeft){
var diffY = document.body.s crollTop;
var divPos = document.all.he aderpos.offsetT op;
var spanPos = document.all.di vStayTopLeft.of fsetTop;
var imageHeight = document.all.he aderpos.clientH eight;
var posDisclaimer = 4000;
var posDivBottom, maxDivPos, newDivPos;
posDivBottom = divPos + imageHeight + spanPos;
maxDivPos = posDisclaimer - imageHeight - divPos + 20;
newDivPos = diffY - divPos;
document.all.di vStayTopLeft.st yle.pixelTop -=
document.all.di vStayTopLeft.st yle.pixelTop;
if (diffY > divPos) {
if (maxDivPos > newDivPos)
document.all.di vStayTopLeft.st yle.posTop += newDivPos;
else document.all.di vStayTopLeft.st yle.posTop +=
maxDivPos;
}
}
}
else { //other browsers
if (document.getEl ementByID("divS tayTopLeft")){
var diffY = window.pageYOff set;
var divPos = document.getEle mentByID("heade rpos").offsetTo p;
var spanPos =
document.getEle mentByID("divSt ayTopLeft").off setTop;
var imageHeight =
document.getEle mentByID("heade rpos").clientHe ight;
var posDisclaimer = 4000;
var posDivBottom, maxDivPos, newDivPos;
posDivBottom = divPos + imageHeight + spanPos;
maxDivPos = posDisclaimer - imageHeight - divPos + 20;
newDivPos = diffY - divPos;
document.getEle mentByID("divSt ayTopLeft").sty le.pixelTop -=
document.getEle mentByID("divSt ayTopLeft").sty le.pixelTop;
if (diffY > divPos){
if (maxDivPos > newDivPos)
document.getEle mentByID("divSt ayTopLeft").sty le.posTop += newDivPos;
else document.getEle mentByID("divSt ayTopLeft").sty le.posTop
+= maxDivPos;
}
}
}
setTimeout("mov eImage()", 3000);
}
Jul 23 '05 #1
2 2004
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.getEl ementByID("divS tayTopLeft")){
var diffY = window.pageYOff set;
var divPos = document.getEle mentByID("heade rpos").offsetTo p;

[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>Viewpo rt Tester</title>
<meta name="author" content="Variou s">
<meta name="keywords" content="">
<meta name="descripti on" 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.pageXOffs et',
'self.pageYOffs et',
'self.screenX',
'self.screenY',
'self.innerHeig ht',
'self.innerWidt h',
'self.outerHeig ht',
'self.outerWidt h',
'self.screen.he ight',
'self.screen.wi dth',
'self.screen.av ailHeight',
'self.screen.av ailWidth',
'self.screen.av ailTop',
'self.screen.av ailLeft',
'self.screen.To p',
'self.screen.Le ft',
'self.screenTop ',
'self.screenLef t',
'self.screen.co lorDepth',
'self.screen.pi xelDepth',
'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;\">Propert y</th>'
+ '<th style=\"text-align: left;\">Value</th</tr>';
if (navigator) {
var x = navigator;
p += '<tr><td>CodeNa me</td><td>' + x.appCodeName +
'&nbsp;</td></tr>'
p += '<tr><td>MinorV ersion</td><td>' + x.appMinorVersi on
+ '&nbsp;</td></tr>'
p +='<tr><td>Name </td><td>' + x.appName + '&nbsp;</td></tr>'
p +='<tr><td>Vers ion</td><td>' + x.appVersion +
'&nbsp;</td></tr>'
p +='<tr><td>Cook ieEnabled</td><td>' + x.cookieEnabled +
'&nbsp;</td></tr>'
p +='<tr><td>CPUC lass</td><td>' + x.cpuClass +
'&nbsp;</td></tr>'
p +='<tr><td>OnLi ne</td><td>' + x.onLine + '&nbsp;</td></tr>'
p +='<tr><td>Plat form</td><td>' + x.platform +
'&nbsp;</td></tr>'
p +='<tr><td>UA</td><td>' + x.userAgent + '&nbsp;</td></tr>'
p +='<tr><td>Brow serLanguage</td><td>' +
x.browserLangua ge + '&nbsp;</td></tr>'
p +='<tr><td>Syst emLanguage</td><td>' + x.systemLanguag e
+ '&nbsp;</td></tr>'
p +='<tr><td>User Language</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\"><t r>'
+ '<th>#</th>'
+ '<th style=\"text-align: left;\">Propert y</th>'
+ '<th>Supported? <br>y/n</th>'
+ '<th>Value</th>'
+ '</tr>';
for (var i=0;i<props.len gth;i++) {
if (!self.screen && props[i].indexOf('self. screen') !=
-1) continue;
if (!document.body && props[i].indexOf('docum ent.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('docum ent.body') != -1) {
var end =
props[i].substring(prop s[i].lastIndexOf('. ')+1);
newprop = 'document.docum entElement.' + 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.getE lementById) return;
document.getEle mentById('uaDet ail').innerHTML = getUA();
}

function reGet() {
if (!document.getE lementById) return;
document.getEle mentById('viewp ortDetail').inn erHTML =
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="viewportDet ail">
<script type="text/javascript">reG et();</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
6738
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 URL. When I put the SRC property change in either an "onbeforeunload" or "onunload" event handler, the HTTP request is not received by our server as much as 75% of the time. I thought of setting a flag using an "onload" handler for the image...
3
17310
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 seems to be ignored completely, even when I try with window.setTimeout. So my two questions are: (1) Most important: Is there anything I can do so that I don't have to wait for the next mouse event before the cursor gets repainted. (2) Why...
4
32238
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 does not work with mozilla Netscap bowsers. Does anyone knows what could be the problem? Does the ONchange function works in Netscape? Or anyone knows a tag that can preview the image file before uploadin it.
2
2821
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 Maintainer: Jan Roland Eriksson <rex@css.nu> ciwas stylesheet authoring FAQ v1.15 ______________________________________________________________________
0
1959
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: Jan Roland Eriksson <rex@css.nu> ciwas stylesheet authoring FAQ v1.16 ______________________________________________________________________
5
1455
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 hand page in the JPEG with quotations, like "We learn from failure, not from success! - Bram Stoker, Dracula". Now, I realize that I could use a drawing program to add the text of the quotation to the graphic but I am wondering if I can accomplish...
7
1576
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 with Firefox and Netscape. Actually, when I say it doesn't work, I mean you have to refresh the page before the fade happens and once that is done once, it works on that image. for that session. Here is the code: // Fade In Script
10
1636
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 is get it to work across the NS, FF and OPR browsers. What I have done is added global variables at the beginning of the existing script, however, I am not sure where to go from there. Even though the script is not showing any errors, and is still...
4
3873
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 am using a master page senerio. The erro I'm getting is 'busyBox' is not a member of 'ASP.login2_aspx'
0
8979
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8818
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9522
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9355
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9307
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9225
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
6790
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
2
2773
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
2203
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.