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>
Related
I am trying to make all my divs the same height even if the browser is resized. I have 4 icon boxes. each box has an icon, a title, and a description. I want to make all of them same size. that means if the highest height of the icon container div is 100px all icon holder div will be 100px. the following code is working but if I resize the browser some time the height of the container divs is much bigger than the actual height. what I am doing wrong? (Note the resize will only happen screen size above 767px) thanks
function allSameHeight(sameSec, sameImg, sameTitle, sameDesc) {
jQuery(sameSec).each(function () {
let highestImg = 0;
let highestTitle = 0;
let highestTxt = 0;
jQuery(sameSec).find(sameImg).each(function () {
if (jQuery(this).height() > highestImg) {
highestImg = jQuery(this).height();
}
});
jQuery(sameSec).find(sameTitle).each(function () {
if (jQuery(this).height() > highestTitle) {
highestTitle = jQuery(this).height();
}
});
jQuery(sameSec).find(sameDesc).each(function () {
if (jQuery(this).height() > highestTxt) {
highestTxt = jQuery(this).height();
}
});
if (jQuery(window).width() > 768) {
jQuery(sameSec).find(sameImg).css("min-height", highestImg);
jQuery(sameSec).find(sameTitle).css("min-height", highestTitle);
jQuery(sameSec).find(sameDesc).css("min-height", highestTxt);
} else {
jQuery(sameSec).find(sameImg).css("min-height", "auto");
jQuery(sameSec).find(sameTitle).css("min-height", "auto");
jQuery(sameSec).find(sameDesc).css("min-height", "auto");
}
});
}
Give a class to all four items. I've used myItem for instance.
const setHeights = () => {
let highestHeight = 0;
//Loop through all elements and get the highest height
$('.myItem').each((index, element) => {
if($(element).outerHeight() > highestHeight) {
highestHeight = $(element).outerHeight();
}
});
//Set the height of all elements to highest
$('.myItem').height(highestHeight);
};
$(window).resize(() => {
//Run each time window is resized
setHeights();
});
.myItem {
width: 25%;
color: white;
float: right;
}
.one {
background: red;
}
.two {
background: blue;
}
.three {
background: purple;
}
.four {
background: orange;
}
h3 {
word-wrap: break-word;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button onclick="setHeights()">Make them equal</button>
</div>
<div class="myItem one">
<h3>
aaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaa
aaaaaaaaaa
</h3>
</div>
<div class="myItem two">
<h3>
bbbbbbbb
</h3>
</div>
<div class="myItem three">
<h3>
ccccccccccccccc
ccccccccc
</h3>
</div>
<div class="myItem four">
<h3>
ddddddddddddddd
ddddddddddd
ddddddddddddd
ddddddddddddddd
ddddddddddddddddd
</h3>
</div>
For this case there are multiple approaches, I'll mention the two most common (in my opinion):
https://www.w3schools.com/howto/howto_css_equal_height.asp
Using flexbox: https://moderncss.dev/equal-height-elements-flexbox-vs-grid/
I need to click twice on the div (class="funfact") in order to active onclick event ff0().
Yes, I included the JS script in the HTML file.
var ffans = document.querySelector(".funfactans");
//ffans = fun fact answer
function ff0() {
if (ffans[0].style.height == '0px') {
ffans[0].style.height = '45px'
ffans[0].style.marginBottom = '10px'
ffans[0].style.paddingRight = '10px'
ffans[0].style.visibility = 'visible'
ffans[0].style.opacity = '1'
ffans[0].style.pointerEvents = 'auto'
}
<div class="facts">
<div class="funfact" onclick="ff0()">Fact1</div>
<div class="funfactans">Fact1 answer</div>
</div>
<script src="mainNew.js"></script>
height="0px" vs visibility and another height is the difference between display:none and display:block
.style.height == '0px' cannot be tested like that
I believe you want this
window.addEventListener("load", function() {
document.querySelector(".facts").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("funfact")) {
tgt.nextElementSibling.classList.toggle("hide");
}
})
})
.funfactans {
height: 45px;
marginBottom: 10px;
paddingRight: 10px;
pointerEvents: auto;
}
.hide {
display: none
}
<title>FunFacts</title>
<div class="facts">
<div class="funfact">Fact1</div>
<div class="funfactans hide">Fact1 answer</div>
<div class="funfact">Fact2</div>
<div class="funfactans hide">Fact2 answer</div>
</div>
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
I have this banner ticker which works as you first load the page, but it gets messed up as you resize the second time and my assumption is that I am not calling the function in the right way on the resize event, any advice so I can understand what is going on?
jsfiddle
html
<div class="">
<div class="topBanners" style="float: left; width: 200px; ">
<p>First one</p>
</div>
<div class="topBanners" style="float: left; width: 200px; ">
<p>Second</p>
</div>
<div class="topBanners" style="float: left; width: 200px; ">
<p>Third</p>
</div>
</div>
js
$(document).ready(function() {
currentTopBanner = 0;
var topBanners = $('.topBanners');
console.log(topBanners.length);
function rotateTopBanners() {
if ($(window).width() < 768) {
topBanners.hide();
$(topBanners[currentTopBanner]).fadeIn('slow').delay(100).fadeOut('slow');
$(topBanners[currentTopBanner]).queue(function () {
currentTopBanner = currentTopBanner < topBanners.length - 1 ? currentTopBanner + 1 : 0;
rotateTopBanners();
$(this).dequeue();
});
} else {
topBanners.show();
}
}
rotateTopBanners();
$(window).resize(function () {
rotateTopBanners();
});
});
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>