Bootstrap carousel error with images when i click - javascript

I have problem with my carousel slider.
The problem is: when i click on next o prev button nothing is happend. I read some articles here on stack but no one helped me. I tried some other carousels, but same result
Thanks
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<!--<div class="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Úvod</li>
<li>Ubytování</li>
<li>Mapa</li>
<li>Ceník</li>
<li>Fotogalerie</li>
<li>Kontakt</li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- -->
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Menu -->
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="1"></li>
<li data-target="#carousel" data-slide-to="2"></li>
</ol>
<!-- Items -->
<div class="carousel-inner">
<div class="item active">
<img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
</div>
<div class="item">
<img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
</div>
</div>
<a href="#carousel" class="left carousel-control" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a href="#carousel" class="right carousel-control" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!--<div class="content">
<div class="title_content">Ubytování Macalíkovi</div>
<div class="room1"><p>Všechny pokoje mají společnou kuchyň a sociální zařízení. Kuchyň je vybavena sporákem, troubou, varnou konvicí, mikrovlnou troubou, chladničkou a nádobím.</p></div>
<div class="room2"><p>Samozdřejmě můžete také využívat prosklennou verandu, která je přístupná z chodby pro všechny ubytované.</p></div>
<div class="room3"><p>V každém pokoji najdete televizi, která je připojenak satelitu, kde najdete velké množství kanálů, pro vaše větší pohodlí.</p></div>
</div>
<div class="footer">
<div class="author"># 2014 Macalíkovi, Všechna práva vyhrazena</div>
</div>
<!--<script>$("#carousel_nav").click(function(){
var item = 4;
$('#home_carousel').carousel(item);
return false;
});</script>--> <!-- -->
<script>
$(document).ready(function(){
console.log("hello world");
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$holder = $( "ol li.active" );
$holder.removeClass('active');
var idx = $('div.active').index('div.item');
$('ol.carousel-indicators li[data-slide-to="'+ idx+'"]').addClass('active');
});
$('ol.carousel-indicators li').on("click",function(){
$('ol.carousel-indicators li.active').removeClass("active");
$(this).addClass("active");
});
});
</script>


this is probably something to do with missing JQuery library,I added your HTML+JQuery and it worked.
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
here's a working example: http://jsfiddle.net/choroshin/2svAm/

Related

Why my Bootstrap 4 Carousel doesn't show up?

I believe I copy and paste the code for carousel from Boostrap 4 (v4.5) correctly, I have also included the Bootstrap cdn in and also JavaScript, JQuery, Popper.js plugins at the end of . Although the Bootstrap 4 navbar works well, I don't understand why the carousel doesn't show up. Are there anything else that I need to include for the carousel to work?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Your code is working. It is working below. Bootstrap 4 Carrousel will not show up if your image src is not valid.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://www.ahtcloud.com/images/ahttms.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

have you tried putting the scripts at the head of the page instead?
I have tried this same code with my images and they worked
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap cdn -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- fontawesome cdn -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<!-- custom css -->
<link rel="stylesheet" href="indexStyle.css">
<title>BLANK</title>
</head>
<body>
<!-- Design the navbar -->
<nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
<i class="fas fa-pencil-ruler mr-2"></i>BLANK
<!-- hamburger menu when shrinked -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
<span class="navbar-toggler-icon"></span>
</button>
<div class="colapse navbar-collapse" id="navLinks">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
ABOUT
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
ABOUT US
OUR TEAM
OUR MISSION
CONTACT US
</div>
</li>
<li class="nav-item">
PARENTS/GUARDIANS
</li>
<li class="nav-item">
STUDENTS
</li>
</ul>
</div>
</nav>
<section>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="slide1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="slide3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>
<!-- Mid Section -->
<div class="container text-center">
<h3 class="display-5" id="big-title">A New Way of Learning</h3>
<p>Join us for free exclusive free classes</p>
</div>
</body>
</html>

Mustache.js - JSON items not rendering

This is my first look at mustache.js in anticipation of using it for a larger project.
The problem I have is the spreadsheet JSON output I plan to use on my larger project doesn't have a name for the array. So based on the tutorial I followed on Lynda.com, ideally my array data would be called "fruits" but as you can see from my JSON data below, it outputs with no name for the array, just [].
https://api.myjson.com/bins/czrxt
https://docs.google.com/spreadsheets/d/1KIg84G9CXErw2bWhkEHWUkOI4CR-biFeLqCtdypaLU8/edit?usp=sharing
How can I render my set of data in mustache.js if there is no array name that can be used to output the template?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Mustache Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/thumbnail-gallery.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left">Fruits/h1>
<div id="fruitfeed" class="row text-center text-lg-left"></div>
<script id="fruittpl" type="text/template">
{{#fruits}}
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="{{image}}" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="{{wiki}}" alt="">
</a>
</div>
{{/fruits}}
</script>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core Javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Mustache.js -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('https://api.myjson.com/bins/czrxt', function(data) {
var template = $('#fruittpl').html();
var html = Mustache.to_html(template, {fruits:data});
$('#fruitfeed').html(html);
}); //getJSON
}); //function
</script>
</body>
</html>

I see three issues in your code:
The href in your template should be href="{{{wiki}}}". Note that the
3 curly brackets prevent the forward slashes and other special
characters in the URL from being encoded (e.g. "/" -> "%2f").
The src parameter in the template should be src="{{{image}}}"
As mentioned previously, pass {fruits:data} as the second parameter to
the Mustache.to_html function.
The revised code is:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Mustache Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/thumbnail-gallery.css" rel="stylesheet">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<!--
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
-->
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<div class="container">
<h1 class="my-4 text-center text-lg-left">Fruits/h1>
<div id="fruitfeed" class="row text-center text-lg-left"></div>
<script id="fruittpl" type="text/template">
{{#fruits}}
<div class="col-lg-3 col-md-4 col-xs-6">
<a href="{{wiki}}" class="d-block mb-4 h-100">
<img class="img-fluid img-thumbnail" src="{{image}}" alt="">
</a>
</div>
{{/fruits}}
</script>
</div>
<!-- /.container -->
<!-- Footer -->
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © 2017</p>
</div>
<!-- /.container -->
</footer>
<!-- Bootstrap core Javascript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Mustache.js -->
<!--<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.cycle/2.9999.8/jquery.cycle.all.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.0/mustache.min.js"></script>
<script type="text/javascript">
$(function() {
$.getJSON('https://api.myjson.com/bins/czrxt', function(data) {
var template = $('#fruittpl').html();
var html = Mustache.to_html(template, {fruits:data});
$('#fruitfeed').html(html);
}); //getJSON
}); //function
</script>

Why is the whole site jumping when using affix?

I am using a navbar and a subnav under a Carousel. And my subnav should be fixed after getting there. It is fixed but content is jumping.
if i only would use a container above i would already have found a solution but it don't work for me, so its still jumping..
I already saw some solutions but don't get it..
so what am i doing false?
https://jsfiddle.net/sdkpj9f3/
.navbar {
margin-bottom: 0;
}
#myCarousel {
padding: 0px;
}
.subnav {
margin: 0px;
top: 0px;
background: rgba(85, 93, 106, 0.7);
border-style: none;
}
.subnav.affix {
position: fixed;
top: 0;
width: 100%;
}
.subNav-item:hover {
font-size: 20px;
background: rgba(111, 131, 158, 0.2);
}
<html>
<head>
<title></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">
<!-- 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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top navtop">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navtop">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--LOGO-->
<a href="index.html" class="">
<img src="images/logos/RULogo.png" style="height: 50px; width: 50px;">
</a>
</div>
<!--NAV START-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="">Gallery
</li>
<li class="">Shop
</li>
<li class="">Blog
</li>
<li class="">About & Contact
</li>
</ul>
</div>
<!--NAV END-->
</nav>
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="images/picture3.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Welcome</h1>
<h2>kjlkjkl</h2>
</div>
</div>
<div class="item">
<a href="contact.html" class="no-link">
<img src="images/picture1.jpg" alt="img1">
<div class="carousel-caption white-on-white">
<h1>Who?</h1>
</a>
<h2>Developers</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" 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 carousel-control" 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>
<!--SlideShow END-->
<!--SubNav-->
<nav class="navbar subnav" role="navigation">
<div class="collapse navbar-collapse collapse-buttons">
<ul class="nav navbar-nav navbar-right">
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
<li class="subNav-item">something
</li>
</ul>
</div>
</nav>
<!--END SUbnav-->
<div id="Code" class="container-fluid">
<div class="row">
<div class="col-sm-8">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
<div class="col-sm-4">
<div class="well well-lg">
<p>this picture has blablablablabalbalb</p>
</div>
</div>
</div>
</div>
<!-- Container (Portfolio Section) -->
<div id="portfolio" class="container-fluid text-center">
<h2>Portfolio</h2>
<br>
<h4>What we have created</h4>
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture1.jpg" alt="Paris" width="400" height="300">
<p><strong>bla blaa</strong>
</p>
<p>blablablabll lbalabl lab lab</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture2.jpg" alt="New York" width="400" height="300">
<p><strong>blablabla</strong>
</p>
<p>blablabalbalbala</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="images/picture3.jpg" alt="San Francisco" width="400" height="300">
<p><strong>blablabalbal</strong>
</p>
<p>bla, blabla bla ba</p>
</div>
</div>
</div>
<br>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var h = $('.navtop').height();
var h2 = $('#myCarousel').height();
var h3 = h + h2;
$('.subnav').affix({
offset: {
top: 1200
}
});
</script>
<body>
</html>

Usually when the site jumps from affix, it's because the header becomes position fixed and leaves the layout and is position on top of the content itself. The rest of the site "jumps" up the height of the header.
One thing you can do is wrap your navbar in a wrapper and give the navbar wrapper the height of the nav.
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse navbar-static-top navtop">
<!-- the rest of your nav code is here -->
</nav>
</div>
and in css
.navbar-wrapper { height:60px; } /* or whatever the height of the nav is */
You can find the height of your nav by using the browser inspector or by guessing until the jump disappears.
Here is your Jsfiddle, cleaned up a bit so it works.

Bootstrap caroussel not sliding

I am trying to add a slideshow to my webpage using Bootstrap Caroussel, but seems that the photos is not sliding, only showing the first picture. And the buttons in the bottom and on both sides are not working well. Any one would like to look at my code and help me with this?
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/reverse1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/12976329_224255987939469_1210159874_n.jpg" class="img-responsive">
</div>
<div class="item">
<img src="images/13098983_106200126454398_1338693822_n.jpg" width="450" height="450">
</div>
<div class="item">
<img src="images/13166635_879641332146032_791969762_n.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right 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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="jquery-1.12.3.js"></script>
<script>
$('#myCarousel').carousel();
</script>

You have missed bootstrap.min.js
</!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=divice-width, initial-scale=1">
<link rel="stylesheet" href="main.css" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 70%;
margin: auto;
}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="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>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" class="img-responsive">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
<div class="item">
<img src="http://webneel.com/wallpaper/sites/default/files/images/08-2014/2-black-wallpaper-pattern.preview.jpg" width="450" height="450">
</div>
</div>
<!-- Left and right 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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
$('#myCarousel').carousel();
</script>

Twitter Bootstrap Carousel not rotating images

The active image is displaying but nothing happens after that. I am new to Bootstrapper so I was hoping someone could let me know if I am missing libraries, or have to syntax wrong. I looked around and everything seems to be right?
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-th-list"></span></a>
California Autism Center & Learning Group
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Our Staff</li>
</ul>
</div>
</div>
</div>
</div>
<div class="hero-unit">
<div id="myCarousel" class="carousel slide">
<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>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" alt=""><img src="img/Banner.jpg"/></div>
<div class="item" alt=""><img src="img/autism1.jpg"/></div>
<div class="item" alt=""><img src="img/autism2.jpg"/></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<h3>How We Started</h3>
<p>Add information here.</p>
<h3>Our Goals</h3>
<p>Add nformation here.</p>
</div>
</div>
<hr>
<div class="container">
<div class="row-fluid">
<div class="span4">
<p>© 2013 </p>
</div>
<div class="span4 text-center">
<ul class="nav inline">
<li>About Us</li>
<li>Contact Us</li>
<li>Privacy Policy</li>
</ul>
</div>
<div class="span4 text-right">
<p></p>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.0.min.js"></script>
<script src=”js/bootstrap.js”></script>
</body>
</html>
my .js code:
$(document).ready(function() {
$('#myCarousel').carousel({
interval: 2000
})
});

Try this before the closing body tag. It works when I've used in on BS2 & 3.
<script>
$('.carousel').carousel({
pause:false,
interval:7000
})
</script>

I've created a Fiddle from your code and it works fine (beside the fact that images are 404 placeholders). My guess is that the problem is in those quotes your using here:
<script src=”js/bootstrap.js”></script>
My Chrome doesnt't treat those as normal quotes and in facts this line turns to:
<script src="”js/bootstrap.js”"></script>

Categories