Unfortunately the controls that Owl Carousel render will not help me with my current project so I am trying to change a slide with a jQuery click event however I am having no luck.
I have been following the documentation on the Owl Carousel website.
This is the jQuery that I have managed to formulate:
var owl = $('.owl-carousel');
owl.owlCarousel();
$('.car-hub-header-learn-more').click(function() {
owl.trigger('next.owl.carousel');
})
Here is my a tag html:
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
All carousel html as requested:
<div id="owl-new-car-main" style="position: relative; margin-bottom: -3px; opacity: 1; display: block;" class="owl-carousel owl-theme">
<div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 7612px; left: 0px; display: block; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 1903px;"><div class="item">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Scirocco</h1>
</div>
</div>
<div class="row middle-xs">
<div class="car-hub-header-image-box col-lg-12">
<div class="row middle-lg center-lg">
<div class="col-lg-3">
Learn More <i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
<div class="col-lg-6">
<img src="/img/new-car-template/scirocco-transparent.png" alt="Scirocco GT">
</div>
<div class="col-lg-3">
<i class="fa fa-phone" aria-hidden="true"></i> Request Callback
</div>
</div>
</div>
<div class="car-hub-header-info-container col-lg-12">
<div class="row start-lg">
<div class="col-lg-12 car-hub-header-info-box">
<h2>FEATURED DEAL <i class="fa fa-star-o" aria-hidden="true"></i></h2>
<span class="medium-underline"></span>
<h3 class="car-hub-header-model-variant">GT Black Edition - 1.4 TSI Manual</h3>
<div class="row center-lg car-hub-offer-container">
<div class="col-lg-3 car-hub-header-offer-1">
<h2>£198 <span>Monthly</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-2">
<h2>£1500 <span>Deposit Contribution</span></h2>
</div>
<div class="col-lg-3 car-hub-header-offer-3">
<h2>£198 <span>Customer Deposit</span></h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div><div class="owl-item" style="width: 1903px;"><div class="item item-2">
<div class="container">
</div>
</div></div></div></div>
</div>
I was hoping that when I click my a tag that the carousel would go to the next slide however this is not the case, I get no errors in my console either.
Any idea where I might be going wrong?
Thanks, Nick
Try this one:
var $dots = $('.owl-dot');
function goToNextCarouselPage() {
var $next = $dots.filter('.active').next();
if (!$next.length)
$next = $dots.first();
$next.trigger('click');
}
$('.car-hub-header-learn-more').click(function () {
goToNextCarouselPage();
});
Related
I've made some research already online but I can't find any solution to my problem:
I've a web app which is using JQuery and bootstrap, on desktop is working as intended but when I try it on mobile (on Android I've tried Chrome an Brave) but it doesn't work on a single tap on the button but to trigger it need to long press until animation is finished
Here the front-end part and JQuery code:
$(document).on("click ", "#triggerCena", function(e) {
e.preventDefault();
$('#dettaglioCena').slideToggle("fast", function() {
delay = 0;
$('#dettaglioCena .cibo').each(function() {
if (!$(this).hasClass('animate__animated animate__bounceInLeft')) {
delay += 0.02;
$(this).css("animation-delay", delay + "s");
$(this).addClass('animate__animated animate__bounceInLeft');
$(this).css("visibility", "visible");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row animate__animated animate__zoomInDown" style="margin:0px;margin-top:15px;margin-bottom:15px;animation-delay:1s;">
<div class="col-2">
<img class="mx-auto d-block rounded" width="62" height="50" src="images/pictures/img_community/cena.jpg">
</div>
<div class="col-7">
<h1 style="color:white;margin-left:15px;font-size:20px;">Cena</h1>
</div>
<div class="col-1">
</div>
<div class="col-1" style="margin-right:10px;">
<i class="fa fa-plus addMeal" style="color:white;font-size:20px;" data-toggle="modal" value="3" data-target="#modalAlimenti"></i>
</div>
</div>
<div class="row bg-light-grey animate__animated animate__zoomInDown" style="margin:0px;margin-bottom:0px;animation-delay:1s;">
<div class="col-1">
</div>
<div class="col-6">
<i style="color:black;">4 Voci</i>
</div>
<div class="col-3">
</div>
<div class="col-1">
<a class="fa fa-angle-down" style="color:black;" id="triggerCena" role="button"></a>
</div>
</div>
<div class="collapse" id="dettaglioCena" style="display: none;">
<div class="row bg-light-grey" id="175" style="margin:0px;"></div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="176" style="margin: 0px; visibility: visible; animation-delay: 0.02s;">
<div class="col-4">
Grano saraceno </div>
<div class="col-3">
50 g </div>
<div class="col-3">
171 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="176"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="177" style="margin: 0px; visibility: visible; animation-delay: 0.04s;">
<div class="col-4">
Coniglio </div>
<div class="col-3">
150 g </div>
<div class="col-3">
295 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="177"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="178" style="margin: 0px; visibility: visible; animation-delay: 0.06s;">
<div class="col-4">
Broccoli </div>
<div class="col-3">
300 g </div>
<div class="col-3">
102 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="178"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="179" style="margin: 0px; visibility: visible; animation-delay: 0.08s;">
<div class="col-4">
Olio di oliva </div>
<div class="col-3">
30 ml </div>
<div class="col-3">
265 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="179"></i></div>
</div>
</div>
I'm also using Animate.css to make animations.
I've already tried to add touchstart and touchend but nothing seems to change the behaviour.
Any help is very appreciated
Every tap comes with a delay, because it might be that someone is not really clicking but it's the start of a swipe, for example. This is why there's a delay and I think that's what you're talking about?
See here: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away
So I have this jQuery which allows me to click on a element and it will extended something that is hidden. But you can click on multiple elements and they will all be extended. I only want one to be extended at any one point... Could someone help me out?
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(function() {
$id = $(this).attr('href');
$($id).stop().slideDown('fast');
}, function() {
$($id).stop().slideUp('fast');
});
}
HTML
<div class="brands-supply hidden-sm hidden-xs">
<h2> Our Consultancy Services </h2>
<div class="container">
<div class="row">
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
</a>
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
<img src="">
</a>
</div>
<div class="row">
<div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Reviews</p>
<p> </p>
<p>This si a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Testing</p>
<p> </p>
<p>This is a ap tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Projects</p>
<p> </p>
<p>This is a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Services</p>
<p> </p>
<p>This is a Ptag</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help appreciated!
First click doesn't take two functions as parameters. You should use slideToggle.
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(
function() {
var id = $(this).attr('href');
$('.brands-supply .single').each(
function () {
var href = $(this).attr('href');
if (href == id) return;
$(href).slideUp('fast');
}
);
$(id).stop().slideToggle('fast');
}
);
}
So on click select all the elements you attached the click to and iterate over them sliding them up if they are not the current clicked href. Then just use slideToggle on the clicked one and it will slide it up or down based on how its currently displayed.
Fiddle: http://jsfiddle.net/AtheistP3ace/xkv31rop/
JS:
same as above
CSS:
div > div {
height: 100px;
width: 100%;
display: none;
}
#id1 {
background: red;
}
#id2 {
background: blue;
}
#id3 {
background: orange;
}
HTML:
<div class="brands-supply">
<a class="single" href="#id1">id1</a>
<a class="single" href="#id2">id2</a>
<a class="single" href="#id3">id3</a>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>
So I have this markup
<div class="col-md-12 hypoteka" id="hypoteka1">
<div class="row">
<div class="clickable">
<div class="col-md-2">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
<img src="whaever.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<h3 class="text-center banka">whaever.</h3>
</div>
<div class="row text-center">
<i class="fa fa-3x fa-chevron-right"></i>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6 text-center splatka" title="Splátka" data-toggle="tooltip">
<span class="hodnota">730</span>€ / mes.
</div>
<div class="col-md-6 fixacia text-center" title="Fixácia" data-toggle="tooltip">
<i class="fa fa-hourglass"></i>
<span class="hodnota">2</span>roky
</div>
</div>
<div class="row">
<div class="col-md-6 text-center urok" title="Úrok" data-toggle="tooltip">
<i class="fa fa-line-chart"></i>
<span class="hodnota">1,85</span>%
</div>
<div class="col-md-6 preplatenie text-center" title="Preplatenie"
data-toggle="tooltip">
<i class="fa fa-plus"></i>
<span class="hodnota">7 900</span>€
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<p class="hodnotenie-text text-center">Hodnotenie</p></div>
<div class="row">
<p class="hodnotenie-cislo text-right">8/10</p></div>
<div class="row text-center">
<i class="fa fa-2x fa-balance-scale"></i>
<input type="checkbox">
</div>
</div>
</div>
</div>
</div>
and this js
$('.clickable').hover(function (e) {
$(this).find('.fa-chevron-right').toggleClass('fa-5x call-to-action');
});
$('[data-toggle="tooltip"]').tooltip({
placement: 'bottom'
});
I captured the behavior here
As you can see in the video, when the pointer hovers over the bootstrap tooltip before the animation finishes hiding it, it triggers the hover event on the clickable div.
I tried doing e.preventDefault() on hidden.bs.tooltip but does nothing. I cannot explain it. Any help?
I think it's because the bootstrap tooltip is not created inside the .clickable container on which your hover action is defined.
When you mouse over the tooltip, you are moving outside the .clickable container, and so when you move mouse out from the tooltip, the hover event is fired again.
This can be seen better if you add a delay to the tooltip (example - 2 sec delay when showing/hiding tooltips). Try moving your mouse over and out of the tooltips before they disappear.
OK, so here's the situation:
I'm experimenting with a fixed-width (resizeable) left sidebar
The sidebar contains draggable elements
If one of the elements is dragged to the right, then the sidebar column seems to be scrolling right.
Why is that happening? Any ideas on how this could be resolved?
Fiddle: http://jsfiddle.net/t5nnmh94/
Main HTML:
<div id="main_wrap">
<div id="sidebar" class="content-fluid">
<span id="position"></span>
<div id="dragbar"></div>
<div id="components"><div class="panel panel-default">
<div class="panel-heading">Components</div>
<div class="panel-body">
<div class="col-xs-6 component-item"><div class="wrp" id="one"><i class="glyphicon glyphicon-envelope"></i><br/>E-mail</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="two"><i class="glyphicon glyphicon-italic"></i><br/>Input</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="three"><i class="glyphicon glyphicon-text-width"></i><br/>Textarea</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="four"><i class="glyphicon glyphicon-file"></i><br/>File Upload</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="five"><i class="glyphicon glyphicon-asterisk"></i><br/>Password</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="six"><i class="glyphicon glyphicon-check"></i><br/>Checkbox</div></div>
</div>
</div>
</div>
</div>
<div id="content" class="content-fluid">
<div class="row">
<div class="col-xs-8" id="maina">
<div class="panel panel-default" id="droppanel">
<div class="panel-heading">Main</div>
<div class="panel-body" id="droppanelbody" >
<ul class="nav nav-tabs" role="tablist">
<li class="active">UI Editor</li>
<li>Code</li>
</ul>
<div class="tab-content" style="margin-top:40px;">
<div class="tab-pane fade in active" id="ui-editor">
<form role="form" id="theform">
</form>
</div>
<div class="tab-pane fade" id="code">
<textarea class="form-control" rows="5" id="thecode">
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4" id="options">
<div class="panel panel-default">
<div class="panel-heading">Options</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
Okay, I have it - just do this:
#components{
overflow: visible;
}
#draggableHelper{
z-index: 100;
}
.panel{
z-index: 99;
}
#sidebar{
overflow: visible;
}
should work.
When you move an item in your panel's body, it changes the panel size to match all the content within.
This is the default behaviour.
You can try with :
overflow: hidden;
It will hide any visible overflow and keep the block size untouched.
I just started using Bootstrap 3. I made a thumbnail grid with images related to different projects. I would like that when clicking on an image a modal window open. In the modal I need to report image coming from thumbnail and some text explaining the project content.
Any idea, suggestion of how to do it?
Adding modals in Bootstrap is very easy, and there are examples in the Bootstrap documentation: http://getbootstrap.com/javascript/#modals.
I suggest trying out some of the examples and seeing how far you can get, and then if you get stuck you can ask for specifics.
I' coding as follow
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Renovations"><img src="//placehold.it/600x400/444/F8F8F8" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Renovations</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Academic Institutions"><img src="//placehold.it/600x400/454545/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Academic Institutions</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Interiors"><img src="//placehold.it/600x400/555/F2F2F2" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Interiors</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="New Construction"><img src="//placehold.it/600x400/555/FFF" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">New Construction</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Site Planning"><img src="//placehold.it/600x400/555/EEE" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Site Planning</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
<div class="col-sm-4 col-xs-6">
<div class="panel panel-default">
<div class="panel-thumbnail"><a class="" href="#" title="Churches"><img src="//placehold.it/600x400/666/F4F4F4" class="img-responsive"></a>
</div>
<div class="panel-body">
<p class="">Churches</p>
<p class=""></p>
</div>
</div>
<!--/panel-->
</div>
<!--/col-->
</div>
<!--/row-->
</div>
<!--/container-->
</pre>
and js script as follow
/* copy loaded thumbnails into carousel */
$('.panel .img-responsive').on('load', function() {
}).each(function(i) {
if(this.complete) {
var item = $('<div class="item"></div>');
var itemDiv = $(this).parent('a');
var title = $(this).parent('a').attr("title");
item.attr("title",title);
$(itemDiv.html()).appendTo(item);
item.appendTo('#modalCarousel .carousel-inner');
if (i==0){ // set first item active
item.addClass('active');
}
}
});
/* activate the carousel */
$('#modalCarousel').carousel({interval:false});
/* change modal title when slide changes */
$('#modalCarousel').on('slid.bs.carousel', function () {
$('.modal-title').html($(this).find('.active').attr("title"));
})
/* when clicking a thumbnail */
$('.panel-thumbnail>a').click(function(e){
e.preventDefault();
var idx = $(this).parents('.panel').parent().index();
var id = parseInt(idx);
$('#myModal').modal('show'); // show the modal
$('#modalCarousel').carousel(id); // slide carousel to selected
return false;
});
So I send image from thumbnail to a modal window with a carousel. What I would like is to add some text to each of the image displayed in the modal.
Thanks for some help.