0

I am building with bootstrap and have a header area that rotates text on the left and utilizes bootstrap's carousel to rotate images on the right side. The text is only a few words of copy, with the main word being larger and script, with a few words below it in different type. The javascript I am using rotates the first large word as it should, but stacks the other words on top of each other. Everything works properly in most browsers, but IE8 is giving me this problem.

Can anyone look at my code and give me any help to fix this?

This is my html:

<div class="rotator">
   <ul>
      <li class="show">

         <p class="script">Discover<br/><br/>
         <span class="captionwhite">the many uses<br/>of glass block</span></p>
      </li>

      <li class="show">

         <p class="script">Create<br/><br/>
         <span class="captionwhite">a beautiful<br/>shower enclosure</span></p>
      </li>

      <li class="show">

          <p class="script">Illuminate<br/><br/>
          <span class="captionwhite"> your bathroom<br/>naturally</span></p>
       </li>
     </ul>
   </div>

This is my css:

/* rotator in-page placement */
    div.rotator {       
    position:relative;

}
/* rotator css */
    div.rotator ul li {
    position:absolute;
    list-style: none;
}

This is the javascript:

function theRotator() {
    //Set the opacity of all images to 0
    $('div.rotator ul li').css({opacity: 0.0});

    //Get the first image and display it (gets set to full opacity)
    $('div.rotator ul li:first').css({opacity: 1.0});

    //Call the rotator function to run the slideshow, 3000 = change to next image after 3 seconds

    setInterval('rotate()',3000);

}

function rotate() { 
    //Get the first image
    var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));

    if ( current.length == 0 ) current = $('div.rotator ul li:first');

    //Get next image, when it reaches the end, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

    //Un-comment the 3 lines below to get the images in random order

    //var sibs = current.siblings();
    //var rndNum = Math.floor(Math.random() * sibs.length );
    //var next = $( sibs[ rndNum ] );


    //Set the fade in effect for the next image, the show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 3000);

    //Hide the current image
    current.animate({opacity: 0.0}, 3000)
    .removeClass('show');

};



$(document).ready(function() {      
    //Load the slideshow
    theRotator();
    $('div.rotator').fadeIn(3000);
    $('div.rotator ul li').fadeIn(3000); // tweek for IE
});

Any help would be appreciated!

Tracey
  • 13
  • 1
  • 4
  • 5
    The CSS [`opacity`](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity) rule is [not supported in IE8](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity#Browser_compatibility). You'll have to use a proprietary Microsoft `filter` rule for that (which will only work in IE browsers). Or, far more easily, use jQuery's `.hide()` or set the CSS rule `display: none;`. – ajp15243 Sep 27 '13 at 16:51
  • Thanks so much for the response! Can you give me an example of how to code it using the Microsoft filter rule? or how to implement jQuery's .hide()? – Tracey Sep 27 '13 at 17:33
  • I posted an answer addressing all of this. You don't want to use the proprietary Microsoft filters if you can help it, it seems some have been deprecated in IE9+. – ajp15243 Sep 27 '13 at 18:12
  • @ajp15243 jquery recognize the browser to apply `filter:;` or `-ms-filter:;` instead of `opacity:;` (at least the last time I tested worked well). – Protomen Sep 27 '13 at 18:14
  • @GuilhermeNascimento Does it do that for both `.animate()` and `.css()`? – ajp15243 Sep 27 '13 at 18:16
  • @ajp15243 I update the jquery and really does not seem to work with `.css()`, I believe it was a downgrade or I have fooled me. +1 for you. – Protomen Sep 28 '13 at 02:09

1 Answers1

0

From my comment:

The CSS opacity rule is not supported in IE8. You'll have to use a proprietary Microsoft filter rule for that (which will only work in IE browsers). Or, far more easily, use jQuery's .hide() or set the CSS rule display: none;.

After looking at your code a little more, your best option is probably to go with some of jQuery's built-in functions. You'll need to replace most of your opacity usages (via your use of either .css() or .animate()) with one of several jQuery options depending on what you're doing with the opacity setting.

For .css({opacity: 0.0}) (immediately hiding things), you should instead use .hide():

myElement.hide();

For .css({opacity: 1.0}) (immediately showing things), you should instead use .show():

myElement.show();

For your calls to .animate() using opacity (to show or hide slowly), you should instead utilize .fadeIn() and .fadeOut(). You appear to already be using .fadeIn() for your IE tweak at the bottom of your JS code. You can use it in the same manner where you have .animate({opacity: 1.0}, 3000), just use .fadeIn(3000) instead. The same goes for .fadeOut(3000) in place of .animate({opacity: 0.0}, 3000). The default duration is the same on both .fadeIn(), .fadeOut(), and .animate(), all at 400, if you don't explicitly pass a number for the duration.

The jQuery function links there are to the jQuery API Documentation, and you can find complete usage docs as well as examples in those pages.

If you have problems in IE8 with .fadeIn() or .fadeOut(), this question may help.

Community
  • 1
  • 1
ajp15243
  • 7,704
  • 1
  • 32
  • 38
  • Thank for all your help! I made the adjustments you suggested and it is working just fine in IE8 now! – Tracey Sep 30 '13 at 21:32
  • @Tracey Great to hear! Make sure to mark answers that solve your problem (with the green check mark) so that others who come across your questions with a similar problem can see the answer that solved it for you. – ajp15243 Oct 01 '13 at 12:53