Develop Reference

How to avoid collapse menubar and cover carousel in website?

first of all im sorry for taking your time. I used album cover slider and superfish in my first site and they collapsed. I can use slider perfectly but i cant use my menu. Submenus and everything shows when i take my cursor to there. I want to learn how to avoid click collapse in js projects, little explanation would help me big time.
Here are the JS's.
for menu
* jQuery Superfish Menu Plugin - v1.7.9
* Copyright (c) 2016 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function ($, w) {
"use strict";
var methods = (function () {
// private properties and methods go here
var c = {
bcClass: 'sf-breadcrumb',
menuClass: 'sf-js-enabled',
anchorClass: 'sf-with-ul',
menuArrowClass: 'sf-arrows'
},
ios = (function () {
var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);
if (ios) {
// tap anywhere on iOS to unfocus a submenu
$('html').css('cursor', 'pointer').on('click', $.noop);
}
return ios;
})(),
wp7 = (function () {
var style = document.documentElement.style;
return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent));
})(),
unprefixedPointerEvents = (function () {
return (!!w.PointerEvent);
})(),
toggleMenuClasses = function ($menu, o, add) {
var classes = c.menuClass,
method;
if (o.cssArrows) {
classes += ' ' + c.menuArrowClass;
}
method = (add) ? 'addClass' : 'removeClass';
$menu[method](classes);
},
setPathToCurrent = function ($menu, o) {
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
.addClass(o.hoverClass + ' ' + c.bcClass)
.filter(function () {
return ($(this).children(o.popUpSelector).hide().show().length);
}).removeClass(o.pathClass);
},
toggleAnchorClass = function ($li, add) {
var method = (add) ? 'addClass' : 'removeClass';
$li.children('a')[method](c.anchorClass);
},
toggleTouchAction = function ($menu) {
var msTouchAction = $menu.css('ms-touch-action');
var touchAction = $menu.css('touch-action');
touchAction = touchAction || msTouchAction;
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
$menu.css({
'ms-touch-action': touchAction,
'touch-action': touchAction
});
},
getMenu = function ($el) {
return $el.closest('.' + c.menuClass);
},
getOptions = function ($el) {
return getMenu($el).data('sfOptions');
},
over = function () {
var $this = $(this),
o = getOptions($this);
clearTimeout(o.sfTimer);
$this.siblings().superfish('hide').end().superfish('show');
},
close = function (o) {
o.retainPath = ($.inArray(this[0], o.$path) > -1);
this.superfish('hide');
if (!this.parents('.' + o.hoverClass).length) {
o.onIdle.call(getMenu(this));
if (o.$path.length) {
$.proxy(over, o.$path)();
}
}
},
out = function () {
var $this = $(this),
o = getOptions($this);
if (ios) {
$.proxy(close, $this, o)();
}
else {
clearTimeout(o.sfTimer);
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
}
},
touchHandler = function (e) {
var $this = $(this),
o = getOptions($this),
$ul = $this.siblings(e.data.popUpSelector);
if (o.onHandleTouch.call($ul) === false) {
return this;
}
if ($ul.length > 0 && $ul.is(':hidden')) {
$this.one('click.superfish', false);
if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
$this.trigger('focus');
} else {
$.proxy(over, $this.parent('li'))();
}
}
},
applyHandlers = function ($menu, o) {
var targets = 'li:has(' + o.popUpSelector + ')';
if ($.fn.hoverIntent && !o.disableHI) {
$menu.hoverIntent(over, out, targets);
}
else {
$menu
.on('mouseenter.superfish', targets, over)
.on('mouseleave.superfish', targets, out);
}
var touchevent = 'MSPointerDown.superfish';
if (unprefixedPointerEvents) {
touchevent = 'pointerdown.superfish';
}
if (!ios) {
touchevent += ' touchend.superfish';
}
if (wp7) {
touchevent += ' mousedown.superfish';
}
$menu
.on('focusin.superfish', 'li', over)
.on('focusout.superfish', 'li', out)
.on(touchevent, 'a', o, touchHandler);
};
return {
// public methods
hide: function (instant) {
if (this.length) {
var $this = this,
o = getOptions($this);
if (!o) {
return this;
}
var not = (o.retainPath === true) ? o.$path : '',
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
speed = o.speedOut;
if (instant) {
$ul.show();
speed = 0;
}
o.retainPath = false;
if (o.onBeforeHide.call($ul) === false) {
return this;
}
$ul.stop(true, true).animate(o.animationOut, speed, function () {
var $this = $(this);
o.onHide.call($this);
});
}
return this;
},
show: function () {
var o = getOptions(this);
if (!o) {
return this;
}
var $this = this.addClass(o.hoverClass),
$ul = $this.children(o.popUpSelector);
if (o.onBeforeShow.call($ul) === false) {
return this;
}
$ul.stop(true, true).animate(o.animation, o.speed, function () {
o.onShow.call($ul);
});
return this;
},
destroy: function () {
return this.each(function () {
var $this = $(this),
o = $this.data('sfOptions'),
$hasPopUp;
if (!o) {
return false;
}
$hasPopUp = $this.find(o.popUpSelector).parent('li');
clearTimeout(o.sfTimer);
toggleMenuClasses($this, o);
toggleAnchorClass($hasPopUp);
toggleTouchAction($this);
// remove event handlers
$this.off('.superfish').off('.hoverIntent');
// clear animation's inline display style
$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
return style.replace(/display[^;]+;?/g, '');
});
// reset 'current' path classes
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
o.onDestroy.call($this);
$this.removeData('sfOptions');
});
},
init: function (op) {
return this.each(function () {
var $this = $(this);
if ($this.data('sfOptions')) {
return false;
}
var o = $.extend({}, $.fn.superfish.defaults, op),
$hasPopUp = $this.find(o.popUpSelector).parent('li');
o.$path = setPathToCurrent($this, o);
$this.data('sfOptions', o);
toggleMenuClasses($this, o, true);
toggleAnchorClass($hasPopUp, true);
toggleTouchAction($this);
applyHandlers($this, o);
$hasPopUp.not('.' + c.bcClass).superfish('hide', true);
o.onInit.call(this);
});
}
};
})();
$.fn.superfish = function (method, args) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
}
else {
return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish');
}
};
$.fn.superfish.defaults = {
popUpSelector: 'ul,.sf-mega', // within menu context
hoverClass: 'sfHover',
pathClass: 'overrideThisToUse',
pathLevels: 1,
delay: 800,
animation: {opacity: 'show'},
animationOut: {opacity: 'hide'},
speed: 'normal',
speedOut: 'fast',
cssArrows: true,
disableHI: false,
onInit: $.noop,
onBeforeShow: $.noop,
onShow: $.noop,
onBeforeHide: $.noop,
onHide: $.noop,
onIdle: $.noop,
onDestroy: $.noop,
onHandleTouch: $.noop
};
})(jQuery, window);
Album Cover Slider
--------------------------------*/
//start added by Chase
var a = document.getElementsByTagName("a");
var cfImg = document.getElementsByClassName("coverflow__image")
var scaleI = 0;
for (scaleI; scaleI < a.length; scaleI++) {
if (scaleI === 3) {
continue;
} else {
a[scaleI].style.cursor = "default";
a[scaleI].addEventListener("click", prevDef);
}
}
function prevDef(e) {
e.preventDefault();
}
function forScale(coverflowPos) {
for (scaleI = 0; scaleI < a.length; scaleI++) {
a[scaleI].style.cursor = "default";
a[scaleI].addEventListener("click", prevDef);
}
for (scaleI = 0; scaleI < cfImg.length; scaleI++) {
if (cfImg[scaleI].getAttribute("data-coverflow-index") == coverflowPos) {
cfImg[scaleI].parentElement.style.cursor = "pointer";
cfImg[scaleI].parentElement.removeEventListener("click", prevDef);
}
}
}
//end added by Chase
function setupCoverflow(coverflowContainer) {
var coverflowContainers;
if (typeof coverflowContainer !== "undefined") {
if (Array.isArray(coverflowContainer)) {
coverflowContainers = coverflowContainer;
} else {
coverflowContainers = [coverflowContainer];
}
} else {
coverflowContainers = Array.prototype.slice.apply(document.getElementsByClassName('coverflow'));
}
coverflowContainers.forEach(function(containerElement) {
var coverflow = {};
var prevArrows, nextArrows;
//capture coverflow elements
coverflow.container = containerElement;
coverflow.images = Array.prototype.slice.apply(containerElement.getElementsByClassName('coverflow__image'));
coverflow.position = Math.floor(coverflow.images.length / 2) + 1;
//set indicies on images
coverflow.images.forEach(function(coverflowImage, i) {
coverflowImage.dataset.coverflowIndex = i + 1;
});
//set initial position
coverflow.container.dataset.coverflowPosition = coverflow.position;
//get prev/next arrows
prevArrows = Array.prototype.slice.apply(coverflow.container.getElementsByClassName("prev-arrow"));
nextArrows = Array.prototype.slice.apply(coverflow.container.getElementsByClassName("next-arrow"));
//add event handlers
function setPrevImage() {
coverflow.position = Math.max(1, coverflow.position - 1);
coverflow.container.dataset.coverflowPosition = coverflow.position;
//call the functin forScale added
forScale(coverflow.position);
}
function setNextImage() {
coverflow.position = Math.min(coverflow.images.length, coverflow.position + 1);
coverflow.container.dataset.coverflowPosition = coverflow.position;
//call the function Chase added
forScale(coverflow.position);
}
function jumpToImage(evt) {
coverflow.position = Math.min(coverflow.images.length, Math.max(1, evt.target.dataset.coverflowIndex));
coverflow.container.dataset.coverflowPosition = coverflow.position;
//start added by Chase
setTimeout(function() {
forScale(coverflow.position);
}, 1);
//end added by Chase
}
function onKeyPress(evt) {
switch (evt.which) {
case 37: //left arrow
setPrevImage();
break;
case 39: //right arrow
setNextImage();
break;
}
}
prevArrows.forEach(function(prevArrow) {
prevArrow.addEventListener('click', setPrevImage);
});
nextArrows.forEach(function(nextArrow) {
nextArrow.addEventListener('click', setNextImage);
});
coverflow.images.forEach(function(image) {
image.addEventListener('click', jumpToImage);
});
window.addEventListener('keyup', onKeyPress);
});
}
setupCoverflow(); ```

Prestadhop 1.6 superfish menu hover to click

Hello i'm working with presta 1.6 and i want change the hover of sub menu to click and still hovering in the menu(mother menu) but i try many time with any success result the problem in superfish-modified.js .. any one can help and thnx
this the superfish-modified.js
(function ($) {
"use strict";
var methods = (function () {
// private properties and methods go here
var c = {
bcClass: 'sf-breadcrumb',
menuClass: 'sf-js-enabled',
anchorClass: 'sf-with-ul',
menuArrowClass: 'sf-arrows'
},
ios = (function () {
var ios = /iPhone|iPad|iPod/i.test(navigator.userAgent);
if (ios) {
// iOS clicks only bubble as far as body children
$(window).load(function () {
$('body').children().on('click', $.noop);
});
}
return ios;
})(),
wp7 = (function () {
var style = document.documentElement.style;
return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent));
})(),
toggleMenuClasses = function ($menu, o) {
var classes = c.menuClass;
if (o.cssArrows) {
classes += ' ' + c.menuArrowClass;
}
$menu.toggleClass(classes);
},
setPathToCurrent = function ($menu, o) {
return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
.addClass(o.hoverClass + ' ' + c.bcClass)
.filter(function () {
return ($(this).children(o.popUpSelector).hide().show().length);
}).removeClass(o.pathClass);
},
toggleAnchorClass = function ($li) {
$li.children('a').toggleClass(c.anchorClass);
},
toggleTouchAction = function ($menu) {
var touchAction = $menu.css('ms-touch-action');
touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
$menu.css('ms-touch-action', touchAction);
},
applyHandlers = function ($menu, o) {
var targets = 'li:has(' + o.popUpSelector + ')';
if ($.fn.hoverIntent && !o.disableHI) {
$menu.hoverIntent(over, out, targets);
}
else {
$menu
.on('mouseenter.superfish', targets, over)
.on('mouseleave.superfish', targets, out);
}
var touchevent = 'MSPointerDown.superfish';
if (!ios) {
touchevent += ' touchend.superfish';
}
if (wp7) {
touchevent += ' mousedown.superfish';
}
$menu
.on('focusin.superfish', 'li', over)
.on('focusout.superfish', 'li', out)
.on(touchevent, 'a', o, touchHandler);
},
touchHandler = function (e) {
var $this = $(this),
$ul = $this.siblings(e.data.popUpSelector);
if ($ul.length > 0 && $ul.is(':hidden')) {
$this.one('click.superfish', false);
if (e.type === 'MSPointerDown') {
$this.trigger('focus');
} else {
$.proxy(over, $this.parent('li'))();
}
}
},
over = function () {
var $this = $(this),
o = getOptions($this);
clearTimeout(o.sfTimer);
$this.siblings().superfish('hide').end().superfish('show');
},
out = function () {
var $this = $(this),
o = getOptions($this);
if (ios) {
$.proxy(close, $this, o)();
}
else {
clearTimeout(o.sfTimer);
o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
}
},
close = function (o) {
o.retainPath = ($.inArray(this[0], o.$path) > -1);
this.superfish('hide');
if (!this.parents('.' + o.hoverClass).length) {
o.onIdle.call(getMenu(this));
if (o.$path.length) {
$.proxy(over, o.$path)();
}
}
},
getMenu = function ($el) {
return $el.closest('.' + c.menuClass);
},
getOptions = function ($el) {
return getMenu($el).data('sf-options');
};
return {
// public methods
hide: function (instant) {
if (this.length) {
var $this = this,
o = getOptions($this);
if (!o) {
return this;
}
var not = (o.retainPath === true) ? o.$path : '',
$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
speed = o.speedOut;
if (instant) {
$ul.show();
speed = 0;
}
o.retainPath = false;
o.onBeforeHide.call($ul);
$ul.stop(true, true).animate(o.animationOut, speed, function () {
var $this = $(this);
o.onHide.call($this);
});
}
return this;
},
show: function () {
var o = getOptions(this);
if (!o) {
return this;
}
var $this = this.addClass(o.hoverClass),
$ul = $this.children(o.popUpSelector);
o.onBeforeShow.call($ul);
$ul.stop(true, true).animate(o.animation, o.speed, function () {
o.onShow.call($ul);
});
return this;
},
destroy: function () {
return this.each(function () {
var $this = $(this),
o = $this.data('sf-options'),
$hasPopUp;
if (!o) {
return false;
}
$hasPopUp = $this.find(o.popUpSelector).parent('li');
clearTimeout(o.sfTimer);
toggleMenuClasses($this, o);
toggleAnchorClass($hasPopUp);
toggleTouchAction($this);
// remove event handlers
$this.off('.superfish').off('.hoverIntent');
// clear animation's inline display style
$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
return style.replace(/display[^;]+;?/g, '');
});
// reset 'current' path classes
o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
o.onDestroy.call($this);
$this.removeData('sf-options');
});
},
init: function (op) {
return this.each(function () {
var $this = $(this);
if ($this.data('sf-options')) {
return false;
}
var o = $.extend({}, $.fn.superfish.defaults, op),
$hasPopUp = $this.find(o.popUpSelector).parent('li');
o.$path = setPathToCurrent($this, o);
$this.data('sf-options', o);
toggleMenuClasses($this, o);
toggleAnchorClass($hasPopUp);
toggleTouchAction($this);
applyHandlers($this, o);
$hasPopUp.not('.' + c.bcClass).superfish('hide', true);
o.onInit.call(this);
});
}
};
})();
$.fn.superfish = function (method, args) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
}
else if (typeof method === 'object' || ! method) {
return methods.init.apply(this, arguments);
}
else {
return $.error('Method ' + method + ' does not exist on jQuery.fn.superfish');
}
};
$.fn.superfish.defaults = {
popUpSelector: 'ul,.sf-mega', // within menu context
hoverClass: 'sfHover',
pathClass: 'overrideThisToUse',
pathLevels:1 ,
delay: 800,
animation: {opacity: 'show'},
animationOut: {opacity: 'hide'},
speed: 'normal',
speedOut: 'fast',
cssArrows: true,
disableHI: false,
onInit: $.noop,
onBeforeShow: $.noop,
onShow: $.noop,
onBeforeHide: $.noop,
onHide: $.noop,
onIdle: $.noop,
onDestroy: $.noop
};
// soon to be deprecated
$.fn.extend({
hideSuperfishUl: methods.hide,
showSuperfishUl: methods.show
});
})(jQuery);

Default values for the menu are defined in superfish-modified.js (/themes/default-bootstrap/js/modules/blocktopmenu/js/superfish-modified.js) file around line 230.
There is a default value for hoverClass as well:
hoverClass: 'sfHover',
Try replacing it with:
hoverClass: '',

JS Slider doesnt work

I have a js class for slider, but something went wrong when connecting js to html, i have class for slider, slider container, arrows and dots .
Please help me
<div class="b-slider">
<ul class="slider js-slides">
<li class="slide-one js-slide"></li>
<li class="slide-two js-slide"></li>
<li class="slide-three js-slide"></li>
</ul>
<ul class="dots">
<li class="dot js-bull"><a class="show-slider"></a></li>
<li class="dot js-bull active"><a class="show-slider"></a></li>
<li class="dot js-bull"><a class="show-slider"></a></li>
</ul>

and sliders class via JS
class Slider {
constructor (root, options = {}) {
var defaultOptions = {};
this.root = root;
this.options = _.assign(defaultOptions, options);
this.itemsCount = 0;
this.itemWidth = 0;
this.currentIndex = 0;
this._cacheNodes();
this._initialize();
this._bindEvents();
}
_cacheNodes () {
this.nodes = {
slidesContainer: this.root.find('.js-slides'),
slides: this.root.find('.js-slide'),
left: this.root.find('.js-left'),
right: this.root.find('.js-right'),
bulls: this.root.find('.js-bull')
};
}
_initialize () {
this.itemsCount = this.nodes.slides.length;
this.itemWidth = this.nodes.slides.eq(0).outerWidth(true);
this.nodes.slidesContainer.width(this.itemWidth * (this.itemsCount));
this._goTo(this.currentIndex);
}
_bindEvents () {
$$.window.on('resize', () => {
this._initialize();
});
this.nodes.left.on('click', () => {
this._goTo(this.currentIndex - this.OnScreenCount);
});
this.nodes.right.on('click', () => {
this._goTo(this.currentIndex + this.OnScreenCount);
});
if (this.nodes.bulls.length) {
this.nodes.bulls.on('click', (event) => {
this._goTo($(event.currentTarget).index());
});
}
}
_goTo (index) {
if (index <= 0) {
this.nodes.left.addClass('disabled');
} else {
this.nodes.left.removeClass('disabled');
}
if (index > this.itemsCount - 1 - this.screenCount) {
this.nodes.right.addClass('disabled');
} else {
this.nodes.right.removeClass('disabled');
}
if ((index > this.itemsCount - this.screenCount) || (index < 0)) {
return;
}
this.nodes.slidesContainer.css({
transform: `translateX(${ -index * this.itemWidth }px)`
});
if (this.nodes.bulls.length) {
this.nodes.bulls.eq(this.currentIndex).removeClass('active');
}
this.currentIndex = index;
if (this.nodes.bulls.length) {
this.nodes.bulls.eq(this.currentIndex).addClass('active');
}
}

multi-level nav builder, javascript

I used a plug-in called jquery.rd-navbar.js to take my desktop version of the navbar and make it into a nice responsive mobile menu. The only problem is that if there are submenus, the code never hits the plug-in and they are displayed as normal menu. Any ideas? The problem is that I built too much of the CSS to go back now and not use the plugin.
/*
* Author: Evgeniy Gusarov StMechanus (Diversant)
* Under the MIT License
*
* Version: 1.0.1
*
*/
;
(function ($) {
var settings = {
cntClass: 'rd-mobilemenu',
menuClass: 'rd-mobilemenu_ul',
submenuClass: 'rd-mobilemenu_submenu',
panelClass: 'rd-mobilepanel',
toggleClass: 'rd-mobilepanel_toggle',
titleClass: 'rd-mobilepanel_title'
},
lastY, dir;
var RDMobileMenu = function (element, options) {
this.options = options;
this.$source = $(element);
};
RDMobileMenu.prototype = {
init: function () {
var nav = this;
nav.createDOM();
nav.createListeners();
},
createDOM: function () {
var nav = this;
$('body')
.append($('<div/>', {
'class': settings.cntClass
}).append(nav.createNavDOM()))
.append($('<div/>', {
'class': settings.panelClass
})
.append($('<button/>', {
'class': settings.toggleClass
}).append($('<span/>')))
.append($('<h2/>', {
'class': settings.titleClass
}).append($('[data-type="rd-navbar-brand"]').length? $('[data-type="rd-navbar-brand"]').html() : document.title))
);
},
createNavDOM: function () {
var nav = this;
var menu = $('<ul>', {'class': settings.menuClass});
var li = nav.$source.children();
for (var i = 0; i < li.length; i++) {
var o = li[i].children,
item = null;
for (var j = 0; j < o.length; j++) {
if (o[j].tagName) {
if (!item) {
item = document.createElement('li');
if (li[i].className.indexOf('active') > -1) {
item.className = 'active';
}
}
switch (o[j].tagName.toLowerCase()) {
case 'a':
var link = o[j].cloneNode(true);
item.appendChild(link);
break;
case 'ul':
var submenu = o[j].cloneNode(true);
submenu.className = settings.submenuClass;
$(submenu).css({"display": "none"});
item.appendChild(submenu);
$(item).find('> a')
.each(function () {
$this = $(this);
$this.addClass('rd-with-ul')
.append($('<span/>', {class: 'rd-submenu-toggle'}))
.find('.rd-submenu-toggle')
.on('click', function (e) {
e.preventDefault();
$this = $(this).parent();
if ($this.hasClass('rd-with-ul') && !$this.hasClass('active')) {
$('.rd-with-ul').removeClass('active');
var submenu = $this.addClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideDown();
$('.' + settings.submenuClass).not(submenu).stop().slideUp();
} else {
var submenu = $this.removeClass('active').parent().find('.' + settings.submenuClass);
submenu.stop().slideUp();
}
});
});
break;
default:
break;
}
}
}
if (item) {
menu.append(item);
}
}
return menu;
},
createListeners: function () {
var nav = this;
nav.createToggleListener();
nav.createResizeListener();
},
createToggleListener: function () {
var nav = this,
type;
if (nav.isMobile()){
type = 'touchstart';
}else{
type = 'click';
}
$('body').delegate('.' + settings.toggleClass, type, function () {
var o = $('.' + settings.cntClass);
$(this).toggleClass('active');
if (o.hasClass('active')) {
$(this).removeClass('active');
o.removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
} else {
$(this).addClass('active');
o.addClass('active');
$('body').delegate('*', 'mousewheel', nav.scroll);
$('body').delegate('*', 'touchmove', nav.scroll);
$('body').delegate('*', 'touchend', nav.touchend);
$('body').delegate('*', 'touchstart', {type: type}, nav.close);
$('body').delegate('*:not(.' + settings.toggleClass + ' span)', 'click', {type: type}, nav.close);
}
});
},
createResizeListener: function () {
var nav = this;
$(window).on('resize', function () {
var o = $('.' + settings.cntClass);
if (o.css('display') == 'none') {
o.removeClass('active');
$('.' + settings.toggleClass).removeClass('active');
$('body').undelegate('*', 'mousewheel', nav.scroll);
$('body').undelegate('*', 'touchmove', nav.scroll);
$('body').undelegate('*', 'touchend', nav.touchend);
$('body').undelegate('*', 'touchstart', nav.close);
$('body').undelegate('*:not(.' + settings.toggleClass + ' span)', 'click', nav.close);
}
});
},
scroll: function (e) {
e.preventDefault();
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
) {
var delta = 0;
if (e.originalEvent.targetTouches) {
if (!lastY) lastY = y;
delta = (lastY - y);
lastY = y;
dir = delta > 0;
} else {
delta = (e.originalEvent.wheelDelta || -e.originalEvent.detail) * (-50)
}
menu.stop().scrollTop(menu.scrollTop() + delta);
}
return false;
},
touchend: function (e) {
var menu = $('.' + settings.menuClass);
menu.stop().animate({
scrollTop: menu.scrollTop() + (dir ? 100 : -100)
}, 3000, 'easeOutQuint');
lastY = undefined;
},
close: function (e) {
if (!e.originalEvent) {
return;
}
var menu = $('.' + settings.menuClass);
var x = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageX : e.pageX,
y = e.originalEvent.targetTouches ? e.originalEvent.targetTouches[0].pageY : e.pageY;
if (!(
y > menu.offset().top &&
y < (menu.offset().top + menu.outerHeight()) &&
x > menu.offset().left &&
x < (menu.offset().left + menu.outerWidth())
)
) {
$('.' + settings.toggleClass).trigger(e.data.type);
}
},
isMobile: function () {
return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}
};
$.fn.rdparallax = function (option) {
var o = this;
if (o.length) {
new RDMobileMenu(o[0]).init();
}
return o;
};
window.RDMobilemenu_autoinit = function (selector) {
var o = $(selector);
if (o.length) {
new RDMobileMenu(o[0]).init();
}
};
})(jQuery);
$(document).ready(function () {
RDMobilemenu_autoinit('[data-type="navbar"]');
});
HTML:
<li class="dropdown ">
About Us
<ul class="dropdown-menu">
<li>
Company Overview
</li>
<li>
Company Profile
</li>
<li>
Customers
</li>
<li>
Contact Us
</li>
</ul>
</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>
Service 1
</li>
<li>
Service 2
</li>
<li class="dropdown">
Service 3 w/dropdown <b class="caret-right"></b>
<ul class="dropdown-menu">
<li>
abc Approach
</li>
<li>
Performance Services
</li>
<li>
Continuous Improvement
</li>
</ul>

Multiple carousel-indicators for Bootstrap Carousel

I am trying to make two carousel-indicators with Bootstrap 3.2 which has proven difficult with my relatively beginner JavaScript skills. I've tried adding in two carousel-indicators list items, but it only effects on set of indicators. How can I have two carousel-indicators for one carousel? Thanks!
JavaScript from Bootstrap.
+function ($) {
'use strict';
// CAROUSEL CLASS DEFINITION
// =========================
var Carousel = function (element, options) {
this.$element = $(element).on('keydown.bs.carousel', $.proxy(this.keydown, this))
this.$indicators = this.$element.find('.carousel-indicators')
this.options = options
this.paused =
this.sliding =
this.interval =
this.$active =
this.$items = null
this.options.pause == 'hover' && this.$element
.on('mouseenter.bs.carousel', $.proxy(this.pause, this))
.on('mouseleave.bs.carousel', $.proxy(this.cycle, this))
}
Carousel.VERSION = '3.2.0'
Carousel.TRANSITION_DURATION = 600
Carousel.DEFAULTS = {
interval: 5000,
pause: 'hover',
wrap: true
}
Carousel.prototype.keydown = function (e) {
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 delta = direction == 'prev' ? -1 : 1
var activeIndex = this.getItemIndex(active)
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 fallback = type == 'next' ? 'first' : 'last'
var that = this
if (!$next.length) {
if (!this.options.wrap) return
$next = this.$element.find('.item')[fallback]()
}
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
// =================
$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', 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()
})
$(window).on('load', function () {
$('[data-ride="carousel"]').each(function () {
var $carousel = $(this)
Plugin.call($carousel, $carousel.data())
})
})
}(jQuery);
HTML markup
<div id="slider1" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#slider1" data-slide-to="0" class="active"></li>
<li data-target="#slider1" data-slide-to="1"></li>
<li data-target="#slider1" data-slide-to="2"></li>
<li data-target="#slider1" data-slide-to="3"></li>
<li data-target="#slider1" data-slide-to="4"></li>
<li data-target="#slider1" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="assets/images/slider1image1.png">
<div class="carousel-caption">
<p class="new-products">NEW PRODUCTS</p>
<h2>CYCLONE DRY/WET VACUUM BRAZED CORE DRILL BIT</h2>
</div>
</div>
<div class="item">
<img src="assets/images/slider1image1.png">
<div class="carousel-caption">
<p class="new-products">NEW PRODUCTS</p>
<h2>CYCLONE DRY/WET VACUUM BRAZED CORE DRILL BIT</h2>
</div>
</div>
<div class="item">
<img src="assets/images/slider1image1.png">
<div class="carousel-caption">
<p class="new-products">NEW PRODUCTS</p>
<h2>CYCLONE DRY/WET VACUUM BRAZED CORE DRILL BIT</h2>
</div>
</div>
<div class="item">
<img src="assets/images/slider1image1.png">
<div class="carousel-caption">
<p class="new-products">NEW PRODUCTS</p>
<h2>CYCLONE DRY/WET VACUUM BRAZED CORE DRILL BIT</h2>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#slider1" role="button" data-slide="prev">
<img src="assets/images/slider1-caret-left.png">
</a>
<a class="right carousel-control" href="#slider1" role="button" data-slide="next">
<img src="assets/images/slider1-caret-right.png">
</a

My solution isn't perfect in my case but maybe it'll helps you :)
I use the function :
$('#carousel-example-generic').on('slide.bs.carousel', function () {
// stuffs
}
This action is call when the next carousel item is gonna be changed.
Then you can add your own code, changing the CSS of the second unchangeable set of indicators.
My example :
$('#carousel-example-generic').on('slide.bs.carousel', function () {
var slide_number = $('.carousel-indicators_custom')
.children('.active')
.children('.losange').attr('data-slide-to');
// here slide number need to be parseInt and you'll certainly need to add +1 value
$('.carousel-indicators_custom-mobile>li').css('color', '#333');
$('.carousel-indicators_custom-mobile').find('li[data-slide-to=' + slide_number +']').css('color', '#be1522');
$('.dynamic_puce__text').html( $('.carousel-indicators_custom-mobile').find('li[data-slide-to=' + slide_number +']').html() );
});
It's a little bit ugly but it's a beginning even I'm sure their are better choices.