Adjusting HTML5 drag height while resizing the window

Code conundrum:

var dragHeight = window.innerHeight - parseInt(jQuery("#drag_area").css("margin-top")) - 5;
. It sets the drag height based on browser size, but there's a glitch. If I start with a non-maximized browser and then maximize it, the drag height remains unchanged from before and restricts dragging to the bottom of the screen. Any solutions would be greatly appreciated. Thanks!

Answer №1

One possible solution could look like the following...

let dragHeight,
    calculateDragHeight = function() {
        dragHeight = window.innerHeight - parseInt($("#drag_area").css("margin-top")) - 5;
    };

calculateDragHeight();

$(function() {
    $(window).resize(function() {calculateDragHeight();});
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Steps to clear the form in vue after the ajax request has been successfully submitted

Exploring Vue.js Web Form Validation with a Scenario If you are interested in the vue-form validator library, it can be found at https://github.com/fergaldoyle/vue-form For a demonstration of this scenario, check out the following jsfiddle link: https:/ ...

Generate visual representations using servlets and JSPs

I need to design a diagram using JSP and Servlets similar to the image provided. What approach should I take? What kind of logic would be most effective in this scenario? View the diagram ...

Add the cordova plugin multi-image-picker with the following command

onDeviceReady: function() { window.imagePicker.getPictures( function(results) { for (var i = 0; i < results.length; i++) { alert('Image URI: ' + results[i]); } }, function ...

Error Alert: Attempting to access the 'prototype' property of an undefined value has resulted in a TypeError after switching to react-scripts version 4.0.3

I encountered a problem where I received the following error message: (Uncaught Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js)). After attempting to resolve it by using npm install, a new error popped up in the console: path ...

After upgrading from jquery version 2.1 to 3, the custom rules for Knockout Validation are no longer functioning as expected

In my project using knockout 3.2, I have a custom validation rule that retrieves its value from an ajax call on a specific field. Everything worked perfectly with jQuery version 2.1. However, when I updated to jQuery version 3.0, the functionality stopped ...

Progress Bar Countdown Timer

I have made some progress on my project so far: http://jsfiddle.net/BgEtE/ My goal is to achieve a design similar to this: I am in need of a progress bar like the one displayed on that site, as well as the ability to show the days remaining. Additionally ...

Include a new feature within an onClick event

I'm looking to implement a single page application using React.js and I want to incorporate a list within a material-ui drawer. The goal is to dynamically add elements to an array every time a button is clicked, but I'm stuck on how to write this ...

Inform registered customers by utilizing AngularJS (angular-websocket-service) and Spring Boot to implement Websockets notifications

Exploring the world of AngularJS and FullStack development is an exciting journey for me. The architectural setup of my current app is already in place and ideally should not be altered (for security reasons). I've been able to send messages to the se ...

Building a Django Bootstrap Modal for managing CRUD operations on related model instances

Our database structure is as follows: class Dossier(models.Model): name = models.CharField('Name', max_length=200) class Meta: verbose_name = 'Dossier' verbose_name_plural = 'Dossiers' def __str__(self): return se ...

Is it possible to make the entire div clickable for WordPress posts, instead of just the title?

I am currently facing an issue where only the h1 element is linked to the post, but I want the entire post-info div to be clickable. Despite my efforts, I haven't been able to make the whole div clickable, only the h1 element remains so. Below is the ...

The call stack in mongodb has surpassed its maximum size limit

I am currently executing a method. Method execution var message = "Hello" function1("78945612387", message, null, "Portalsms") Node JS Code function function1(mobileno,body,logExtraInfo,messageType){ request(uri, function (error, resp ...

The straightforward splitting of a string is yielding an object rather than an array

Attempting a simple string split in NodeJS is resulting in an unexpected outcome where it returns an object instead of an array. var mytext = "a,b,c,d,e,f,g,h,i,j,k"; var arr = mytext.split(","); console.log(typeof mytext); <======= output string conso ...

How to implement a service function to handle $http responses in a controller

Is it possible to use $http only for my service and not the controller? I am getting undefined in my console.log when trying to display data in a $scope. Here is my code: app.controller('adminControl', ['$scope','$routeParams&apo ...

What is the process of transforming a String into a Function prototype in JavaScript?

Recently, I encountered a JavaScript object containing key-value pairs with functions as values: var serial = { open: function(a, b) { // do something.. }, close: function (a,b) { // do something } } Due to certain requirements, I had ...

Facing an issue where the CSS class name is not displaying correctly when utilizing CSS Modules with my React

This webpack.config.js file is dedicated to the module section, where loaders are defined for JSX files and CSS. module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'bab ...

Unlimited scrolling feature on a pre-filled div container

Looking for a way to implement infinite scroll on a div with a large amount of data but struggling to find the right solution? I've tried various jQuery scripts like JScroll, MetaFizzy Infinite Scroll, and more that I found through Google search. Whi ...

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

Tips for obtaining results from a File Reader

I am currently facing an issue with an onchange event in my HTML. The event is intended to retrieve an image from the user, convert it to a data URL, and then send it over socket.io to store in the database. However, I am struggling to figure out how to ac ...

How can we eliminate the modal-open class in Angular when transitioning to a different URL?

Currently, I am facing an issue with a bootstrap modal. There is a button inside the modal which upon clicking should navigate the current component to another component named 'questions'. The problem arises when the new component is loaded, as t ...

What is a more streamlined approach to creating a series of methods and functions that alter a single variable consecutively?

My JavaScript project involves handling sub-arrays within a long data file that cannot be altered. The data, stored in a variable named data, is retrieved via a script tag with a specified URL property. I need to extract and modify specific sub-arrays from ...