Please am trying to create a front page with a sliding image and the text and button on it remain in same position while images slide underneath the text and button..
solution i found online are not helpful
One way to do it is setting the content you want to remain static to fixed. Place all the content inside a wrapper so you dont need to manually position each element.
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
}
.container img{
height: 100%;
width: 100%;
}
.fixed {
width: 100%;
position: fixed;
z-index: 999;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="fixed">
<p class="lead" style="color: white;">Hello! I'm text.</p>
<button class="btn">PRESS</button>
</div>
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
<div class="item">
<img src="https://cdn.stocksnap.io/img-thumbs/960w/ZJSCDFRHOO.jpg" alt="Image" style="width:100%;">
</div>
</div>
</div>
</div>
</body>
</html>
Related
If you look at the behavior of the slider below, when the slides change (it can be by clicking the arrows, the circles, or scrolling), the .active class is applied to the circle in the middle.
If you move to a certain point (if you go to the right, you see the error when you get to the red circle. If you go to the left you see the error in the green circle) you will notice that the active class is not applied correctly, because the library swiperJS creates duplicate slides (you could to see this with the browser's inspector) and they don't behave as expected.
Does anyone know how to make my js apply to duplicate slides as well?
// COLORES
$(".circulo-color").first().addClass("active");
$(".btn-version").first().addClass("active");
$(".circulo-color").on("click", function () {
$(".circulo-color").removeClass("active");
$(this).addClass("active");
let urlImg = $(this).data("img");
let text = $(this).data("text");
let versiones = $(this).data("ver");
$("#auto-color")
.fadeOut(200, function () {
$("#auto-color").attr("src", urlImg);
})
.fadeIn(200);
$("#texto-color")
.fadeOut(200, function () {
$("#texto-color").text(text);
})
.fadeIn(200);
if (versiones != "") {
$("#version-color")
.fadeOut(200, function () {
$("#version-color").text(
"Disponible sólo en las versiones: " + versiones
);
})
.fadeIn(200);
} else {
$("#version-color").html(" ");
}
});
var swiperColores = new Swiper(".swiper-container.colores", {
slideToClickedSlide: true,
loop: true,
centeredSlides: true,
height: 40,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
mousewheel: true,
slidesPerView: 3,
spaceBetween: 1,
on: {
slideChangeTransitionStart: function () {
$(".swiper-slide-active>.circulo-color").click();
},
init: function () {
$(document).on("ready", function () {
$(".swiper-slide-active>.circulo-color").click();
});
}
}
});
.circulo-color {
display: inline-block;
width: 50px;
height: 50px;
border-radius: 50%;
outline: none;
border: 0;
margin-top: 2rem;
margin-right: 0.5rem;
padding: 1rem;
border: 6px solid #e6e5e1 !important;
transition: 0.3s ease all;
}
.circulo-color.active {
box-shadow: 0px 0px 0px 2px #3ec8f0;
}
.swiper-slide{
transform: translate(3.5rem,-1rem)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</head>
<body>
<div class="swiper-container colores">
<div class="swiper-wrapper">
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="1"
data-text="1"
data-ver="1"
style="background-color: red;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="2"
data-text="2"
data-ver="2"
style="background-color: yellow;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="3"
data-text="3"
data-ver="3"
style="background-color: blue;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="4"
data-text="4"
data-ver="4"
style="background-color: teal;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="5"
data-text="5"
data-ver="5"
style="background-color: darkmagenta;"
></button>
</div>
<div class="swiper-slide" style="display: block;">
<button
class="circulo-color"
data-img="6"
data-text="6"
data-ver="6"
style="background-color: darkgreen;"
></button>
</div>
</div>
<div class="arr">
<div class="swiper-button-next"></div>
</div>
<div class="arr2">
<div class="swiper-button-prev"></div>
</div>
</div>
</body>
</html>
I am a newbie to bootstrap world. Is there a way to put watermark using Bootstrap ? If there is please help me out with a sample code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Watermark sample code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Watermark sample code
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
First Line
</div>
<div class="col-lg-12">
Second Line
</div>
<div class="col-lg-12">
Third Line
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You Can Put Watermark in Body Tag or use this code inside div.
Change Opacity As Per Your Requirement From Between 0 to 1
body {
display: block;
position: relative;
height:100%;
width:100%;
}
body::after {
content: "";
background:url(https://www.google.co.in/images/srpr/logo11w.png) no-repeat;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 1;
height:100%;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Watermark sample code</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br>
<div class="panel panel-primary">
<div class="panel-heading">
Watermark sample code
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
First Line
</div>
<div class="col-lg-12">
Second Line
</div>
<div class="col-lg-12">
Third Line
</div>
</div>
</div>
</div>
</div>
</body>
</html>
For some odd reason scrollspy is causing my second list item to be active on page load instead of the first one. It's weird because after I scroll a bit with the mouse it will make the correct list item active. Aside from this error it functions perfectly. If someone could help me out it would be greatly appreciated.
Heres my html:
<!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.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="111">
<header id="home">
<nav class="navbar navbar-default navbar-fixed-top cbp-af-header">
<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>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
Determined Divas
<span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li id="home" class="active">Home</li>
<li>About</li>
<li>Who We Are</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" id="content">
<!-- Home page row -->
<div class="row" id="home">
<div class="fill" style="background-image:url(img/LP/pathways_12.jpg)"></div>
</div>
<!-- About Section -->
<section class="row" id="about">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>About</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Who We Are Section -->
<section class="row" id="whoWeAre">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Who We Are</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Gallery -->
<section class="row" id="gallery">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Gallery</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<!-- Contact-->
<section class="row" id="contact">
<!-- Title -->
<div class="row title-row">
<div class="col-sm-12">
<h1>Contact</h1>
</div>
</div>
<!-- Content -->
<div class="row content-row">
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Scripts to animated the nav -->
<script type="text/javascript" src="js/Animated Header/classie.js"></script>
<script type="text/javascript" src="js/Animated Header/cbpAnimatedHeader.js"></script>
<!-- Smooth Scrolling -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<!-- Script for full screen bg image -->
<script src="js/fillscreen.js"></script>
</body>
</html>
Heres the CSS:
body{
position: relative;
background-color: #FFF2E2;
color: white;
font-family: 'Raleway', sans-serif;
/*Keeps page content under the header, must match navbar height*/
/*padding-top: 75px; */
}
/*NAV STYLING*/
.navbar-default{
height: 76px;
transition: all 0.5s;
-webkit-animation: all 0.5s;
}
.navbar-default .navbar-nav{
font-weight: bold;
}
.navbar-default .navbar-brand {
color: white;
font-size: 2.0em;
font-family: 'Poiret One', cursive;
font-weight: bolder;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #777;
}
.navbar-default {
background-color: #E498AF;
}
/*Controls active nav items*/
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus {
color: #777;
}
/*Animate nav on scroll*/
.cbp-af-header-shrink{
height: 51px;
}
/*Full screen image styles*/
.fill{
background-size: cover;
background-position: center;
}
/*Title Row Styling*/
.title-row{
height: 100px;
color: #777;
background-color: #FFF2E2;
text-align: center;
}
/*Content row styling*/
.content-row{
height: 600px;
background-color: white;
}
that is because you have
<body data-spy="scroll" data-target=".navbar" data-offset="111">
data target of navbar class but you html markup has
<div id="navbar" class="collapse navbar-collapse">
id navbar; switch either one and should work.
bootstrap scrollspy will look for a target then default to a nav if it cant find the target or if a target is not specified. Its also better to put the scrollspy on a div that only contains the navigation
here is a fiddle example
I have a horizontal flexbox with similar several elements inside. Each is wrapped in an to enable tabbing between items. I'm using embedded webkit, so Chrome would be needed to see the effect of what I'm trying to achieve.
I can tab successfully between items, but if an item is too far off to the right of the screen, I would like that item to tab into view. But it doesn't. Example code can be seen here:
http://jsfiddle.net/sRGWS/
Which uses this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<style type="text/css">
.flexbox {
display: -webkit-box;
-webkit-box-orient: horizontal;
margin: 5px;
}
.item{
background-color: rgb(255,0,0);
width: 100px;
height: 100px;
margin: 5px;
}
</style>
</head>
<body>
<div class="flexbox">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
I have a question about the grid system in Bootstrap. I seems to work great, but there are no margins between the "boxes". for example if I have this:
<div class="column">
<div class="span11">
</div>
<div class="span11">
</div>
</div>
This works great. But there is no space between then. So do I assign an "id" and edit it myself though CSS code? Is this the right way to do it? for example:
<div class="column">
<div id="box_1" class="span11">
</div>
<div id="box_2" class="span11">
</div>
</div>
and one more thing, as for borders, colors, do I do the same ?
thanks
First there's no .column in twitter bootstrap but .row
If you want left/right margin use a span10 with offset1
If you want top/bottom margin creat a new .row and apply a class like .show-grid
For borders and colors use classes for generic and ids for specific.
You can create your mockup on jsFiddle like this http://jsfiddle.net/baptme/EHutn/
<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet">
<style>
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 30px;
min-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
<div class="row show-grid">
<div class="span10 offset1">
<p>bla bla bla</p>
</div>
</div>
</div>
</body>
</html>