Jsfiddle
I trying to activate my current scroll while I am outside that scroll, specifically in #DivDet
here is what I tried:
$("div#DivDet").scroll(function () {
// I don't know what i should have here
// something like $("div#scrlDiv").scroll();
});
It sounds like you want to respond to a scroll on one div by scrolling another.
You've already determined how to hook the scroll event. To set the scroll position of an element (the other div), you set the element's scrollTop and scrollLeft values (which are in pixels). If you want two divs to scroll in near-unison, for instance, you'd assign the source div's scrollTop and scrollLeft to the target div.
Example: Live Copy | Source
Relevant JavaScript:
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
or alternately (source):
(function() {
var target = $("#target")[0]; // <== Getting raw element
$("#source").scroll(function() {
target.scrollTop = this.scrollTop;
target.scrollLeft = this.scrollLeft;
});
})();
Full page:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>Scroll Example</title>
<style>
.scroll-example {
display: inline-block;
width: 40%;
border: 1px solid black;
margin-right: 20px;
height: 100px;
overflow: scroll;
}
</style>
</head>
<body>
<p>Scroll the left div, watch the right one.</p>
<div id="source" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<div id="target" class="scroll-example">
1
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
</div>
<script>
(function() {
var target = $("#target");
$("#source").scroll(function() {
target.prop("scrollTop", this.scrollTop)
.prop("scrollLeft", this.scrollLeft);
});
})();
</script>
</body>
</html>
Solution with Vanilla JavaScript
const multiElementScroll = ( elem1, elem2 ) => {
elem1.onscroll = function() {
elem2.scrollTop = this.scrollTop;
};
}
multiElementScroll( div1, div2 )
section {
display: flex;
justify-content: space-between;
}
.scroll-box {
width: 200px;
height: 200px;
overflow-y: scroll;
border: 1px solid #d99;
}
.scroll-box h2 { margin-top: 50px; }
<section>
<div class="scroll-box" id="div1">
<h1>A</h1>
<h2>B</h2>
<h2>C</h2>
<h2>D</h2>
<h2>E</h2>
<h2>F</h2>
<h2>G</h2>
<h2>H</h2>
</div>
<div class="scroll-box" id="div2">
<h1>1</h1>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
</div>
<section>
Related
inside a contenteditable div need to detect if a cursor is inside a <a></a> range
if so in console I need href attribute
in the example below - if the cursor is on google console should be https://google.com/
any help, using jquery or plain js
document.onselectionchange = () => {
var selection = window.getSelection();
var parent = selection.parentNode;
console.log(parent); // why undefined
// if(parent is a link){console.log(parent.attr('href'));}
};
.ed{width:50%; margin:0 auto; height:100vh; padding:9px; background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ed' id='ed' contenteditable>
<div>lorem</div>
<div><a href='https://google.com/'>google</a></div>
</div>
And BTW parent is JS reserved word.
https://www.w3schools.com/js/js_reserved.asp
document.querySelectorAll('#ed a').forEach(link => {
link.addEventListener("mouseover", function(event) {
console.log(event.target.href)
});
})
.ed {
width: 50%;
margin: 0 auto;
height: 100vh;
padding: 9px;
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ed' id='ed' contenteditable>
<div>lorem</div>
<div><a href='https://google.com/'>google</a></div>
<div><a href='https://test.com/'>test.com</a></div>
</div>
If you want to check the href attr only on focusing the cursor on the text instead of mouse over you can make use of focusNode and instance type on selection.
.ed{width:50%; margin:0 auto; height:100vh; padding:9px; background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='ed' id='ed' contenteditable>
<div>lorem</div>
<div><a href='https://google.com/'>google</a></div>
</div>
document.onselectionchange = () => {
var selection = window.getSelection();
var parentElement = selection.focusNode.parentElement;
if(parentElement instanceof HTMLAnchorElement){
console.log(parent.href);
}
};
Is it possible to lazy-load the entire div-tag using Intersection Observer API?
I have lazy loaded images using the intersection observer api approach. Not sure how to do it for html elements.
Yes, you can lazy load content into divs. The example below simply uses html() to populate the div with a random string on intersect. If the content you want is a separate html page, you could use load() instead.
function lazyDivs() {
let lis = [].slice.call(document.querySelectorAll("div.lazy")),
items = ["Aruba", "Jamaica", "Bermuda", "Bahama", "Key Largo", "Montego"];
if (!lis.length) {
//do nothing
} else if ("IntersectionObserver" in window) {
let o = new IntersectionObserver(function(es, obs) {
es.forEach(function(e) {
if (e.isIntersecting) {
let li = $(e.target);
li.html(items[Math.floor(Math.random() * items.length)]);
//li.load('/path/to/html/fragment'); //option to load content from a separate page
li.removeClass("lazy");
o.unobserve(e.target);
}
});
});
lis.forEach(function(li) {
o.observe(li);
});
} else {
lis.forEach(function(li) {
let l = $(li);
l.html(items[Math.floor(Math.random() * items.length)]);
//l.load('/path/to/html/fragment'); //option to load content from a separate page
l.removeClass("lazy");
});
}
}
$(document).ready(function() {
lazyDivs();
});
div {
border: 1px solid blue;
width: 100px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin: 10px auto;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
<div class="lazy"></div>
</body>
</html>
I have 3 divs on the page and I want them to change the color if they are scrolling. For example, all divs are blue, if they scroll to the first diva, change to green, change to green to the second diva, but the first will be blue again. I do not know how to go about it. I count on your help and tips. Maybe you've seen a similar example somewhere :)
According to your div color change dynamicaly bellow is the code
<!DOCTYPE HTML>
<html>
<head>
<style>
.divblue {
width: 100%;
height: 400px;
background-color: blue;
color: white;
}
.divgreen {
width: 100%;
height: 400px;
background-color: green;
color: white;
}
</style>
</head >
<body>
<div id="maindiv" style="width:100%;height:300px;overflow-y:scroll;">
<div id="fstdiv" class="divblue">
Hi test for first div
</div>
<div id="snddiv" class="divblue">
Hello test for second div
</div>
<div id="thrdiv" class="divblue">
Sir test for Third div
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#maindiv').scroll(function () {
var hT = $('#fstdiv').outerHeight();
var hH = $('#snddiv').outerHeight();
var tH = $('#thrdiv').outerHeight();
var wS = $(this).scrollTop();
$('#fstdiv').removeClass('divgreen').addClass('divblue');
$('#snddiv').removeClass('divgreen').addClass('divblue');
$('#thrdiv').removeClass('divgreen').addClass('divblue');
if (wS < 100) {
$('#fstdiv').removeClass('divblue').addClass('divgreen');
}
else if (wS > 400 && wS < 700) {
$('#snddiv').removeClass('divblue').addClass('divgreen');
}
else {
$('#thrdiv').removeClass('divblue').addClass('divgreen');
}
});
});
</script>
</body>
</html >
Fiddle
So I'm trying to disable scrolling of a div when another div is visible.
The code bellow I'm using does just that, but only when using mousewheel to scroll.
If I click the scrollbar and drag it, or if I focus the div and use keyboard down button, the scrolling still happens.
Why is that and how can I solve my problem (possibly without overlaying a transparent element over my scrollbar or similar "hacks")?
$('#element').on('scroll mousewheel keydown keypress keyup', function (event) {
const element = $(event.currentTarget);
const shouldScroll = false;
if (!shouldScroll) {
event.preventDefault();
event.stopPropagation();
return false;
}
});
Why don't you do it like this?
var scrollEnabled = true;
var scrollX = 0;
var scrollY = 0;
$(document).ready(function() {
$('div.outer').on('scroll', function(event) {
if (!scrollEnabled) this.scrollTo(scrollX, scrollY);
});
$('#tglBtn').on('click', function(event) {
if (scrollEnabled == true) {
scrollEnabled = false;
scrollX = $('div.outer').scrollLeft();
scrollY = $('div.outer').scrollTop();
} else {
scrollEnabled = true;
}
});
});
div.outer {
height: 500px;
width: 500px;
background-color: red;
overflow-y: scroll;
}
div.inner {
height: 200px;
width: 500px;
}
div.inner:nth-child(odd) {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="tglBtn" value="Enable/Disable scrolling" />
<div class="outer">
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
</div>
Firefox is exhibiting this behavior (bug?) that occurs after exiting a full screened <img> where the user ends up at the element that sits above the <img> the user had just viewed in fullscreen. In short my question is:
How can I prevent Firefox from scrolling up after exiting fullscreen mode?
The MCVE posted as a Snippet doesn't function due to SO's strict security measures so I have provided a plunker. All the details are commented in the Snippet and Plunker. In addition I have added a simple interface to not only reproduce the issue but to change the layout to test different combinations as well. Thank you for your valuable time.
SNIPPET (doesn't function--review this plunker instead)
/* Several attempts to use the .focus() method
|| and focus events did not work for me, neither
|| has tabindex and anchors. If it appears that
|| my implementation is wrong (a strong possibility)
|| please inform me.
*/
$('a').click(function(e) {
var tgt = $(this).prev();
fs(tgt[0]);
$(this).focus();
});
/* This function is for the MCVE
|| It enables the ~select~ to remove and re-insert
|| the test elements. By doing so, we can see
|| how the test elements behave in different
|| combinations. What I found out about FF is
|| that when exiting a full screened ~img~ that's
|| positioned last is that it will lose focus
|| and the viewport is scrolled up to the element
|| above it.
*/
$('#sel1').on('change', function(e) {
var V = $(this).val();
var first = $('#' + V).find(':first').attr('id');
if ($('#' + V).hasClass('media')) {
$('#' + V).fadeOut('#' + first);
} else {
$('#' + V).fadeIn('#' + first);
}
$('#' + V).toggleClass('media');
});
/* These 2 functions are responsible for
|| full screen. Please inform me if there's a
|| better way, or if anything is outdated. I
|| have researched the Fullscreen API and I
|| haven't found any updates of any use. I've
|| used these functions for the last 3 years
|| so maybe I might've missed something
|| critical.
*/ // There's no ms prefixes because I'm not concerned about IE.
var isFullScreen = function() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
}
function fs(target) {
if (!isFullScreen()) {
if (target.requestFullscreen) {
target.requestFullscreen();
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
/* These styles are here for the demo itself
|| and are not a cause of the problem at hand
*/
* {
margin: 0;
padding: 0
}
body {
font: 400 16px/1.3 Consolas;
height: 100%;
width: 100%;
background: #333;
color: #fed
}
a {
margin: 0 auto 50px;
display: block;
width: 48px;
height: 48px;
text-align: center;
cursor: pointer;
background-size: contain;
}
.vid,
.img,
.gif,
.svg {
display: block;
margin: 20px auto;
}
.expand {
background: url(http://imgh.us/expand_2.svg)no-repeat;
}
header {
padding: 15px 10px;
margin: 15px auto;
}
fieldset {
border: 10px solid tomato;
width: 20ch
}
legend {
font-size: 1.2em;
}
dt {
text-decoration: underline;
font: 1.1em;
}
dd {
margin-left: 20px
}
.note,
dt {
color: #ffcc33
}
.demo {
width: 450px;
padding: 10px;
counter-reset: step;
}
.demo li::before {
counter-increment: step;
content: "ยป " counter(step) ". ";
text-indent: -150px;
margin-left: 30px;
color: cyan;
}
.fs:-webkit-full-screen {
max-width: 100%;
height: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>Prevent Firefox from Moving After .exitFullscreen()</title>
<style>
</style>
</head>
<body>
<header>
<dl>
<dt>Objective</dt>
<dd>Prevent Firefox from Moving After .exitFullscreen()</dd>
<dt>Behavior</dt>
<dd><b class='note'>Expected: </b>When exiting fullscreen mode, we should be at the same position that we were at before</dd>
<dd><b class='note'>Experienced: </b>In FF, when exiting fullscreen mode, we are scrolled up as if the element above has a higher tab priority or more than likely is that tab index and focus are being ignored by FF.</dd>
<dt>Question</dt>
<dd><b><mark>How can I prevent Firefox from scrolling up after exiting fullscreen mode?</mark></b></dd>
</dl>
</header>
<section>
<ol class='demo'>
<li>To reproduce issue, use the <select> to remove items C, D, E, and F.</li>
<li>Next, fullscreen item B by clicking the icon below it.</li>
<li>Then exit full screen mode by hitting <kbd>ESC</kbd>.</li>
<li>Notice we have jumped up the page.</li>
</ol>
</section>
<!--This ~select~ is for the MCVE - details are
commented below in the ~script~ block-->
<section>
<fieldset>
<legend>Remove and Re-insert Elements</legend>
<select id='sel1'>
<option value="">----</option>
<option value='A'><video> src=MP4</option>
<option value='B'><img> src=PNG</option>
<option value='C'><video> poster=GIF</option>
<option value='D'><img> src=SVG</option>
<option value='E'><div> </option>
<option value='F'><iframe> srcdoc="<DIV><div>"</option>
</select>
</fieldset>
<!--I tried using the ~a~nchors, -id-, -name-, and -tabindex-
FF was ignoring my attempts to keep or get focus. Using named or
id ~a~nchors failed since the distance between desired spot
and the spot FF ends up at is short.-->
<div id='A' class='media'>
<video id="vid1" class="vid fs" src="http://html5demos.com/assets/dizzy.mp4" controls></video>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='B' class='media'>
<img id='img1' class='img fs' src='http://imgh.us/Lenna.png'>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='C' class='media'>
<video id='gif1' class='gif fs' poster='http://imgh.us/gir_zim.gif' width='300' height='300'></video>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<div id='D' class='media'>
<img id='svg1' class='svg fs' src='http://www.clker.com/cliparts/j/g/8/S/V/O/test.svg' width='auto' height='500'>
<a href='#/' class='expand' tab-index='1'></a>
</div>
<!--Subjects E and F were added to see if a "dummy"
element were to be the last element so that FF
would exit fullscreen on the last ~img~ correctly.
I got mixed results.-->
<div id='E' class='media'>
<div id='div1' class='fs'> </div>
<a href='#/' class='expand' tab-index='1' height='1' width='1'></a>
</div>
<div id='F' class='media'>
<iframe id='ifm1' class='fs' srcdoc="<div style='color:lime'>iframe srcdoc</div><div style='color:cyan'>2 divs</div>" allowfullscreen></iframe>
<a href='#/' class='expand' tab-index='1' height='1' width='1'></a>
</div>
<footer class='bottom'> </footer>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
</script>
</body>
</html>
Define variables initially.
var sx,sy;
Save scrollbar position before entering Fullscreen
var d= document, r= d.documentElement, b= d.body;
sx= r.scrollLeft || b.scrollLeft || 0;
sy= r.scrollTop || b.scrollTop || 0;
When player exit full screen,
window.scrollTo(sx,sy);
Hope this helps!
This answer is fully credited to #Kaido and I'll readily replace this answer if and when Kaido posts an answer.
My attempts at using the scroll methods didn't work is because I was listening to click events when I should've been listening for the onmozfullscreenchange
Plunker
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prevent Firefox from Moving After .exitFullscreen()</title>
<style>
button {
display: block;
padding: 0;
width: 32px;
height: 32px;
text-align: center;
cursor: pointer;
background-size: contain;
}
.expand {
background: url(http://imgh.us/expand_2.svg)no-repeat;
}
</style>
</head>
<body>
<div id='A' class='media'>A
<video id="vid1" class="vid fs" src="http://html5demos.com/assets/dizzy.mp4" controls></video>
</div>
<div id='B' class='media'>B
<img id='img1' class='img fs' src='http://imgh.us/Lenna.png'>
<button class='expand'></button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>
$('button').click(function(e) {
e.preventDefault();
var tgt = $(this).prev();
fs(tgt[0]);
});
/* This function is for the MCVE
|| It enables the ~select~ to remove and re-insert
|| the test elements. By doing so, we can see
|| how the test elements behave in different
|| combinations. What I found out about FF is
|| that when exiting a full screened ~img~ that's
|| positioned last is that it will lose focus
|| and the viewport is scrolled up to the element
|| above it.
*/
$('#sel1').on('change', function(e) {
var V = $(this).val();
var first = $('#' + V).find(':first').attr('id');
if ($('#' + V).hasClass('media')) {
$('#' + V).fadeOut('#' + first);
} else {
$('#' + V).fadeIn('#' + first);
}
$('#' + V).toggleClass('media');
});
/* These 2 functions are responsible for
|| full screen.
*/ // There's no ms prefixes because I'm not concerned about IE.
var isFullScreen = function() {
return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
}
// SOLUTION XXXXXXXXXX]START[XXXXXXXXXXXXXXX
var yOffset;
document.onmozfullscreenchange = function() {
if (!isFullScreen()) {
window.scrollTo(0, yOffset);
}
};
// SOLUTION XXXXXXXXXXX]END[XXXXXXXXXXXXXXXX
function fs(target) {
if (!isFullScreen()) {
yOffset = pageYOffset;
if (target.requestFullscreen) {
target.requestFullscreen();
} else if (target.webkitRequestFullscreen) {
target.webkitRequestFullscreen();
} else if (target.mozRequestFullScreen) {
target.mozRequestFullScreen();
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
</script>
</body>
</html>