Bootstrap carousel next/prev methods force it to autoplay faster - javascript

I am using jquerySwipe plugin to add swipe feature to my carousel.
My carousel has autoplay feature when the page loads.And when i am swiping carousel it triggers next/prev events.
<body>
<div id='root'></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script>
<script>
$(document).ready(function(){
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
$(".carousel-inner").swipe({
swipeLeft: function(event, direction, distance, duration, fingerCount, to, from){
if(width < 992){
this.parent().carousel('next');
}
},
swipeRight: function(){
if(width < 992){
this.parent().carousel('prev');
}
},
threshold: 0,
});
});
</script>
</body>
So after triggering lets say this.parent().carousel('next'), it starts to autoslide faster and without smooth behavior.
This is my html for bootstrap carousel.
<div className='about-us'>
<div id='carouselExampleIndicators' className='carousel slide' data-ride='carousel' data-interval={autoplayInterval} data-pause="false">
<div className='row flex-column-reverse flex-lg-row align-items-center about-us-row'>
<>
<div className='col-12 col-lg-6 about-us-left-column'>
<div className='card card about-us-card'>
<div className='carousel-inner'>
{sliderImageGenerator()}
</div>
</div>
</div>
<div className='col-12 col-lg-6 about-us-right-column'>
<div className='card about-us-card'>
<div className='card-body about-us-card-body'>
<div className='inner-content'>
<p className='card-title about-us-card-title'>{aboutUsPresentationText.title}</p>
<div className='about-us-div' dangerouslySetInnerHTML={{__html: textCorrection(aboutUsPresentationText.text)}}></div>
<CarouselSwitchers className='switcherWeb' clickEvent={onCheckboxChange} loopData={aboutUsPresentationImages} targetEl='#carouselExampleIndicators'/>
</div>
</div>
</div>
</div>
</>
</div>
</div>
</div>
How to solve this problem ?

Related

Uikit 3 Load more jQuery

I have a problem with Uikit 3 Grid and jQuery and load more function.
The load more script is based on:
https://www.jqueryscript.net/demo/load-more-single-button/
The button hides after load other 3 DIV´s, here is the code pen:
https://codepen.io/joomlaplates/pen/BapvQre
BTW: That happens only when masonry is activated in Uikit: <div uk-grid="masonry: true">...</div>
I would really appriciate some help..
Thanks Peter

I have to be honest, I don't use Uikit much, but inspecting your example code I noticed that Uikit forces you the height of the div contents based on the width of the screen.
so, to solve, just bypass that rule via CSS .. :)
.contents{
height: auto!important;
}
and below I leave you a small demo of the fix .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.contents{
height: auto!important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/minty/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/js/uikit.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
/* Button Load more - v1.0.0 - 2018-02-28
* Copyright (c) 2018 NTTPS; */
(function ($) {
$.fn.btnLoadmore = function (options) {
var defaults = {
showItem: 6
, whenClickBtn: 3
, textBtn: 'Loadmore ...'
, classBtn: ''
, setCookies: false
, delayToScroll: 2000,
}
, options = $.extend(defaults, options);
this.each(function () {
var $this = $(this)
, $childrenClass = $($this.children());
// Get Element Of contents to hide
$childrenClass.hide(); // nascondi tutti gli elementi
//Show Element from Options
$childrenClass.slice(0, defaults.showItem)
.show(); // mostra il primo
//Show Button when item in contents != 0
if ($childrenClass.filter(":hidden")
.length > 0) {
$this.after('<button type="button" class="btn-loadmore ' + defaults.classBtn + '">' + defaults.textBtn + '</button>')
}
$(document).on('click', '.btn-loadmore', function (e) {
e.preventDefault();
$childrenClass.filter(':hidden').slice(0, defaults.whenClickBtn).slideDown();
if ($childrenClass.filter(":hidden").length == 0) {
$(".btn-loadmore").fadeOut('slow');
}
scrollDown();
});
function scrollDown() {
$('html, body')
.animate({
scrollTop: $childrenClass.filter(":visible")
.last()
.offset()
.top
}, defaults.delayToScroll);
}
});
}
}(jQuery));
$(document)
.ready(function () {
$('.contents')
.btnLoadmore({
showItem: 3,
whenClickBtn: 3,
textBtn: 'Load more...',
classBtn: 'btn btn-danger'
});
});
</script>
</head>
<body>
<div style="max-width:800px;margin-top:20px; margin:0 auto">
<div class="contents uk-child-width-1-2#s uk-child-width-1-3#m" uk-grid="masonry: true">
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
</div>
</div>
</body>
</html>

It does not work to modify css value using jquery

I want to achieve the effect that when I click the button of 'Design Custom Cables & Order Online', the accordion content of step 1 will collapse and step 2 content will expand immediately, however, after applying the jquery, the step2 content won't expand immediately and the step 1 content won't collapse as well, can anyone master help me out, appreciate it!
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left').click(function ()
{
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>
</body>
<foot>
<script src="js.js" ></script>
</foot>
</html>

it should work in normal but its inside a parent with a click handler .. so to avoid this use
e.stopPropagation() Prevents the event
from bubbling up the DOM tree, preventing any parent handlers from
being notified of the event.
$( document ).ready(function()
{
/*--hide step2 content but show step1's--*/
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
/*--disable step2 title button initially--*/
$('#F-step2-title-btn').attr("disabled", true);
/*----------accordion effect part------------*/
$('.F-accordion-container-div').click(function ()
{
let id = $(this).find('.F-accordion-content').attr('id');
switch (id)
{
case 'F-step1-cont':
$('#F-step1-cont').css('display', 'block');
$('#F-step2-cont').css('display', 'none');
break;
case 'F-step2-cont':
$('#F-step1-cont').css('display', 'none');
$('#F-step2-cont').css('display', 'block');
break;
}
});
$('#F-step1-content-left button').click(function (e)
{
e.stopPropagation();
$('#F-step2-cont').css('display', 'block');
$('#F-step1-cont').css('display', 'none');
$('#F-step2-title-btn').attr("disabled", false);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS.css">
<!--Jquery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<!----Step 1---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption">
<button class="F-accordion-caption-btn"> Step 1: Select Cable Builder Tool</button>
</div>
<div class="F-accordion-content" id="F-step1-cont">
<div class="F-step1-content" id="F-step1-content-left">
<button class="F-step1-content-btn" >Design Custom Cables & Order Online</button>
<ul>
<li>Design using common parts</li>
<li>Receive instant pricing</li>
<li>Order through shopping cart</li>
</ul>
</div><!--
--><div class="F-step1-content">
<button class="F-step1-content-btn">Send Us Specifications</button>
<ul>
<li>Easy-to-use form</li>
<li>Personalized service from our staff</li>
<li>Request proceeded quickly</li>
</ul>
</div>
</div>
</div>
<!----Step 2---->
<div class="F-accordion-container-div">
<div class="F-accordion-caption" >
<button class="F-accordion-caption-btn" id="F-step2-title-btn"> Step 2: Select Type</button>
</div>
<div class="F-accordion-content" id="F-step2-cont">
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG"><!--
--><div class="F-step2-und-img-ribn">Fiber Optic Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Fiber Optic Jumper</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/bundle.PNG">
<div class="F-step2-und-img-ribn">Copper Cable Assemblies</div>
</div>
<div class="F-step2-tile-div">
<img class="F-step2-img" src="imgs/types/single.png">
<div class="F-step2-und-img-ribn">Copper Patch Cable</div>
</div>
</div>
</div>

owl carousel slide n by n

Using owl carousel and trying to slide items five by five, now i have 5 items, i want when i push next or prev button it move to next five item, currently it move to next item, is it possible?
$('.owl-carousel').owlCarousel({
loop:true,
items:5,
margin:10,
nav:true
})
Demo
i googled and checked plugin website but couldn't find anything.

Use the slideBy options in the owlCarousel config:
$('.owl-carousel').owlCarousel({
loop:true,
items: 5,
margin:10,
slideBy: 5, // slide 5 items
nav:true
})
.item {
background: red;
}
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<div class="owl-carousel owl-theme">
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
</div>

You should include slideBy: 5 or slideBy: 'page' option, as they describe it on their documentation.
https://jsfiddle.net/w3ka3vqw/151/

jQuery functions never getting executed on .ready()

I'm a little new to jQuery and I am having some issue wiring up my click events. If I put an alert(''); I can see that menu.js is referenced properly but when I alert from inside the .ready() function the alert is never triggered...
JSFiddle: Click Here
Could someone be kind enough to point out my issue? Thanks!
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Demo</title>
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="Content/MenuDemo.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<img id="navbar-logo" src="Content/images/ingr_logo.png" class="ui-button-icon-primary">
<img id="navbar-logo" src="Content/images/smaller.png" class="image-right">
</div>
<div id="menu1" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img id="expand1" src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img id="drag1" src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img id="close1" src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu2" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu3" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu4" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<!-- Scripts-->
<script src="Scripts/libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/libs/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="Scripts/site/menu.js" type="text/javascript"></script>
</body>
</html>
menu.js
/// <reference path="../jquery-2.1.1.js" />
/// <reference path="../jquery-ui-1.10.4.js" />
// Make Menus Draggable
function makeMenusDragHandler() {
$('.locked').click(function () {
$('.floating-menu').draggable();
});
}
// Collapse/Expand Height of Navbar
function smallBigNavbarHandler() {
$('.image-right').click(function () {
var navbar = $('.navbar');
navbar.height(navbar.height() === 51 ? 30 : 15);
});
}
$(document).ready(function ($) {
// add handlers
smallBigNavbarHandler();
makeMenusDragHandler();
// setters
});

You have two issues:
You don't have jQuery included
See below
This line:
navbar.height = navbar.height() === 51 ? 30 : 15;
should be:
navbar.height(navbar.height() === 51 ? 30 : 15);
The setter is:
.height(value)
and not
.height = value

on click generate anew tab using jquery

there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});

If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();

Categories