My current scenario involves two divs, with one nested within the other. The task at hand is to determine the position of the child div in relation to the browser window. Specifically, I aim to detect when the user scrolls down and have the child div fade out slowly if it is positioned 100px above the bottom of the browser window.
I am seeking guidance on how to achieve this using jQuery. Both divs have either relative or absolute positions, but not fixed position.
Here is a suggested solution:
$(window).scroll(function () {
var distanceFromBottom = 100;
if ( ( $("#outerBox").offset().top + $("#contentBox").height() - $(window).scrollTop() ) > $(window).height() - distanceFromBottom ) {
$("#contentBox").fadeOut("slow");
} else {
$("#contentBox").fadeIn("slow");
}
})
The code above assumes that you want the content to fade back in when it is greater than 100 pixels from the bottom. If this is not the desired behavior, simply adjust the if statement accordingly.
It appears that you are implementing this effect on a music player. Keep in mind that fading or hiding an embedded object may not provide a smooth animation using jQuery. The script provided will still work, but the revised version below simplifies by using only one div and the embedded object within it. Ensure that the outer div closely wraps the inner div for proper functionality.
$(window).scroll(function () {
var distanceFromBottom = 100;
if ( ( $(".mediaPlayer").offset().top + $(".mediaPlayer object").height() - $(window).scrollTop() ) > $(window).height() - distanceFromBottom ) {
$(".mediaPlayer object").hide();
} else {
$(".mediaPlayer object").show();
}
})
I have made adjustments based on your requirements and shared the updated code on this pastebin link for reference.
Edit: Corrected the logic for disappearing when closer to the bottom by changing the "<" to ">". The pastebin code has also been updated accordingly.
let inner_position = $("#innerdiv").position();
let viewport_size = $(window).height();
if( ( inner_position.top + $("#innerdiv").height() ) > viewport_size - 100 )
$("#innerdiv").fadeOut("slow");
This solution has not been reviewed, but it should provide a basic understanding of the concept.
When retrieving data from the BE API, it is in the format: { "details": { "address": { "street": "123/4", "city": "Banglore" } } } In our React project, we access this dat ...
When using vue.js, you have the ability to iterate over an array of items in your template as shown below: <div id="app"> <div v-for="(item, i) in items">i: item</div> </div> <script> var example2 = new Vue({ el: &ap ...
Looking to compile a full list of available items for purchase on a specific website can be quite challenging. The webpage in question seems to only display 12 items at a time, and requires manual scrolling to load more. Is there a way, perhaps through C# ...
I am currently working on implementing a redirect feature in next.js 13 when the jwt back-end is not received. This is being done with the appdir activated. This is the code in my middleware.ts file: import { NextResponse } from 'next/server' im ...
Is there a way to make the code below only visible when the url ends with #404? <!--404 code--> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; border-color: #ff0263; box-sizing: border-box; } < ...
I'm struggling to figure out how to organize a Bootstrap 4 menu with numerous links. Currently, when I include too many links, the navbar disregards the container and expands its width beyond the container. Here is an image for better clarification: ...
I need help understanding how to declare a variable in a React JS class so that it is accessible in different functions. Here is my code snippet: class MyContainer extends Component { constructor(props) { super(props); this.testVariable ...
How can I apply different styling properties when hovering over a selected option with the class ".form-option-card" and ".form-option-selected"? By default, unselected options only have the class form-option-card, while the selected option includes the fo ...
Currently, when a file already exists, I add a timestamp prefix to the filename to ensure it is unique. However, instead of using timestamps, I would like to use an ordinal suffix or simply append a number to the filename. I am considering adding an incr ...
I'm currently working with a function that looks like this: handleChangeButton = (e) => { alert(e.target.value) this.props.setFieldValue('degreeLevel', e.target.value); } Within my component's render function, I have the ...
I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...
I am facing an issue with the code provided below as it is throwing back an 'undefined' error for the countingNumbers variable. My objective is to incorporate the class name 'numbered' so that I can iterate over it in JavaScript and ass ...
Lately, I've been working on creating a versatile SceneManager class that not only manages scenes but also handles rendering. class SceneManager { constructor() { this.scene = new THREE.Scene(); this.camera = new THREE.Perspectiv ...
In my current situation, I have implemented a setInterval based code that continuously checks the value of an AJAX call response. Here is how it looks: var processInterval = setInterval(function () { var processResult = getVideoStatus(data.file_name) ...
Hi everyone, I'm currently attempting to create a ray that extends straight out from the camera and intersects with objects in my line of sight. However, all the resources I've come across involve using the mouse for this interaction, and I' ...
Can anyone help me figure out why the div on the right is not pushing itself away from the one on the left when I hover over it? I want it to move on mouseenter and return to its original position on mouseleave. The changing background colors are just ther ...
How can I make a modal appear when the user clicks select? The first page has radio buttons (e.g. oneway, twoway), and I want the second page to display different fields based on which radio button is selected. Can I use an if statement for this? If so, ...
My website has a two-column layout with a sidebar and content section that are both set to equal height when the window loads and resizes. The page is designed to be responsive. To dynamically arrange blocks within the content area, I am utilizing a jQuer ...
import React from 'react'; import { Formik, Form } from "formik"; import { InputField } from "./formui/InputField"; import { applyGharwapasi } from "../../appollo/applyGharwapasi/applyGharwapasi"; import { useMutatio ...
Let's talk about a predicament I'm facing: trying to integrate a dropdown box into a form that already makes use of the jquery.validate plugin along with other fields that currently validate correctly. The dropdown box is being added using the jq ...