I am looking for a better solution to sticky bar issue.
The '-----' between 2nd & 3rd box is a threshold from where the sticky bar should get display. When its displayed, it overlaps the 3rd box completely.
In the real solution, I have added css (margin-top) using jquery to push this element below; but the problem is it's lagging in Firefox. One can see this space for fractions of seconds on UI.
What is the best solution to achieve the output ( or avoid margin-top) ?
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
position: sticky;
top: 20px;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='sticky'>
</div>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
UPDATED ANSWER
I think you need to keep your sticky div in the normal flow, and position: sticky is probably not the right choice here. Here is an example :
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});
.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 100px;
border: 1px dotted green;
margin: 20px 0;
top: 40px;
display: none;
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='sticky'>
</div>
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>
A nice document about CSS flow : http://marksheet.io/css-the-flow.html
position: sticky is not detailed there, but from this document, you'll see that a sticky element is positioned relatively to its containing element when it's visible, and becomes fixed (that is, it is taken out of the normal document flow) when its containing element is not visible :
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.
Hope this helps!
This is due to position: sticky. Using position: fixed alternatively will help you.
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
top: 20px;
background: green;
position: fixed;
width: calc(100% - 40px); /* subtract the 20px taken by the left and right margins */
}
Related
I am having the following div structure in a part of my site. There are two divs one below another. The first div is divided into two elements. One div (63%) and a button.
Below this, there is another div which is having same 63% as width and position as absolute.
Having the position as absolute not resulting in the two divs with the same width in the same size.
A part of CSS code
#two{
border: 1px solid;
width: 63%;
position: absolute; //Enabling this resulting in varying size even width is same
}
This is my code pen link, https://codepen.io/JGSpark/pen/bZyvEV?editors=1100
I would like to have two divs in the same size as the position absolute. Is there something I can try out here?
When you add position: absolute not relative to any element it is positioned relative to the root element.
A 63% textValue is 63% of #one element but 63% of #two is 63% of the document which includes the default body margin. So reset this to zero:
body {
margin: 0; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
Or you can add a wrapper to the element which has position: relative - see demo below:
.wrapper {
position: relative; /* added */
}
#template {
width: 30%;
}
#textValue {
border: 1px solid red;
width: 63%;
float: left;
}
#icon {
width: 5%;
}
#text {
width: 95%;
float: left;
}
#one {
width: 100%;
}
#two {
border: 1px solid;
width: 63%;
position: absolute;
}
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon "><i class="fa fa-angle-up "></i></span></div>
<button id="template" class="btn primary ">Template</button>
</div>
<div id="two">TWO</div>
</div>
We able to add parent div with position:relative. Or Just add position:relative to body tag.
<div style="position: relative;">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
Position absolute need to be relative to something, in this case it is relative to the document which has default margin and padding. Try this:
<div class="wrapper">
<div id="one" class="row">
<div id="textValue"><span id="text">ONE Inner text</span><span id="icon"><i
class="fa fa-angle-up"></i></span></div>
<button id="template" class="btn primary">Template</button>
</div>
<div id="two">TWO</div>
</div>
in css add:
.wrapper {
position:relative;
}
In your case the #textValue that is inside #one is 63% that is 63% of #one div.
where as the #two div is given absolute without giving a parent element position relative so it is taking relative to body element that is comparatively bigger than the #one div so
you able to see the difference even though you have given a same width.
I have news section and on the left side of it there is one big div (main-article) on the right side some (4) small divs (sub articles). I need to make them equal dynamically (both sides should be visually equal):
I tried to make by jQuery and I partially achieved it, but with a really big bug. If the left side is too small, the right side articles will be too small and their text will overflow the containers:
Here is the HTML:
<div class="row">
<div class="col-md-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="row">
<!-- this four times -->
<div class="col-lg-6">
<article class="article-main_pg main-article article-main_pg--1">
<!-- image and text -->
</article>
</div>
<!-- this four times end -->
</div>
</div>
</div>
My jQuery attempts
// news section fix height
// get left news article height (without margin)
var leftArtHeight = $('.s10-news .main-article').outerHeight(false);
// reduce it by half and decrease by right side subarticles margin then add half of the margin (as we need to remember about 2 bottom subarticles margin)
// 25 is the margin (i know it, but ofcourse it can be set from DOM)
var heightForRightSubArt = (leftArtHeight / 2) - 25 + 13;
//finaly we set calculated height to the right subarticles and both sides are equal
$('.s10-news .sub-article').css("height" , heightForRightSubArt);
The result is ok BUT it's not responsive and it's a bug if the left side is too small.
try this, this may help to you.if this is not the case tell me.copy,paste , run and check is this what you want.
<!DOCTYPE html>
<html>
<head>
<title>hover</title>
<style type="text/css">
body{
margin:0;
padding:0;
width: 100%;
height: 100%;
}
div.main{
width: 98%;
margin: 1%;
margin-top: 5%;
border:1px solid red;
height: 600px;
}
div.main div{
float: left;
}
div.mainone{
width: 45%;
height: 90%;
border:1px solid orange;
margin: 2.5%;
}
div.maintwo{
height: 90%;
width: 45%;
border:1px solid green;
margin: 2%;
margin-top: 2.5%;
}
div.maintwo div{
width: 40%;
height: 40%;
border: 1px solid blue;
margin: 4.5%;
}
div.description{
width: 100%;
height: 59%;
background-color: pink;
}
</style>
</head>
<body>
<div class="main">
<div class="mainone">
<img src="" style="width:100%;height:40%;box-shadow:1px 2px 1px black;">
<div class="description"></div>
</div>
<div class="maintwo">
<div class="subone"></div>
<div class="subtwo"></div>
<div class="subthree"></div>
<div class="subfour"></div>
</div>
</div>
</body>
</html>
I am trying to use links to scroll the content within a div.
HTML is here:
<header>
<div class="wrapper">
<img src="/img/header.jpg" alt="Ace Land Surveying">
</div>
<nav>
<div class="wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Types of Surveys</li>
<li>About Us</li>
<li>Links</li>
<li>Request a Survey</li>
<li>Past Projects</li>
<li>Contact</li>
<li>SOQ</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper">
<div class="content">
<div class="column left">
<ul class="survey-type-list">
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
<li><h2>CLICK HERE</h2></li>
</ul>
</div>
<div class="column right" id="survey-column">
<div class="survey-type" id="type1">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type2">
<p> ... long text ... </p>
</div>
<div class="survey-type" id="type3">
<p> ... long text ... </p>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-top">
<div class="wrapper"></div>
</div>
</footer>
and the CSS:
header {
float: left;
width: 100%;
height: 200px;
}
.wrapper {
width: 90%;
margin: auto;
}
.content {
float: left;
width: 100%;
padding: 20px;
background: #02274b;
}
.column {
min-height: 500px;
padding: 20px;
border-radius: 20px;
color: #fff;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), transparent);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), transparent);
}
.column.left {
float: left;
width: 20%;
}
.column.right {
float: right;
width: 60%;
}
.survey-type-list li {
margin: 0 0 4px 0;
list-style: none;
}
.survey-type-list h2 {
font-size: 13px;
}
#survey-column {
overflow: hidden;
height: 460px;
}
.survey-type {
float: left;
width: 100%;
height: 460px;
}
The problem is that the entire page moves with the content inside the div.
Here is a fiddle:
http://jsfiddle.net/q8a1s5wj/8/
I tried several other threads here but none could solve my problem.
How can I prevent the whole page from scrolling and just scroll inside the right column with my anchor links?
I want to be able to click the link in the left column and see the right column scroll but not the move the entire page.
Fiddle
Some minor adaptations to the CSS - not doing this gave the wrong element offset :
#survey-column {
position: relative;
}
This one's just so the last div can scroll to the top completely :
.survey-type {
height: 520px;
}
And a bit of script to make it work :
$(function() {
$('.column.left a').click(function() {
var goal = $(this.hash).position().top-20,
aim = goal+$('#survey-column').scrollTop();
$('#survey-column').scrollTop(aim);
return false;
});
});
The 20 pixels deduction of goal is just done to keep the same top padding as was started with...
you can add position as fixed on top div element, i have checked your code on jsfiddle and added position style attribute in wrapper div element
<div class="wrapper" style="position:fixed; margin-top:10px">
just add this
.stop-scrolling {
height: 100%;
overflow: hidden;
}
this class to your body tag.
Reference: How to disable scrolling temporarily?
Updated Fiddle: http://jsfiddle.net/q8a1s5wj/2/
i have a little css problem. i've got a div whit an input in it that will stick to the top of the page when page is scrolled down. it works great except images from the page get over it and it looks awfull. i need to make it "on top" of the other content if i can. or at least have an overflow of some sort that will push the scroll just from it, if that makes any sense.
i have to say my css skills are below avarage. here's what ive got so far
HTML:
<div class="searchbox" id="sticky" style="width:60%; padding-left:20%; background-color:white; padding-top:5px; margin-bottom:25px; padding-right:20%; height:35px;">
<form method="get">
<input style="width:80%;" name="title" placeholder="Search..." type="search">
</form>
</div>
the searchbox is not initially on the top of the page so to make it stick when it gets there i have this javascript that adds / removes position fixed
Javascript:
<script>
var header = document.querySelector('.searchbox');
var origOffsetY = header.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? header.classList.add('sticky') :
header.classList.remove('sticky');
}
document.addEventListener('scroll', onScroll);
</script>
CSS:
<style>
.sticky {
position: fixed;
top: 0;
}
</style>
If somethign else jumps on top of your content, use
css z-index to order things according to how you would like.
_ quick edit for potential future visitors_
hover slides to bring the slide under the mouse on top of others.
fiddle: Fiddle demo
Html
<div id="slides">
<div id="obj1">obj 1</div>
<div id="obj2">obj 2</div>
<div id="obj3">obj 3</div>
</div>
Css:
#slides {
position: relative
font-size: 20px;
}
#slides > div {
border: 1px solid gray;
min-height: 3em;
position: absolute;
top: 1em;
background: green;
cursor: pointer;
text-align: center;
min-width: 4em;
}
#slides > div#obj2 {
top: 2em;
background: red;
left: 2em;
}
#slides > div#obj3 {
top: 3em;
background: blue;
left: 4em;
}
JavaScript:
$("#slides > div").mouseover(function(evt) {
$("#slides > div").css("z-index", "inherit");
$(evt.target).css("z-index", 4);
});
I would like to be able to add an animation to this simple query for when the div is transitioned to its new position.
<div class="container">
<div class="left-side-bar">
<div class="long blue" id="1">
1
</div>
<div class="short red" id="2">
2
</div>
</div>
<div class='middle-side-bar'>
<div class='long green' id="3">
3
</div>
</div>
<div class='right-side-bar'>
<div class='short yellow' id="4">
4
</div>
</div>
</div>
the CSS
.left-side-bar{
clear: both;
width: 32%;
text-align: center;
float: left;
margin-top: 1%;
margin-bottom: 100px;
}
.middle-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.right-side-bar{
width: 32%;
text-align: center;
float: left;
margin: 1% 0 1% 1.6%;
}
.green {
background-color: green;
}
.long {
height: 300px;
}
.short {
height: 200px;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
Basically I want the div to be moved to its new place as an animated transition, rather than have it simply appear.
here is the jsfiddle
DEMO
Unfortunately, the replaceWith method does not work with animate in jQuery. Instead, you will probably need to find an alternative method to your solution. Here's one that slowly transitions the red box on top of the yellow box... http://jsfiddle.net/aeyg89rd/4/
I added the following jQuery, note that I used offset() to get the left and top properties of the yellow box, then I moved the red box to those left and top positions using animate() :
$(document).ready(function () {
var num4 = $("#4").offset();
$("#2").animate({ top: num4.top, left: num4.left }, 1000);
});
And I changed some CSS attributes for .red class so that I can move it around with the jQuery code above. More specifically, I changed its position to absolute, and gave it a width dimension:
.red {
position: absolute;
top: 320px;
background-color: red;
width: 150px;
}