Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Moving an image

Reply
Thread Tools

Moving an image

 
 
François de Dardel
Guest
Posts: n/a
 
      04-25-2005
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

 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      04-26-2005

François de Dardel wrote:
> 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

 
Reply With Quote
 
 
 
 
RobB
Guest
Posts: n/a
 
      04-26-2005
RobB wrote:
> François de Dardel wrote:
> > 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


(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);

 
Reply With Quote
 
François de Dardel
Guest
Posts: n/a
 
      04-26-2005
On 2005-04-26 04:31:33 +0200, "RobB" <(E-Mail Removed)> said:

>
> Fran=E7ois de Dardel wrote:
>> 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=3Ddocument.body.scrollTop+50;
>> // Gets the scroll position and positions the DIV 50 px below top
>> autoDIV.style.pixelTop =3D mouseY;
>> }


> 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Moving Guide Moving Companies Movers Storage linkswanted ASP .Net 0 01-23-2008 01:08 AM
Free Moving Estimate, Local Movers, Long Distance Moving, PackingSupplies, Storage Rental, Home Moving, Apartment Moving, Office Moving,Commercial Moving linkswanted ASP .Net 0 01-06-2008 04:45 AM
Moving to California Moving to L.A linkswanted Digital Photography 3 01-05-2008 04:22 PM
movers los angeles moving storage services movers in L.A companymoving companies moving in calfornia los angeles linkswanted HTML 0 12-21-2007 10:55 PM



Advertisments