Scroll from div to next div (different height)

Scroll from div to next div (different height) - javascript

I have got page with 5 div's. My div's have different heigh (it's adaptive). How I can go to next div by mouse when I scroll half of the current div?
I trying fullpage.js and onepage.js but it not working for me, because my div must be different height
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<div id="first">1 div</div>
<div id="second">2 div</div>
<div id="third">3 div</div>
<div id="fourht">4 div</div>
<div id="fiveth">5 div</div>

you're need get the height current active elem, and give for container transform translate( 0, -height ) on scroll, onepage and fullpage for there are work with this.

var $container = $('.container');
var $elem = $container.find('.elem');
var $active = $container.find('.active').height();
$(window).on('scroll',function(){
$container.css({"transform":"translate(0, -" + $active + "px)"});
});
body{
height: 100%;
}
.container{
transition: 1s all;
}
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="elem active">1 div</div>
<div id="second" class="elem">2 div</div>
<div id="third" class="elem">3 div</div>
<div id="fourht" class="elem">4 div</div>
<div id="fiveth" class="elem">5 div</div>
</div>

I created my version. Look at this https://codepen.io/damates/pen/VXdKjR .
Jquery:
$("#nextDiv, #previousDiv").click(function(){
actualTopOffset = $(window).scrollTop();
areas = $(".area");
find = false;
newPosition = 0;
type = $(this).attr("data-type");
areasCount = $(areas).length;
$.each(areas, function(index, val) {
if(type == "next"){//if we click to go next area
if($(areas).length > (index+1)){
if(actualTopOffset < $(areas[index+1]).offset().top && !find){// ask if area has top offset higher. If yes set new position
find = true;
newPosition = $(areas[index+1]).offset().top;
}
}
}else if(type == "prev"){ //if we click to go previous area
areasCount--;
if((areasCount) >= 0){
if(actualTopOffset > $(areas[areasCount]).offset().top && !find){// ask if area has top offset lower. If yes set new position
find = true;
newPosition = $(areas[areasCount]).offset().top;
}
}
}
});
if(find){ //If we found new position scroll on new position
$('html, body').animate({
scrollTop: newPosition
}, 1000);
}
});
CSS:
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
#nextDiv, #previousDiv{
position: fixed;
top: 20px;
background: red;
}
#previousDiv{
top: 0px;
}
HTML:
<div id="first" class="area">1 div</div>
<div id="second" class="area">2 div</div>
<div id="third" class="area">3 div</div>
<div id="fourht" class="area">4 div</div>
<div id="fiveth" class="area">5 div</div>
<div id="previousDiv" data-type="prev">Previous div</div>
Next div
EDIT VERSION WITH SCROLL
I change the script for scrolling. Look at to https://codepen.io/damates/pen/VXdKjR

Related

javascript moves both objects. Why?

I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript

Reducing fixed header on scroll from top of page

I have a website with a fixed header, on the home page the header contains additional content when you are at the top of the page, but I want to hide this content and have a reduced header as they scroll down the page.
So on the initial scroll i want to hide the additional header content and animate the margin of the content below but keep it so that the top of the content still shows underneath it and then scroll from normal from there.
The snippet below should show what I mean better:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
$('#page_content').css('margin-top', (main_head_height)+'px');
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

You need to change in your JS code. Margin you are reducing when the page start scrolling need to adjust by padding. So you can try this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function(){
if($(document).scrollTop() >= main_head_height){
$("#extra_header_content").slideUp("slow");
// $('#page_content').css('margin-top', (main_head_height)+'px');
$('#page_content').css(
{'margin-top': (main_head_height)+'px', 'padding-top': (main_head_height)+'px'}
);
$('#header').removeClass('home');
}else{
$("#extra_header_content").slideDown("slow");
$('#page_content').css('margin-top', (extra_head_height)+'px');
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:50px;width:100%;}
#extra_header_content{height:50px;width:100%;}
#page_content{background-color:#33d;height:5000px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

You can do it like this:
var head_height = $('#header').outerHeight(true);
$('#page_content').css('margin-top', (head_height)+'px');
if($('#extra_header_content').length != 0){
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#extra_header_content').outerHeight(true);
$(document).on("scroll", function() {
const scrollTop = $(document).scrollTop();
if (scrollTop >= head_height) {
$("#extra_header_content").css('height', 0);
$('#page_content').css('margin-top', main_head_height);
$('#header').removeClass('home');
} else if (scrollTop > 0) {
$("#extra_header_content").css('height', extra_head_height - scrollTop);
$('#page_content').css('margin-top', head_height);
$('#header').removeClass('home');
} else {
$("#extra_header_content").css('height', extra_head_height);
$('#page_content').css('margin-top', head_height);
$('#header').addClass('home');
}
});
}else{
$('#header').removeClass('home');
}
div{padding:0px;margin:0px;}
#header{background-color:#d33;position:fixed;top:0px;width:100%;}
.home{background-color:#3d3 !important;}
#main_header_content{height:100px;width:100%;}
#extra_header_content{height:100px;width:100%; overflow: hidden;}
#page_content{background-color:#33d;height:500px;width:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">This should still be visible when header initially reduces</div>

I can offer you a different approach without JavaScript
body,html{
padding:0;
margin:0;
}
#main-header{
position:fixed;
top:0;
left:0;
right:0;
height: 50px;
background: green;
z-index:3;
}
#extra-header{
position:fixed;
top:50px;
left:0;
right:0;
height: 50px;
background: lime;
z-index: 0;
}
#content{
margin-top:100px;
height:2000px;
position:relative;
z-index:1;
background:blue;
}
#content>div{
height:200px;
background: #efefef;
}
#content>div:nth-of-type(2n){
background: red;
}
<div id="main-header">
Main
</div>
<div id="extra-header">
Extra
</div>
<div id="content">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

This could be a solution if you will use position sticky and not fixed, but this a bit jerky, So I will post one more solution here with smooth animation
var head_height = $('#header').outerHeight(true);
//$('#page_content').css('padding-top', (head_height)+'px');
if ($('#extra_header_content').length != 0) {
$('#header').addClass('home');
var main_head_height = $("#main_header_content").outerHeight(true);
var extra_head_height = $('#header').outerHeight(true);
$(document).on("scroll", function() {
if ($(document).scrollTop() >= main_head_height) {
$('#page_content').css('padding-top', (main_head_height) + 'px');
$("#extra_header_content").slideUp("slow");
//$('.page_content_wrapper').addClass('scrolled');
//$('.page_content_wrapper').css('top', (main_head_height)+'px');
$('#header').removeClass('home');
} else {
$("#extra_header_content").slideDown("slow");
$('#page_content').css('padding-top', 0);
//$('.page_content_wrapper').css('top', 0);
//$('#header').addClass('home');
}
});
} else {
$('#header').removeClass('home');
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
padding: 0px;
margin: 0px;
}
#header {
background-color: #d33;
position: sticky;
top: 0px;
width: 100%;
z-index: 9;
}
.home {
background-color: #3d3 !important;
}
#main_header_content {
height: 50px;
width: 100%;
}
#extra_header_content {
height: 50px;
width: 100%;
}
#page_content {
background-color: #33d;
height: 5000px;
width: 100%;
}
.page_content_wrapper {
position: relative;
top: 0px;
}
#page_content .page_content_wrapper {
transition: top 1s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">
<div class="page_content_wrapper">This should still be visible when header initially reduces</div>
</div>
<span class="hamBurger"></span>

Next / previous arrows to cycle through divs

I want to add two arrows to the sides of the "boxes" divs (below) to cycle through the 3 divs.
Working JSFiddle: https://jsfiddle.net/HBHcC/11/
Can someone help me with this?
HTML:
<div class="container">
<div class="boxes">
<div class="one box">
</div>
<div class="two box">
</div>
<div class="three box">
</div>
</div>
</div>
CSS:
.container{
width:100px;
height:100px;
overflow:hidden;
position:relative;
}
.box {
display:inline-block;
float: left;
width: 100px;
height: 100px;
}
.one{
background-color:green;
}
.two{
background-color:red;
}
.three{
background-color:blue;
}
.boxes{
width:400px;
}
JS:
$(document).ready(function(){
$('.box').on("click", function() {
// Is this the last div, or is there a next one?
if ($(this).next().length) {
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
}
});
});

After adding arrows to the div, here is a new fiddle that should get you started:
$('.rightarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
// Is this the last div, or is there a next one?
var animSpeed = 200; // Make this 0 for an instant change
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
https://jsfiddle.net/tx2yg06w/1/
Updated w/arrows moved out of divs:
$(document).ready(function(){
var animSpeed = 200;
$('.rightarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == -200){ return;}
$('.boxes').animate({marginLeft : "-=100"}, animSpeed);
});
$('.leftarrow').on("click", function() {
if(parseInt($("#boxes").css("marginLeft")) == 0){ return;}
$('.boxes').animate({marginLeft : "+=100"}, animSpeed);
});
});
https://jsfiddle.net/b56r0d72/

Errata has given you a good solution. Just wire up his code to the arrows in the snippet below.
Run snippet to view:
<html>
<body>
<style type="text/css">
.leftarrow, .rightarrow {
font-size: 48px;
color: blue;
text-decoration: none;
}
.rightarrow {
color: red;
float: right;
}
.content {
width: 200px;
padding: 4px;
border: 1px gray solid;
}
.box {
height: 200px;
border: 1px green solid;
}
</style>
<div class="content">
<div>
◀
▶
</div>
<div class="box">slide</div>
</div>
</body>
</html>

JQuery - Randomise element absolute position and rotation within container

I have the following which randomises divs in a container div. Works fine as you can see in this fiddle.
<div id='draggables_container'>
<div class='draggable' id='d1'></div>
<div class='draggable' id='d2'></div>
<div class='draggable' id='d3'></div>
<div class='draggable' id='d4'></div>
<div class='draggable' id='d5'></div>
</div>
function randomiseDraggables(){
var parent = $("#draggables_container");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
}
How can I change this so that the elements have random absolute positions (they are currently set to float:left) within the container and with random rotation and preferably not overlapping each other?

Solution as discussed above:
HTML
<div id='draggables_container'>
<div class='draggable' id='d1'></div>
<div class='draggable' id='d2'></div>
<div class='draggable' id='d3'></div>
<div class='draggable' id='d4'></div>
<div class='draggable' id='d5'></div>
</div>
CSS
#draggables_container {
float:left;
height:auto;
width:600px;
border: 1px solid #6ac1cb;
border-radius: 4px;
}
.draggable {
float:left;
height:120px;
}
#d1 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/1_a.png);
background-repeat:no-repeat;
}
#d2 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/1_b.png);
background-repeat:no-repeat;
}
#d3 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/2_a.png);
background-repeat:no-repeat;
}
#d4 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/2_b.png);
background-repeat:no-repeat;
}
#d5 {
width:20%;
background-image: url(http://130.95.21.121/karyotypes/trisomy_21/images/3_a.png);
background-repeat:no-repeat;
}
jquery
function randomiseDraggables() {
var parent = $("#draggables_container");
var divs = parent.children();
divs.each(function() {
var rt = (Math.floor(Math.random() *359));
var rn = (Math.floor(Math.random() *50));
$(this).css({'transform':'rotate(' + rt + 'deg)','background-position' : '0% ' + rn + '%'});
});
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
}
randomiseDraggables();
$(".draggable").draggable({
stack: '#draggables_container div',
revert: true
});

Jquery/javascript sliding content

I'm trying to reproduce this and it's not working:
http://www.templatemonster.com/demo/44543.html
Here is my result: http://webs-it.com/callstar/
What I want is to navigate through the menu like the example I posted. I'm kinda new to javascript and I didn't manage to make it work.
Here is my code:
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" >
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
#block1 {
float:left;
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#block2 {
width:1058px;
height:0px;
margin-left:-1058px;
margin-top:100px;
background-color:#fff;
position:relative;
}
#logo {
margin:0 auto;
width:502px;
height:259px;
margin-top:144px;
}
</style>
</head>
<body>
<div id="continut">
<div id="header">
<div id="social">
<img src="images/social/facebook.png" name="facebook" alt="."> <img src="images/social/ytube.png" name="ytube" alt="."> <img src="images/social/en.png" name="en" alt="."> <img src="images/social/cz.png" name="cz" alt=".">
</div>
</div>
<div id="block1">test test</div>
<div id="block2">test test</div>
<div id="logo" >
<img src="images/logo/logo_homepg.png">
</div>
<div id="meniu">
<img src="images/meniu/about.png" id="go1" name="about" alt="."><img src="images/meniu/photo.png" name="foto" id="go2" alt="."><img src="images/meniu/video.png" id="go3" name="video" alt="."><img src="images/meniu/ref.png" name="ref" id="go4" alt="."><img src="images/meniu/contact.png" name="contact" id="go5" alt=".">
</div>
</div>
<div id="footer"></div>
<script>
$( "#go1" ).click(function(){
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
});
$( "#go2" ).click(function(){
$( "#block2" ).animate({ height: "300px" }, 1 )
.animate( { margin: "100px 0px" }, { queue: false, duration: 700 });
$( "#block1" ).animate({ height: "300px" }, 1 )
.animate({ margin: "100px 1558px" }, { queue: false, duration: 700 });
});
</script>
</body>

That was a fun challenge.
I created a similar effect for you here.
Check out the jsFiddle DEMO
P.S: All, HTML, CSS, and Javascript is new.
HTML
<div id="container">
<div id="content">
<div id="one"><p>One</p></div>
<div id="two"><p>Two</p></div>
<div id="three"><p>Three</p></div>
<div id="four"><p>Four</p></div>
</div>
<ul id="nav">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
CSS
*{margin:0; padding:0; font-family: Helvetica}
#container{
width:100%;
height:600px;
overflow:hidden;
float:left;
background: url(http://webs-it.com/callstar/images/covers/electric_guitar2.jpg) center no-repeat;
}
p {
font-size:25px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
color:#666;
margin-top:22%;
}
#content {
width:100%;
height:200px;
margin: 50px auto 0;
position:relative;
overflow:hidden;
}
#content > div {
display:block;
width:400px;
height:200px;
background:white;
position:absolute;
margin-left:100%;
/*left:-200px;*/
opacity: 0;,
top:40px
}
#nav {
list-style:none;
display:table;
margin:0 auto;
position:relative;
}
#nav li {
display:table-cell;
align:cen
display:inline-block;
padding:20px
}
#nav a {color:#fff; text-decoration:none;}
JS
$(function() {
var content = $('#content'),
contentHeight = content.height(),
nav = $('#nav'),
count = 0;
// on load content height is shorter
content.height(100);
nav.find('a').on('click', function() {
var $this = $(this),
parent = $this.parent(),
targetElement = $this.attr('href');
//Does the slide down animation once
if (count === 0) {
content.animate({'height': contentHeight }, function() {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
});
count = 1;
} else {
//only add active class if parent does not have it and then animate it
if ( !parent.hasClass('active') ) {
parent.addClass('active');
//animate in
$(targetElement).animate({
left: '-=200px',
'margin-left': '50%',
opacity: 1
}, 500);
//Gets older clicked element
var oldClickedElement = $('.active').not(parent).removeClass('active').find('a').attr('href');
//only if old click element exists the do the animation
if (oldClickedElement) {
//animate out + reset to start
$(oldClickedElement).animate({
left: 0,
'margin-left': '-50%',
opacity: 0
}, 500, function() {
$(oldClickedElement).css({
'margin-left' : '100%',
left: 0
});
});
}
}
}
return false;
});
});
Let me know if you have any questions.

Develop Reference

JavaScript is the programming language of the Web.

Scroll from div to next div (different height) - javascript

you're need get the height current active elem, and give for container transform translate( 0, -height ) on scroll, onepage and fullpage for there are work with this.

Related

javascript moves both objects. Why?

Reducing fixed header on scroll from top of page

Next / previous arrows to cycle through divs

JQuery - Randomise element absolute position and rotation within container

Jquery/javascript sliding content

Categories

Resources