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
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.
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>
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>
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.
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