What could be causing my resize event to not trigger?

My goal is for the #sequence div to be full height of the browser window when the window size is greater than 920px in height. In such cases, I also want to trigger a plugin. If the window size is lower than 920px, then the height of the #sequence div should default to the value set in my CSS file. This functionality works when the page is initially loaded, but I am facing issues with the resize event not being triggered. Despite no errors in the console, the resize event remains unresponsive.

Below is the code snippet that I have used, which is largely based on a post found on Stack Overflow:

var eventFired = 0;

if ($(window).height() < 920) {

} else {
    fitSequence();  
    eventFired = 1;
}

$(window).on('resize', function() {
    if (!eventFired == 1) {
        if ($(window).height() < 920) {

        } else {
            $(window).resize(function(){ fitSequence(); });
        }
    }
});

For reference, this is the fitSequence plugin that I am using:

function fitSequence(){
var height=$(window).height();

$('#sequence').css('height',height-100+"px");
};

Answer №1

In case the condition is incorrect:

if (!eventFired == 1) {

It needs to be corrected to:

if (eventFired != 1) {

Furthermore, in the function section, there is a part of the code that is unclear:

$('#sequence').css('height',height-100+"px");

It should be rewritten as follows:

$('#sequence').css('height',(height-100)+"px");
                           ^^ add brackets 

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

Hide specific content while displaying a certain element

Creating three buttons, each of which hides all content divs and displays a specific one when clicked. For instance, clicking the second button will only show the content from the second div. function toggleContent(id) { var elements = document.getEl ...

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

NodeJS is throwing a `ReferenceError` because the `io` variable is not

I am working on a NodeJS project and I need to access a variable that is defined in my app.js file from another file. Is this possible? Here is my code: app.js var app = express(); var io = require('socket.io').listen(app); ... otherFile ...

Having trouble getting the "save adjustments" button to become enabled after using the jQuery datepicker

It's puzzling that my code doesn't respond to the selection of a date using the jQuery date picker to re-enable the "save changes" button. Interestingly, changing values in other input boxes seems to work perfectly fine. I'm struggling to gr ...

I'm having trouble finding the solution to setting a token in my request header

I have been following a tutorial in a book to build the authentication for my app. However, I am facing an issue where after logging in correctly, I am unable to set the token back into the request. The error message that I receive is: Failed to execute ...

I'm having trouble getting my innerHTML command to update anything on the webpage, and the reason is eluding me

Below is the code snippet provided: <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form> <input type=text name=tick1></input> <input type=text name=tick2></input> ...

Generating an error during mongoose callback

Currently, I am in the process of developing a Node.js + Express application. The database I am working with is Mongo, and I have integrated Mongoose to establish a connection with this database. In my code, I am attempting to handle exceptions within a M ...

Change occurring within a cell of a table that has a width of 1 pixel

In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

What could be causing the background image on my element to not update?

I'm attempting to utilize a single background image that is 3 pixels wide and 89 pixels tall. Each vertical stripe of 1 pixel will serve as the background for a different div. I had presumed that adjusting the background-position by -1px 0 and specif ...

Why does my AJAX form continue to load my PHP page?

I am really struggling to wrap my head around AJAX and could definitely use some assistance. I found this example online, but it's not working quite like I anticipated. The form is successfully posting the data, but upon submission, the .php page is ...

Display or conceal a div element depending on the user's choice

I am looking to hide inactive divs, but whenever I reload the page, all tab contents merge into one. The screenshot below shows the issue I'm facing. Screenshot Below is the code snippet: $('.tab a').on('click', function ...

Prevent the execution of useEffect on the client side in Next JS if the data has already been retrieved from the server

Upon loading the server side rendered page, data is fetched on the server and passed to client side components. To handle this process, a hook has been created with a state that updates based on checkBox changes. When the state changes, a useEffect is tri ...

Issue with Submit Button Functionality in Django Form Submission

I'm currently facing an issue with an HTML template I built using Bootstrap. My problem lies in the fact that I have a JavaScript function that dynamically adds rows to a Django form with specific fields whenever I need to. However, when I add a row, ...

Despite being present in the node_modules folder, the ag-grid-vue module appears to be missing

Currently, I am diligently following the Vue.js AgGrid getting started tutorial step by step: https://www.ag-grid.com/vuejs-grid/ However, upon adding the <script> section and saving my progress, an error promptly appears: ERROR Failed to compile ...

Javascript promises executing in a mixed-up sequence

Utilizing Javascript's native Promise, I created a modified version of fs.readFile called readFileAsync. This function reads and parses a JSON file, returning the object when resolving. function readFileAsync(file, options) { return new Promise(fun ...

How to Use Jquery to Select this Type of Identifier?

There is an identification like the following <input type="text" id=MyField[1d81c42a-4c8f-45a8-a219-0ff29d328103].Name /> In order for some Asp.net mvc code to function correctly upon submission and binding it to a model, this action needs ...

Performing a Protractor test on an Angular 5 application

We're in the process of transitioning our ui-library from AngularJS to Angular 5. I'm encountering challenges with the protractor tests. I need guidance on how to update the old AngularJS test to align it with Angular 5. If anyone has dealt wit ...

Encountering a 404 error with Next.js 13 dynamic routing

Whenever I click on an item, it redirects to the dynamic route "http://localhost:3000/products/{id}" but instead of displaying the data, I get an error. Here is my file structure: app components Product.js pages Products [id].js layou ...

Mobile video created with Adobe Animate

Currently, I am designing an HTML5 banner in Adobe Animate that includes a video element. However, due to restrictions on iPhone and iPad devices, the video cannot autoplay. As a workaround, I would like to display a static image instead. Can anyone provid ...