Moving an image

  • Thread starter François de Dardel
  • Start date
F

François de Dardel

The URL is:
http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
The JS is in the header

This page behaves as follows:
Safari (Mac) OK
MSIE (Mac) OK
MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV doesn't)
FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
iCab (Mac) No (chgImg works, but MoveDIV doesn't)

The faulty function is:

function moveDIV() {
// moves the picture in a new position...
mouseY=document.body.scrollTop+50;
// Gets the scroll position and positions the DIV 50 px below top
autoDIV.style.pixelTop = mouseY;
}

I've spent 3 days experimenting and searching examples on the web, but
I still found no solution.

Can anyone give me a solution ?

Many thanks in advance.

--
François de Dardel
http:/mapage.noos.fr/dardelf/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail
 
R

RobB

François de Dardel said:
The URL is:
http://mapage.noos.fr/dardelf3/tintin/ListeAutos.html
The JS is in the header

This page behaves as follows:
Safari (Mac) OK
MSIE (Mac) OK
MSIE 5.0 (PC) OK (on Virtual PC on the Mac)
MSIE 5.1 (PC) No on my office PC (chgImg works, but MoveDIV doesn't)
FireFox (Mac) No (chgImg works, but MoveDIV doesn't)
iCab (Mac) No (chgImg works, but MoveDIV doesn't)

The faulty function is:

function moveDIV() {
// moves the picture in a new position...
mouseY=document.body.scrollTop+50;
// Gets the scroll position and positions the DIV 50 px below top
autoDIV.style.pixelTop = mouseY;
}

I've spent 3 days experimenting and searching examples on the web, but
I still found no solution.

Can anyone give me a solution ?

Many thanks in advance.

--
François de Dardel
http:/mapage.noos.fr/dardelf/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail

With some help from ppk:

function moveDIV()
{
// moves the picture in a new position...
var y_scroll, el;
if (self.pageYOffset)
// all except Explorer
y_scroll = self.pageYOffset;
else if (document.documentElement &&
document.documentElement.scrollTop)
// Explorer 6 Strict
y_scroll = document.documentElement.scrollTop;
else if (document.body) // all other Explorers
y_scroll = document.body.scrollTop;
// Gets the scroll position and positions the DIV 50 px below top
if ((document.getElementById
&& (el = document.getElementById('autoDIV')))
|| (document.all
&& (el = document.all['autoDIV'])))
{
el.style.top = String(y_scroll + 55 + 'px');
}
}

Might want to move that graphic into an 'alley' (clear left column) so
it doesn't obstruct any links when it moves down.

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

RobB

(snip)

Just a rough example...

Paste in this HTML:

<BODY BGCOLOR="#FFFFFF">
<DIV ID="autoDIV"
STYLE="position:absolute;left:2px;top:102px;width:120px;border:1px
black solid;">
<A HREF="#" onClick="chgImg('rien.gif')"><IMG SRC="5CV_s.jpg"
NAME="slideshow" WIDTH=120 HEIGHT=80 BORDER=0></A></DIV>
<A HREF="http://mapage.noos.fr/dardelf/index.html" TITLE="FD home"
onMouseOver="changeIt('FD2', '../images/Blason7on.gif')"
onMouseOut="changeIt('FD2', '../images/Blason7.gif')"><IMG
SRC="../images/Blason7.gif" NAME="FD2" ALT="To
Fran&ccedil;ois´ homepage" BORDER="0" ALIGN="left"></A>
<TABLE SUMMARY="Liste" BORDER="0" CELLSPACING="0" CELLPADDING="2"
ALIGN="center" WIDTH="80%">
<TR>
<TD ROWSPAN=999 WIDTH=1></TD>
<TD COLSPAN=3 CLASS="grandbleu">Les autos de Tintin</TD>
<TD ALIGN="right" CLASS="bleu" COLSPAN=2><B>A list of all Tintin
cars</B></TD>
</TR>
............
............
....and this JS (replaces Load_Image, chgImg, moveDIV):

<script type="text/javascript">

function chgImg(myImg)
{
document.slideshow.src = myImg;
}

function moveDIV(e)
{
var y_mouse, y_scroll, el, picHt = 80, adj = 2;
if (e = e || window.event)
{
if ('undefined' != typeof e.clientY)
y_mouse = e.clientY < picHt ? picHt : e.clientY;
else if ('undefined' != typeof e.pageY)
y_mouse = e.pageY < picHt ? picHt : e.pageY;
if (y_mouse)
{
if (self.pageYOffset)
y_scroll = self.pageYOffset;
else if (document.documentElement &&
document.documentElement.scrollTop)
y_scroll = document.documentElement.scrollTop;
else if (document.body)
y_scroll = document.body.scrollTop;
if ((document.getElementById
&& (el = document.getElementById('autoDIV')))
|| (document.all
&& (el = document.all['autoDIV'])))
{
el.style.top = y_mouse + y_scroll + adj - picHt + 'px';
}
}
}
}

</script>

And: change *all* of these -

onMouseOver="moveDIV();

....to:

onMouseOver="moveDIV(event);
 
F

François de Dardel

With some help from ppk:

function moveDIV()
{
// moves the picture in a new position...
var y_scroll, el;
if (self.pageYOffset)
// all except Explorer
y_scroll =3D self.pageYOffset;
else if (document.documentElement &&
document.documentElement.scrollTop)
// Explorer 6 Strict
y_scroll =3D document.documentElement.scrollTop;
else if (document.body) // all other Explorers
y_scroll =3D document.body.scrollTop;
// Gets the scroll position and positions the DIV 50 px below top
if ((document.getElementById
&& (el =3D document.getElementById('autoDIV')))
|| (document.all
&& (el =3D document.all['autoDIV'])))
{
el.style.top =3D String(y_scroll + 55 + 'px');
}
}

http://www.quirksmode.org/viewport/compatibility.html
Many thanks, will experiment will this. The reference is particularly useful.
--
François de Dardel
http:/mapage.noos.fr/dardelf/
Faber est suae quisque fortunae
Enlever le quatorze pour m'écrire
Remove fourteen in the address to send mail
 

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,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top