Detect scroll into dom element - javascript

I want to detect scroll change into dom element, for example:
<div id="box">
...
</div>
Imagine a box 300x200, and I want to know if someone do a scroll inside it, and how much it is. How can I know?
I prefer only use Javascript and not JQuery, because I'm not loading it and I think it's a lot for too little, but I'm open to other opinions

Here is a working snippet with the current scrolled value:
document.getElementById('scroll-box').onscroll = function() {
console.log(this.scrollTop);
};
#scroll-box {
background-image: url(http://placekitten.com/g/300/200);
overflow: scroll;
width: 300px;
height: 200px;
border: 1px solid black;
}
#elements {
overflow: hidden;
height: 1000px;
}
<div id="scroll-box">
<div id="elements"></div>
</div>
I hope it helps.

Copied from below post, and edited for your id:
How to capture scroll event?
<div id="box" onscroll="Onscrollfnction();">
<script>
function Onscrollfnction() {
alert("scroll");
};
</script>

You can use target.addEventListener("scroll", functionName);

Related

Scroll smoothly by 100px horizontally

Heyjo,
problem: I am looking for a javascript or jQuery code since a week to get an implemented scrollbutton on my website working. The moment I fail is when the button should work multiple times: his task is not so scroll to a dedicated element, it should scroll left by, for instance, 100px. Furthermore the scrolling is supposed to happen smoothly (in other words, animated) in a proper section.
what I tried: til now I tried to fulfill this task with $('#idofsection').animate({scrollLeft: 100}, 800) but obviously it didn't work. The Problem was, one couldn't use it multiple times, it just scrolled to a position in my section. Afterwards I used javascript's scrollBy(100, 0) or scrollLeft += 100px, but unfortunately didn't got it to scroll smoothly.
I hope someone can help me because I spent so much time on this issue without finding a solution. Thanks a lot, Sven
You can use scrollBy(100, 0) just like you tried and add this css property to the viewport where you want to scroll:
scroll-behavior: smooth;
.window{
width: 200px;
height: 100px;
border: 1px red solid;
overflow: hidden;
scroll-behavior: smooth;
}
.container{
width: 1000px;
height: 200px;
}
.buttons{
width: 200px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
<div id="window" class="window">
<div class="container">
fjsdlf jslkd flsakj flksad jflkjsa dlfj slakd jflskad flksdaj lfk sadlkfj asldk fslkad fjlkasd flksa jdlf jsadlkfj slkda jflksadj flksa jdlkfj sadlk jflksadj flksjadflksadj flksdaj flksdaj flksdaflksjdflk sjdalkfj skdal fjlksadj flksa fklsjadfklj sadklfj salkdjf lksadj flksjad lfkj sadlkf jslakdjf lksdaj flkasj flkjsa dlfskal flsa jdas lkfjskad fj
</div>
</div>
<div class="buttons">
<button onclick="document.getElementById('window').scrollBy(-100,0)">
<-
</button>
<button onclick="document.getElementById('window').scrollBy(100,0)">
->
</button>
</div>
Solution also here: JSFiddle
So use the animation properties += to adjust it from current position.
$("#next").click(function(){
$('#foo').stop().animate({scrollLeft: "+=100"}, 800);
return false;
});
div {
width: 200px;
overflow: auto;
padding: 1em;
border: 1px solid black;
}
div p {
width: 1000px;
border: 2px dashed #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo">
<p>TEST</p>
</div>
<button id="next">Next</button>

Scroll a div when focused on an internal div

I need to make a scrollable div, scroll even if the mouse is upon the content (inside the scrollable div), and not just beside it (Where it is blank). This is what I have so far:
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight-main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop,maxTop) + "px";
}
In Chrome is ok
In IE8+ is ok (i know a hack)
In Safari the content shakes a lot when i scroll, can i fix that? (I want fix this)
Working fiddle -> https://jsfiddle.net/8oj0sge4/6/
var main = document.getElementById('main-site');
var maxTop = main.parentNode.scrollHeight - main.offsetHeight;
main.parentNode.parentNode.onscroll = function() {
main.style.top = Math.min(this.scrollTop, maxTop) + "px";
}
#wrapper {
width: 100%;
height: 1500px;
border: 1px solid red;
padding-top: 380px;
}
#wrapper .container {
border: 1px solid green;
width: 100%;
height: 500px;
overflow: scroll;
}
#wrapper .container-scroll {
height: 1500px;
width: 100%;
border: 1px solid yellow;
position: relative;
}
#wrapper .main {
width: 200px;
height: 500px;
background: black;
overflow: scroll;
position: absolute;
color: white;
left: 50%;
margin-left: -100px;
margin-top: 10px;
}
<div id="wrapper">
<div class="container">
<div class="container-scroll">
<div id="main-site" class="main">
My goals is to make the div container scroll also when the mouse is hover this div in safari, in Google and IE8 i already know how to make work, but safari is shaking a lot!
</div>
</div>
</div>
</div>
Thank you guys.
I hope this demo helps you out to make the div content scroll when mouse hover and when mouse out of the div.
<html>
</head>
<style>
.mydiv
{height: 50px;width: 100px; overflow-y: scroll; }
</style>
<script>
function loadpage()
{ document.getElementById('marquee1').stop(); }
function marqueenow()
{ document.getElementById('marquee1').start(); }
</script>
</head>
<body onload="loadpage()">
<marquee id="marquee1" class="mydiv" onmouseover="marqueenow()" onmouseout="loadpage()" behavior="scroll" direction="up" scrollamount="10">
This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test
content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content This is my test content
</marquee>
</body>
</html>
you just add this js file to get a smooth scrolling effect.
https://github.com/nathco/jQuery.scrollSpeed
live deomo
http://code.nath.co/scrollSpeed
Not 100% sure what you are up to but you can get the fixed position with css "fixed". It will stay where you put it. The following css fixes to the bottom of the page.
.fixed {
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: auto;
}
There is already an answer on scroll position:
How to get scrollbar position with Javascript?
I don't know important is that content, and by this I mean if it needs to stay selectable.
If not a pretty good solution would be to use #wrapper .main{ pointer-events: none; }, meaning that the content will not get any events from mouse and it would go through it to the next element behind it - in your case the scroll would go dirrectly to #wrapper.
Safari does this because every browser has its own scrolling. If you have a fixed header on a phone it acts bouncy and if you do this on a PC it acts normal. Explorer scrolls smooth and Chrome scrolls right to the place without a smooth transition.
The reason why your #main-site is "jiggling" is because the browser keep "repaint" the position of this element.
One Trick to solve this is called Debounce Function, (you may also google it to see other variations.) The basic idea is to delay the scroll event handler to clear out those untriggered callbacks.
In your case, you may do something like this:
main.parentNode.parentNode.onscroll = function(event) {
debounce(offsetting, 10);
}
function offsetting() {
main.style.top = Math.min(main.parentNode.parentNode.scrollTop,maxTop) + "px";
}
function debounce(method, delay) {
clearTimeout(method._tId);
method._tId= setTimeout(function(){
method();
}, delay);
}
If you keep seeing the jiggling issue, you can simply edit the delay parameter (i.e, change 10 to 50). The downside for that is your #main-site element will be 'cut off the top` for a while, depending on your delay settings.
Since your code works perfectly on Chrome and IE, there might be a bug on scrollHeight or offsetHeight attribute on Safari. I recommend you to use getBoundingClientRect for calculating element position since this method is more reliable and accurate.
var maxTop = main.parentNode.getBoundingClientRect().height - main.getBoundingCLientRect().height;

How do you make a div display two inline items that stretch the width?

It's hard for me to explain, so I'll start with a picture:
I'm working on a video chat server using WebRTC for a class. The server portion isn't the hard part, it's making everything pretty. What I am trying to do, if at all possible is make a scrollable div tag that contains the chat, and to the right of it, put the local video stream.
Below is the code for adding the local video stream.
var onLocalStream = function (stream) {
$("#chatArea").css({ right: ($(window).width()) - 175 })
var video = $("<video>").attr({
autoplay: "autoplay", id: stream.id, height: "150px", width: "170px", float: "right", display: "inline"
}).bind("click", { streamId: stream.id }, function (args) {
RTCConnection.removeStream(args.data.streamId, function (id) {
console.log("Local stream removed", id);
});
$(this).remove();
}).appendTo("#ChatAndVideo");
attachMediaStream($(video).get(0), stream);
};
This gets bound to the RTCConnection that is made later. My attempt was to shrink the chatArea by enough to fit the video to the right of it. The click event is really just for testing and will be removed later.
Now here is the HTML for the area I'm trying to append to.
<div id="ChatAndVideo">
<div id="chatArea" style="width: auto; height: 100px; overflow: auto; overflow-y: scroll; outline-color:black; outline:auto">
<p id="chat"></p>
</div>
</div>
And eventually I do plan on cleaning this up some and putting the CSS in a separate file, but I didn't want to worry about that till it was working.
This question has probably been answered in some way already, but I'm not really sure how to search for it. What little knowledge I have of HTML, CSS, and JavaScript is all self taught, so thank you in advanced for any feedback!
You'll definitely want to cleanup/simplify your markup. Here's a suggestion:
<style>
.half {
border: 1px solid;
height: 200px;
display: inline-block;
width: 40%;
padding: 2.5%;
box-sizing: border-box;
}
.half:first-of-type {
overflow: scroll;
}
.container {
display: inline-block;
width: 100%;
}
</style>
<div class="container">
<div class="half">
<div id="chat">
</div>
<div class="half">
<div id="video">
</div>
</div>
</div>
I would then recommend specifically targeting the divs for the chat/video feeds with your script. This simplifies your script and makes more sense. Also, always try to avoid doing css styles through Javascript/jQuery—the best way to handle that would be to assign a class to the element that contains the CSS you wish to apply.
Hope this helps.

CSS/Javascript: Keep a div size based on container size

I have a div which contains 2 divs, one has fixed height.
I want to make sure that the 2nd div's height is exactly as much as the height of the container div minus the other div's height. This height can't be manually set because it's often resized.
<div id="container" style="height: 50%">
<div id="header" style="height: 30px;">
</div>
<div id="content">
</div>
</div>
i have tried with jquery on resize but i think i wrote something wrong:
$(document).on("resize", "#container", function (event) {
$('#content').height($('#container').height()-$('#header').height());
});
Is there any way (Javascript, CSS) to achieve this?
An alternative to the jQuery method is CSS Flexbox:
#container {
display: flex;
flex-direction: column;
}
#content {
flex: 1;
}
See the demo. Unfortunately, this will only work in browsers supporting the latest Flexbox syntax. (http://caniuse.com/#search=flexbox) Backward compatible code is possible using old syntaxes as well, but will be sightly more involved. See David Storey's article at http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ for more on how to do that.
Your main problem seems to be that you have to size the element initially and then keep listening to the resize event:
function handleResize() {
$('#content').height($('#container').innerHeight()-$('#header').height());
}
$(window).on("resize", handleResize);
handleResize();
Also, the resize event should be attached directly to the window.
Otherwise, I recommend the use of innerHeight() for the container as that takes into account padding.
Also I made some fixes to your CSS for this to fully work:
#container {
position: absolute;
width: 100%;
height: 50%;
}
See full fiddle here: http://jsfiddle.net/kjcY9/1/
I have a pure CSS solution for you,
Check out that Working Fiddle
HTML:
<div id="container">
<div id="header"></div>
<div id="content"></div>
</div>
CSS:
#container {
height: 300px; /*Whatever fixed height you want*/
}
#container:before {
content:'';
float: left;
height: 100%;
}
#header {
height: 30px;/*Whatever fixed height you want, or not fixed at all*/
background-color: red;
}
#content {
background-color: blue;
/*No height spesified*/
}
#content:after {
content:'';
clear: both;
display: block;
}

jQuery slideUp() trouble

I am having trouble developing a jQuery 'object'. I would like div1 (Refer to image below) to be the background div with an image in (Using a background image). I would then like div 2 (Refer to image below) to overlay div 1, which I can do. However, as I have little experience with jQuery it's the next part I'm struggling with. I would like, when you hover on div 2, I use jQuery slideDown() / slideUp() to show and hide div 3 (Refer to image below). It also needs to not close as it slides up (as the cursor will no longer be on div 2). Only when you're no longer hovering over the whole object will it close. I hope this makes sense... I just don't know where to start. If any more info is needed please ask.
Something like this should do it I believe, or at least it gives you a starting ground to play around with, and improve further.
Markup
<div class="wrapper">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
CSS
.wrapper {
float: left;
}
.one {
background-color: grey;
width: 100px;
height: 100px;
}
.two {
background-color: blue;
width: 100px;
height: 20px;
}
.three {
background-color: green;
width: 100px;
height: 100px;
display: none;
}​
JavaScript
$(function () {
$(".two").mouseenter(function (){
$(".one, .three").slideToggle();
});
$(".wrapper").mouseleave(function (){
$(".one, .three").slideToggle();
});
});​
A live example: http://jsfiddle.net/ZHxe5/1/

Categories