when it's clicked to smoothly scroll to next div
and Divs that take 100% height
but
I want to scroll to the next div instead of the "next" button
who can help me to edit this code?
pleas help guys to make my web site
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top
},
'slow');
});
body {
margin: 0;
height: 100%;
}
.p1 {
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2 {
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3 {
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>
I think CSS's Scroll Snap feature can help you;
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap/Basic_concepts
https://caniuse.com/?search=scroll-snap
$(".next").click(function() {
$('html,body').animate({
scrollTop: $(".p2").offset().top
},
'slow');
});
body {
margin: 0;
}
.container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
div[class*=p] {
scroll-snap-align: start;
}
.p1 {
height: 100vh;
width: 70%;
background-color: #2196F3;
}
.p2 {
height: 100vh;
width: 70%;
background-color: #E91E63;
}
.p3 {
height: 100vh;
width: 70%;
background-color: #01579B;
}
.admin {
background-color: #B71C1C;
height: 100vh;
position: fixed;
right: 0%;
top: 0%;
width: 30%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="p1">
</div>
<div class="p2">
</div>
<div class="p3">
</div>
<div class="admin">
<button class="next">NEXT</button>
</div>
</div>
I am trying to have a vertical line for a news feed and i am looking for a solution to make its height equal to the screen when scrollbar reach bottom of the screen dynamically as items in the news feed will be loaded dynamically on scroll.
I tried using 100vh and 100% but then height is fixed to the height of the viewport.
Here is the div :
<div class="verticalLineFeed">
</div>
CSS for the div :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
margin-top: 65px;
}
Any idea for doing this in css3 or jquery will be helpful
Code Snippet :
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
Use a wrapper and set it to position: relative
.wrapper {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="wrapper">
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
</div>
Or set position: relative to the body (haven't tested this on all browsers though)
body {
position: relative;
}
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
I have got a way to do this
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
Code Snippet :
$(document).ready(function() {
function setHeight() {
windowHeight = $('.main').innerHeight();
$('.verticalLineFeed').css('height', windowHeight);
};
setHeight();
$('.main').resize(function() {
setHeight();
});
});
.verticalLineFeed {
width: 2px;
height: 100%;
border-left: 5px solid #cdcdcd;
position: absolute;
margin-left: 32px;
}
.main {
width: 100%;
height: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="verticalLineFeed">
</div>
<div class="main">
</div>
So I can't figure this out.
I'm trying to get a red vertical box to display in middle of page. I've set the div's margin to auto.
And then there's another div that holds a centered text.
Setting margin auto on both.
They are both stacking on top of eachother fine in middle of page.
However I want it to be responsive to all heights. Right now it's just responsive to the x-axis and not the height.
HTML & CSS:
.parentDiv {
position: relative;
width: 250px;
height: 450px;
margin: auto;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
#CSText {
position: absolute;
top: 45%;
width: 250px;
color: black;
text-align: center;
}
<div class="parentDiv" style="margin-top: auto;">
<div id="CSText" class="TextAlignCenter">
</div>
<div id="RedBox">
</div>
</div>
flexbox would be a great solution to this:
.container {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.red-box {
background-color: red;
padding: 100px;
color: white;
}
<div class="container">
<div class="red-box">text</div>
</div>
I did this for you.
https://jsfiddle.net/95ssv6q1/
HTML
<div class="parentDiv">
<div class="inner">
<div id="RedBox">
</div>
</div>
</div>
CSS
.parentDiv {
display:table;
width: 100%;
height: 100%;
position: absolute;
}
.inner{
display: table-cell;
vertical-align:middle;
}
#RedBox {
width: 250px;
height: 450px;
background-color: #FF0000;
margin: auto;
}
I asked same question 2 days ago but now i still don't get it.
I have 1 div and i want it to be separate into 3 columns of div. I know how to do this for 2 column but, when i am trying 3 column(right, center and left) i get this:
Problem: The pink square is not in the center
Here is my code:
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
CSS:
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: right;
margin: 5px;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: right;
margin: 5px;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 5px;
}
Try with display:inline-block; instead.
exemple
#our_services {
/*height: 450px;*/
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 30%;
height: 75%;
background-color: green;
float: left;
margin: 1.5%;
}
#product2 {
width: 30%;
height: 75%;
background-color: pink;
float: left;
margin: 1.5%;
}
#product3 {
width: 30%;
height: 75%;
background-color: blue;
float: left;
margin: 1.5%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
afs
</div>
<div id="product2">
asf
</div>
<div id="product3">
asf
</div>
</div>
</div>
You had float right as well on one of the boxes
use float left to 1st and 2nd div also. and give margin on percentage. I think this will solve your problem.
I don't know of any way you can do this purely with html/css techniques. You can arrange the items with javascript after the dom (or this part at least) has loaded.
On the other hand, this gets you a little closer to what you want, although the distances between rows won't be equal to the distances between firs/last row and beginning/end of the orange rectangle:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div class="smth">
<div id="product1" class="product">
</div>
</div>
<div class="smth">
<div id="product2" class="product">
</div>
</div>
<div class="smth">
<div id="product3" class="product">
</div>
</div>
</div>
<style>
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
overflow: auto;
margin: auto;
}
.smth {
width: 33%;
height: 75%;
float: left;
}
#try{
background-color:orange;
width:50%;
height:50%;
margin:auto;
}
.product {
width: 90%;
height: 100%;
margin: auto;
}
#product1{
background-color:green;
}
#product2{
background-color:pink;
}
#product3{
background-color:blue;
}
</style>
</div>
As far as I understand:
If you don't want any spaces between you'd have to set the width property to (100/3)%
It all depends on your layout of what you want, if you want margin spaces between them all so that they're equally spaced between each other and the edges of their container div you'll have to work out what to do there. So in the case now you have 30% width for each, that leaves you with 10% spacing width which you can spread to 2.5% for margin-left: of your first 2 divs and then for the 3rd div use 2.5% for margin-right: (for a space between the right side and the 3rd div) margin-left:
But as I said, it all depends on what exactly you want for your layout, so if this doesn't answer your question could you tell me more about your expected layout?
If you want a very simple fix based off of what you have at the moment you could set the margin: property to auto and that should center the middle div between what you have now.
Edit: You should also edit the float properties so that they all float one way.
Check the example below:
Code:
#our_services {
text-align: center;
font-family: "open_sans_hebrewregular", "alefregular", arial, "Times New Roman";
color: black;
background-color: rgb(224, 224, 224);
overflow: auto;
margin: auto;
}
#try {
background-color: orange;
width: 50%;
height: 50%;
margin: auto;
}
#product1 {
width: 31%;
height: 200px;
background-color: green;
float: left;
margin: 1%;
}
#product2 {
width: 31%;
height: 200px;
background-color: pink;
float: left;
margin: 1%;
}
#product3 {
width: 31%;
height: 200px;
background-color: blue;
float: left;
margin: 1%;
}
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1">
</div>
<div id="product2">
</div>
<div id="product3">
</div>
</div>
</div>
Example
add the following css:
html, body {
width: 100%;
height: 100%;
}
and add the following properties to #our_services css:
width: 100%;
height: 100%;
further set box-sizing: border-box; and margin: 0% 0% 0% 2.5%; (top as you need, right 0%, bottom as you need and left 2.5%) for the prouctu divs. Btw. you should extract common style to a product class and apply the class on the product divs...
One nice solution is to use display:table and display:table-cell. Which will works for 2 and 3 div both.
HTML:
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
<div id="try">
<div id="product1" class="product">
</div>
<div id="product2" class="product">
</div>
<div id="product3" class="product">
</div>
CSS:
#our_services {
background-color: rgb(224, 224, 224);
color: black;
font-family: "open_sans_hebrewregular","alefregular",arial,"Times New Roman";
height: 450px;
margin: auto;
overflow: auto;
text-align: center;
}
#try {
background-color: orange;
display: table;
height: 50%;
margin: auto;
width: 50%;
border-collapse: separate;
border-spacing: 10px;
}
.product{
display: table-cell;
height: 75%;
margin: 5px;
width: 30%;
}
#product1 {
background-color: green;
}
#product2 {
background-color: pink;
}
#product3 {
background-color: blue;
}
Check Fiddle here.
Here is my tricky problem. I'm trying to do this:
http://www.hostingpics.net/viewer.php?id=767312test.gif
(More clear than an explication I think).
My structure :
<header></header>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img1.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img2.png"/></div>
</div>
<div class="section">
<div class="text"></div>
<div class="content"></div>
<div class="img"><img src="img3.png"/></div>
</div>
<footer></footer>
Important informations :
"Header" is fix
"Content" fit to the screen less the height of header
Every "section" are the same but with different content
When the image comes to an end, the "content" div is unfixed.
I am using "section" for implementing a next and previous button in the header (with anchors).
My problem is the scrolling part. I am really lost when I try to fix the "content" div. I don't know how to fix everything except the scroll of the image in the active "img" div when the active "content" div hits the header. (Everyone follows? Look here : http://www.hostingpics.net/viewer.php?id=767312test.gif
For the scrolling part in the "img" div, I was thinking use a sort of "overflow:scroll" but the scrollbar is really awful.
I don't know if it's enough clear. If there is any problem I can complete my problem. I am not very comfortable with complex structures in html with JS.
Thanks for your help!
This is pretty close to what you're asking for (using CSS only).
This relies on the fact that the backgrounds are solid colors. It uses various specifically-defined height properties as well that match some padding properties.
The .top-bar and .bottom-bar elements can probably be changed to pseudo elements if you don't want the extra HTML.
HTML:
<header>Header</header>
<div class="top-bar"></div>
<div class="bottom-bar"></div>
<div class="section">
<div class="text">Section 1 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/100/1000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 2 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/200/2000"/></div>
</div>
</div>
<div class="section">
<div class="text">Section 3 Text</div>
<div class="content">
<div class="img"><img src="http://placekitten.com/300/3000"/></div>
</div>
</div>
<footer>Footer</footer>
CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
z-index: 5;
}
.top-bar {
top: 100px;
}
.bottom-bar {
bottom: 0;
}
footer, .text {
position: relative;
z-index: 6;
}
JSFiddle here.
For an almost completely correct solution, here is one with some jQuery involved.
New CSS:
body {
margin: 0;
padding: 100px 0 0;
}
header {
background-color: red;
height: 100px;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
footer {
background-color: blue;
height: 100px;
}
.section {
min-height: 400px;
}
.text {
background-color: aqua;
height: 50px;
}
.content {
background-color: green;
min-height: 100%;
padding: 40px 0;
position: relative;
}
.img {
background-color: yellow;
min-height: 70%;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 80%;
}
.img > img {
vertical-align: middle;
}
.top-bar, .bottom-bar {
background-color: green;
height: 40px;
position: fixed;
width: 100%;
}
.top-bar {
top: 100px;
z-index: 5;
}
.bottom-bar {
bottom: 0;
z-index: 7;
}
footer, .text {
position: relative;
z-index: 8;
}
.img-fix {
bottom: 40px;
height: 400px;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 6;
}
jQuery:
$(document).ready(function(){
$(".content").each(function(){
$(this).append($(this).html());
$(this).find(".img + .img").wrap("<div class='img-fix'></div>");
});
$(window).resize(function() {
resizeImgFix();
});
resizeImgFix();
});
function resizeImgFix() {
$(".img-fix").height($(window).height() - $("header").height() - $(".top-bar").height() - $(".bottom-bar").height());
$(".img-fix").each(function(){
$(this).scrollTop($(this).prop("scrollHeight"));
});
}
JSFiddle here.
Note: It duplicates the .img element and its children. This could be memory intensive depending. However, it does make it work as intended without any visual lag or artifacts.