• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 205
  • Last Modified:

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>
0
hankknight
Asked:
hankknight
  • 4
  • 2
1 Solution
 
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
 
hankknightAuthor Commented:
Thanks!  How can I have this process repeated every 20 seconds?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Suat OzgurWeb / 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
 
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now