Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 297
  • Last Modified:

I have rotating quotes (javascript) on page that I would like to have slide in, pause, and slide out...possible?

I have a java script that cycles through a few abbreviated quotes, each which is hyperlinked to an expanded quotes page (the same page for all quotes):

<script language="JavaScript">
<!-- begin script
quotes = new Array();
quotes[0] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI is at the top of my call list... I highly recommend...&quot;<br><br><i>Joe Edwards<br>Senior VP and CIO - ACE Cash Express<br>Dallas, TX.</i>";

quotes[1] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI energized, led, completed... would engage ISI again...&quot;<br><br><i>Larry Zucker<br>VP - Dollar Thrifty Automotive Group<br>Tulsa, OK.</i>";

quotes[2] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI... Timely and efficient... One stop shop...&quot;<br><br><i>Mike Hessong<br>CFO-Heeling Sports Limited</i>";
var pntr=0;
   function doit()
   {
      var quote = quotes[pntr];
      document.getElementById("someid").innerHTML=quote;
      pntr=(pntr+1<quotes.length) ? pntr+1: 0;
      setTimeout('doit()',7000);
   }
// End -->
</script>

~~~~~~~~~~~~~~~~~~~~~~~

<body onLoad="doit()"

~~~~~~~~~~~~~~~~~~~~~~~

<div id="someid">
</div>


I would like to see if these quotes could slide in from the right side of the frame, pause for a set number of seconds, and then slide out of the frame without having to go across the page, but to just disappear out of the left side of the frame that the quotes are set up in?

Thanks,

Ixwith
Dallas, TX
0
ixwith
Asked:
ixwith
  • 4
  • 3
  • 2
1 Solution
 
gstiegerCommented:
<script language="JavaScript">
<!-- begin script
quotes = new Array();
quotes[0] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI is at the top of my call list... I highly recommend...&quot;<br><br><i>Joe Edwards<br>Senior VP and CIO - ACE Cash Express<br>Dallas, TX.</i>";
quotes[1] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI energized, led, completed... would engage ISI again...&quot;<br><br><i>Larry Zucker<br>VP - Dollar Thrifty Automotive Group<br>Tulsa, OK.</i>";
quotes[2] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI... Timely and efficient... One stop shop...&quot;<br><br><i>Mike Hessong<br>CFO-Heeling Sports Limited</i>";

var pntr=0;
var slide=0;
   function doit()
   {
      if (slide == 0)
      {
      var quote = quotes[pntr];
      document.getElementById("someid").innerHTML=quote;
      pntr=(pntr+1<quotes.length) ? pntr+1: 0;
      }
      var offs = slide;
      if (offs > 20) { if (offs < 50) offs = 20; else offs -= 30; }
      someid.style.marginLeft = 400 - offs * 20;
      if (slide++ == 70) { slide = 0; }
      setTimeout('doit()',100);
   }
// End -->
</script>

<body onLoad="doit()">


<div id="thisid" style="position:absolute;width:400;overflow:hidden">
  <div id="someid" style="width:400">
  </div>
</div>

</body>
0
 
ixwithAuthor Commented:
Okay,  I tried copying in your code, and it didn't function...perhaps if I include the entire page code you can test it yourself to see if it works....

The images for the page would be at http://www.isi85.com/html/images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>ISI Integrated Services Inc Index</title>
<script language="JavaScript">
<!-- begin script
quotes = new Array();
quotes[0] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI is at the top of my call list... I highly recommend...&quot;<br><br><i>Joe Edwards<br>Senior VP and CIO - ACE Cash Express<br>Dallas, TX.</i>";

quotes[1] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI energized, led, completed... would engage ISI again...&quot;<br><br><i>Larry Zucker<br>VP - Dollar Thrifty Automotive Group<br>Tulsa, OK.</i>";

quotes[2] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI... Timely and efficient... One stop shop...&quot;<br><br><i>Mike Hessong<br>CFO-Heeling Sports Limited</i>";
var pntr=0;
   function doit()
   {
      var quote = quotes[pntr];
      document.getElementById("someid").innerHTML=quote;
      pntr=(pntr+1<quotes.length) ? pntr+1: 0;
      setTimeout('doit()',7000);
   }
// End -->
</script>

<style type="text/css">
     a:link   {color:#000000;text-decoration: none}
     a:visited{color:#000000;text-decoration: none}
</style>


</head>

<body onLoad="doit()">

<div align="center">
      <table border="0" cellpadding="0" cellspacing="0" width="1085" height="508">
            <!-- MSTableType="layout" -->
            <tr>
                  <td valign="top" colspan="4" height="110">
                  <p align="center">
                  <map name="FPMap1">
                  <area href="isiAboutUs.htm" shape="rect" coords="270, 74, 327, 96">
                  <area href="isiIndex.htm" shape="rect" coords="12, 10, 245, 107">
                  <area href="isiIndex.htm" shape="rect" coords="312, 49, 355, 71">
                  <area href="isiClientLogin.htm" shape="rect" coords="355, 49, 425, 71">
                  <area href="isiContactUs.htm" shape="rect" coords="425, 49, 491, 71">
                  <area href="isiServices.htm" shape="rect" coords="328, 74, 382, 96">
                  <area href="isiProducts.htm" shape="rect" coords="383, 74, 438, 96">
                  <area href="isiSuccesses.htm" shape="rect" coords="439, 74, 501, 96">
                  <area href="isiNews.htm" shape="rect" coords="502, 74, 536, 96">
                  <area href="isiAttn.htm" shape="polygon" coords="560, 1, 554, 20, 569, 38, 590, 44, 606, 34, 613, 18, 609, 3, 604, 0">
                  <area href="isiEvents.htm" shape="rect" coords="491, 49, 538, 71">
                  </map>
                  <map name="FPMap2">
                  <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="86, 87, 70, 91, 59, 108, 60, 128, 74, 144, 91, 147, 109, 139, 241, 138, 241, 108, 116, 107, 104, 91">
                  <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="313, 125, 282, 133, 262, 158, 259, 192, 273, 217, 307, 236, 345, 225, 361, 211, 503, 210, 502, 163, 369, 162, 350, 137">
                  <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="125, 222, 104, 226, 88, 249, 87, 273, 103, 294, 129, 302, 156, 289, 318, 289, 317, 248, 166, 248, 150, 228">
                  </map>
                  <map name="FPMap3">            
                  <area href="http://www.pmi.org/info/default.asp" shape="rect" coords="0, 7, 68, 49">            
                  <area href="http://www.oracle.com/index.html" shape="rect" coords="69, 7, 147, 49">
                  <area href="http://www.microsoft.com/" shape="rect" coords="148, 7, 217, 49">
                  </map>
                  <img border="0" src="images/webheader.jpg" width="760" height="110" usemap="#FPMap1"></td>
            </tr>
            <tr>
                  <td valign="top" rowspan="2" width="162">
                  </td>
                  <td valign="top" width="540" height="415" rowspan="2">
            <img border="0" src="images/webindexcenter01.jpg" width="540" height="358" usemap="#FPMap2">
                  </td>
                  <td valign="top" height="308">
                  <div id="someid">
                  </div>
                  </td>
                  <td valign="top" rowspan="2" width="163">
                  </td>
            </tr>
            <tr>
                  <td height="50" width="220" valign="top">
                  <img border="0" src="images/webindexcenter02.jpg" width="220" height="50" usemap="#FPMap3">
                  </td>
            </tr>
            <tr>
                  <td valign="top" colspan="4" height="35">
                  <center>
                  <img border="0" src="images/webfooter.jpg" width="760" height="30">
                  </center>
                  </td>
            </tr>
      </table>
</div>

</body>

</html>
0
 
ixwithAuthor Commented:
I retried your code, and it does work, but it comes all the way from right margin...is there a way to have it enter from the right side of theframe itself, with proper wrapping...and then have it disappear as it already does...Very cool modification...You almost have it!!   I thank you very much for your quick response, and the awesome code!!

Ixwith
Dallas, TX.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
stevengroganCommented:
<div id="thisid" style="position:absolute;width:920;overflow:hidden">

Hi,

I saw this posted here and saw you still had a slight problem with it. This would cause it to come in about where you want it if I am reading it right.
0
 
stevengroganCommented:
<IMG SRC="whitepixel.gif" STYLE="position:absolute;top:0px; left:0px;width:185;height:500; z-index:1">

Just in case you would want to cleanup the left side to be even with the headers, you could use this line above inserted following this line:

<body onLoad="doit()">


The image is a 1pixel x 1pixel white image. It can be downloaded here: http://www.shyclan.com/whitepixel.gif
0
 
gstiegerCommented:
Look at the code that I posted - it is an entire working page. The text scrolls within the outer div and comes in from the right side of the div which is currently 400 pixels wide. Here it is again:

<script language="JavaScript">
<!-- begin script
quotes = new Array();
quotes[0] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI is at the top of my call list... I highly recommend...&quot;<br><br><i>Joe Edwards<br>Senior VP and CIO - ACE Cash Express<br>Dallas, TX.</i>";
quotes[1] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI energized, led, completed... would engage ISI again...&quot;<br><br><i>Larry Zucker<br>VP - Dollar Thrifty Automotive Group<br>Tulsa, OK.</i>";
quotes[2] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI... Timely and efficient... One stop shop...&quot;<br><br><i>Mike Hessong<br>CFO-Heeling Sports Limited</i>";

var pntr=0;
var slide=0;
   function doit()
   {
      if (slide == 0)
      {
      var quote = quotes[pntr];
      document.getElementById("someid").innerHTML=quote;
      pntr=(pntr+1<quotes.length) ? pntr+1: 0;
      }
      var offs = slide;
      if (offs > 20) { if (offs < 50) offs = 20; else offs -= 30; }
      someid.style.marginLeft = 400 - offs * 20;
      if (slide++ == 70) { slide = 0; }
      setTimeout('doit()',100);
   }
// End -->
</script>

<body onLoad="doit()">


<div id="thisid" style="position:absolute;width:400;overflow:hidden">
  <div id="someid" style="width:400">
  </div>
</div>

</body>
0
 
stevengroganCommented:
Here is your page with his code.

**************[START CODE]*********************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<script language="JavaScript">
<!-- begin script
quotes = new Array();
quotes[0] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI is at the top of my call list... I highly recommend...&quot;<br><br><i>Joe Edwards<br>Senior VP and CIO - ACE Cash Express<br>Dallas, TX.</i>";
quotes[1] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI energized, led, completed... would engage ISI again...&quot;<br><br><i>Larry Zucker<br>VP - Dollar Thrifty Automotive Group<br>Tulsa, OK.</i>";
quotes[2] = "<a href='http://www.isi85.com/html/layer2/isiQuotes.htm'>&quot;ISI... Timely and efficient... One stop shop...&quot;<br><br><i>Mike Hessong<br>CFO-Heeling Sports Limited</i>";

var pntr=0;
var slide=0;
   function doit()
   {
      if (slide == 0)
      {
      var quote = quotes[pntr];
      document.getElementById("someid").innerHTML=quote;
      pntr=(pntr+1<quotes.length) ? pntr+1: 0;
      }
      var offs = slide;
      if (offs > 20) { if (offs < 50) offs = 20; else offs -= 30; }
      someid.style.marginLeft = 400 - offs * 20;
      if (slide++ == 70) { slide = 0; }
      setTimeout('doit()',100);
   }
// End -->
</script>
</head>
<body onLoad="doit()">
<div id="thisid" style="position:absolute; top:0px; left:0px; width:760px; height:500px; overflow:hidden; left: 8px; top: 35px; z-index: 2; visibility: visible;">
  <div id="someid" style="position:absolute; height:200px; width:220px; top: 111px; left: 541px; z-index: 3; visibility: visible;"> </div>
  <div id="Headline" style="position:relative; height:110px; left:0px; top:0px; width: 760px; visibility: visible;">
  <map name="FPMap1">
               <area href="isiAboutUs.htm" shape="rect" coords="270, 74, 327, 96">
               <area href="isiIndex.htm" shape="rect" coords="12, 10, 245, 107">
               <area href="isiIndex.htm" shape="rect" coords="312, 49, 355, 71">
               <area href="isiClientLogin.htm" shape="rect" coords="355, 49, 425, 71">
               <area href="isiContactUs.htm" shape="rect" coords="425, 49, 491, 71">
               <area href="isiServices.htm" shape="rect" coords="328, 74, 382, 96">
               <area href="isiProducts.htm" shape="rect" coords="383, 74, 438, 96">
               <area href="isiSuccesses.htm" shape="rect" coords="439, 74, 501, 96">
               <area href="isiNews.htm" shape="rect" coords="502, 74, 536, 96">
               <area href="isiAttn.htm" shape="polygon" coords="560, 1, 554, 20, 569, 38, 590, 44, 606, 34, 613, 18, 609, 3, 604, 0">
               <area href="isiEvents.htm" shape="rect" coords="491, 49, 538, 71">
</map>
  <img src="images/webheader.jpg" width="760" height="110" border="0" usemap="#FPMap1" /></div>
 
  <div id="bigpic" style="position:absolute; top:111px; left:0px; width:760px; height:358px; z-index: 4; visibility: visible;">
  <map name="FPMap2">
               <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="86, 87,70, 91, 59, 108, 60, 128, 74, 144, 91, 147, 109, 139, 241, 138, 241, 108, 116, 107, 104, 91">
               <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="313,125, 282, 133, 262, 158, 259, 192, 273, 217, 307, 236, 345, 225, 361, 211, 503, 210, 502, 163, 369, 162, 350, 137">
               <area href="http://www.isi85.com/html/isiServices.htm" shape="polygon" coords="125,222, 104, 226, 88, 249, 87, 273, 103, 294, 129, 302, 156, 289, 318, 289, 317, 248, 166, 248, 150, 228"></map>
 
  <img src="images/webindexcenter01.jpg" width="540" height="358" border="0" usemap="#FPMap2" /></div>
  <div id="footline" style="position:absolute; top:470px; left:0px; height:30px; width:760px; z-index: 5; visibility: visible;"><img src="images/webfooter.jpg" /></div>
  <div id="msliner" style="position:absolute; left:540px; top:418px; width:220px; height:50px; z-index: 6; visibility: visible;">
  <map name="FPMap3">          
               <area href="http://www.pmi.org/info/default.asp" shape="rect" coords="0, 7, 68, 49">
              <area href="http://www.oracle.com/index.html" shape="rect" coords="69, 7, 147, 49">
               <area href="http://www.microsoft.com/" shape="rect" coords="148, 7, 217, 49">
               </map>
  <img src="images/webindexcenter02.jpg" border="0" usemap="#FPMap3"/></div>
</div>
</body>
</html>
**************************[END CODE]************************************************

I changed your use of tables/divs to use all div tags. That is the only real change to your original code.
0
 
stevengroganCommented:
Please give any points on this to gstieger, its his function code, I just placed it in your page for you.
0
 
ixwithAuthor Commented:
Cool...Thanks to both of you, Grogan and Stieger...I do appreciate it a lot!  Since my page is centered regardless of the size of the screen, I am keeping the use of the tables (perhaps not the greatest method, or needed, but it's the method that I know best) so, I just took this line;

<div id="thisid" style="position:absolute;width:920;overflow:hidden">

and changed the width to 220, which is the width of that frame (the same width as the red portion from the top image) and now it comes in, pauses, and heads out to the left...Just like I was hoping for... Now, I just need to modify the text itself, so it all displays when it pauses...

Again, thanks a lot for the help!

Darin M
Dallas, TX.
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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