IE compatible..

techker · December 7, 2013

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

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</div>

<p></p>

</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;

}

Irate · December 7, 2013

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.

techker · December 8, 2013

oh sorry..

so jquery is not fully compatible with IE?is there a way to convert this?

.josh · December 8, 2013

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.

techker · December 8, 2013

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?

Irate · December 8, 2013

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.

techker · December 8, 2013

i updated it..it seems better..but like you say i need to do some choices...thx!!

Sign In

IE compatible..

Recommended Posts

techker

Link to comment

Share on other sites

Irate

Link to comment

Share on other sites

techker

Link to comment

Share on other sites

.josh

Link to comment

Share on other sites

techker

Link to comment

Share on other sites

Irate

Link to comment

Share on other sites

techker

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information