I am assigning a href links to 12 anchor tags out of 12 only the first 6 are getting assigned and the other 6 are not getting assigned. anchor tags are in the owl carousel. Following is the code
$("#australia").on("click",function(e) {
$("#link1").attr("href", "aust");
$("#link2").attr("href", "aust");
$("#link3").attr("href", "aust");
$("#link4").attr("href", "aust");
$("#link5").attr("href", "aust");
$("#link6").attr("href", "aust");
$("#link7").attr("href", "aust");
$("#link8").attr("href", "aust");
$("#link9").attr("href", "aust");
$("#link10").attr("href", "aust");
$("#link11").attr("href", "aust");
$("#link12").attr("href", "aust");
});
HTML code:-
<div class="pricing-area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<h2>Choose your Plan</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 flags">
<p>Select server location to host your VPS</p>
<div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div>
<div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div>
<div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div>
<div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div>
<div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div>
<div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div>
<div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div>
</div>
</div>
<div class="row completed-cases">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class=" completed-active owl-carousel">
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 1</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>1 vCore</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>2 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link1" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I think this is a DOM problem........how to solve it??
Thanks in advance.
Hard to debug the issue with limited resources of the actual problem :).
I think you're using the loop param of Owl? That will clone the items. The cloned id's of the tag will not be changed. Therefore it's better to hook on the class of the instead.
(Please don't mind the ugly style of the example ;) )
$('.owl-carousel').owlCarousel({
items: 1,
nav: true,
dots: false,
loop: true
});
$("#australia").on("click",function(e) {
$('.boxed-btn').attr("href", "aust");
});
/**
* Owl Carousel v2.3.4
* Copyright 2013-2018 David Deutsch
* Licensed under: SEE LICENSE IN https://github.com/OwlCarousel2/OwlCarousel2/blob/master/LICENSE
*/
.owl-carousel,.owl-carousel .owl-item{-webkit-tap-highlight-color:transparent;position:relative}.owl-carousel{display:none;width:100%;z-index:1}.owl-carousel .owl-stage{position:relative;-ms-touch-action:pan-Y;touch-action:manipulation;-moz-backface-visibility:hidden}.owl-carousel .owl-stage:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.owl-carousel .owl-stage-outer{position:relative;overflow:hidden;-webkit-transform:translate3d(0,0,0)}.owl-carousel .owl-item,.owl-carousel .owl-wrapper{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0)}.owl-carousel .owl-item{min-height:1px;float:left;-webkit-backface-visibility:hidden;-webkit-touch-callout:none}.owl-carousel .owl-item img{display:block;width:100%}.owl-carousel .owl-dots.disabled,.owl-carousel .owl-nav.disabled{display:none}.no-js .owl-carousel,.owl-carousel.owl-loaded{display:block}.owl-carousel .owl-dot,.owl-carousel .owl-nav .owl-next,.owl-carousel .owl-nav .owl-prev{cursor:pointer;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel .owl-nav button.owl-next,.owl-carousel .owl-nav button.owl-prev,.owl-carousel button.owl-dot{background:0 0;color:inherit;border:none;padding:0!important;font:inherit}.owl-carousel.owl-loading{opacity:0;display:block}.owl-carousel.owl-hidden{opacity:0}.owl-carousel.owl-refresh .owl-item{visibility:hidden}.owl-carousel.owl-drag .owl-item{-ms-touch-action:pan-y;touch-action:pan-y;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.owl-carousel.owl-grab{cursor:move;cursor:grab}.owl-carousel.owl-rtl{direction:rtl}.owl-carousel.owl-rtl .owl-item{float:right}.owl-carousel .animated{animation-duration:1s;animation-fill-mode:both}.owl-carousel .owl-animated-in{z-index:0}.owl-carousel .owl-animated-out{z-index:1}.owl-carousel .fadeOut{animation-name:fadeOut}#keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.owl-height{transition:height .5s ease-in-out}.owl-carousel .owl-item .owl-lazy{opacity:0;transition:opacity .4s ease}.owl-carousel .owl-item .owl-lazy:not([src]),.owl-carousel .owl-item .owl-lazy[src^=""]{max-height:0}.owl-carousel .owl-item img.owl-lazy{transform-style:preserve-3d}.owl-carousel .owl-video-wrapper{position:relative;height:100%;background:#000}.owl-carousel .owl-video-play-icon{position:absolute;height:80px;width:80px;left:50%;top:50%;margin-left:-40px;margin-top:-40px;background:url(owl.video.play.png) no-repeat;cursor:pointer;z-index:1;-webkit-backface-visibility:hidden;transition:transform .1s ease}.owl-carousel .owl-video-play-icon:hover{-ms-transform:scale(1.3,1.3);transform:scale(1.3,1.3)}.owl-carousel .owl-video-playing .owl-video-play-icon,.owl-carousel .owl-video-playing .owl-video-tn{display:none}.owl-carousel .owl-video-tn{opacity:0;height:100%;background-position:center center;background-repeat:no-repeat;background-size:contain;transition:opacity .4s ease}.owl-carousel .owl-video-frame{position:relative;z-index:1;height:100%;width:100%}
/* Additional for buttons */
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
background-color: #f5f5f5;
padding: .5em 1em !important;
margin: 1em;
border: 1px solid #ccc;
font-size: 20px;
border-radius: .1em;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
</head>
<body>
<div class="pricing-area section-padding">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<h2>Choose your Plan</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 flags">
<p>Select server location to host your VPS</p>
<div id="australia" class="flag active"><img src="img/flags/australia.png" alt="australia"><span>Australia</span></div>
<div id="canada" class="flag"><img src="img/flags/canada.png" alt="canada"><span>Canada</span></div>
<div id="france" class="flag"><img src="img/flags/france.png" alt="france"><span>France</span></div>
<div id="germany" class="flag"><img src="img/flags/germany.png" alt="germany"><span>Germany</span></div>
<div id="poland" class="flag"><img src="img/flags/poland.png" alt="poland"><span>Poland</span></div>
<div id="singapore" class="flag"><img src="img/flags/singapore.png" alt="singapore"><span>Singapore</span></div>
<div id="uk" class="flag"><img src="img/flags/uk.png" alt="uk"><span>UK</span></div>
</div>
</div>
<div class="row completed-cases">
<div class="col-xl-12 col-lg-12 col-md-12">
<div class=" completed-active owl-carousel">
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 1</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>1 vCore</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>2 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link1" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 2</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>2 vCore's</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>4 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link2" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
<div class="single-cases-img">
<div class="single-pricing">
<div class="pricing-header">
<h4>PLAN 3</h4>
</div>
<div class="pricing-body">
<div class="pricing-price">
<h3><sup>$</sup>1<sub>/mo</sub></h3>
</div>
<ul>
<li><i class="fa fa-tasks"></i> CPU Cores : <strong>4 vCore's</strong></li>
<li><i class="fa fa-magic"></i> Guaranteed RAM : <strong>8 GB</strong></li>
</ul>
</div>
<div class="pricing-footer">
Included Features
<a id="link3" href="" class="boxed-btn">Buy Now</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related
I'm using bootstrap to position some cards one near another but i'm not really able to do it because it always places the cards one under another.
<div class="container">
<div class="row">
<div class="col-8">
<div class="col-sm-2">
<div class='card' style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="card" style='width:20rem;'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
Basically i need those 2 cards to be on the same row and one after another but i don't understand what's wrong.Are those cards too big?
The problem is your inline style definition for your cards: width: 20rem. Essentially, you're giving the card 2/12 of the grid to work with (col-sm-2) and then giving a hard definition of the card to have a width of 20rem, which forces the next card to take up the next line.
Also, you need to specify another row after your col-8 declaration. Here's my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col-sm-6">
<div class='card'>
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
<div class='card-body text-center'>
<p class='card-text text-center' style='color: black'> Car</p>
<ul class='list-group list-group-flush'>
<li class='list-group-item'>
<div class='row'>
<div class='col-md-6'>
<i class='material-icons'></i><span> Price </span>
</div>
<div class='col-md-6'>
<i class='material-icons'></i><span>City</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 offset-1">
</div>
</div>
</div>
I have a set of <div>s lineup horizontally in my container and I'm looking to center my Outer-Container <div> class with the rest of the code on my web page (Squarespace).
I've made a CodePen re-creating the page and I still can't seem to center my outer-container within the Main-content section with varying screen sizes.
Any help is greatly appreciated!
<section class="Main-content" data-content-field="main-content" id="yui_3_17_2_2_1507859188217_558">
<div class="sqs-layout sqs-grid-12 columns-12 sqs-frontend-overlay-editor-widget-host" data-type="page" data-updated-on="1507857777989" id="page-59cab354bebafb4216478596">
<div class="row sqs-row" id="yui_3_17_2_2_1507859188217_669">
<div class="col sqs-col-12 span-12" id="yui_3_17_2_2_1507859188217_668">
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_22_1507595367220_25824">
<div class="sqs-block-content">
<h1 align="center">Choose your subscription plan</h1>
</div>
</div>
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_12_1507852892558_4858">
<div class="sqs-block-content">
<h3 style="text-align:center;color:#0083f5;">Have a MyDietGoal Promotion Code?</h3>
</div>
</div>
<div class="sqs-block code-block sqs-block-code" data-block-type="23" id="block-yui_3_17_2_2_1507522278297_5479">
<div class="sqs-block-content">
<div class="outer-container" id="backgroundDiv" style="width: max-content; height: max-content; padding: 100px;">
<div class="container container1">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-green">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Novice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$4.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn1" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container2">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-blue">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Apprentice</font></h2>
</div>
<div class="w-price" style="cursor:default">
$9.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn2" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container container3">
<div class="w-table">
<div class="w-table-cell">
<div class="w-container">
<div class="w-card color-orange">
<div class="card-header">
<div class="w-title" style="cursor:default">
<h2><font size="7px">Advanced</font></h2>
</div>
<div class="w-price" style="cursor:default">
$14.99
<h3>/ Week</h3>
</div>
<div class="container-button">
<a class="w-button" id="btn3" href="/meal-planner" target="_blank">Sign up </a>
</div>
</div>
<div class="card-content" style="cursor:default">
<div class="w-item" style="cursor:default">
<span>Weekly </span>Meal Plans
</div>
<div class="w-item" style="cursor:default">
<span>Personal </span>Dietary Assessment and Advice
</div>
<div class="w-item" style="cursor:default">
<span>Full </span>Access to the Food Catalogue
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I visited your web page and inspected the page source. It seems like the padding: 100px in .outer-container is breaking the display. You have to add negative left margin like margin-left: -100px to reposition your div.
Anyway, you may want to refactor your code and move the image to a bigger parent div then apply the padding there.
Hello I work on create bootstrap testimonials using bootstrap carousel, so I Divided every item into 3 boxes and it's work well but the problem will be appear in responsive media screen that the section height will be not proper:
so my Idea is the JQuery code will check If the window width is less than 767px then will cut the .col-xs-12:eq(1) and append it after .item then wrap it in row Div then Wrap it in .item Div:
Here a simple example:
Before:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
After: the code will check if the window width is less than 767px then will do this actions:
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4 moved">
<!-- Text Layer -->
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
Here my snippet:
; (function ($) {
"use strict";
var $windowWidth = $(window).width();
if ($windowWidth < 767) {
$('#pencil-testimonials_2 .item').each(function (index, element) {
$(this).find(".col-xs-12:eq(1)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
$(this).find(".col-xs-12:eq(2)").addClass('moved').appendTo($(this)).wrap('<div class = "row"> </div>').wrap('<div class = "item" > </div>');
});
}
})(jQuery);
#pencil-testimonials_2 {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
#pencil-testimonials_2 .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
#pencil-testimonials_2 .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
#pencil-testimonials_2 .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
#pencil-testimonials_2 .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_2" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of First Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Second Slide -->
<div class="item">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="text-image">
Hello World
</div>
</div>
</div>
</div>
<!-- End of Third Slide -->
</div>
</div>
</div>
Here's what you can do:
.carousel.slide {
min-height: 375px;
padding: 50px 0;
position: relative;
background-color:aquamarine;
}
.carousel.slide .carousel-indicators {
width: 100%;
height: auto;
position: absolute;
bottom: 20px;
left: 0;
margin: 0;
list-style: none;
text-align: center;
}
.carousel.slide .carousel-indicators > li {
display: inline-block;
width: 14px;
height: 14px;
margin: 0;
margin-right: 3px;
border:1px solid #838383;
background-color:transparent;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.carousel.slide .carousel-indicators > li.active {
width: 14px;
height: 14px;
background-color: #838383;
border: 1px solid transparent;
margin-right: 3px;
}
.carousel.slide .text-image{
height:150px;
border:1px solid #ffffff;
margin: 0 0 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="pencil-testimonials_1" class="carousel slide hidden-xs hidden-sm" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_1" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_1" data-slide-to="2">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 1
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 2
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 4
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 5
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-4">
<div class="text-image">
Hello World 7
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 8
</div>
</div>
<div class="col-sm-4">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="pencil-testimonials_2" class="carousel slide hidden-md hidden-lg" data-ride="carousel" data-pause="hover" data-interval="100000" data-duration="1000">
<ol class="carousel-indicators">
<li data-target="#pencil-testimonials_2" data-slide-to="0" class="active">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="1">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="2">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="3">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="4">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="5">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="6">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="7">
</li>
<li data-target="#pencil-testimonials_2" data-slide-to="8">
</li>
</ol>
<div class="container">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 1
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 2
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 3
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 4
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 5
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 6
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 7
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 8
</div>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-12">
<div class="text-image">
Hello World 9
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Basically, you just create two carousels and hide the one you don't want using Bootstrap's utility classes: hidden-xs, hidden-sm, hidden-md and hidden-lg. If you need more control, you can always create a third one for tablets.
I have a web page that uses Bootstrap. In this page, I am using the Collapse component to toggle visibility of some elements. In each collapse component, I have some links and buttons. If a user clicks one of these links or buttons, I do NOT want the related content to expand collapse.
I have a Fiddle here, which contains the following:
<div class="container">
<div class="row" data-toggle="collapse" data-target="#parent1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row" data-toggle="collapse" data-target="#parent3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3" class="collapse">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
</div>
Somehow the event seems to be going up the chain even though I'm returning false in the event handlers. I'm not sure how to remedy this. Any help is appreciated it.
You just need to move "collapsing attributs" to the h2 rather than the div container that include you links, like that:
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
</div>
<div class="col-xs-8">
<ul class="list-inline">
<li>details</li>
<li><button onclick="return onRunClick()">Run</button></li>
</ul>
</div>
</div>
</div>
You must remove the toggle attributes of each row and start the effect manually with JavaScript, then prevent the <button> and <a> elements from taking any action.
All your code would look like this
HTML
<div class="container">
<div class="row row1">
<div class="col-xs-8">
<h2>Parent 1</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent1">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row2">
<div class="col-xs-8">
<h2>Parent 2</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent2">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
<div class="row row3">
<div class="col-xs-8">
<h2>Parent 3</h2>
</div>
<div class="col-xs-4">
<ul class="list-inline">
<li>details</li>
<li><button>Run</button></li>
</ul>
</div>
</div>
<div class="row" id="parent3">
<div class="col-xs-12">
<h3><small>Children</small></h3>
</div>
</div>
JavaScript
$(document).ready(function(e) {
//on click in row1 class init toggle effect
$(".row1").on("click", function(){
//collapse content
$("#parent1").collapse('toggle');
});
$("div.row2").click(function(){
$("#parent2").collapse('toggle');
});
$("div.row3").click(function(){
$("#parent3").collapse('toggle');
});
//on click in button or a return false
$("button, a").on("click", function(){
return false;
});
});
I am trying to use a div instead of an image for the item and content but it won't set with the width correctly. I want it to work like the images do.
http://jsfiddle.net/ququat29/ example code
<div class="ContentFlow">
<div class="loadIndicator">
<div class="indicator"></div>
</div>
<div class="flow">
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<img class="item" src="https://tse1.mm.bing.net/th?id=HN.607994144777177645&pid=1.7" />
<img class="item" src="http://cdnll.reallygoodstuff.com/images/xl/161170_a.jpg" title="Your_Image_Title" />
<!-- Add as many items as you like. -->
</div>
<div class="globalCaption"></div>
<div class="scrollbar">
<div class="slider">
<div class="position"></div>
</div>
</div>
</div>
<div class="ContentFlow">
<div class="flow">
<div class="item more-width">
<div class="center-block club-card content" style="background-color: blue;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">coffee</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: red; ">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">car wash</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
<div class="item more-width">
<div class="center-block club-card content" style="background-color: yellow;">
<div class="club-info-wrapper ">
<div class="club-info ">
<h1 class=" club-name ">foutain</h1>
<p class="lead club-location "><strong>name</strong>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
http://www.jacksasylum.eu/ContentFlow/index.php