make the page scroll to put div on top - javascript

I'm building a page where I have some divs with different heights and a text inside them, I'd like to, when I click on div's text, to make the page move so that this div would get at the top of the screen.
I've searched around but what I find is often related to the fixed property, the thing is that I don't want to change the position property of the div, I'd like just the page to scroll automatically so that the div would be on top.
Do you have any advice on where I could start?
Thank you
.container {
width: 100vw;
height: auto;
}
.element {
padding: 50px;
}
#element-1 {
background-color: beige;
height: 500px;
}
#element-2 {
background-color: darkSeaGreen;
height: 200px;
}
#element-3 {
background-color: coral;
color: white;
height: 800px;
}
#element-4 {
background-color: MidnightBlue;
color: white;
height: 300px;
}
<div class="container">
<div class="element" id="element-1">
<h1>Some text</h1>
</div>
<div class="element" id="element-2">
<h1>Some text</h1>
</div>
<div class="element" id="element-3">
<h1>Some text</h1>
</div>
<div class="element" id="element-4">
<h1>Some text</h1>
</div>
</div>

If I correctly understand you, this will help you.
let divs = document.querySelectorAll(".element");
divs.forEach(div => {
div.addEventListener("click", event =>{
let divTop = div.offsetTop;
window.scrollTo(0, divTop);
console.log(divTop + " --- " + window.scrollY);
});
});
.container {
width: 100vw;
height: auto;
}
.element {
padding: 50px;
}
#element-1 {
background-color: beige;
height: 500px;
}
#element-2 {
background-color: darkSeaGreen;
height: 200px;
}
#element-3 {
background-color: coral;
color: white;
height: 800px;
}
#element-4 {
background-color: MidnightBlue;
color: white;
height: 300px;
}
<div class="container">
<div class="element" id="element-1">
<h1>Some text</h1>
</div>
<div class="element" id="element-2">
<h1>Some text</h1>
</div>
<div class="element" id="element-3">
<h1>Some text</h1>
</div>
<div class="element" id="element-4">
<h1>Some text</h1>
</div>
</div>

You would need to implement a function that does this
window.scrollTo(x, 0);
where x is the position of the element. You can get that by using
let x = element.getBoundingClientRect().top;

Related

How to make animation when I hover img tag to show text under him

I need to make animation when I hover img tag to show text under him (must be animate showing text, slowly) but that is not all It must also move other content down when text show and to return when text is gone (when is not hover). Very Important showing text must be animate and going back.
I don't care if it works with jq or css or both just need work. I am a beginner so maybe it is obviously I just don't see it.
HTML:
<div class="first-block"></div>
<div class="secend-block">
<div class="box">
<img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">
<p>asdasdasssssssssssssssssssssss
asdddddddddddddddddddddd
asdaaaadsssssssssssadsadsdasd
adsssssssssssssssssadsadsadsa
</p>
</div>
</div>
<div class="third-block">
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
</div>
CSS:
.first-block{
width: 99%;
height: 100px;
background: #f10000;
}
.secend-block{
width: 99%;
height: auto;
background: #ffffff;
}
.secend-block .box{
width: 200px;
padding-top: 10px;
margin: 0px auto;
}
.secend-block .box p{
display: none;
}
.third-block{
width: 99%;
height: auto;
background: #4400ff;
}
Use .class:hover
Basically, when .image is hovered, we want to change the styles of .text. The CSS query .image:hover + .text selects the .text the element where there is an image that is being hovered right before it.
.image {
width: 250px;
}
.text {
max-height: 0px;
overflow: hidden;
transition: max-height 1s;
}
.image:hover + .text {
max-height: 32px;
}
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>

How to re-create Facebook image modal?

I want to create something almost exactly like the Facebook image modal wherein the image is fixed while a user scrolls through the comments. I am messing with different ways to apply overflow: hidden to one div and overflow: scroll to the other. I even looked into applying it to their parent. Here is the code I've tried:
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>
div.image {
height: 300px;
overflow: hidden;
}
div.text-section {
height: 1000px;
overflow: scroll;
}
div.container {
height: 300px;
}
Plunkr
I supposed a code like this. The blue (image) remains fixed on the left, while you can scroll the green section (comments) on the right
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container { background: red; width: 400px; height: 150px; display: flex; }
#image { background: url("https://i1.adis.ws/i/canon/canon-pro-best-landscape-lenses-1-1140?w=200&aspect=4:3&qlt=70&sm=aspect&fmt=jpg&fmt.options=interlaced&fmt=jpg&fmt.options=interlaced&bg=rgb(255,255,255)"); width: 200px; height: 150px; }
#comments { background: #eee; width: 200px; overflow: scroll; padding: 0 10px 20px 10px; font-family: Verdana; color: black; }
</style>
</head>
<body>
<div id="container">
<div id="image"></div>
<div id="comments">
<h3 style="color: red;">Comments</h3>
<p>Nice!</p>
<p>Good!</p>
<p>Wonderful</p>
<p>Bah...</p>
<p>Strange</p>
<p>Nice again</p>
<p>Amazing</p>
<p>Beautiful</p>
<p>Great</p>
<p>I don’t like it</p>
<p>Yes, nice</p>
<p>Super</p>
<p>Normal</p>
<p>Ok...</p>
<p>Nice</p>
<p>Bah</p>
<p>Great</p>
<p>Nice</p>
<p>I like it</p>
<p>Normal</p>
</div>
</div>
</body>
</html>
I don't have facebook so cant look at the behaviour, but you could put position: sticky; on the image container, that will keep it in place. It also depends on your browser support, like ie11 does not support it, but there are more ways to do this. Let me know if you need a more cross browser solution.
.container {
max-height: 600px;
height: 100%;
overflow: auto;
position: relative;
}
div.image {
height: 300px;
background-color: deepskyblue;
position: sticky;
top: 0;
}
div.text-section {
height: 1000px;
background-color: aqua;
}
<div class="row container border border-primary">
<div class="image col border">
Image
</div>
<div class="text-section col border">
Comments
</div>
</div>

Multiple div's onhover same functionality

Here I have six different div on hover blue color div should appear and by default hidden. I have written code for this but it works only for the first div I merge all div's in a single variable. Can anyone suggest to me what I'm missing here
var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function() {
$(tcpTooltipDiv).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>
As suggested already, I'd go by using pure CSS and the :hover pseudo.
If you really want jQuery for some reason this would be a remake of your code.
Basically (beside adding common classes to your elements [see code below]) you need the $(this) reference of the currently hovered element:
var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');
$tcpTooltip.hide();
$tpCont.hover(function() {
$(this).find($tcpTooltip).toggle();
});
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tcp-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tcp-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tcp-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tcp-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tcp-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tcp-tooltip tpc-tooltip-e"></div>
</div>
</div>
You can achieve this far more effectively with CSS. If you add some common classes to the tp-cont-X and tpc-tooltip-X elements, then you can use the :hover pseudo-selector, like this:
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.tp-cont:hover .tpc-tooltip {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tpc-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tpc-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tpc-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tpc-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tpc-tooltip tpc-tooltip-e"></div>
</div>
</div>
Try using index inside hover.
var tcpTooltip = $('.tp-cont-tech, .tp-cont-b, .tp-cont-m, .tp-cont-t, .tp-cont-i, .tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, .tpc-tooltip-b, .tpc-tooltip-m, .tpc-tooltip-t, .tpc-tooltip-i, .tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function(index, item) {
$(tcpTooltipDiv).eq($(this).index()).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

Resize divs related to parent divs with jQuery

So I have 4 divs. I want to change the size of the inner divs compared to parent divs.
I want to dynamically change the child div size related to parent's one.
Now I've added .top class, but I don't really know if its needed or if it will be useful.
Here is the fiddle I'm testing with
http://jsfiddle.net/y3597/171/
jQuery below
$(".top").each(function () {
$('.object').width($(".inner").parent().width());
});
CSS below:
.container1 { width: 200px; background: red; padding: 2px; }
.container2 { width: 225px; background: purple; padding: 2px; }
.container3 { width: 250px; background: blue; padding: 2px; }
.container4 { width: 275px; background: black; padding: 2px; }
/* top ? */
.inner { width: 150px; background: gray; }
.object { width: 100px; background: green; }
HTML below:
<div class="container1 top">
<div class="inner">
<div class="object">Text 1</div>
</div>
<div class="container2 top">
<div class="inner">
<div class="object">Text 2</div>
</div>
<div class="container3 top">
<div class="inner">
<div class="object">Text 3</div>
</div>
<div class="container4 top">
<div class="inner">
<div class="object">Text 4</div>
</div>
I think that you are trying to achieve this:
$(".top").each(function () {
$(this).find(".object").width($(this).width());
});
In your code jQuery will check for every element with .object class in DOM on each loop. When you use (this) you are refering to element that is currently "selected" in loop.
Better way to achive this is to set widths od children to 100%, so they will inherit the witdhs from parents.

Rendering two div in a div horizantally

I have a parent div having two child divs which are in horizantal ,Now I want to add other div such that the pagination should come.
Here is the code.
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
Here, If i add other div to 'parent',It will append at last,but should not be shown and pagination should come.
Using floats, I am making the div's horizantal.I have to show only two div's,After that pagination should come.
This is just a DEMO:
HTML:
<div id="parent">
<div id="wrapper">
<div id="left">window 1</div>
<div id="right">window 2</div>
</div>
</div>
<div id="paginator"><span id="prev">Previous</span><span id="next">Next</span></div>
CSS:
#parent {
width: 850px;
overflow: hidden;
padding: 10px;
height: 320px;
border: 1px solid #f00
}
#wrapper div {
width: 400px;
border: 1px solid #ccc;
height: 300px;
display:inline-block;
margin: 10px
}
#paginator {
margin: 10px;
display: block
}
#paginator span {
width: 30px;
padding: 5px;
margin: 10px;
background: #1f1f1f;
color: #fff;
}
JQUERY:
$(function() {
$('#next').click(function() {
$('#wrapper').append($('<div>window 3</div><div>window 4</div>')); // you can add div using other way
$('#wrapper').animate({
marginLeft: '-=860px'
},
500, 'linear');
});
$('#prev').click(function() {
$('#wrapper').animate({
marginLeft: '+=860px'
},
500, 'linear');
});
});
Not sure I understand your question, but I'll give it a shot...
<div id="parent">
<div id="left"></div>
<div id="right"></div>
</div>
<div style="clear:both"></div>
<div id="pagination"></div>
... is this what you mean to do?

Categories