Add a Slider to an HTML widget

Dear Portal community,

I am facing some issues with adding a slider in my home page.

In the previous portal, I could use a jquery library and put the code of the slider directly in my HTML code. I had no issues with this one, however, now it seems that it is causing some issues with the portal.

After adding my custom code to the HTML widget, I am not able to click anywhere. I can't edit widgets anymore (the cog never appears), I cannot change the view I am in (if I am in Apps and Pages, I will stay here, etc.).

A clue that pointed me the issue is when I try to click on the cog for a Page settings, the empty sections without widgets of my portal page are now displaying a "JQuery is undefined".

If I remove the code of the slider from my HTML, everything is OK.

Does somebody has any clue on this issue?

Here is the sample code I used for the slider. It is a standard code for this type of control.

Thank you for oyur attention.

Best regards.

Jacques-Antoine Ollier

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script>(function(a){if(typeof define==="function"&&define.amd){define(["jquery"],a)}else{a(jQuery)}}(function(b){var a;a=(function(){function c(e,d){this.elem=e;this.$elem=b(e);this.options=d;this.metadata=this.$elem.data("plugin-options")}return c})();a.prototype={defaults:{width:800,height:530,autoSize:true,touchNav:true,mouseNav:true,prevnextNav:true,prevnextAutoHide:true,pagerNav:true,startSlide:1,autoPlay:true,delay:0,interval:3000,repeat:true,playReverse:false,hoverPause:true,captionAutoHide:false,animationCssTransitions:true,animationDuration:500,animationTimingFunction:"linear",prevButtonClass:"slide-prev",nextButtonClass:"slide-next",activeSlideClass:"es-active",slideCaptionClass:"es-caption",pagerClass:"es-pager"},init:function(){var c,j,e,f,d,h,l,g,i,k;c=this;c.config=b.extend({},c.defaults,c.options,c.metadata);c.actionClick={action:false,x:0,y:0};c.currClick={x:0,y:0};c.data=b.data(c);b.data(c,"currentSlide",c.config.playReverse&&c.config.startSlide==1?c.$elem.children().length-1:c.config.startSlide-1);b.data(c,"nextSlide",c.data.currentSlide);b.data(c,"totalslides",c.$elem.children().length);b.data(c,"browserEnginePrefix",c._getBrowserEnginePrefix());b.data(c,"isPlaying",false);b.data(c,"isAnimating",false);b.data(c,"playPaused",false);b.data(c,"justTouched",false);b.data(c,"isMoving",false);b.data(c,"width",c.config.width);c.$elem.addClass("slider");c.$elem.css({position:"relative"});c.$elem.wrapInner("<div class='slide-wrapper'>",c.$elem).children();c.$elem.wrapInner("<div class='slide-container'>",b(".slide-wrapper",c.$elem)).children();c.$elem.wrapInner("<div class='slide-dragcontainer'>",b(".slide-container",c.$elem)).children();b(".slide-container",c.$elem).css({position:"relative"});k=b(".slide-dragcontainer",c.$elem);g=b(".slide-wrapper",c.$elem);i=g.children();if(c.config.prevnextNav){g.after("<div class='"+c.config.nextButtonClass+"'>");g.after("<div class='"+c.config.prevButtonClass+"'>");f=b("."+c.config.nextButtonClass,c.$elem);e=b("."+c.config.prevButtonClass,c.$elem);d=f.add(e);if(c.config.prevnextAutoHide){d.hide();c.$elem.hover(function(){d.fadeIn("fast")},function(){d.fadeOut("fast")})}e.on("click",function(m){c.previous()});f.on("click",function(m){c.next()});e.on("touchstart",function(m){m.stopPropagation()});f.on("touchstart",function(m){m.stopPropagation()})}if(c.config.pagerNav){c.$elem.append("<ul class='"+c.config.pagerClass+"'>");i.each(function(){b("<li />").appendTo(b("."+c.config.pagerClass,c.$elem)).attr("rel",b(this).index()).on("click",function(){b.data(c,"nextSlide",parseInt(b(this).attr("rel")));c._prepareslides(true);c._slide(true);c._manualInterference()})})}i.each(function(){h=b(this);l=h.data("plugin-slide-caption");if(l===undefined){return}if(this.tagName=="IMG"){h.wrap("<div>");h.after("<div class='"+c.config.slideCaptionClass+"'>");h.next().append(l)}else{h.append("<div class='"+c.config.slideCaptionClass+"'>");h.children().last().append(l)}if(c.config.captionAutoHide){b("."+c.config.slideCaptionClass,c.$elem).hide();c.$elem.hover(function(){b("."+c.config.slideCaptionClass,c.$elem).fadeIn("fast")},function(){b("."+c.config.slideCaptionClass,c.$elem).fadeOut("fast")})}});g.children().addClass("slide").css({position:"absolute",top:0,left:0,width:c.data.width,height:c.config.height,zIndex:0,display:"none",webkitBackfaceVisibility:"hidden"});j=i.height();g.css({position:"relative",left:0,height:j});b(".slide-container",c.$elem).css({width:c.data.width,overflow:"hidden",height:j});if(c.config.touchNav){k.on("touchstart",function(n){var m=n.originalEvent.touches[0];n.preventDefault();c._onMoveStart(m.pageX,m.pageY);c.actionClick.x=c.currClick.x=m.pageX;c.actionClick.y=c.currClick.y=m.pageY;c.actionClick.action=true;return n.stopPropagation()});k.on("touchmove",function(n){var m=n.originalEvent.touches[0];n.preventDefault();c.actionClick.action=false;c._onMove(m.pageX,m.pageY);c.currClick.x=m.pageX;c.currClick.y=m.pageY;return n.stopPropagation()});k.on("touchend",function(n){if((c.actionClick.action==true)&&(c.actionClick.x==c.currClick.x)&&(c.actionClick.y==c.currClick.y)){var m=k.find("."+c.config.activeSlideClass+" a, a."+c.config.activeSlideClass).attr("href");if((m!=undefined)&&(m!="")){window.location=m}}n.preventDefault();c._onMoveEnd();return n.stopPropagation()})}if(c.config.mouseNav){k.css("cursor","pointer");k.on("dragstart",function(m){return false});k.on("mousedown",function(m){c._onMoveStart(m.clientX,m.clientY);c.actionClick.x=m.clientX;c.actionClick.y=m.clientY;c.actionClick.action=false;b(window).attr("unselectable","on").on("selectstart",false).css("user-select","none").css("UserSelect","none").css("MozUserSelect","none");return m.stopPropagation()});b(window).on("mousemove",function(m){c._onMove(m.clientX,m.clientY);return m.stopPropagation()});b(window).on("mouseup",function(m){c._onMoveEnd();if((c.actionClick.x==m.clientX)&&(c.actionClick.y==m.clientY)){c.actionClick.action=true}b(window).removeAttr("unselectable").unbind("selectstart").css("user-select",null).css("UserSelect",null).css("MozUserSelect",null);return m.stopPropagation()});k.on("mouseup",function(m){if((c.actionClick.x==m.clientX)&&(c.actionClick.y==m.clientY)){c.actionClick.action=true}});k.on("click",function(m){if(c.actionClick.action!=true){m.stopPropagation();m.preventDefault()}})}if(c.config.autoSize){setTimeout(function(){c._resize()},50);b(window).resize(function(){return setTimeout(function(){c._resize()},50)})}c._prepareslides();c.gotoSlide(c.data.currentSlide);if(c.config.autoPlay){setTimeout(function(){c.start()},c.config.delay)}return this},previous:function(){var c,d;c=this;b.data(c,"slideDirection","previous");d=(c.data.nextSlide-1)%c.data.totalslides;if(!c.config.repeat&&(c.data.nextSlide-1)<0){if(c.config.playReverse){b.data(c,"playPaused",true);c.stop()}return}else{if(c.data.playPaused&&(c.data.nextSlide-1)>0){b.data(c,"playPaused",false);c.start()}}b.data(c,"nextSlide",d);return this._slide()},next:function(){var c,d;c=this;b.data(c,"slideDirection","next");d=(c.data.nextSlide+1)%c.data.totalslides;if(!c.config.repeat&&(c.data.nextSlide+1)>(c.data.totalslides-1)){if(!c.config.playReverse){b.data(c,"playPaused",true);c.stop()}return}else{if(c.data.playPaused&&(c.data.nextSlide+1)<(c.data.totalslides-1)){b.data(c,"playPaused",false);c.start()}}b.data(c,"nextSlide",d);return this._slide()},start:function(){var d,c,e;d=this;c=b(".slide-container",d.$elem);if(d.data.isPlaying&&d.data.playTimer){clearInterval(d.data.playTimer)}e=setInterval((function(){if(d.config.playReverse){d.previous()}else{d.next()}}),d.config.interval);b.data(d,"playTimer",e);if(d.config.hoverPause){c.unbind();c.hover(function(){b.data(d,"playPaused",true);return d.stop()},function(){b.data(d,"playPaused",false);return d.start()})}b.data(d,"isPlaying",true)},stop:function(){var d,c;d=this;c=b(".slide-container",d.$elem);clearInterval(d.data.playTimer);b.data(d,"playTimer",null);if(d.config.hoverPause&&!d.data.playPaused){c.unbind()}b.data(d,"isPlaying",false)},gotoSlide:function(h){var e,d,i,g,f,c;e=this;b.data(e,"nextSlide",(h)%e.data.totalslides);d=(h)%e.data.totalslides;b.data(e,"currentSlide",d);i=b(".slide-wrapper",e.$elem);g=i.children();f=i.children().eq(d);c=f.position().left;e._setActive(g,f);if(e.config.animationCssTransitions&&e.data.browserEnginePrefix){e._transition((-c),0)}else{i.css("left",-c)}e._alignSlides(c)},_manualInterference:function(){var c=this;if(c.data.isPlaying){c.stop();c.start()}},_prepareslides:function(c){var g,j,h,e,f,d;g=this;j=b(".slide-wrapper",g.$elem);h=j.children();e=g.data.width;f=Math.floor(g.data.totalslides/2);d=0;h.each(function(){b(this).css({display:"block",left:e*d,zIndex:10});d++;if(!c&&g.config.repeat&&d>f){d=g.data.totalslides%2?-f:-(f-1)}})},_onMoveStart:function(c,e){var d=this;if(!d.data.isMoving){b.data(d,"touchTime",Number(new Date()))}b.data(d,"touchedX",c);b.data(d,"touchedY",e);b.data(d,"isMoving",true);if(d.data.isPlaying){b.data(d,"playPaused",true);d.stop()}},_onMove:function(j,i){var c,k,g,f,h,d,e;c=this;if(!c.data.isMoving){return}k=b(".slide-wrapper",c.$elem);b.data(c,"scrolling",Math.abs(j-c.data.touchedX)<Math.abs(i-c.data.touchedY));if(!c.data.scrolling&&!c.data.isAnimating){g=k.children().eq(c.data.nextSlide);f=g.position().left;h=c.data.browserEnginePrefix.css;d=j-c.data.touchedX;e=c.data.width*0.1;if(!c.config.repeat){if(c.data.currentSlide<=0&&-d<-e){d=e}else{if(c.data.currentSlide>=(c.data.totalslides-1)&&-d>e){d=-e}}}c._transition(-f+d,0)}},_onMoveEnd:function(){var g,i,h,d,f,c,e;g=this;if(!g.data.isMoving){return}i=b(".slide-wrapper",g.$elem);b.data(g,"justTouched",true);h=i.children().eq(g.data.nextSlide);d=h.position().left;f=g.data.width*0.5;c=g.data.width*0.1;e=(Number(new Date())-g.data.touchTime<250);if(!g.config.repeat&&(i.position().left<-(d)&&g.data.currentSlide>=(g.data.totalslides-1)||i.position().left>(-d)&&g.data.currentSlide<=0)){g._transition((-d),0.15)}else{if(i.position().left>(-d+f)||(i.position().left>(-d+c)&&e)){this.previous()}else{if(i.position().left<-(d+f)||(i.position().left<-(d+c)&&e)){this.next()}else{g._transition((-d),0.15)}}}g._alignSlides(d);b.data(g,"isMoving",false);b.data(g,"justTouched",false);if(g.data.playPaused){g.start()}},_alignSlides:function(m){var d,n,l,j,o,e,c,f,h,g,k;d=this;if(!d.config.repeat){return}n=b(".slide-wrapper",d.$elem);l=n.children();if(m===undefined){j=n.children().eq(d.data.nextSlide);m=j.position().left}m=Math.round(m,0);o=Math.ceil(d.data.totalslides/2);e=d.data.width;c=0;l.each(function(){var i=Math.round(b(this).position().left);if(i>Math.round(m-e)){c++}});f=o-c;if(f<0){f=d.data.totalslides%2==0?f+1:f}for(h=0;h<Math.abs(f);h++){g=[].reduce.call(l,function(i,p){return b(i).offset().left<b(p).offset().left?i:p});k=[].reduce.call(l,function(i,p){return b(i).offset().left>b(p).offset().left?i:p});if(f>0){b(g).css("left",Math.round(b(k).position().left+e))}else{b(k).css("left",Math.round(b(g).position().left-e))}}},_slide:function(c){var f,e,i,h,g,d;f=this;e=f.data.nextSlide;i=b(".slide-wrapper",f.$elem);h=i.children();g=i.children().eq(e);d=Math.round(g.position().left);f._setActive(h,g);if(!c){f._alignSlides(d)}b.data(f,"isAnimating",true);if(f.config.animationCssTransitions&&f.data.browserEnginePrefix){f._transition((-d),(f.data.justTouched?0.5:1));i.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){b.data(f,"currentSlide",e);i.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd");if(c){f._alignSlides(d)}})}else{i.stop().animate({left:-d},f.config.animationDuration,function(){b.data(f,"currentSlide",e);b.data(f,"isAnimating",false);b.data(f,"justTouched",false)})}},_transition:function(d,f){var h,j,g,c,i,e;h=this;j=b(".slide-wrapper",h.$elem);if(f===undefined||f<0){f=1}g=h.data.browserEnginePrefix.css;c=g+"Transform";i=g+"TransitionDuration";e=g+"TransitionTimingFunction";j[0].style[i]=(h.config.animationDuration*f)+"ms";j[0].style[e]=h.config.animationTimingFunction;j[0].style[c]="translateX("+d+"px)";j.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd",function(){b.data(h,"isAnimating",false);b.data(h,"justTouched",false);j.unbind("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd")})},_setActive:function(g,f){var e=this,d,c;d=e.config.activeSlideClass;g.removeClass(d);f.addClass(d);if(e.config.pagerNav){c=b("."+e.config.pagerClass,e.$elem);c.children().removeClass("act");c.find("[rel="+f.index()+"]").addClass("act")}},_resize:function(){var g,c,e,d,f;g=this;if(g.data.isPlaying){b.data(g,"playPaused",true);g.stop()}c=g.$elem.width();e=g.config.height/g.config.width;d=c*e;b.data(g,"width",c);b(".slide",g.$elem).css({width:c,height:d});f=b(".slide-wrapper",g.$elem).children().height();b(".slide-wrapper",g.$elem).css({height:f});b(".slide-container",g.$elem).css({width:c,height:f});if(g.data.playPaused){b.data(g,"playPaused",false);g.start()}g._prepareslides();g.gotoSlide(g.data.currentSlide)},_getBrowserEnginePrefix:function(){var d,e,c;d="Transition";e=["Moz","Webkit","Khtml","O","ms"];c=0;while(c<e.length){if(typeof document.body.style[e[c]+d]==="string"){return{css:e[c]}}c++}return false}};a.defaults=a.prototype.defaults;b.fn.excoloSlider=function(c){return this.each(function(){new a(this,c).init()})}}));</script>