We Keep Coding

jQuery element styles are not working in Safari

I created a bootstrap carousel slider in my HTML. When loading and reloading the page, it takes a second to load the carousel image and meantime all the image borders and carousel indicators are there. Then I created a code to invisible all the borders and elements of carousel until loading the image. This is working perfectly in Chrome, Firefox, IE, Edge and Opera but doesn't working in Safari.
$(".carousel-img").on('load', function() {
$(".carousel-indicators").css({
display: "-webkit-flex",
display: "-webkit-box",
display: "-moz-flex",
display: "-moz-box",
display: "-ms-flexbox",
display: "flex",
"flex-direction": "row"
});
}).attr("src", $(".carousel-img").attr("src"));
.carousel-indicators {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
In safari, This carousel-indicators are not showing at all. All the other browsers are showing it correctly. How to fix it?

This is my solution:
I moved some code in functions
I moved CSS from JS to CSS
I check for load event as well as complete status for every img
If complete or loaded I remove that image from the queue
If queue empty, show indicators
console.clear()
jQuery(function($) {
var $queue = $(".carousel-img")
var total = $queue.length;
$queue
.each(checkLoaded)
$queue
.on('load', onloadImage)
function checkShowIndicators() {
if ($queue.length === 0) {
$(".carousel-indicators").addClass('after-load')
}
}
function onloadImage() {
console.info('loaded: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
function checkLoaded() {
if ($(this).get(0).complete) {
console.info('complete: ' + $(this).attr('src'))
$queue = $queue.not(this)
checkShowIndicators();
}
}
});
.carousel-indicators{
display: none;
}
.carousel-indicators.after-load {
display:-webkit-flex;
display:-webkit-box;
display:-moz-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
flex-direction: row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"><img src="https://dummyimage.com/100x50/00f/ff0" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="1"><img src="https://dummyimage.com/100x50/0f0/f0f" alt="..."></li>
<li data-target="#carousel-example-generic" data-slide-to="2"><img src="https://dummyimage.com/100x50/f00/0ff" alt="..."></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://dummyimage.com/100x50/00f/ff0" alt="..." class="carousel-img">
<div class="carousel-caption">
1
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/0f0/f0f" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
<div class="item">
<img src="https://dummyimage.com/100x50/f00/0ff" alt="..." class="carousel-img">
<div class="carousel-caption">
2
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

And if you try to add the line display:"-webkit-flexbox",
$(".carousel-img")
.on('load', function() {
$(".carousel-indicators").css({ display:"-webkit-flex",
display:"-webkit-box",
display:"-webkit-flexbox",
display:"-moz-flex",
display:"-moz-box",
display:"-ms-flexbox",
display:"flex",
"flex-direction":"row"
});
})
.attr("src", $(".carousel-img").attr("src"));

Please try to look like.
$(".carousel-img")
.on('load', function() {
$(".carousel-indicators").css({ display:"-webkit-flex",
display:"-webkit-box",
display:"-moz-flex",
display:"-moz-box",
display:"-ms-flexbox",
display:"-webkit-flexbox",
display:"flex",
"flex-direction":"row"
});
})
.attr("src", $(".carousel-img").attr("src"));

How to smooth transition between elements of different heights in Bootstrap carousel

I am building a Bootstrap carousel for a project. The content of the slides have different heights. Currently, the transition animation for the different sized content is very choppy. I am wondering if there is any way to fix this transition and make it a bit more graceful/smooth as the carousel adjusts in height between the slides.
*Please note that I would like to maintain the different heights between the slides. They are sized that way for a reason that is essential to the project.
Please see an example of the choppy transition on JS Bin.
Here is the code for the carousel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bootstrap Carousel</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img style="margin: 0 auto;" src="http://placehold.it/300x300">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/250x250">
</div>
<div class="item">
<img style="margin: 0 auto;" src="http://placehold.it/160x600">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>

It was chopping a lot because of the translation left/right so if u remove it it should be a lot better.
.carousel-inner .item {
opacity: 0;
transition: none;
transform: translate3d(0,0,0) !important;
}
.carousel-inner .active {
transition: opacity 1s ease-in-out;
opacity: 1;
}
but if u meant animate the height between different image sizes than u can use this jQuery:
$('.carousel').carousel().on('slide.bs.carousel', function (e) {
var nextH = $(e.relatedTarget).height();
$(this).find('.active.item').parent().animate({
height: nextH
}, 1000);
});
CODEPEN

Another way you can use javascript to done that.
Example
In that code I add event listener for listen slide.bs.carousel that triggered from bootstrap, get height of active item then animate carousel-inner element height.

<div class="item active">
<div class="img" style="background-image:url('http://placehold.it/300x300')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/250x250')"></div>
</div>
<div class="item">
<div class="img" style="background-image:url('http://placehold.it/160x600')"></div>
</div>
Add style
.item .img {
height:600px; //Maximum height
background-repeat:no-repeat;
background-position:center center;
}

Bootstrap Carousel Don't start from the beginning

I am implementing a fancy survey with carousel.
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel" style="vertical-align: center">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
...
<li data-target="#myCarousel" data-slide-to="n"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
page 1
</div>
<div class="item">
page 2
</div>
...
<div class="item">
page n
</div>
</div>
<!-- Left and right controls -->
<a class="left" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
Is there a way to make carousel behave more like a sliding window which mean that it is not possible to go in an n-element carousel:
from Page 1 to Page n
from Page n to Page 1
EDIT
Somehow it seems that i discribed the problem not well enought. So i try better:
So first of all the carousell is in its original purouse meant for displaying pictures:
http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
i know use different forms inside each "Page" of the carousel.
You can go to the next "Page" of a carousel by clicking on the button on the right or to the last if you click the button on th right.
Now my only problem is - since this shall become a survey - that when Page one with my first question loads, a user can click the button on the left and will go to the end of the carousel (last page/page n).
Is it possible to disable this feature?

I am sure there are more elegant solutions, but this might get you started:
jsFiddle Demo
HTML:
<div class="container">
<div class="row">
<div id="s1" class="slide">
<div class="shead">Slide Title 1</div>
<div class="sbody">Here is body of slide 1 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s2" class="slide">
<div class="shead">Slide Title 2</div>
<div class="sbody">Here is body of slide 2 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s3" class="slide">
<div class="shead">Slide Title 3</div>
<div class="sbody">Here is body of slide 3 with questions</div>
<div class="sfoot"><button>Next</button></div>
</div><!-- .slide -->
<div id="s4" class="slide">
<div class="shead">Slide Title 4</div>
<div class="sbody">Thank you for taking this survey</div>
</div><!-- .slide -->
</div><!-- .row -->
</div><!-- .container -->
JS:
var cnt=1;
$(function(){
$('body').css({'background':'wheat'});
$('#s'+cnt).css({'margin-left':0});
$('button').click(function(){
$('#s'+cnt).animate({
marginRight:'100%'
},500);
cnt++;
$('#s'+cnt).animate({
marginLeft:'0%'
},500,function(){
//reset slide position, in case you wish to add a "Go Back one slide" btn
$('#s'+cnt-1).css({'margin-left':'100%'});
});
});
});//END document.ready
CSS:
html,body{height:500px;width:100%;overflow:hidden;}
div{position:relative;}
.row{height:400px;width:100%;}
.slide{position:absolute;top:0;margin-left:100%;height:100%;width:100%;padding:20px;}
.shead{height:50px;width:100%;color:#aaa;background:#222;}
.sbody{height:300px;width:100%;padding:20px;}
.sfoot{height:50px;width:100%;}
.sfoot button{padding:12px 20px;background:darksteelgrey;color:#888;}
#s1{color:white;background:darkcyan;}
#s2{color:yellow;background:red;}
#s3{color:#333;background:palegreen;}
#s4{color:yellow;background:blue;font-size:2rem;}

How to make a div slider?

I am trying to make a slider which scrolls over 3 div elements on to 3 new scroll elements. I am looking for a manual slider with an arrow pointing right on the right side and left on the left side. The slider should slide right when right arrow clicked and display the 3 remaining div elements. If the left arrow is clicked first, nothing should happen. if it is clicked after the right arrow has been clicked it should slide back to the three previous div elements. If the right arrow is clicked twice in a row the second click should slide back to the initial 3 div elements. Basically, I want to end up with something like the slider on the unity website. Link: http://unity3d.com/unity
Here is my HTML code so far. It displays the boxes on 3 columns and 2 rows:
<div class="categories">
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
<div class="category">
<div class="rect">
<img src="stuff.gif">
</div>
<h3>Stuff</h3>
<p>Stuff.</p>
</div>
</div>
Here are the CSS styles for the boxes:
/**********************
*******CATEGORIES******
**********************/
.categories {
width: 90%;
margin: 3% 9%;
clear: left;
}
.category {
padding: 7% 5% 3% 5%;
width: 20%;
border: 1px solid #E0E0E0;
float: left;
cursor: pointer;
text-align: center;
}
.category:hover {
border: 1px solid #4F8E64;
}
.category h3 {
color: #3F7250;
margin: 6% 0;
}
.category p {
text-align: center;
}
Make sure that the padding and margin and width stays in percentages. Feel free to modify the code and share it with me on fiddle or something.

You can use Caroufredsel jquery plugin for it. Here is the installation page:
http://dev7studios.com/caroufredsel-old/installation.php
And here is an example next to yours:
http://coolcarousels.frebsite.nl/c/58/
When you scroll down in the example and click [..] in the orange bar - you will see the code for the example.
This is the code for your carousel:
$('#carousel').carouFredSel({
width: '90%',
items: 3,
scroll: 3,
auto: false,
prev: '#prev',
next: '#next',
infinite: false
});
You can use also circular: false if you want the slides not to be circular.

Ok, so following comments if you consider bootstrap, include bootstrap js and css
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
HTML
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
<div class="item">
<section>
Some Info
</section>
<section>
Some Info 2
</section>
<section>
Some Info 3
</section>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
section{
display:inline-block;
border:1px solid black;
}
.item{
text-align:center
}
You can manipulate the sections and content as you please.

you can do it using jQuery need to sit for sometime and make custome slider and it will works according to you logic.
Hope this will help you.

Bootstrap carousel how to hide one item from slider on xs size?

How I can hide one or two items from the bootstrap-carousel only on xs-size ?
When I added class 'hidden-xs' to this item in carousel and item div looks like:
<div class="item hidden-xs">
<img src="imgTop2.jpg" alt="...">
</div>
All the items and the carousel disappeared.
The same problem exist when i add 'hidden-xs' class to img element for this item.
How can I fix that ? I want to hide on xs only one or two slides. Others must by visible.
My code looks like:
<div id="carousel-top" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="hidden carousel-indicators" style="display:none">
<li data-target="#carousel-top" data-slide-to="0" class="active"></li>
<li class="" data-target="#carousel-top" data-slide-to="1"></li>
<li class="" data-target="#carousel-top" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgTop.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop2.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop3.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop4.jpg" alt="...">
</div>
<div class="item">
<img src="imgTop5.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="hidden left carousel-control" href="#carousel-top" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="hidden right carousel-control" href="#carousel-top" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

I can't think of a way to do it just with bootstrap helper classes, because the carousel script depends on the .item class. But you could use the following jQuery:
if ($(window).width() < 960) {
$('#carousel-top .hide-on-mobile').removeClass('item').addClass('hide');
}
You just have to add the class .hide-on-mobile to the items you want to hide on mobile devices.
Working Example

Expanding on Sebsemillia's approach, you can achieve this conditional logic actively on the window resize event. The only catch is that if the element has class "active", you must also remove this class and add it to another slide without the .hide-on-mobile class. See here, using class .no-mobile --
$(function(){
var $window = $(window);
function deviceWidth() {
return $window.width();
}
function toggleMobileSlideVisibility(show_hide) {
$no_mobile_slides = $('.carousel-inner').find('.no-mobile');
if (show_hide === 'hide'){
var reset_active_slide = false;
$no_mobile_slides.each(function(i, e){
if ($(e).hasClass('active')) {
reset_active_slide = true;
$(e).removeClass('active');
}
});
$no_mobile_slides.removeClass('item').addClass('hide');
if (reset_active_slide) {
$('.carousel-inner').find('.item').first().addClass('active');
}
} else if (show_hide === 'show') {
$no_mobile_slides.addClass('item').removeClass('hide');
}
}
var is_mobile_device = false;
var detectMobile = function detectMobile(){
if (deviceWidth() > 978) {
if (is_mobile_device) { toggleMobileSlideVisibility('show'); }
is_mobile_device = false;
} else {
if (!is_mobile_device) { toggleMobileSlideVisibility('hide'); }
is_mobile_device = true;
}
}
$(window).on('resize', function(){
detectMobile();
});
detectMobile();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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.5/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://unsplash.it/1920/600/?random&img=2" alt="random">
<div class="carousel-caption">
Just A Slide
</div>
</div>
<div class="item no-mobile">
<img src="https://unsplash.it/1920/600/?random&img=3" alt="random-no-mobile">
<div class="carousel-caption">
A Slide That Should Hide On Mobile
</div>
</div>
<div class="item">
<img src="https://unsplash.it/1920/600/?random&img=4" alt="random2">
<div class="carousel-caption">
Just Another Slide
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Or you can use CSS media query to hide the items you choose on mobile:
#media screen and (max-device-width: 800px) {
.slide-hide-on-mobile { display: none; }
}
You just need to add class="slide-hide-on-mobile" to the items you want to hide:
<div class="item active slide-hide-on-mobile">
<img src="imgTop.jpg" alt="...">
</div>