I am new developer and trying to add a Bootstrap carousel to my rails app.
This is the carousel that I am trying to add in particular:
http://arturssmirnovs.com/blog/bootstrap-carousel-100-height-and-width/
So far i've only gotten the white left and right pointers to show up from the carousel (Ex: the navigation pointers that look like this < >)
Here's my html code, that i snabbed from the link above, I inserted this portion in the about.html.erb page, which is the static page that I want the carousel to appear in like this
views/layouts/staticpages/about.html.erb:
<div class="aboutslide">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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="item bg bg1 active">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item bg bg2">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item bg bg1">
<div class="container">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<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>
</div>
Here is my app/assets/stylesheets/carousel.css file:
html, body {
height:100%;
margin:0;
padding:0;
}
.carousel, .item, .active {
height:100%;
}
.carousel-inner {
height:100%;
}
.carousel {
margin-bottom: 60px;
}
.carousel-caption {
z-index: 10;
}
.carousel .item {
background-color: #777;
}
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(bg1.jpg);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(bg2.jpg);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(bg3.jpg);
background-position: center bottom;
}
#media (min-width: 768px) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 20px;
font-size: 21px;
line-height: 1.4;
}
}
and there is the docs.js file that i have inserted in apps/assets/javascripts/docs.js. I can't post it because the file is too big.
The issue with the button images is probably just that you need to add the images to your app/assets/images directory and change the css use the Rails asset_path helper:
.carousel .carousel-inner .bg {
background-repeat:no-repeat;
background-size:cover;
}
.carousel .carousel-inner .bg1 {
background-image:url(<%= assets_path 'bg1.jpg' %>);
background-position: center top;
}
.carousel .carousel-inner .bg2 {
background-image:url(<%= assets_path 'bg2.jpg' %>);
background-position: center center;
}
.carousel .carousel-inner .bg3 {
background-image:url(<%= assets_path 'bg3.jpg' %>);
background-position: center bottom;
}
This uses ERB (embedded ruby) to add the correct url in the stylesheet. You can also just change the extension of the file to '.css.scss' and use the sass-rails helpers.
.carousel.carousel-inner {
.bg {
background-repeat:no-repeat;
background-size:cover;
}
.bg1 {
background-image:url( image-url('bg1.jpg') );
background-position: center top;
}
.bg2 {
background-image:url( image-url('bg2.jpg') );
background-position: center center;
}
.bg3 {
background-image:url( image-url('bg3.jpg') );
background-position: center bottom;
}
}
Related
I am using bootstrap 4 with CDN.
The problem is that I have a boostrap4 carousel (taken from their official site) and it works great, but when I run a js code the carousel images disappear.
this is the carousel code and it works great
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol 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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart" 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>
</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>
But when I click on a button in another div, the carousel images disappear and only the arrows remain on the sides
This is what the other code does:
var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
I tried with the js code in the same file and also from another file, but the same thing keeps happening
The problem is that I have a boostrap4 carousel (taken from their
official site) and it works great, but when I run a js code the
carousel images disappear.
Firstly you need to include boostrap libs, not only the css.
Instantiate the carousel with:
$('.carousel').carousel();
Finally, if you need to toogle active between the accordions this line:
$('.active').removeClass('active')
needs to be changed in:
tar.siblings().removeClass('active'); // toogle active state....
The snippet:
$(function () {
$('.carousel').carousel();
var jsaccordion = {
init: function (target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function () {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
tar.siblings().removeClass('active');
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if ($('body').width() > 768) {
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width: 768px) {
.col-6 {
max-width: 100%;
min-width: 100%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class='col-7 mx-auto'>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol 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>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ-yiYswFmMD0pScf5VgsHoOmITBngv2NlYeg&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRs8rzKLMYWBvde8Rv7xpJszIb3bvcOd7N4eQ&usqp=CAU"
class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://blog.es.playstation.com/tachyon/sites/14/2020/09/50375482006_7c978f60f7_o.jpg?resize=1088,612&crop_strategy=smart"
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>
</div>
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas
pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis
natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet.
Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium
lectus quam id leo.</p>
</div>
</div>
</div>
</div>
i'm new here and also new at coding, i have been practicing with Visual Studio Code for a week now and i come with the following problem: i'm making a Slider with content inside so i can edit it and put a button inside it with a modal, i manage to make it work but as soon as i made it the images on the info cards for some reason went out of the limits of the info card, i can't figure out what i did wrong. this is my code and i apologize if this is not the correct way of uploading a code i still don't know how to properly use the site correctly.
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------Zona de Extensiones+6------------------------------------------>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/css/style3.css">
<link rel="stylesheet" type="text/css" href="Prueba numero2/assets/materialize/css/materialize.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<style>
.slider .indicators .indicator-item {
background-color: #666666 !important;
border: 3px solid #ffffff !important;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12) !important;
}
.slider .indicators .indicator-item.active {
background-color: #ffffff !important;
}
.slider {
width: 900px !important;
margin: 0 auto !important;
}
.slider .indicators {
bottom: 60px !important;
z-index: 100 !important;
/* text-align: left; */
}
nav {
background-color: black !important;
border-style: outset white 100px !important;
}
.carousel-inner img {
width: 100%;
height: 100%;
}
.nav-wrapper .brand-logo .logo {
width: 64px !important;
}
html {
box-sizing: border-box !important;
}
*, *:before, *:after {
box-sizing: inherit !important;
}
.column {
float: left !important;
width: 33.3% !important;
margin-bottom: 16px !important;
padding: 0 8px !important;
}
#media screen and (max-width: 650px) {
.column {
width: 100% !important;
display: block !important;
}
}
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) !important;
}
.container {
padding: 0 16px !important;
}
.card {
border-style: outset !important;
border-color: black 10px !important;
}
.container::after, .row::after {
content: "" !important;
clear: both !important;
display: table !important;
}
.title {
color: goldenrod !important;
}
.button {
border: none !important;
outline: 0 !important;
display: inline-block !important;
padding: 8px !important;
color: white !important;
background-color: #000 !important;
text-align: center !important;
cursor: pointer !important;
width: 100% !important;
}
.button:hover {
background-color: #555 !important;
}
footer div {
max-width: 100% !important;
}
</style>
</head>
<body>
<!----------------------------------------Scrips----------------------------------------->
<!----------------------------------------Scrips----------------------------------------->
<header>
<div class="panel">
<span style="display: inline-block; vertical-align: middle; height:100vh;"></span>
<span style="display: inline-block; vertical-align: middle; ">
<p class="title">L'excellance</p>
<p class="sub-title" style-color="goldenrod"> V.I.P Suites <a></p>
</div>
</header>
<nav>
<div class="nav-wrapper">
<img class="logo" src="https://i.dlpng.com/static/png/36814_preview.png"alt="L'excellance">
<ul id="nav-mobile" class="left hide-on-med-and-down">
<li>Home</li>
<li></li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<br><br>
<section>
<p>
Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Praesent congue eratatmassa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu. Phasellus accumsan cursus velit. Vestibulum anteipsumprimis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed aliquam, nisi quis porttitor congue, eliterat euismodorci, ac placerat dolor lectus quis orci. Phasellus consectetuer vestibulum elit. Aenean tellus metus,bibendum sed, posuereac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In turpis. Pellentesque posuere.Praesent turpis.
</p>
</section>
<br>
<br>
<div class="container"><div class="divider"></div></div>
<br>
<br>
<br>
<br>
<div class="w3-row-padding w3-border-light-grey w3-round w3-padding"></div>
<div class="row">
<div class="column">
<div class="card">
<img class="materialboxed" data-caption="CEO & Founder Sugma Joe " src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Jane" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">CEO & Founder</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" width="auto" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="Mike" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Art Director</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
<div class="column">
<div class="card">
<img class="materialboxed" src="https://i.pinimg.com/originals/a0/65/fc/a065fcc880c5c1b0fdc38c5d42a6f1af.jpg" alt="John" style="width:100%">
<div class="container">
<h2>Lorem</h2>
<p class="title">Designer</p>
<p>Some text that describes me lorem ipsum ipsum lorem.</p>
<p>example#example.com</p>
<p><button class="button">Contact</button></p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="divider"></div>
<br>
<br>
<!----------------------------------------Sección 3------------------------------------------>
<div class="slider">
<ul class="slides">
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption right-align">
<h3>Right Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img src="Prueba numero2/assets/img/Meaning-of-travelling.jpg"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
<!----------------------------------------Fin de Sección 3------------------------------------------>
<!----------------------------------------footer------------------------------------------>
<!----------------------------------------Zona de Scrips------------------------------------------>
<script>
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems, options);
});
// Or with jQuery
$(document).ready(function(){
$('.materialboxed').materialbox();
});
</script>
<script>
// init materialize tab
var elem = $('.tabs')
var options = {}
var instance = M.Tabs.init(elem, options);
//or Without Jquery
//var elem = document.querySelector('.tabs');
var options = {}
var instance = M.Tabs.init(elem, options);
</script>
</body>
</html>
to post your code here just type your text message then under the message paste your code,
select your code paragraph and then hit ctrl+K, that should set your message to be posted with a code...
post your code for others to be able to help you...
I am using Bootstrap 3, navbar-fixed-top class in particular. I have two menus that I fix to top with JQ as shown below. I see a weird bug only on short pages - only when the page height is almost exactly as long as page content: when I try to scroll, the page flickers and I am forced back to top. This happens with hand scroll or by using the scroll wheel. As a result, I can never see the last copyright line. See video of this.
EDITED:
When I remove this line $('nav').addClass('navbar-fixed-top'); the issue goes away (but obviously I need that line). How do I fix this?
Also, when class navbar-fixed-top is applied to nav, the scroll happens smoothly (hence, I don't see the bug on long pages). When it's not applied - the bug comes back.
var navFixStart;
var subFixStart;
var xs = 480;
var lg = 1200;
var mobileStart = (992 - 15);
if ($('body').hasClass('min')) {
navFixStart = 40;
subFixStart = 40;
} else {
navFixStart = 0;
subFixStart = 160;
}
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).width() < mobileStart) {
// stuff
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top'); // problem line
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
$(window).on('load resize', function() {
if ($(window).width() < mobileStart) {
//mobile stuff
} else {
$('nav').removeClass('navbar-inverse').removeClass('navbar-fixed-top');
$('nav>div').removeClass("container-fluid").addClass("container");
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
} else {
$('nav').removeClass('navbar-fixed-top');
}
}
});
});
/* Nav */
nav {
border: none !important;
padding-top: 15px;
z-index: 1000;
-webkit-transition: 0.3s all ease;
-moz-transition: 0.3s all ease;
-ms-transition: 0.3s all ease;
-o-transition: 0.3s all ease;
transition: 0.3s all ease;
}
nav div>ul>li>a:link {
padding: 20px;
}
nav.navbar-fixed-top {
background-color: rgba(244, 242, 239, 0.95);
}
nav.navbar-fixed-top.shad-bottom,
.subnav {
box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
}
.navbar-brand {
width: 145px;
margin-left: 15px;
margin-top: -5px;
}
.navbar-fixed-top .navbar-brand {
width: 115px;
}
.navbar-fixed-top {
margin-top: 0 !important;
padding-top: 0 !important;
}
.navbar-fixed-top .navbar-brand>img {
height: auto;
}
.navbar-fixed-top .navbar-brand {
margin-top: 5px;
}
.navbar-toggle {
padding: 9px;
}
.navbar-toggle .icon-bar {
width: 20px;
}
nav .dropdown .dropdown-menu {
border: 0;
}
nav .dropdown .dropdown-menu a:link {
line-height: 32px;
}
nav .navbar-collapse {
padding: 0;
}
nav .navbar-collapse.collapsing,
nav .navbar-collapse.in {
padding-right: 15px;
padding-left: 15px;
}
.navbar-collapse .nav {
position: relative;
top: -7px;
}
.navbar-fixed-top .navbar-collapse .nav {
position: static;
}
.navbar-nav>li>.dropdown-menu {
margin-top: 7px;
}
.navbar-fixed-top .navbar-nav>li>.dropdown-menu {
margin-top: inherit;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top" ontouchstart="">
<nav class="navbar navbar-default shad-bottom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li class="dropdown"> Option
<ul class="dropdown-menu">
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
<li>Option
</li>
</ul>
</li>
<li>Support
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid intro">
<div class="container">
<div class="row">
<div class="no-pad">
<h1>Support</h1>
</div>
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid block block-dark">
<div class="container">
<div class="row">
<div class="col-md-offset-2 col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras aliquet blandit lectus, quis auctor ante posuere sit amet. Fusce venenatis, arcu non viverra pulvinar, augue metus laoreet leo, sed convallis orci nisi vitae turpis. Cras sed euismod
ligula. Sed id nulla elit. Aenean dapibus condimentum ex nec fermentum. Aliquam accumsan velit in dui sagittis cursus. Vestibulum id scelerisque risus, at efficitur turpis.
<p>
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<div class="container-fluid footer">
<div class="container no-pad">
<footer class="row">
<div class="col-sm-12 text-center visible-xs" style="background-color:#45555f;">
<div class="to-top"><span class="glyphicon glyphicon-chevron-up"></span>back to top
</div>
</div>
<!-- end col -->
<div class="col-sm-12 text-center visible-xs">
<div class="pad-bottom-md pad-top-sm">Products | Services | News | Jobs | Company
</div>
</div>
<!-- end col -->
<div class="col-sm-4">
<h6>Company Name</h6>
<address>
Address 1<br>
Address 2<br>
Address 3<br>
<span>555-555-5555</span>
</address>
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4 pad-bottom-md">
<h6>Connect</h6>
<div class="social"> <span class="mu-icon-twitter"></span> <span class="mu-icon-linkedin2"></span> <span class="mu-icon-youtube"></span>
</div>
<!-- end social -->
</div>
<div class="col-sm-12 pad-bottom-md">
<div class="copy">© 2016 Company Name, LLC. <span style="white-space:nowrap;">Privacy | Terms | Disclaimer</span>
</div>
</div>
</footer>
</div>
<!-- end container -->
</div>
<!-- end container-fluid -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/vendor/jquery.min.js"><\/script>')
</script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script-prototype-only.js"></script>
</body>
</html>
JS
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top'); // bugger!!!
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
}
} else {
// some more stuff
}
}
});
<div class="container-fluid block">
You have to add padding-top to this div equal to the height of your subnav element when the subnav is fixed.
For example if your subnav has 50px height your code may look like this:
$(window).scroll(function () {
if ($(window).width() < mobileStart) {
$('.subnav').removeClass('navbar-fixed-top');
} else {
if ($(window).scrollTop() > navFixStart) {
$('nav').addClass('navbar-fixed-top');
if ($(window).scrollTop() > subFixStart) {
$('.subnav').addClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '50px');
} else if ($(window).scrollTop() <= subFixStart) {
$('.subnav').removeClass('navbar-fixed-top');
$('.container-fluid.block').css('padding-top', '0');
}
} else {
// some more stuff
}
}
});
If your block with form already has padding-top (for example 20px) you have to add 50px to it (so in javascript change 50px to 70px and 0 to 20px)
Can someone explain why my Responsive Carousel isn't working?
Here's my demo: https://jsfiddle.net/9b9mt0ts/
// When the DOM is ready, run this function
$(document).ready(function() {
//Set the carousel options
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* Previous button */
#quote-carousel .carousel-control.left
{
left: -12px;
}
/* Next button */
#quote-carousel .carousel-control.right
{
right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li
{
background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active
{
background: #333333;
}
#quote-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
#media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class='col-md-offset-2 col-md-8 text-center'>
<h2>Responsive Quote Carousel BS3</h2>
</div>
</div>
<div class='row'>
<div class='col-md-offset-2 col-md-8'>
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
<li data-target="#quote-carousel" data-slide-to="1"></li>
<li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="http://www.reactiongifs.com/r/overbite.gif" style="width: 100px;height:100px;">
<!--<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">-->
</div>
<div class="col-sm-9">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
Here the console error.
Mixed Content:
The page at 'https://fiddle.jshell.net/9b9mt0ts/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/jquery-1.10.2.min.js'. This request has been blocked; the content must be served over HTTPS.
Solution: Access with "http" instead "https"
Codepen doesn't show an error.
Please add the Carousel js file in header.
http://sorgalla.com/jcarousel/dist/jquery.jcarousel.min.js
Also check http protocol. If your site is not in https, then use all external link as http
So I'm trying to implement something like this:
http://bootsnipp.com/snippets/featured/carousel-static-headline-caption
Where there is text with a carousel as a background. currently when I scroll through my carousel the text scrolls as well. Here's the carousel code I'm working with.
HTML:
<!-- 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('image');"></div>
<div class="carousel-caption">
<h1>Text that I would like to stay</h1>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('image');"></div>
<div class="carousel-caption">
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('image');"></div>
<div class="carousel-caption">
</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>
CSS:
html,
body {
height: 100%;
}
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
.carousel-caption {
padding-bottom: 475px;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 0.9;
top: 50px
}
footer {
margin: 50px 0;
}
body {
width: 100%;
height: 100%;
}
html {
width: 100%;
height: 100%;
}
#media(min-width:767px) {
.navbar {
opacity: 0.6;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}.intro-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.about-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
.services-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #fff;
}
.contact-section {
height: 100%;
padding-top: 150px;
text-align: center;
background: #eee;
}
Your HTML should be something like this
HTML
<div class="col-md-12">
<div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
<ol class="carousel-indicators">
<li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
<li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
<li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img alt="First slide" src="http://placehold.it/1200x500/3498db/2980b9">
<div class="carousel-caption">
<h3>
First slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item active">
<img alt="Second slide" src="http://placehold.it/1200x500/9b59b6/8e44ad">
<div class="carousel-caption">
<h3>
Second slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="item">
<img alt="Third slide" src="http://placehold.it/1200x500/34495e/2c3e50">
<div class="carousel-caption">
<h3>
Third slide</h3>
<p>
Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
</div>
<a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
<span class="glyphicon glyphicon-chevron-left"></span></a><a data-slide="next" href="#carousel-example-generic" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right">
</span></a>
</div>
<div class="main-text hidden-xs">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
LoginRegistration</div>
</div>
</div>
</div>
CSS code For main content
CSS
.main-text {
color: #fff;
position: absolute;
top: 50px;
width: 96.6667%;
}
Although the link in the question provides a nice solution if we want a fixed text and also scrolling text at the same time, in most cases we only need either fixed or scrolling. Making the text fixed in Bootstrap is as simple as taking the <div class="carousel-caption"> outside the <div class="item"> and placing it directly under the <div class="carousel-inner">. No need for any additional CSS or HTML. Example:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.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"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
</div>
<div class="item">
<img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
</div>
<div class="item">
<img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
</div>
<div class="carousel-caption">
<h3>Static Headline And Content</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>
The carousel is designed so we place scrolling content inside <div class="item"> and fixed content directly inside <div class="carousel-inner">. We can provide both, but they will overlap each other and we need additional CSS to move them apart. But most cases don't need both at the same time.
All you have to do is add this html after the carousel code
<div class="main-text">
<div class="col-md-12 text-center">
<h1>
Static Headline And Content</h1>
<h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<div class="">
<a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet.com/">Login</a><a class="btn btn-clear btn-sm btn-min-block"
href="http://www.jquery2dotnet.com/">Registration</a></div>
</div>
</div>
An add this css
.main-text {
position: absolute;
top: 50px;
width: 96.66666666666666%;
color: #FFF;
}
(Demo)