Bootstrap - Floating div's fixed top div is not working - javascript

I want to keep the sticky header to remain at the top of my #main div.
Here is my js fiddle link. Even in responsive mode. I tried below code but its not working.
#import "bootstrap-sprockets";
#import "bootstrap";
#import "font-awesome";
#import "navbar";
body,
html {
height: 100%;
overflow: hidden;
position: relative;
}
body {
padding: 10px;
}
.row-offcanvas {
height: 100%;
padding: 5% 0px 5% 0px;
}
#sidebar {
width: inherit;
min-width: 220px;
max-width: 220px;
background-color: black;
float: left;
height: 100%;
position: relative;
overflow: hidden;
}
#main {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
background-color: white;
}
#sticky {
background-color: green;
}
/*
* off Canvas sidebar
* --------------------------------------------------
*/
#media screen and (max-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
width: calc(100% + 230px);
margin-top: 35px;
}
.visible-xs {
padding-top: 10px;
}
.row-offcanvas-left {
left: -230px;
}
.row-offcanvas-left.active {
left: 0;
}
.sidebar-offcanvas {
position: absolute;
top: 0;
}
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" />
<div class="row-offcanvas row-offcanvas-left">
<div id="sidebar" class="sidebar-offcanvas">
<div class="col-md-12">
<h2>
Sidebar
</h2>
</div>
</div>
<div id="main">
<div id="sticky">
sticky header
</div>
<div class="col-md-12">
<p class="visible-xs">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas"><i class="glyphicon glyphicon-chevron-left"></i></button>
</p>
<div class="row">
<h2>
main content
<br/> main content
<br/> main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>main content
<br/>
</h2>
</div>
</div>
</div>
</div>
<!--/row-offcanvas -->
Could anyone help me? Appreciate your help in advance.
Thanks

Add below CSS to id #sticky
position: fixed;
width: 100%;
z-index: 99;

While resizing output window - sticky header width is varying. I want to make that stick with main content.I mean the sticky div must fit along with main div.

Related

Change (and fade in/out) images when hovering over links using a data attribute

I'm trying to recreate a slideshow/carousel effect I've seen on this website (scroll down past the hero banner): https://www.ktm.com
I think the background of the carousel changing once an item is hovered over looks great. This is how far I've gotten:
https://codepen.io/moy/pen/QVvMxo
Looking at the KTM example it seems overly complicated to me, maybe part of some framework? So I've tried to simplify it where I can.
I don't think my example is a million miles away but it needs some refinement. The main issue I'm having is when the 3 items are hovered over, making sure the images fade in/out rather than instantly change. Is that going to be possible with the method I'm using, updating the img src="" using a data-* attribute?
I tried adding in .fadeIn and .delay but it didn't seem to do anything.
Another issue I'm having is when you remove the mouse from the carousel after hovering over the items the text seems to flicker. It looks like it's to do with the img opacity changing as when I remove that it doesn't happen - but I haven't gotten to the bottom of that yet, so any pointers will be greatly appreciated.
Thanks!
$(".carousel__item").hover(function() { // Changes the .image-holder's img src to the src defined in .list a's data attribute.
var value = $(this).attr('data-src');
$(".carousel__bg img").attr("src", value);
});
.carousel {
background: #222;
border: 1px solid white;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 100%;
max-width: 1200px;
}
.carousel__bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.carousel__bg img {
-o-object-fit: cover;
object-fit: cover;
height: 100%;
width: 100%;
}
.carousel__item {
border: 1px solid white;
box-sizing: border-box;
float: left;
position: relative;
width: 33.33333%;
}
.carousel__content {
box-sizing: border-box;
color: #fff;
height: 100%;
padding: 15px;
position: absolute;
top: 0;
left: 0;
width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel__title {
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__subtitle {
display: none;
-webkit-backface-visibility: hidden;
}
.carousel__btn {
background: #fff;
color: #222;
display: block;
opacity: 0;
position: absolute;
padding: 15px 30px;
bottom: 15px;
left: 15px;
right: 15px;
text-align: center;
text-decoration: none;
transition: all .25s;
-webkit-backface-visibility: hidden;
}
.carousel__image {
display: block;
opacity: 1;
transition: all .25s;
width: 100%;
max-width: 100%;
-webkit-backface-visibility: hidden;
}
.carousel:hover .carousel__title {
opacity: .25;
}
.carousel:hover .carousel__image {
opacity: 0;
}
.carousel:hover .carousel__item:hover .carousel__title {
opacity: 1;
}
.carousel:hover .carousel__item:hover .carousel__flag {
display: none;
}
.carousel:hover .carousel__item:hover .carousel__subtitle {
display: block;
}
.carousel:hover .carousel__item:hover .carousel__btn {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div class="carousel__bg">
<img src="https://fillmurray.com/800/300">
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/500">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #1</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/400">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #2</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
<div class="carousel__item" data-src="https://fillmurray.com/800/300">
<div class="carousel__content">
<h2 class="carousel__title">Product Name #3</h2>
<span class="carousel__flag">Featured</span>
<h2 class="carousel__subtitle">Longer, catchy, impactful statement</h2>
Find Out More
</div>
<img src="https://fillmurray.com/250/400" class="carousel__image" />
</div>
</div>
Create those images with style="display: none" instead of replacing the image source. Then you can use jquery $(".carousel__item").hover( showImage, hideImage ) to achieve your goal.
$(image).show() and $(image).hide() should be enough for what you want

collapsible sidebar.....want to fix the header and footer part of sidebar

On my web page sidebar appears when clicked upon a particular icon.In the sidebar-footer there is a text box whose input runs on a particular php page and output gets printed on sidebar-main. I want to fix the sidebar-header and sidebar-footer relative to sidebar (i.e., when sidebar is active).Only sidebar-main should scroll when content grows. As of now whole sidebar scrolls. Thank you in advance!
#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;
<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>
You may need to simplify your code to avoid including elements that are not part of the question (like the sidebar's "active" class), as your snippet doesn't actually show anything. Also using a relative path for an image on a snippet doesn't really work.
On the other hand, it is not clear if your sidebar's header and footer are meant to be fixed height or not (or the whole sidebar). In the first case, it can be handled with CSS alone as seen in this snippet.
You may want to add a container for your menu and set a fixed height for that container (screen size - header height - footer height).
HTML
<nav id="sidebar">
<div class="sidebar-header">
<!-- Header content -->
</div>
<div class="sidebar-menu">
<div class="menu-container">
<!-- Menu content -->
</div>
</div>
<div class="sidebar-footer">
<!-- Footer content -->
</div>
</nav>
CSS
#sidebar {
width:350px;
position:fixed;
left:0;
top:0;
height:100vh;
}
.sidebar-header {
height:100px;
position:relative; /* doesn't need to be absolute */
width:100%
}
.sidebar-footer {
height:100px;
position:absolute; /* the footer goes to the bottom */
bottom:0;
left:0;
width:100%
}
.menu-container {
height: calc(100vh - 200px); /* screen height - header height - footer height */
overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}
If you want automatic heights for the footer or header of the sidebar (which I don't recommend), then you should set the sidebar's header and footer height from javascript and then calculate the menu container's height and set it from code.

How do I fix position a div inside a statically positioned div?

My question is about placing a div with position: fixed inside of a div with position: static.
I have a few websites where I fix the header to the top of the window. I also have a parallax effect. I used javascript to allow me to add a class to the header so that it shrinks and changes the opacity on scrolling.
Here's the javascript, layout, and CSS:
$(function () {
$("#Page").scroll(function () {
if ($("#Page").scrollTop() > 0)
$("#header").addClass("scrolled");
else
$("#header").removeClass("scrolled");
});
});
<div id="Page">
<div id="pre-header"></div>
<header id="header" class="">
<div class="page-width">
<div class="logo"></div>
<nav class="navigation-bar"> </nav>
</div>
</header>
</div>
#Page {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 100mm;
perspective-origin: top right;
position: static;
}
#header {
padding-top: 34px;
padding-bottom: 34px;
background-color: rgba(255, 255, 255, 0.2);
height: 110px;
position: fixed;
width: 100%;
margin-top: 36px;
z-index: 1;
pointer-events: none;
transition: background .8s;
}
My problem is that I need the header to still float at the top, even after Page has been scrolled.
Thanks for your help.

Children element not stretch parent container with fixed height

for some reason my child elements don't stretch to the main section which has a fixed height of 1000px.
I need to be able to have a fixed height off 1000px and max-width of 1000px. There's also a space between two divs. I need it to be more fluid and stretchy. Could anyone explain what is happening please? Thanks
body {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.container {
min-height: 100%;
text-align: center;
background: green;
}
.main {
height: 1000px;
position: relative;
display: block;
}
.contain {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.top, .bottom {
z-index: 1;
top: 0;
bottom: 0;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
}
.top img {
background-color: red;
height: 379px;
width: 100%
}
.bottom {
background-color: yellow;
height: 379px;
width: 100%;
}
<div class="container">
<section class="main">
<div class="contain">
<div class="top">
<img class="img">
</div>
<div class="bottom">
<div class="content">
<h1>
eoufiwueg
</h1>
<p>
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
difhewiuhfiuwehfiuhweuifhweiuhfuiewhfiuhweiufhewiuhfuiwehfiuhweiufhiweuhfiuhewiufhweiuhfiuwehfiuhweiufhiuwehfiuwehfiuhweiufhewfiuhweifuhweiufhiuwehfiuwehfiuwehfiuwhefiuhweiufhwiuehfiuwehfiuwehfiuhweiufhweiufhewuhfiuwehfiuwehiufhewiufhiweuhf
</p>
</div>
</div>
</div>
</section>
</div>
add this css
.container {
min-height: 100%;
text-align: center;
word-wrap: break-word;/*add this property*/
background: green;
}

How to show text in image hover

I have a few tumbnails that I want to show some text on them in hover. I could make them dark in hover but do not know how to add text.
example: http://www.lenzflare.com/video-production-portfolio/
Here is what I have done:
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a:hover .play {
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -110px;
margin-top: -150px;
}
<a href="/">
<div class="play"></div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
<br />
</a>
Demo: http://jsfiddle.net/jmXdh/79/
Well I'm going to assume you want this in a list:
There are a few main concepts here: Relative positioning and how it works with absolute positioning, Source order, and your centering technique.
When giving position:relative; to the box, you are saying "I am the boundary now - for any absolutely positioned things within me" (unless they are relative, and then like that on down the line) - So, the absolutely positioned cover thing you want to fade in - is absolutely positioned to one or more edges of the relative box. (most people use top: 0; left: 0;) --- so the absolute box is no longer in the "flow" and lives in it's own magic world determined by the relative parent.
Source order: your html will appear bottom up when stacking. so your cover thing should be below the image (in the html order) - you could use z-index - but there is no need to do that.
The negative margins are not really awesome and unneeded here. You can just text align center them. I would do some tests and put borders around stuff so you can see what it actually happening. ALSO - I encourage you to use box-sizing: border-box; on everything...
Read about: Border box
HTML
<ul class="thumbnail-list">
<li>
<a href="#" class="image-w">
<img alt="thumbnail"
src="http://placekitten.com/600/300" />
<div class="cover">
<h3>Title</h3>
<p>A little bit more about the thing</p>
</div>
</a>
</li>
</ul> <!-- .thumbnail-list -->
CSS
.thumbnail-list {
list-style: none;
margin: 0; paddingn: 0;
}
.thumbnail-list li {
float: left;
}
a {
text-decoration: none;
color: inherit;
}
.thumbnail-list .image-w {
display: block;
position: relative;
width: 16em;
}
.image-w img {
display: block;
width: 100%;
height: auto;
}
.cover {
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 100%;
height: 100%;
color: rgba(255,255,255,0);
text-align: center;
transition: all 1s linear;
}
.cover:hover {
background-color: rgba(0,0,0,.8);
color: rgba(255,255,255,1);
transition: all .2s linear;
}
.thumbnail-list h3 {
font-size: 1.2em;
}
.thumbnail-list p {
font-size: .9em;
}
Here is the code in action on jsfiddle
you could consider something like this fiddle.
I copy my code here:
=================
HTML
<a href="/" class="img"
style="background-image:url('http://i42.tinypic.com/2v9zuc1.jpg');"
onmouseover="this.firstElementChild.style.display='block'" >
<span class='play' onmouseout="this.style.display = 'none'";>
my lovely text here
<span>
</a>
=================
CSS
a {
min-height:104px;
min-width:184px;
display: inline-block;
overflow: hidden;
position: relative;
}
.play{
display:none;
color:#fff;
height:104px;
width:184px;
background-color:rgba(0,0,0,0.5);
position: absolute;
}
It sounds like you want to have a tooltip, if so then add a title to the a href:
<a href="/" title="This is my text" >
You could also use the tooltip in jQuery UI.
Otherwise, you could use the javascript onmouseover or the jQuery hover / mouseenter events to show the text in the play div. You may need to make sure that the z-index of the play div is higher than the img.
This works:
.pic{
background: url(http://i42.tinypic.com/2v9zuc1.jpg);
width: 200px;
height: 100px;
}
.text{
background: black;
text-align: center;
color: white;
opacity: 0;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.6s;
-moz-transition: opacity 0.6s;
transition: opacity 0.6s;
}
.text:hover{
opacity: 0.8;
}
<div class="pic">
<div class="text">My Text</div>
</div>
DEMO
Add some text content to the play element.
<div class="play">Some text</div>
With added css for .play:
color:#fff;
font-size:16px;
Try this: http://jsfiddle.net/JU7zm/
<a href="/">
<div class="play">text</div>
<img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
</a>
a {
display: inline-block;
overflow: hidden;
position: relative;
}
a .play {
display: none;
background:url(http://goo.gl/yJqCOR) no-repeat center center;
opacity: 0.8;
position: absolute;
width: 184px;
height: 104px;
color: #fff;
}
a:hover .play { display: block; }
Here's a simple JS solution you can insert into your HTML:
<script type="text/javascript">
document.getElementById("your_image_id").title = 'your hover text';
</script>

Categories