jquery and bootstrap.min.js in Open Data Site

deleted-user-bUSldQvlMRQ8 — Fri, 16 Oct 2015 08:56:29 GMT

I experience the following problem, with jQuery and bootstrap.min.js libraries in Footer of Open Data Site (to make the Bootstrap Carousel work):

1. On our (still experimental) Open Data Site Open data for Africa's Great Lakes Region I'm not able anymore to download the dataset (nothing happens by clicking the download button), but on the worldwide Portal the downlaod still works in all formats (Using Chrome and IE).

Using Firefox, even on the worldwide, the submenu on the download and API button is empty.

2. When I remove these libraries from the footer, Download and API buttons work again on Chrome and IE, but on Firefox the issue persists.

Probably the Firefox issue is not related to the jQuery/Boostrap.js issue.

Is there any chance that this conflict can be resolved, or do I have to remove my carousel?

Thx,

Annina

Re: jquery and bootstrap.min.js in Open Data Site

deleted-user-bUSldQvlMRQ8 — Mon, 18 Jan 2016 09:13:31 GMT

At least I found the solution for the Firefox issue, definitely nothing to do with the jquery/bootstrap.js:

It was the firebug-extension. When disabling it, the search and download on the open data site works also with firefox.

For the moment, I removed the carousel from our Open Data Site, as there seems to be nobody you can confirm or answer that issue.

Re: jquery and bootstrap.min.js in Open Data Site

Katheryn_ZulayPeraza — Thu, 28 Apr 2016 17:12:13 GMT

Hello,

I have the same issue. When i include in the Header HTML the next line code for enable the carousel :

The download buttons on layers is disabled ( this occur in all web explorers) .

So,Please,do you have some solution for solve it ? Daniel Fenton

Thanks in advance

Re: jquery and bootstrap.min.js in Open Data Site

Katheryn_ZulayPeraza — Fri, 29 Apr 2016 14:23:56 GMT

I solve the issue :

1) Remove in the Header HTML the next line code for enable the carousel :

2) Include in the Header HTML the next script for enable the carousel without conflicts with the bootstrap included in Open Data Site:

/* ========================================================================

* Bootstrap: carousel.js v3.3.6

* http://getbootstrap.com/javascript/#carousel

* ========================================================================

* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)

* ======================================================================== */

+function ($) {

'use strict';

// CAROUSEL CLASS DEFINITION

// =========================

var Carousel = function (element, options) {

this.$element = $(element)

this.$indicators = this.$element.find('.carousel-indicators')

this.options = options

this.paused = null

this.sliding = null

this.interval = null

this.$active = null

this.$items = null

this.options.keyboard && this.$element.on('keydown.bs.carousel', $.proxy(this.keydown, this))

this.options.pause == 'hover' && !('ontouchstart' in document.documentElement) && this.$element

.on('mouseenter.bs.carousel', $.proxy(this.pause, this))

.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))

}

Carousel.VERSION = '3.3.6'

Carousel.TRANSITION_DURATION = 600

Carousel.DEFAULTS = {

interval: 5000,

pause: 'hover',

wrap: true,

keyboard: true

}

Carousel.prototype.keydown = function (e) {

if (/input|textarea/i.test(e.target.tagName)) return

switch (e.which) {

case 37: this.prev(); break

case 39: this.next(); break

default: return

}

e.preventDefault()

}

Carousel.prototype.cycle = function (e) {

e || (this.paused = false)

this.interval && clearInterval(this.interval)

this.options.interval

&& !this.paused

&& (this.interval = setInterval($.proxy(this.next, this), this.options.interval))

return this

}

Carousel.prototype.getItemIndex = function (item) {

this.$items = item.parent().children('.item')

return this.$items.index(item || this.$active)

}

Carousel.prototype.getItemForDirection = function (direction, active) {

var activeIndex = this.getItemIndex(active)

var willWrap = (direction == 'prev' && activeIndex === 0)

|| (direction == 'next' && activeIndex == (this.$items.length - 1))

if (willWrap && !this.options.wrap) return active

var delta = direction == 'prev' ? -1 : 1

var itemIndex = (activeIndex + delta) % this.$items.length

return this.$items.eq(itemIndex)

}

Carousel.prototype.to = function (pos) {

var that = this

var activeIndex = this.getItemIndex(this.$active = this.$element.find('.item.active'))

if (pos > (this.$items.length - 1) || pos < 0) return

if (this.sliding) return this.$element.one('slid.bs.carousel', function () { that.to(pos) }) // yes, "slid"

if (activeIndex == pos) return this.pause().cycle()

return this.slide(pos > activeIndex ? 'next' : 'prev', this.$items.eq(pos))

}

Carousel.prototype.pause = function (e) {

e || (this.paused = true)

if (this.$element.find('.next, .prev').length && $.support.transition) {

this.$element.trigger($.support.transition.end)

this.cycle(true)

}

this.interval = clearInterval(this.interval)

return this

}

Carousel.prototype.next = function () {

if (this.sliding) return

return this.slide('next')

}

Carousel.prototype.prev = function () {

if (this.sliding) return

return this.slide('prev')

}

Carousel.prototype.slide = function (type, next) {

var $active = this.$element.find('.item.active')

var $next = next || this.getItemForDirection(type, $active)

var isCycling = this.interval

var direction = type == 'next' ? 'left' : 'right'

var that = this

if ($next.hasClass('active')) return (this.sliding = false)

var relatedTarget = $next[0]

var slideEvent = $.Event('slide.bs.carousel', {

relatedTarget: relatedTarget,

direction: direction

})

this.$element.trigger(slideEvent)

if (slideEvent.isDefaultPrevented()) return

this.sliding = true

isCycling && this.pause()

if (this.$indicators.length) {

this.$indicators.find('.active').removeClass('active')

var $nextIndicator = $(this.$indicators.children()[this.getItemIndex($next)])

$nextIndicator && $nextIndicator.addClass('active')

}

var slidEvent = $.Event('slid.bs.carousel', { relatedTarget: relatedTarget, direction: direction }) // yes, "slid"

if ($.support.transition && this.$element.hasClass('slide')) {

$next.addClass(type)

$next[0].offsetWidth // force reflow

$active.addClass(direction)

$next.addClass(direction)

$active

.one('bsTransitionEnd', function () {

$next.removeClass([type, direction].join(' ')).addClass('active')

$active.removeClass(['active', direction].join(' '))

that.sliding = false

setTimeout(function () {

that.$element.trigger(slidEvent)

}, 0)

})

.emulateTransitionEnd(Carousel.TRANSITION_DURATION)

} else {

$active.removeClass('active')

$next.addClass('active')

this.sliding = false

this.$element.trigger(slidEvent)

}

isCycling && this.cycle()

return this

}

// CAROUSEL PLUGIN DEFINITION

// ==========================

function Plugin(option) {

return this.each(function () {

var $this = $(this)

var data = $this.data('bs.carousel')

var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)

var action = typeof option == 'string' ? option : options.slide

if (!data) $this.data('bs.carousel', (data = new Carousel(this, options)))

if (typeof option == 'number') data.to(option)

else if (action) data[action]()

else if (options.interval) data.pause().cycle()

})

}

var old = $.fn.carousel

$.fn.carousel = Plugin

$.fn.carousel.Constructor = Carousel

// CAROUSEL NO CONFLICT

// ====================

$.fn.carousel.noConflict = function () {

$.fn.carousel = old

return this

}

// CAROUSEL DATA-API

// =================

var clickHandler = function (e) {

var href

var $this = $(this)

var $target = $($this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) // strip for ie7

if (!$target.hasClass('carousel')) return

var options = $.extend({}, $target.data(), $this.data())

var slideIndex = $this.attr('data-slide-to')

if (slideIndex) options.interval = false

Plugin.call($target, options)

if (slideIndex) {

$target.data('bs.carousel').to(slideIndex)

}

e.preventDefault()

}

$(document)

.on('click.bs.carousel.data-api', '[data-slide]', clickHandler)

.on('click.bs.carousel.data-api', '[data-slide-to]', clickHandler)

$(window).on('load', function () {

$('[data-ride="carousel"]').each(function () {

var $carousel = $(this)

Plugin.call($carousel, $carousel.data())

})

}(jQuery);

</script>

Re: jquery and bootstrap.min.js in Open Data Site

Anonymous User — Mon, 11 Jun 2018 13:20:53 GMT

Hey Katheryn!

I'm having trouble integrating a simple carousel into my OD site. I've added a text-element into its place in a row, but whenever I get a sample working in jfiddle or something, the OD site just show it as a list with no dynamism (photo attached).

Could you expand on how to get a working carousel into the OD site?

topic Re: jquery and bootstrap.min.js in Open Data Site in ArcGIS Hub Questions

jquery and bootstrap.min.js in Open Data Site

Re: jquery and bootstrap.min.js in Open Data Site

Re: jquery and bootstrap.min.js in Open Data Site

Re: jquery and bootstrap.min.js in Open Data Site

Re: jquery and bootstrap.min.js in Open Data Site