Results 1 to 5 of 5

Thread: Fading Scroller Script jumping in NS/FF

  1. #1
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Fading Scroller Script jumping in NS/FF

    Hello,

    I am having an issue with the fading scroller script I got here:
    http://www.dynamicdrive.com/dynamici...fadescroll.htm

    I have implemented it on this page:
    http://www.corporatesearchers.com/temp/

    and in NS7 FF 1 (fine in IE) it causes the rest of the page to jump when the paragraphs aren't of the same length in the scroller.

    Thanks

    Jeff

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    You haven't allowed enough height in the table cell for the fading scroller under Mozilla (FF and NS). Where you have:

    Code:
     . . .
    	   <table width="180" border="0" align="center" cellpadding="0" cellspacing="0">
           		 <tr>
              	<td height="160" colspan="2" align="left" valign="top">
          <!-- InstanceBeginEditable name="news" -->
    <script type="text/javascript">
    
    /***********************************************
    * Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
     . . .
    The height in red is too short to accommodate it. I found that 172 worked well, to be on the safe side, use 180. This will push the graphic 'images/advertise.gif' down a bit but, fortunately there is room for adjustment just above that:

    Code:
     . . .
    </script>
           <!-- InstanceEndEditable -->
    	  		</td>
           		</tr>
           		 <tr>
           		   <td colspan="2" align="left" valign="top"><p>&nbsp;</p>
       		       <p>&nbsp;</p></td>
    	     </tr>
           		 <tr>
           		   <td colspan="2" align="center" valign="top"><img src="images/advertise.gif" alt="Advertise with CENTRO - Call 1.877.239.6616" width="103" height="145"></td>
     . . .
    You can eliminate one or both (at your discretion) of the empty paragraphs above, highlighted red.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks - I got that set straight now if I could only figure out how to make the text start at the same vertical position as the text in the middle of the page (under the Corporate Specialists heading) it would be perfect.

    Jeff

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    For that, first you need to be consistent in the individual content. The first two begin with <p> the last does not. This seems to only make a difference in Mozilla. I vote for removing all opening <p>'s from the fcontent[x] entries. Then you can go to the paragraph above the containing table for the script and set its bottom margin accordingly, ending up with something like this:

    Code:
    <p class="blue-title" style="margin-bottom:8px!important;margin-bottom:9px;"><img src="images/spacer.gif" width="190" height="2"><br>
          News &amp; Announcements</p>
    	   <table width="180" border="0" align="center" cellpadding="0" cellspacing="0">
           		 <tr>
              	<td height="180" colspan="2" align="left" valign="top">
          <!-- InstanceBeginEditable name="news" -->
    
    <script type="text/javascript">
    
    /***********************************************
    * Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    var delay = 4000; //set delay between message change (in miliseconds)
    var maxsteps=30; // number of steps to take to change from start color to endcolor
    var stepdelay=40; // time in miliseconds of a single step
    //**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
    var startcolor= new Array(255,255,255); // start color (red, green, blue)
    var endcolor=new Array(0,0,0); // end color (red, green, blue)
    
    var fcontent=new Array();
    begintag='<div class="bluelinks" style="font: normal 11px Verdana; color: #1D7DA5; padding: 0px;">'; //set opening tag, such as font declarations
    fcontent[0]="Visit our <a class='bluelinks' href='news.html'>News</a> section for current updates from the Ontario Ministry of Government Services <p>NEW - Order all your <a class='bluelinks' href='due-diligence-order.html'>Due Diligence searches</a> on one easy form!</p>";
    fcontent[1]="NEW - <a class='bluelinks' href='business-resources.html'>Electronic PPSA Registration</a> requisition<p>Robert Borrelli, Manager, wins the <a class='bluelinks' href='news.html'>Samsung Race for the Torch contest</a>!</p>";
    fcontent[2]="Centro Legal Works sponsors the <a class='bluelinks' href='news.html'>Goodman and Carr Foundation Golf Tournament</a>";
    closetag='</div>';
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Nov 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    schpank you
    schpank you very much John!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •