Develop Reference

issues bootstrap 3 Carousel changing height to 0px and marigin to -.....px

The Carousel I added to my site behaves really strange. In a periode of 2 the slide slides up. The height of the parent div changes to 0px and the margin of the child div gets a negative margin. In a the examples on the bootstrap site this isn't happening. I copied the latest code from the bootstrap site, can't find what i am doing wrong.
I would love it if someone could help me.
http://humandemo.cloudaccess.host Header right at the top op the page.
Code used:
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel 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>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="Second Slide">
</div>
<div class="item">
<img src="/images/page-specific/home/iPhone-Comp-hw.png" alt="First Slide">
</div>
</div>
<!-- Carousel controls -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

I guess this is the work of the mootools-more.js. This script includes the Fx.Slide class:
The slide effect slides an Element in horizontally or vertically. The contents will fold inside.
Try to comment this script.

#Jeroen: I have checked your website and tried some changes with Css by "Inspect Element" and As per me You should check div id="myCarousel" and div class="carousel-inner". If they have been set with some height or not. Hope this helps you.

Your Bootsrap carousel code is perfect, there is no issue with that. There may be issue with your another script, I have used your code in the codepen and its works perfectly fine.

I did some research after the answer of #Gleb Kemarsky, thank you for that. And indeed mootools conflicts with bootstrap, see: https://github.com/joomla/joomla-cms/issues/475
The fix is:
if (typeof jQuery != 'undefined') {
(function($) {
$(document).ready(function(){
$('.carousel').each(function(index, element) {
$(this)[index].slide = null;
});
});
})(jQuery);
}

Bootstrap carousel: carousel-indicators not changing size/class

I wanted the carousel-indicators below the images. This required some styling changes to still use Bootstrap for this carousel (see full code below). I added the border-color to the indicators and I added a bit of styling to the carousel-indicators class: position:static; padding-top:10px; width: 100%; margin-left:0;.
The problem is the size of the indicators. If a visitor clicks one of the indicators, the carousel correctly goes to that image. However, the indicators don't change: that is, the indicator that started as active is still larger than the other two indicators (you would now expect the clicked indicator to be the larger one). The first indicator continues to keep the active class. What could be causing this problem?
<div id="carouselvideo" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
<div class="item">
<iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx></iframe>
</div>
</div>
</div>
<script> //The problem persists also if I remove this script line.
$("#carouselvideo").carousel({interval: false});
</script>
<ol class="carousel-indicators" style="position:static; padding-top:10px; width: 100%; margin-left:0;">
<li data-target="#carouselvideo" data-slide-to="0" style="border-color: #333;" class="active"></li>
<li data-target="#carouselvideo" data-slide-to="1" style="border-color: #333;"></li>
<li data-target="#carouselvideo" data-slide-to="2" style="border-color: #333;"></li>
</ol>
Update: If I move the last five lines inside the carouselvideo div, then the problem is gone. However, I dont wan't it there because I want the indicators below the carousel (see How to create this bootstrap carousel of iframes?). Why would this problem exist when the indicators code is placed outside the carousel?

Here is a working example of a bootstrap carousel and the indicators work just fine. You are missing some quotes at the end of your iframe src and this may be causing some issues but you can find a working example at this fiddle http://jsfiddle.net/wamosjk/auotu240/ and here is the code
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="false">
<!-- 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
<div class="item">
<iframe width="100%" height="250" src="https://www.youtube-nocookie.com/embed/xxx"></iframe>
</div><!-- End Item -->
</div><!-- End Carousel Inner -->
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- End Carousel -->
you can take out the script and just put data-interval="false" in your carousel as well but it is up to you if you are still having issues then there is some more than likely some previously stated css or javascript issues. You may take out the controls if you dont want them and just keep the indicators.
I found that if you want the indicators outside of the carousel the active class no longer toggles so you would need to add the following script
<script>
$(".carousel-indicators li").on('click', function(){
$(this).siblings().removeClass('active')
$(this).addClass('active');
})
</script>

Bootstrap 3 Carousel Caption Delay

Website: http://freedomcreativesolutions.com/old/steamsource/
Problem: Trying to implement the javascript slide.bs.carousel into the code so that the caption delays and comes in a few seconds after the picture loads in the slideshow. I placed the code for 'slide.bs.carousel' in a script tag before the closing body tag rather than in a separate js file. But it seems like its not working at all and still comes in along with the picture.
What I did: http://jsfiddle.net/fuhs3smx/
Seems like its not working in Jsfiddle (new to this program) which is why I gave the link to the website so you'd guys atleast get an idea of what I'm trying to accomplish.
Guess what I'm trying to ask here is, where exactly should I place the script for 'slide.bs.carousel'? Everything looks good to me and my guess is that I'm placing the script in the wrong area.
<div id="carousel-example-generic" class="carousel slide carousel-fade" 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="./img/family-new.jpg" alt="We are Serious about Clean!">
<div class="carousel-caption">
<h3>Safe for the whole family!</h3>
</div>
</div>
<div class="item">
<img src="./img/RugCleaningFacility.jpg" alt="Rug Cleaning">
<div class="carousel-caption">
<h3>State of the art rug cleaning facility!</h3>
</div>
</div>
<div class="item">
<img src="./img/ProfessionalWW.jpg" alt="Window Washing and Pressure Washing">
<div class="carousel-caption">
<h3>Professional Window Washing and Pressure Washing!</h3>
</div>
</div>
<div class="item">
<img src="./img/UpholsteryClean.jpg" alt="Upholstery Cleaning">
<div class="carousel-caption">
<h3>The deepest upholstery cleaning available!</h3>
</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>
UPDATE: After including bootstrap.min.js, I'm getting this message when pulling up the dev tools:
Uncaught TypeError: undefined is not a function
carouselContainer.carousel({
interval: slideInterval,
cycle: true,
pause: "hover"
}).on('slid.bs.carousel', function() {
toggleCaption();
});
What does that mean? Maybe I've mispelled something or maybe the placement is all wrong.

Your fiddle doesn't include Bootstrap.js. You must also include jQuery as Bootstrap.js requires jQuery.
The Uncaught TypeError: jQuery.easing[this.easing] is not a function issue can be resolved by adding jQuery UI.
You'll noticed that I also placed your JS inside .ready() so that it's guaranteed to be executed after the DOM is ready.
I've updated the fiddle for you to review. http://jsfiddle.net/yongchuc/fuhs3smx/2/

How to change the background-image of the full slider - bootstrap

I'm using the full slider bootstrap and would like to keep all the features, but instead of putting all images in the Carousel, I wonder if it is possible to keep only one and only change the background-image.
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- 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>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>
Finnaly:
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel slide">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" **style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"**></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</header>

I don't know why you would want this function, but since you're asking, I'll give you a solution.
With the .css()-selector in jQuery, you can target CSS and change it with jQuery.
You can create an array or variable, loop through it with .each(), store that information in another variable and then let jQuery change the background-image after some time or after an action. You can change the background by using the following jQuery:
$('.classname').css('background-image', 'variable');
Just as an example (you'll have to figure out yourself how to do it with the background-images, how to let jQuery display another one etc), I have set up this fiddle. In the fiddle, I have a variable, which I split on the | and which I then loop through with .each(). This variable (chunk) is later used to make some new divs with the respective chunk as a classname.
jQuery
var somestring = "img1|img2|img3",
separated = somestring.split("|");
$.each(separated, function(index, chunk) {
$('.test').append('<div class="' + chunk + '">' + chunk + '</div>');
//This line is purely added to do something with the chunks
});
I didn't want to make the whole code of you, since this site is made to help each other. I gave you a pretty good push to the right direction, you now just have to figure out how to change the background-image-property on a click or other action.

Twitter bootstrap carousel works well with Chrome but doesn't on Firefox,Opera, and IE

I am having a huge issue with twitter bootstrap carousel for other browsers other than Chrome. I have looked all over the place for an answer and tried all the codes but nothing seems to help and I hope someone can help me out here with it.
In Chrome, the carousel takes up the whole page when it loads and you do not need to scroll down to see the picture because the whole picture lands perfectly at the size of your browser, it also perfectly resizes when you make the browser smaller so you can check it out on tablets and mobile. This is the main issue, this does not happen on Firefox, IE, Safari and the like at all because it does not make the image perfectly load on the webpage and has it scroll up and down for the whole picture unlike Chrome, it seems that the CSS or jQuery doesnt function on those pages for some reason and works fine on Chrome.
Please check my code and help me out here I have been at this for two weeks trying to find different solutions to this problem.
<div class="container contentHeight">
<div id="myCarousel" class="carousel slide tab-content">
<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>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="img1.jpg" alt="Slide1" />
</div>
<div class="item">
<img src="img2.jpg" alt="Slide2" />
</div>
<div class="item">
<img src="img3.jpg" alt="Slide3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
For my jQuery that I use for the Chrome to take in max height of the page it is as follows:
$(".contentHeight").css("min-height",$(window).height());
Also, thanks to people here I have also managed to make the CSS which works fine on Chrome but fails in other browsers:
.carousel .item {
width: 100%;
}
.carousel .item img {
width: 100%;
height:100%;
}
html,body{
height:100%;
}
.carousel,.item,.active{
height:100%;
}
.carousel-inner{
height:100%;
width: 100%;
}
I really dont know what the problem is, i am guessing it is the CSS or the jQuery but I tried changing those with no luck at all. Any help is much appreciated!
$(".contentHeight").css("min-height",$(window).height());
.carousel .item {
width: 100%;
}
.carousel .item img {
width: 100%;
height:100%;
}
html,body{
height:100%;
}
.carousel,.item,.active{
height:100%;
}
.carousel-inner{
height:100%;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="container contentHeight">
<div id="myCarousel" class="carousel slide tab-content">
<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>
</ol>
<div class="carousel-inner">
<div class="active item">
<img src="http://placehold.it/550x550" alt="Slide1" />
</div>
<div class="item">
<img src="http://placehold.it/551x551" alt="Slide2" />
</div>
<div class="item">
<img src="http://placehold.it/552x552" alt="Slide3" />
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>

If you want height and width to really be the percentage of the page use viewport units. They certainly saved me a lot of frustration with styling.
Newer browsers support viewport units.
caniuse.com/#feat=viewport-units min-height: 100vh
Think of viewport units like a percentage of your viewable window
(browser window). So, 100vh (vh = viewport height) is 100% of 1080px
and 100vw is 100% of 1920px (vw = viewport width) on a 1080p display.
This would work similar to normal percentages, however, this is just a
more direct way by bypassing content size, parent/child elements, n
such. Do double check that site to make sure your user-base is using
compatible browsers.
http://caniuse.com/#feat=viewport-units