Simple but Baffling JQuery Problem - Can you help?

  • Kramer
  • Newbie
  • Newbie
  • Kramer
  • Posts: 5

Post 3+ Months Ago

I have a simple but baffling JQuery problem that tells me I have an inadequate understanding of JQuery.

The objective is to have a sequential, rotating banner in the header of the webpage. The objective is to have each banner take 4 secs to fade in, four secs to fade out and them move on to the next entry in the list.

Hereare the HTML, CSS and the code snippet.
Code: [ Select ]
   <div id="headerbar1">
        <table>
        <tr>
          <td width="40%">Some text </td>
        <td width="10%">&nbsp; </td>
          <td width="50%" valign="middle" align="right">
        <p id="rotation">&nbsp; </p>
        </td>
        </tr>
        </table>
        </div>


#headerbar1 {
    font: Arial Black;
    font-family: "Arial Black", Gadget, sans-serif;
    font: Arial Black;
    font-size: 24px;
    color: #FFF;
    background-color: #345595;
    background-image: url(../img/header2.png);
    height: 130px;
    padding-left: 20px;
}

#rotation {
    font: Arial Black;
    font-family: "Arial Black", Gadget, sans-serif;
    font: Arial Black;
    font-size: 16px;
    color: #6FC;
    padding-right: 50px;
}


Javascript code:

    jQuery(function ($) {
    $(document).ready(function(){
         var bannerlist = [
            'Banner1',
            'Banner2',
              'Banner3',
              'Banner4',
            'Banner5',
              'Banner6',        
            ];

      i = 0;
      j = bannerlist.length - 1;
        k = 0;
        while (k < 2) {
            if (i > j) {
                i=0;
                k += 1;
                }
            $banner = $('#rotation');
            $banner.fadeOut(4000);
            $banner.text(bannerlist[i++])
            $banner.fadeIn(4000);
            }
        });
      });
  1.    <div id="headerbar1">
  2.         <table>
  3.         <tr>
  4.           <td width="40%">Some text </td>
  5.         <td width="10%">&nbsp; </td>
  6.           <td width="50%" valign="middle" align="right">
  7.         <p id="rotation">&nbsp; </p>
  8.         </td>
  9.         </tr>
  10.         </table>
  11.         </div>
  12. #headerbar1 {
  13.     font: Arial Black;
  14.     font-family: "Arial Black", Gadget, sans-serif;
  15.     font: Arial Black;
  16.     font-size: 24px;
  17.     color: #FFF;
  18.     background-color: #345595;
  19.     background-image: url(../img/header2.png);
  20.     height: 130px;
  21.     padding-left: 20px;
  22. }
  23. #rotation {
  24.     font: Arial Black;
  25.     font-family: "Arial Black", Gadget, sans-serif;
  26.     font: Arial Black;
  27.     font-size: 16px;
  28.     color: #6FC;
  29.     padding-right: 50px;
  30. }
  31. Javascript code:
  32.     jQuery(function ($) {
  33.     $(document).ready(function(){
  34.          var bannerlist = [
  35.             'Banner1',
  36.             'Banner2',
  37.               'Banner3',
  38.               'Banner4',
  39.             'Banner5',
  40.               'Banner6',        
  41.             ];
  42.       i = 0;
  43.       j = bannerlist.length - 1;
  44.         k = 0;
  45.         while (k < 2) {
  46.             if (i > j) {
  47.                 i=0;
  48.                 k += 1;
  49.                 }
  50.             $banner = $('#rotation');
  51.             $banner.fadeOut(4000);
  52.             $banner.text(bannerlist[i++])
  53.             $banner.fadeIn(4000);
  54.             }
  55.         });
  56.       });



What happens is that the program iterates through the list and displays each entry in sequence without applying the 4 sec fade in and fade out animation. After it exits the routine, it then performs the 4 sec fade in / fade out sequence continuously but on the first list element only(?!!)

Browser: Firefox 3/5/7 with Firebug turned on.


While I know that I can do this easily with plain old Javascript. I am trying to understand the nuances of how JQuery works so I prefer using the JQuery functions to make this work.

Side note: I have successfully used JQuery to build and load two overlays with FadeIn/FadeOut animation, so it is not the JQuery code.


I have tried multiple methods to get the FadeIn/FadeOut animation to behave correctly with no luck. What this tells me is that I am missing something basic in my understanding of JQuery.

Thanks in advance for your help.
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • righteous_trespasser
  • Scuffle
  • Genius
  • User avatar
  • Posts: 6230
  • Loc: South-Africa

Post 3+ Months Ago

There is a comma behind the last array element which there shouldn't be ... Remove that and see if it works then ...

So instead of this:
Code: [ Select ]
var bannerlist = ['Banner1','Banner2','Banner3','Banner4','Banner5','Banner6',];


use this:
Code: [ Select ]
var bannerlist = ['Banner1','Banner2','Banner3','Banner4','Banner5','Banner6'];
  • Kramer
  • Newbie
  • Newbie
  • Kramer
  • Posts: 5

Post 3+ Months Ago

Thanks!

Gave up on JQuery and did it it in plain old Javascript. Doing it that way gave me insight into how Javascript manages objects internally.

Bob McCarthy

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 41 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.