Jump to content

IE compatible..


techker
Go to solution Solved by techker,

Recommended Posts

Hey guys im still having this nerver ending struggle between IE .Chrome,Firefox.......Compatibility...

 

so i have this carrousel on my set and it works great in all browsers but IE....

 

is there a way to make it work correctly?it goes right but doesnt come back to first page...

 

 

 

js

 

 
!function ($) {
 
  "use strict"; // jshint ;_;
 
 
 /* CAROUSEL CLASS DEFINITION
  * ========================= */
 
  var Carousel = function (element, options) {
    this.$element = $(element)
    this.options = options
    this.options.slide && this.slide(this.options.slide)
    this.options.pause == 'hover' && this.$element
      .on('mouseenter', $.proxy(this.pause, this))
      .on('mouseleave', $.proxy(this.cycle, this))
  }
 
  Carousel.prototype = {
 
    cycle: function (e) {
      if (!e) this.paused = false
      this.options.interval
        && !this.paused
        && (this.interval = setInterval($.proxy(this.next, this), this.options.interval))
      return this
    }
 
  , to: function (pos) {
      var $active = this.$element.find('.active')
        , children = $active.parent().children()
        , activePos = children.index($active)
        , that = this
 
      if (pos > (children.length - 1) || pos < 0) return
 
      if (this.sliding) {
        return this.$element.one('slid', function () {
          that.to(pos)
        })
      }
 
      if (activePos == pos) {
        return this.pause().cycle()
      }
 
      return this.slide(pos > activePos ? 'next' : 'prev', $(children[pos]))
    }
 
  , pause: function (e) {
      if (!e) this.paused = true
      clearInterval(this.interval)
      this.interval = null
      return this
    }
 
  , next: function () {
      if (this.sliding) return
      return this.slide('next')
    }
 
  , prev: function () {
      if (this.sliding) return
      return this.slide('prev')
    }
 
  , slide: function (type, next) {
      var $active = this.$element.find('.active')
        , $next = next || $active[type]()
        , isCycling = this.interval
        , direction = type == 'next' ? 'left' : 'right'
        , fallback  = type == 'next' ? 'first' : 'last'
        , that = this
        , e = $.Event('slide')
 
      this.sliding = true
 
      isCycling && this.pause()
 
      $next = $next.length ? $next : this.$element.find('.item')[fallback]()
 
      if ($next.hasClass('active')) return
 
      if ($.support.transition && this.$element.hasClass('slide')) {
        this.$element.trigger(e)
        if (e.isDefaultPrevented()) return
        $next.addClass(type)
        $next[0].offsetWidth // force reflow
        $active.addClass(direction)
        $next.addClass(direction)
        this.$element.one($.support.transition.end, function () {
          $next.removeClass([type, direction].join(' ')).addClass('active')
          $active.removeClass(['active', direction].join(' '))
          that.sliding = false
          setTimeout(function () { that.$element.trigger('slid') }, 0)
        })
      } else {
        this.$element.trigger(e)
        if (e.isDefaultPrevented()) return
        $active.removeClass('active')
        $next.addClass('active')
        this.sliding = false
        this.$element.trigger('slid')
      }
 
      isCycling && this.cycle()
 
      return this
    }
 
  }
 
 
 /* CAROUSEL PLUGIN DEFINITION
  * ========================== */
 
  $.fn.carousel = function (option) {
    return this.each(function () {
      var $this = $(this)
        , data = $this.data('carousel')
        , options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
      if (!data) $this.data('carousel', (data = new Carousel(this, options)))
      if (typeof option == 'number') data.to(option)
      else if (typeof option == 'string' || (option = options.slide)) data[option]()
      else if (options.interval) data.cycle()
    })
  }
 
  $.fn.carousel.defaults = {
    interval: 5000
  , pause: 'hover'
  }
 
  $.fn.carousel.Constructor = Carousel
 
 
 /* CAROUSEL DATA-API
  * ================= */
 
  $(function () {
    $('body').on('click.carousel.data-api', '[data-slide]', function ( e ) {
      var $this = $(this), href
        , $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
        , options = !$target.data('modal') && $.extend({}, $target.data(), $this.data())
      $target.carousel(options)
      e.preventDefault()
    })
  })
 
}(window.jQuery);
 
 
 
DIV
 
 
<div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                
                    <div class="item">
                      <div class="row box center">
                        <div class="span4 marg5">
                           <p><img src="LOGO/Autostart_Logo.gif"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/compustar-pro.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/dse_logo.png"></p>
                          <p></p>
                        </div>
                      </div>
                    </div>
                    
                    <div class="item">
                      <div class="row box center">
                        <div class="span4 marg5">
                           <p><img src="LOGO/fortin.jpg"> </p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/Idatalink.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/drone-logo_white-2.jpg"></p>
                          <p></p>
                        </div>
                      </div>
                    </div>
                    
                    <div class="item active">  
                      <div class="row box center">
                        <div class="span4 marg5">
                           <p><img src="LOGO/AccessLogo.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/AVS322065onvehicleHR.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/truck_acc_aries_sidestep_blk.gif"></p>
                          <p></p>
                        </div>
                      </div>
                    </div>
                     <div class="item">
                      <div class="row box center">
                        <div class="span4 marg5">
                           <p><img src="LOGO/class-4-5-hitch.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/BANBO HID XENON KIT NEPTUNE-S.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/IMG4DB82B8BA0689_500.jpg"></p>
                          <p></p>
                        </div>
                      </div>
                    </div>
                    
                    <div class="item">
                      <div class="row box center">
                        <div class="span4 marg5">
                           <p><img src="LOGO/Clarion_Logo.png"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/logo-KENWOOD-best.jpg"></p>
                          <p></p>
                        </div>
                        <div class="span4 marg5">
                           <p><img src="LOGO/parrotlogo.jpg"></p>
                          <p></p>
                        </div>
                      </div>
 
 
CSS
 
.carousel {
  position: relative;
  margin-bottom: 5px;
  line-height: 1;
}
 
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
 
.carousel .item {
  position: relative;
  display: none;
  -webkit-transition: 0.6s ease-in-out left;
     -moz-transition: 0.6s ease-in-out left;
      -ms-transition: 0.6s ease-in-out left;
       -o-transition: 0.6s ease-in-out left;
          transition: 0.6s ease-in-out left;
}
 
.carousel .item > img {
  display: block;
  line-height: 1;
}
 
.carousel .active,
.carousel .next,
.carousel .prev {
  display: block;
}
 
.carousel .active {
  left: 0;
}
 
.carousel .next,
.carousel .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
 
.carousel .next {
  left: 100%;
}
 
.carousel .prev {
  left: -100%;
}
 
.carousel .next.left,
.carousel .prev.right {
  left: 0;
}
 
.carousel .active.left {
  left: -100%;
}
 
.carousel .active.right {
  left: 100%;
}
 
.carousel-control {
  position: absolute;
  top: 40%;
  left: 15px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  font-size: 30px;
  font-weight: 100;
  line-height: 30px;
  color: #ffffff;
  text-align: center;
  background: #222222;
  border: 3px solid #ffffff;
  -webkit-border-radius: 23px;
     -moz-border-radius: 23px;
          border-radius: 23px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}
 
.carousel-control.right {
  right: -25px;
  left: auto;
}
 
.carousel-control.left {
  left: -25px;
  right: auto;
}
 
.carousel-control:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  filter: alpha(opacity=90);
}
 
.carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 15px 5px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
}
 
.carousel-caption h4,
.carousel-caption p {
  color: #ffffff;
}

 

Link to comment
Share on other sites

Two things.

 

1. If I see a huge block of code without any proper formatting (

/* code here */

helps a lot), I usually don't even start to bother reading all of it.

 

2. You're already using jQuery which provides the most cross-browser comfort a JS framework has to offer. If it doesn't work with jQuery, it probably doesn't work at all in IE.

Link to comment
Share on other sites

frameworks like jQuery are built specifically to make things as cross-browser compatible as possible. If you are using jQuery and it doesn't work (make sure you are using the latest version), then it's a limitation with IE, not jQuery (javascript). But, you're using a jQuery plugin, which isn't the core jQuery library. It's possible the plugin has a bug. Also, most popular jQuery plugins will list any limitations/caveats with various browsers; you should check the carousel documentation to see if it lists anything.

 

Of course, it's always possible that you just didn't implement it right, but I echo Irate's sentiments: not gonna spend forever sifting through a ton of code. You'll have to make some more effort to narrow it down a bit more if you want free help.

Link to comment
Share on other sites

thx for the reply, wasn't waiting for code just advise..

 

i updated to the latest jquery.

 

but also noticed the bootstrap.carousel.js  on the site says

 

Transition animations not supported in Internet Explorer 8 & 9

Bootstrap exclusively uses CSS3 for its animations, but Internet Explorer 8 & 9 don't support the necessary CSS properties. Thus, there are no slide transition animations when using these browsers. We have intentionally decided not to include jQuery-based fallbacks for the transitions.

 

 

so i guess i will change my code...lol what would be more compatible?Ajax?

Link to comment
Share on other sites

Ajax is just a scripted HTTP-Request "module" JavaScript contains. It does not provide anything else on its own, just, as I said, a way to asynchronously fire HTTP-Requests.

 

In some cases, you just have to bite into the sour apple and not support IE beneath 10. It's not uncommon, actually.

You could use Shockwave Flash to embed animations on IE, if you want to, though.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.