Upon opening my website, an information box (div) appears on the screen. However, when the user scrolls down and the box is no longer visible, I want it to always appear in the top right corner while scrolling.
I have figured out how to keep it visible at all times by using position: fixed. The issue is determining when it is no longer within view while scrolling. I am open to using JavaScript for this, and I personally prefer Prototype JS.
Thank you!
To ensure an element remains fixed when scrolled, utilize the getBoundingClientRect() method which gives the element's position relative to the viewport. If the top position is less than 0, then it needs to be fixed in place.
Sample HTML structure:
<div id="stick">
I should be fixed… sometimes
</div>
CSS styles:
#stick {
position: absolute;
top: 60px;
}
#stick.fixed {
position: fixed;
top: 0;
}
JavaScript code:
var stick = document.getElementById('stick');
window.onscroll = function(){
if(stick.getBoundingClientRect().top < 0){
stick.className = 'fixed';
} else if(stick.className.indexOf('fixed') < 0){
stick.className = '';
}
}
After retrieving data from my webservice call, I am sending this JSON response: [ [ { "id": 123, "vendorName": "PoppyCounter", "item": "Chocolate" }, { "id": 1234, "ve ...
Imagine having several div's on a webpage all with the ID of "Toggle". Each div contains two other smaller divs. "Headline" which is always visible. "Comment" which appears/disappears when the headline is clicked (initially hidden). How could I ac ...
Currently, I am attempting to load a local HTML file from the assets folder into a webview. Even though I can successfully load the HTML file in the webview, there seems to be an issue with the file's reliance on an external .js file for calculations. ...
Here is the CSS code I am using: background-color: White; border: 2px solid black; padding: 10px; position: fixed; right: 5px; top: 0; width: 250px; While this code works well in Chrome, Firefox, and Safari, I am facing issues with IE8. The position of t ...
How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...
Having some difficulty working with custom react hooks. I've created 2 custom hooks - one for fetching an ID and another for fetching a profile using the previously fetched ID. Since the second hook is dependent on the ID, I need to await the promise ...
On my website, I have a link that triggers an AJAX request. However, when the response comes back and I try to use the toggleClass function in the following .js code snippet, it doesn't work as expected: $(document).ready(function(){ $("td").click( ...
My current setup involves using D3js with MongoDB and AngularJS to showcase my data. Everything works smoothly until I decide to give my JSON array a name. Suddenly, Angular starts throwing errors at me and I'm left confused as to why. Here is the or ...
In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...
When attempting to send a PDF in the code snippet below, I encountered the following error: app.post('/send-pdf',[ body('number').notEmpty(), ], async (req, res) => { const errors = validationResult(req).formatWith(({ msg }) =&g ...
How can I send an array from JavaScript to PHP using AJAX? I'm not sure how to do this, especially when trying to send it to a PHP function like a controller class. Can someone please correct me if I'm wrong? Below is my current JavaScript code f ...
As a beginner working with contexts, I am taking it slow. Recently, I came across logging Providers to test the value and encountered a constant 'undefined' result. To troubleshoot, I tried moving them side by side in the code to see if it makes ...
I am currently working on my very first angularjs application using version 1.6x, and I am encountering some 404 errors with my router. Here is how my router is set up: app.config(function($routeProvider, $locationProvider) { $locationProvider.html5M ...
I have recently embarked on the journey of building a nodejs application and decided to incorporate DHtmlX Scheduler as my calendar. To my dismay, I encountered an issue where the events are not displaying on Safari or IE, despite working perfectly fine on ...
My goal is to have the caption of Bootstrap Carousel displayed above the content, but I'm encountering issues with it. When clicking on the chevrons, you may notice the < Item 1 > bouncing... (This behavior is a bug, and logically speaking, I ex ...
I'm having trouble getting a textbox to display multiple lines of text. For instance, when I copy three lines of text from Microsoft Word and paste it into the textbox, only the first line appears. The other two lines are not showing up, and I'm ...
I'm having issues with my Angular build on IOS12 as it's only displaying a blank page. Below are the dependencies listed in my package.json: "dependencies": { "@angular/animations": "^15.0.0", "@angular ...
I'm experiencing a problem with my ajax request where I am sending an object to a python program using JSON: $.ajax({ url: "http://localhost/cgi-bin/python.cgi", type: "POST", data: JSON.stringify(myobject), dataType: ...
When utilizing the REST API to extract data from a cell range in Google Sheets, the response returned is as follows: { "range": "RECORD!A2:J2", "majorDimension": "ROWS", "values": [ [ "07/11/2016", "21:20:10", "3", "MAIN" ...
Currently, I am integrating Highcharts and Vue.js simultaneously while incorporating multiple charts on my webpage. As of now, I have successfully displayed data on all the charts without encountering any issues. However, my goal is to assign a special tit ...