Smooth scroll div id to div id not working? - javascript

Hi im building a website, now i am trying to make when u click on a div u smooth scroll to the other div but it is not working here is the code i am using:
<script>
$("#knop").click(function() {
$('html, body').animate({
scrollTop: $("#nieuws").offset().top
}, 2000);
});
</script>
The two divs:
<div class="nieuwsbrief" id="knop" style="text-align:center; cursor: pointer;">BLIJF OP DE HOOGTE<br> MET ONZE NIEUWSBRIEF</div>
<div id="nieuws"></div>
Thank you!

Here is an approach to vertically scrolling backwards and forwards between two divs, using plain vanilla javascript:
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var verticalGapInPixels = 624;
var scrollIncrementInPixels = 2;
var numberOfIntervals = (verticalGapInPixels / scrollIncrementInPixels);
function scrollBetweenDivs() {
var i = 0;
var scrollIncrement = (this.id === 'div1' ? scrollIncrementInPixels : -scrollIncrementInPixels);
var scrollByInterval = setInterval(
function(){
window.scrollBy(0,scrollIncrement);
i++;
if (i >= numberOfIntervals) {clearInterval(scrollByInterval);}
},1
);
}
div1.addEventListener('click',scrollBetweenDivs,false);
div2.addEventListener('click',scrollBetweenDivs,false);
div {
width: 120px;
height: 120px;
margin: 12px auto 500px;
text-align: center;
border: 2px solid rgb(63,63,63);
cursor: pointer;
}
div p {
font-size: 12px;
}
#div1 {
background: rgb(191,191,191);
}
#div2 {
background: rgb(127,127,127);
}
<div id="div1">
<h2>Div 1</h2>
<p>Click to Scroll<br />Down to Div 2</p>
</div>
<div id="div2">
<h2>Div 2</h2>
<p>Click to Scroll<br />Up to Div 1</p>
</div>

Related

How do I stop the moving of a button while clicking another?

The following code contains 2 buttons and their respective drop-down contents.
When I click the first button, the other moves by itself. How do I stop this from happening?
var coll = document.getElementsByClassName("button");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block")
content.style.display = "none";
else
content.style.display = "block";
});
}
.content {
display: none;
}
<button type="button" class="button" style="position: static; left: 100;">For Copper Rollers</button>
<div class="content" style=" width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px; margin-right: 5px; ">
</div>
<button class="button" type="button" style="position: static; left: 175px; ">For Rubber Rollers</button>
<div class="content" style="margin-left:50%; float: left; width: 48%; background-color: lightblue; padding: 10px; border-radius: 10px;">
</div>
If you assign position:absolute you can do some rudimentary calculations in Javascript to determine the position the content should appear at. Is this more or less the desired effect?
document.querySelectorAll('button').forEach(( bttn, index )=>bttn.addEventListener('click',function(e){
this.classList.toggle("active");
// get the bounding box for the button so we can
// get a suitable height offset for content
let bb=this.getBoundingClientRect();
// find the content and toggle display state
let div=this.nextElementSibling;
div.style.display=div.style.display=='block' ? 'none' : 'block';
// find the current style properties for the content
let style=getComputedStyle( div );
let bbd=div.getBoundingClientRect();
// calculate x / y positions for content
let x=( Math.ceil( bbd.width ) + parseInt( style.paddingLeft ) - parseInt( style.marginLeft ) ) * index;
let y=Math.ceil( bb.height ) + Math.ceil( bb.bottom );
// apply those positions to the content
div.style.top=`${y}px`;
div.style.left=`${x}px`;
// identify content by parent
div.textContent=this.textContent.replace('For ','');
}));
body{
width:100%;
height:100vh;
}
button.button{
padding:0.25rem;
}
/*
assign the absolute position
to the content divs but let
javascript calculate x/y positions.
*/
.content {
position:absolute;
display: none;
width: calc( 50% - 3rem );
background-color:lightblue;
padding:1rem;
border-radius:10px;
border:1px solid grey;
float:none;
clear:none;
margin:0 0.25rem;
}
.content:first-of-type{
background:pink;
}
.active{
color:green
}
<!--
let css do the styling and positioning as `inline` styles
make updating a pain in the proverbial
-->
<button type="button" class="button">For Copper Rollers</button>
<div class="content"></div>
<button class="button" type="button">For Rubber Rollers</button>
<div class="content"></div>
I would go with making the dropdown content have a position: asolute (css), that way it won't affect any other elements on the page.
PS: make sure to keep accessibility in mind when making dropdowns, your current snippet unfortunately isn't.

How to make auto slideshow of Divs stop when target link to one of the slide is clicked

I have a slideshow of divs that automatically cycles through but how do i make it so that when i click on a target link, it leads me there and stops the cycling of the slideshow. Moreover, after a few cycles, the slides start to clog up and aggregate on top of one another, can someone please help tp rectify this error thanks.
This is my current code:
parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<script>
function Divs() {
var divs = $("#parent div"),
now = divs.filter(":visible"),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
</script>
<div class="box" id="food">
<h2>hi</h2>
</div>
<div class="box" id="infrastructure">
<h2>bye</h2>
</div>
<div class="box" id="culture">
<h2>hi</h2>
</div>
<div class="box" id="nature">
<h2>bye</h2>
</div>
</div>
If you set your interval to a variable you can point an event-listener to the parent div and on click you can reset the timer.
here is a solutuion:
const interval= setInterval(divs, 1400)
const parentContainer = document.querySelector('#parent')
parentContainer.addEventListener('click', event => {
clearInterval(interval)
console.log(event.target.parentNode)
})
divs(interval)
function divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
#parent div {
display: none;
position: absolute;
}
#parent div:first-child {
display: block;
}
#parent > div {
width: 400px;
height: 250px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slideshow-container" id="parent">
<div class='box' id='food'>
<h2>food</h2>
</div>
<div class='box' id='infrastructure'>
<h2>infrastructure</h2>
</div>
<div class='box' id='culture'>
<h2>culture</h2>
</div>
<div class='box' id='nature'>
<h2>nature</h2>
</div>
</div>

How to adjust div height from auto to content height first and then fill it with content, not the other way around?

I am trying to transition the #two element from height: auto to its contents height.
Based on this, I have came up with the below code.
It works, but there is an unpleasant side-effect: the content will be created first and only then parent div will start to adapt its width.
How can I correct that? I am also open to pure CSS, non-JS solutions.
let fill_button = document.getElementById('fill')
let div_to_fill = document.getElementById('two')
fill.addEventListener('click', function() {
fill_parent_with_some_content(div_to_fill)
})
function fill_parent_with_some_content(parent) {
let content_height = '200px'
// create new element
let content = document.createElement('div')
content.style.margin = '0'
content.style.height = content_height
content.style.width ='300px'
content.style.background = 'orange'
// height transition from auto
parent.style.height = getComputedStyle(parent).height
parent.style.transition = 'height 2s ease-in-out'
parent.offsetHeight // force repaint
parent.style.height = content_height
parent.appendChild(content)
}
#one, #two, #three {
background: white;
border: 1px solid black;
margin-top: 10px;
padding: 0;
}
#one, #three {
height: 100px;
}
#two {
height: auto;
}
<!DOCTYPE HTML>
<html>
<head>
</head>
<style>
</style>
<body>
<button id="fill">Fill second div with some content</button>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>

jQuery custom slider creation with loop

Please, help me to configure my slider.
If you click on numbers in any row, you can see, that jquery give them classes and spin slider to index()
I want to add arrows to my slider, and do infinite loop. Eg if number 2 selected right arrow moves all 3 rows to number 3. And vice versa.
Here is my code.
$('.item').click(function() {
$this = $(this);
$(".item").removeClass("active");
$('.item').each(function() {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});
* {
margin: 0;
padding: 0;
}
.first-line,
.second-line,
.line3 {
margin-top: 20px;
}
.second-line,
.line3 {
margin-left: 20px;
}
.second-line {
width: 200px;
overflow: auto;
}
.line3 {
width: 200px;
overflow: hidden;
}
.wrap {
width: 500px;
}
.number,
.anotherclass,
.onemoreclass {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 15px;
border: 1px solid blue;
text-align: center;
margin: 0 10px;
}
.right-arrow,
.left-arrow {
display: inline-block;
cursor: pointer;
margin: 0 20px;
}
.number.active,
.anotherclass.active,
.onemoreclass.active {
background: blue;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="left-arrow"> << </div>
<div class="right-arrow"> >> </div>
<div class="first-line scroll">
<div class="anywrap">
<div class="number active item">1</div>
<div class="number item">2</div>
<div class="number item">3</div>
<div class="number item">4</div>
<div class="number item">5</div>
</div>
</div>
<div class="second-line scroll">
<div class="wrap">
<div class="anotherclass item active">1</div>
<div class="anotherclass item">2</div>
<div class="anotherclass item">3</div>
<div class="anotherclass item">4</div>
<div class="anotherclass item">5</div>
</div>
</div>
<div class="line3 scroll">
<div class="wrap">
<div class="onemoreclass item active">1</div>
<div class="onemoreclass item">2</div>
<div class="onemoreclass item">3</div>
<div class="onemoreclass item">4</div>
<div class="onemoreclass item">5</div>
</div>
</div>
Added to your function to support all of what you want. Let me know if this helps! Added comments to areas I changed to explain what I am doing. I also made $this a local variable instead of a global as well by defining it with var.
Fiddle: http://jsfiddle.net/AtheistP3ace/3ewguuyL/
JS:
// Attach click to all clickable elements
$('.item, .left-arrow, .right-arrow').click(function () {
var $this = $(this);
// check if we clicked an item or arrow
if (!$this.hasClass('item')) {
// if left arrow, get previous item of first active we find
if ($this.hasClass('left-arrow')) {
$this = $('.item.active:first').prev();
}
// if right arrow, get next item of first active we find
else if ($this.hasClass('right-arrow')) {
$this = $('.item.active:first').next();
}
// Handle being at the start or end of items
if ($this.length == 0) {
return;
}
}
// Let your previous code run
$(".item").removeClass("active");
$('.item').each(function () {
if (+$(this).index() == +$this.index()) {
$(this).addClass('active');
var box = $(this).closest('.scroll');
var x = ($(this).position().left - (box.width() / 2)) + box.scrollLeft();
box.animate({
scrollLeft: x
});
}
});
});
Have a look at https://jsfiddle.net/0m0raekm/
For the arrow support I just added this part:
$('.arrow-control').click(function(){
var direction = $(this).hasClass('left-arrow') ? -1 : 1;
var currentItemIndex = $('.anywrap .active').index();
var itemCount = $('.anywrap .item').length;
var nextItemIndex = (currentItemIndex + direction)%itemCount;
var nextItem = $('.anywrap .item').get( nextItemIndex );
$(nextItem).trigger( "click" );
});
It is quite generic: it determines the currently active item, chooses the next one depending on the arrow direction and the number of items (infinite loops) and triggers a click event on the item that is supposed to be next. So after determining the next item, it uses your original code to do the actual effect.

Slide to next div

HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
CSS:
html, body {
width: 100%;
height: 100%;
/* overflow: hidden;*/
}
.inline-wrapper{
width: 400%;
height: 100%;
font-size: 0;
position: relative;
}
.inline-blocks{
display: inline-block;
width: 25%;
height: 100%;
vertical-align: top;
position: relative;
}
>.inline-blocks:nth-child(1){
background-color: #000;
}
.inline-blocks:nth-child(2){
background-color: blue;
}
.inline-blocks:nth-child(3){
background-color: red;
}
.inline-blocks:nth-child(4){
background-color: green;
}
How can I slide them without ID?
In fact this is the work of the slider. But I can not understand the logic.
Want to understand how flipping without ID.
We must check the blocks and give them сurrent class.
Auto Slide
HTML:
<div class="inline-wrapper">
<div class="inline-blocks" id="f">123</div>
<div class="inline-blocks" id="s">123</div>
<div class="inline-blocks" id="t">123</div>
<div class="inline-blocks" id="fo">123</div>
</div>
jQuery:
(function () {
var numDivs = $('.inline-wrapper').children().length; //Count children ELements
var counter = 1;
function slide(time, counter) {
var $currentDiv = $('.inline-wrapper .inline-blocks:nth-child(' + counter + ')'); //get next element
var position = $currentDiv.position(); //get position of next element
if (numDivs > 1) {
$('html,body').animate({
scrollLeft: position.left
}, time / 2); //Animate to next element
}
};
$('.inline-blocks').on('click', function () {
counter = counter + 1;
slide(2000, counter);
});
})();
DEMO

Categories

Resources