Java Script for increasing value onscroll? - javascript

I want to create a script in which i want to increase the margin-top of the image on scrolling down the page and vice-versa, but i cant understand where to put the event listener.
So,That when scrolling down the page, the image moves with the scroll and stops before the green div.
document.getElementById("body").addEventListener("scroll", myFunction);
function myFunction()
{
console.log('scrolled');
}
#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}
<div id="body">
<div id="yellowdiv">
<img id="image"src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
P.S - new to JS
Thanks in Advance.


You are trying to attach the event handler to the #body div but you are not scrolling the div, you are scrolling the window.
If you want to attach a scroll-event handler to the div, it must be scrollable. Below you can find an example with a wrapper div #scrollable and the event handler is attached to it.
document.getElementById("scrollable").addEventListener("scroll", myFunction);
function myFunction() {
console.log('scrolled');
}
#scrollable {
height: 100px;
overflow-y: auto;
}
#body {
width: 100%;
height: 3000px;
}
#yellowdiv {
width: 100%;
height: 1000px;
background-color: yellow;
}
#image {
width: 50%;
height: 500px;
border: 10px solid black;
}
#bluediv {
width: 100%;
height: 1000px;
background-color: blue;
}
#pinkdiv {
width: 100%;
height: 1000px;
background-color: pink;
}
#greendiv {
width: 100%;
height: 1000px;
background-color: green;
}
<div id="scrollable">
<div id="body">
<div id="yellowdiv">
<img id="image" src="#">
</div>
<div id="bluediv">
</div>
<div id="pinkdiv">
</div>
<div id="greendiv">
</div>
</div>
</div>

Related

How to position fix a button inside a particular div?

Button show has position: fixed property only inside the second div. When I scroll to the first or last div, button should not be fixed on them, which means the button should be visible only inside the second div, how can I do that?
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: fixed;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one">
<button class="mybutton">Click</button>
</div>
<div class="two"></div>
<div class="three"></div>
</body>
</head>
</html>

Here's one way, though I don't know if it's the one you're looking for. Use position:sticky on the button, and position:relative on the container (.two)
.one {
height: 600px;
width: 100%;
background-color: red;
}
.two {
height: 600px;
width: 100%;
background-color: yellow;
position: relative;
}
.three {
height: 600px;
width: 100%;
background-color: pink;
}
.mybutton {
width: 80px;
height: 20px;
position: sticky;
right: 10px;
top: 100px;
}
<div class="one"></div>
<div class="two"><button class="mybutton">Click</button></div>
<div class="three"></div>

Position: fixed places an element relative to the view port. If you want to place an element relative to a parent element, place it inside the parent element with Position:relative
.one{
height:600px;
width: 100%;
background-color: red;
}
.two{
height:600px;
width: 100%;
background-color: yellow;
}
.three{
height:600px;
width: 100%;
background-color: pink;
}
.mybutton{
width:80px;
height: 20px;
position: relative;
right:10px;
top:100px;
}
<html>
<head>
<body>
<div class="one"></div>
<div class="two">
<button class="mybutton">Click</button>
</div>
<div class="three"></div>
</body>
</head>
</html>

You should try to use
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
With window.scroll() you can attach event on the scroll of the page like eg:
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('.mybutton').css("position": "fixed");
}else if ($(window).scrollTop() > 200 || $(window).scrollTop() < 100){
$('.mybutton').css("position": "static");
}
})`

Parent DIv can't scroll because of Position:Fixed content

I made a mobile web page using IScroll.
The composition of the web page is as follows.
HTML
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item">
<div class="disable">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
CSS
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
If you run the code above,
You can scroll by raising the cursor to A and B.
On mobile, you can scroll using touch.
But, So if you raise your cursor over a DIV with Aqua background color and scroll,
I can't scroll.
The DIV, "Position:Fixed," is...
Since the height is 100%, I don't think there's a scroll event.
For your information, Item needs a Click event.
So the "Pointer-Events: None" property is not allowed.
The "Trigger" function can't even give you an event.
Give me an idea.
https://jsfiddle.net/kasthe/b3w2hpn1/3/

Apply pointer-events: none to just the class=disable div. div class=item is still clickable.
$(".wrap").css("height", $(document).height() + "px");
console.log($(".wrap").height())
html, body, .wrap {
margin: 0px;
height: 100%;
}
.content {
height: 100%;
overflow-y: scroll;
}
.wrap {
width:100%;
height:100%;
background-color:white;
}
.disable {
position: fixed;
width:100%;
height:100%;
background-color:aqua;
z-index:1;
}
.a, .b {
width: 100%;
height:100px;
position:relative;
z-index:2;
}
.a {
background-color: red;
}
.item {
width:100%;
height:100%;
}
.b {
background-color: blue;
}
<div class="wrap">
<div class="content">
<div class="a">
TOP
</div>
<div class="item" onclick="alert('item clicked')">
<div class="disable" style="pointer-events:none">
Google Ads
</div>
</div>
<div class="b">
BOTTOM
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

Parent div clickable between another div

.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
}
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
I'm trying to make the whole div "black" clickable with an hyperlink, but without the div "red" area with any success. I don't know if I should solve it with css or JS, or simply just HTML5

UPDATED
I forgot to wrap the target with jquery object.. sorry
if you want to prevent a child element from triggering an event then can do this via jquery
$('a').click( function(e) {
if($(e.target).is('.black')) {
console.log('whatever..');
// or do whatever you want
} else {
e.preventDefault();
}
});
as for the cursor you can do this via css
.red {
cursor: default;
}

Might be worth exploring a different approach here, in terms of structuring.
Remove .mr-red from .mr-black
Wrap .mr-red and .mr-black in .mr-brown
Position .mr-red absolute and place accordingly within .mr-brown, overlaying .mr-black
.mr-brown {
position: relative;
height: auto;
width: auto;
display: block;
}
.mr-black {
background-color: black;
width: 500px;
height: 500px;
}
.mr-red {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
<div class="mr-brown">
<a href="#">
<div class="mr-black"></div>
</a>
<div class="mr-red"></div>
</div>

I would separate them completely and use absolute positioning to put the red square in the right place.
.wrapper {
position: relative;
}
.wrapper a {
display: inline-block;
}
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
<div class="wrapper">
<a href="#">
<div class="black">
</div>
</a>
<div class="red"></div>
</div>

You can use event.stopPropagation:
HTML
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
JS
$(".black").click(function(e) {
alert("black");
});
$(".red").click(function(e) {
e.stopPropagation();
});
CSS
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
}
EXAMPLE FIDDLE

const clickableBox = document.querySelector(".black")
const anchor = document.querySelector("a")
anchor.addEventListener("click", (e) =>
e.target !== clickableBox && e.preventDefault())
https://jsfiddle.net/korwx3qv/4/

That is so interest issue. Please, take a look here:
<a href="#">
<div class="black">
<div class="red"></div>
</div>
</a>
.black {
background-color: black;
width: 500px;
height: 500px;
}
.red {
background-color: red;
width: 200px;
height: 200px;
cursor: default;
}
$('a').click( function(e) {
if($(e.target).is('.black')) {
alert('.black');
}
});
And demo here: https://jsfiddle.net/kkz6y7uo/2/
Hope it would help you :)

How to create two columns (one with two rows and other with one) without using fixed sizes?

I've successfully created two columns with various number of rows, however, I don't want to use fixed sizes. Is it possible without Javascript?
Here's my code:
HTML:
<body>
<div class='table'>
<div class='cell'>
<div class='row'>test</div>
<div class='row'>test</div>
</div>
<div class='cell'>
test
</div>
</div>
</body>
CSS:
body
{
font-size: 20px;
color: white;
background-color: black;
}
.table
{
width: 100%;
height: 500px;
background-color: yellow;
}
.row
{
background-color: red;
height: 50%;
}
.cell
{
width: 50%;
float: left;
height: 100%;
background-color: blue;
}
Preview: https://jsfiddle.net/XyYND/22/

You just need to add height:100% to your other elements.
Here's an updated fiddle: https://jsfiddle.net/XyYND/23/
And the CSS:
html {
height:100%;
}
body
{
font-size: 20px;
color: white;
background-color: black;
height:100%;
}
.table
{
width: 100%;
height: 100%;
background-color: yellow;
}
.row
{
background-color: red;
height: 50%;
}
.cell
{
width: 50%;
float: left;
height: 100%;
background-color: blue;
}
And the HTML:
<body>
<div class='table'>
<div class='cell'>
<div class='row'>test</div>
<div class='row'>test</div>
</div>
<div class='cell'>
test
</div>
</div>
</body>

You could use flexbox (Fiddle link):
.table
{
display: flex;
width: 100%;
height: 500px;
}
.cell
{
flex: 1;
height: 100%;
background-color: blue;
}
flex: 1; will make the divs take as much space as possible.

How to fill remaining div?

Well i have the following: http://jsfiddle.net/a9VDa/12/
I am trying to make the jquery tree fill the remaining contents of the div "a" but also include a scroll if there isn't enough space.
<div class="a">
<div class="b"></div>
<div class="c" id="tree"></div>
</div>

My suggested solution: http://jsfiddle.net/Bt2sL/2/
Without orange part scrolling.
HTML
<div class="b"></div>
<div class="a">
<div class="c" id="tree"></div>
</div>
CSS
.a {
height: 60px;
background-color: red;
height: auto;
overflow: scroll;
height: 200px; // adjust this to your need
}
.b {
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
}

Can you just make div b fixed and add some padding to a with overflow scroll set?
.a {
height: 60px;
background-color: gray;
position: relative;
overflow: scroll;
padding-top: 22px;
}
.b {
position: fixed;
top: 0;
height: 22px;
background-color: coral;
}
.c {
background-color: lightblue;
height: auto;
overflow: scroll;
}

Categories

Resources