Making image move along left and right border

Hello,

I use the following script to move an image up the right border of a table cell (thanks, ed987)

Now I want it to scroll up BOTH the LEFT and RIGHT borders.

I want the one on the right to start moving imediatly, and I want the one on the left to start moving up 3 seconds later.

Any ideas?

Thanks!

<style>
table#mainLayout {
border: 1px #7799aa solid;
}
</style>

<table id="mainLayout" align="center">
 <tr>
  <td height="400" id=content>
   Content goes here
  </td>
 </tr>
<table>

<img src=blop.png style="display:none;width:1px;height:10px" id=img>

<script>
 // thanks, ed987
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

var ma=document.getElementById('content'),img=document.getElementById('img');
img.style.display='block';

img.style.position='absolute';
var width=document.all?img.style.pixelWidth:img.clientWidth,height=document.all?img.style.pixelHeight:img.clientHeight;
var yTop=findPosY(ma);
var yy=yTop+ma.clientHeight;
img.style.left=(findPosX(ma)+ma.clientWidth-parseInt(width/2))+'px';
img.style.top=yy+'px';
//yTop-=height; //this line has sent it above the table, i quickly read it, thought that's desired

var moveyIntv;
function movey()
{
  var yy=(parseInt(img.style.top)-10);
  img.style.top=yy+'px';
  if(yy<yTop){ clearInterval(moveyIntv);img.style.top=yTop+'px';}
}
moveyIntv=setInterval("movey()",100);
 
</script>
LVL 16
hankknightAsked:
Who is Participating?
 
Suat OzgurConnect With a Mentor Web / Application DeveloperCommented:
Try this one:

<style>
table#mainLayout {
border: 1px #7799aa solid;
}
</style>

<table id="mainLayout" align="center">
 <tr>
  <td height="400" id=content>
   Content goes here
  </td>
 </tr>
<table>

<img src=blop.png style="display:none;width:1px;height:10px" id=img>
<img src=blop.png style="display:none;width:1px;height:10px" id=imgleft>

<script>
 // thanks, ed987
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

var ma=document.getElementById('content'),img=document.getElementById('img'),imgleft=document.getElementById('imgleft');

img.style.display='block';
img.style.position='absolute';

imgleft.style.display='block';
imgleft.style.position='absolute';

var width=document.all?img.style.pixelWidth:img.clientWidth,height=document.all?img.style.pixelHeight:img.clientHeight;
var yTop=findPosY(ma);
var yy=yTop+ma.clientHeight;


//yTop-=height; //this line has sent it above the table, i quickly read it, thought that's desired

var moveyIntv;
var moveyIntv2;
var delay;
var trigger;

starthere();

function movey()
{
  var yy=(parseInt(img.style.top)-10);
  img.style.top=yy+'px';
  if(yy<yTop){
    clearInterval(moveyIntv);
    img.style.top=yTop+'px';
  }

}
function moveyleft()
{
  var yy=(parseInt(imgleft.style.top)-10);
  imgleft.style.top=yy+'px';
  if(yy<yTop){
    clearInterval(moveyIntv2);
    imgleft.style.top=yTop+'px';
    trigger=setInterval("starthere()",20000);
  }

}

function startleft()
{
  clearInterval(delay);
  moveyIntv2=setInterval("moveyleft()",100);
}

function starthere(){
  img.style.left=(findPosX(ma)+ma.clientWidth-parseInt(width/2))+'px';
  img.style.top=yy+'px';
  imgleft.style.left=(findPosX(ma)-parseInt(width/2))+'px';
  imgleft.style.top=yy+'px';
  moveyIntv=setInterval("movey()",100);
  delay=setInterval("startleft()",3000);
  clearInterval(trigger);
}
 
</script>

Suat
0
 
Suat OzgurWeb / Application DeveloperCommented:
Hi,

Please try following modified code:

<style>
table#mainLayout {
border: 1px #7799aa solid;
}
</style>

<table id="mainLayout" align="center">
 <tr>
  <td height="400" id=content>
   Content goes here
  </td>
 </tr>
<table>

<img src=test.jpg style="display:none;width:1px;height:10px" id=img>
<img src=test.jpg style="display:none;width:1px;height:10px" id=imgleft>

<script>
 // thanks, ed987
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

var ma=document.getElementById('content'),img=document.getElementById('img'),imgleft=document.getElementById('imgleft');

img.style.display='block';
img.style.position='absolute';

imgleft.style.display='block';
imgleft.style.position='absolute';

var width=document.all?img.style.pixelWidth:img.clientWidth,height=document.all?img.style.pixelHeight:img.clientHeight;
var yTop=findPosY(ma);
var yy=yTop+ma.clientHeight;


img.style.left=(findPosX(ma)+ma.clientWidth-parseInt(width/2))+'px';
img.style.top=yy+'px';
//yTop-=height; //this line has sent it above the table, i quickly read it, thought that's desired

var moveyIntv;
var moveyIntv2;
var delay;

function movey()
{
  var yy=(parseInt(img.style.top)-10);
  img.style.top=yy+'px';
  if(yy<yTop){ clearInterval(moveyIntv);img.style.top=yTop+'px';}

}
function moveyleft()
{
  var yy=(parseInt(imgleft.style.top)-10);
  imgleft.style.top=yy+'px';
  if(yy<yTop){ clearInterval(moveyIntv2);imgleft.style.top=yTop+'px';}

}

function startleft()
{
  clearInterval(delay);
  imgleft.style.left=(findPosX(ma)-parseInt(width/2))+'px';
  imgleft.style.top=yy+'px';
  moveyIntv2=setInterval("moveyleft()",100);
}
moveyIntv=setInterval("movey()",100);
delay=setInterval("startleft()",3000);
 
</script>
0
 
Suat OzgurWeb / Application DeveloperCommented:
Sorry, I changed your image name in <img> tags as test.jpg.
Please change it back to blop.png for both. So it looks like:

<style>
table#mainLayout {
border: 1px #7799aa solid;
}
</style>

<table id="mainLayout" align="center">
 <tr>
  <td height="400" id=content>
   Content goes here
  </td>
 </tr>
<table>

<img src=blop.png style="display:none;width:1px;height:10px" id=img>
<img src=blop.png style="display:none;width:1px;height:10px" id=imgleft>

<script>
 // thanks, ed987
  function findPosX(obj)
  {
    var curleft = 0;
    if(obj.offsetParent)
        while(1)
        {
          curleft += obj.offsetLeft;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.x)
        curleft += obj.x;
    return curleft;
  }

  function findPosY(obj)
  {
    var curtop = 0;
    if(obj.offsetParent)
        while(1)
        {
          curtop += obj.offsetTop;
          if(!obj.offsetParent)
            break;
          obj = obj.offsetParent;
        }
    else if(obj.y)
        curtop += obj.y;
    return curtop;
  }

var ma=document.getElementById('content'),img=document.getElementById('img'),imgleft=document.getElementById('imgleft');

img.style.display='block';
img.style.position='absolute';

imgleft.style.display='block';
imgleft.style.position='absolute';

var width=document.all?img.style.pixelWidth:img.clientWidth,height=document.all?img.style.pixelHeight:img.clientHeight;
var yTop=findPosY(ma);
var yy=yTop+ma.clientHeight;


img.style.left=(findPosX(ma)+ma.clientWidth-parseInt(width/2))+'px';
img.style.top=yy+'px';
//yTop-=height; //this line has sent it above the table, i quickly read it, thought that's desired

var moveyIntv;
var moveyIntv2;
var delay;

function movey()
{
  var yy=(parseInt(img.style.top)-10);
  img.style.top=yy+'px';
  if(yy<yTop){ clearInterval(moveyIntv);img.style.top=yTop+'px';}

}
function moveyleft()
{
  var yy=(parseInt(imgleft.style.top)-10);
  imgleft.style.top=yy+'px';
  if(yy<yTop){ clearInterval(moveyIntv2);imgleft.style.top=yTop+'px';}

}

function startleft()
{
  clearInterval(delay);
  imgleft.style.left=(findPosX(ma)-parseInt(width/2))+'px';
  imgleft.style.top=yy+'px';
  moveyIntv2=setInterval("moveyleft()",100);
}
moveyIntv=setInterval("movey()",100);
delay=setInterval("startleft()",3000);
 
</script>


Suat
0
Cloud Class® Course: C++ 11 Fundamentals

This course will introduce you to C++ 11 and teach you about syntax fundamentals.

 
hankknightAuthor Commented:
Thanks!  How can I have this process repeated every 20 seconds?
0
 
hankknightAuthor Commented:
Thanks!  

By the way, I have posted a related question here:

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21927506.html
0
 
Suat OzgurWeb / Application DeveloperCommented:
Glad to hear it helps!

I'll look at the related question. I hope I can help. I think you might want to notify ed987 as well (original author).

Suat
(Thanks for the A grade)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.