Automatically adjusting the top margin of the main content section depending on the variable height of a fixed header

Visit our mobile site here (mobile view) Currently, I have set the margin-top of .main-content based on sticky-animation, which keeps the header fixed at the top on mobile. However, there is a div with a close button (X) that alters its height dynamically without changing the margin, causing an unsightly gap. Here's the JavaScript being used:

if (jQuery(window).width() < 425) {
$(function(){
    $('.main-content').each(function(){
        var headerHeight=$('.sticky-animate').height();
        // headerHeight+=15; // maybe add an offset too?
        $(this).css('margin-top',headerHeight+'px');
    });
});
}

If anyone can suggest improvements to make it more adaptable, that would be greatly appreciated. The script for hiding the bar is as follows:

function Hide(HideID) 
{
  HideID.style.display = "none"; 
}
  <div id="right-showing">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>

Looking forward to some assistance with this issue.

javascripthtmljquerycssshopify

Answer №1

Essentially, the goal is to re-run the header height function when the bar is closed.

I made some changes to your code to eliminate redundancy.

Here's a suggested approach:

function setMargin(index, element) {
    var headerHeight=$('.sticky-animate').height();
    $(element).css('margin-top',headerHeight+'px');
}

if (jQuery(window).width() < 425) {
    $(function(){
        $('.main-content').each(setMargin);
    });
}

function Hide(HideID) 
{
    HideID.style.display = "none";
    $('.main-content').each(setMargin);
}

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

Combining JSON arrays into a single multidimensional array

I have received the following JSON data from an API, and unfortunately, I do not have control over its format. Hence, changing the format is not feasible for me. I am facing difficulty in combining this JSON data into a single JSON array. My goal is to pr ...

javascriptjqueryjson

"Attempting to access a variable defined in one pipe results in it being undefined in a

Currently, I am utilizing gulp to process pages for a website. Some of these pages are PHP files, however, after going through the template engine, they all end up with a .html file extension. My intention is to add a property to each file indicating if it ...

javascriptnode.jsgulpgulp-rename

JS is programmed to automatically redirect the user after they have clicked on a div element and a

I'm having trouble with this code that is supposed to redirect a user after they click on the div and then the next button. It's not working for me :( Here is the code I am using: $("a.xxx").click(function() { $(this).toggleClass("yyy"). ...

javascriptjquery

What is the correct way to apply styles universally instead of using "*" as a selector?

With Nextron, I was able to successfully run my code, but upon opening the window, I noticed that the body tag had a margin of 8px. Although I managed to change this using the dev tools, I am unsure how to permanently apply this change in my code. When att ...

javascriptcssnext.jselectron

When using the jQuery ajax function to validate a form, it is important to note that the $_POST variables

I have an HTML form along with a jQuery function for form validation. After submitting the form values to my PHP files, I notice that the $_POST variable is not being set. What could be causing this issue? <form id="signup" class="dialog-form" action= ...

javascriptphpjqueryajaxforms

Steps for combining two collections into a single output in MongoDB with Node.js

My MongoDB collections consist of data that I need to merge using the $lookup operation. However, the result I get contains a nested array structure that is not ideal. I am looking for a solution to format the result as shown below: First collection locati ...

javascriptnode.jsmongodbcollections

Django: Error - < found where unexpected

Using a combination of Django and jQuery, I have implemented a file upload feature with AJAX. Everything seems to be working correctly - the files are successfully uploaded, reflected in the database, and stored on the server. However, upon completion of t ...

javascriptjqueryajaxdjangodjango-views

Insert text within a span tag next to a picture

Greetings everyone, Here is the current structure I am working on: <div class="payment-option clearfix"> <span class="custom-radio pull-xs-left">...</span> <label style="display:inline;width:100%"> <span style="fl ...

htmlcsstwitter-bootstrap-3

The Bootstrap dropdown menu is cut off and not fully visible on mobile devices

I am experiencing an issue with the mobile version of a website where the dropdown menu is not fully visible due to the position of a specific menu item and the number of items in the dropdown. The image below shows how I would like it to be displayed, fo ...

htmlcsstwitter-bootstrap-3

Starting Web Server using File (file://) protocol

I'm currently using Quasar to develop a Vue SPA web app/page. For this project, the web app will only run by clicking on the index.html file generated by the Quasar packager. This package will not be distributed online or hosted on any domain. My mai ...

javascripthtmlnode.jsvue.jsquasar-framework

An image appears fractured when placed within a table cell, yet displays perfectly when positioned outside of the table

I am currently facing an issue with loading image files in table cells using jQuery. Here is the code snippet from my View: <table id="personDataTable" border="1"> <tr style="font-size:large; height:auto"> <th width="10 ...

jqueryhtmlimagemodel-view-controller

Techniques for incorporating a variable into the value field in JavaScript

let y = data[1]; cell1.innerHTML ='<input id="text" type="text" value= "'y'"/>' ; This snippet of code does not render any content when attempting to pass the variable, but if you provide a specific value like "h", it will displa ...

javascriptphphtml

Implementing Mouse Scroll Click Functionality in ASP.NET with C# (Without JavaScript)

How can I add a Mouse Scroll Click (Middle Button) event in ASP.NET and C#? I have already looked into the MouseWheel Event, but it did not provide the solution I was looking for. This is the order in which mouse events occur: MouseEnter MouseMo ...

c#asp.netcsseventsmouseevent

How can we access a value within a deeply nested JSON object in Node.js when the key values in between are not

In the nested configuration object provided below, I am seeking to retrieve the value associated with key1, which in this case is "value1". It's important to note that while key1 remains static, the values for randomGeneratedNumber and randomGenerated ...

javascriptjsonnode.jsnpmnested

CSS: element misplaced at the top instead of the bottom where it belongs

The component with the ID of "#bottom-nav" actually appears at the top. I just designed this on CSS-board, so feel free to review the HTML and CSS code Take a look at it on CSS-desk here It is positioned at the very end of the page and includes a ' ...

htmlcss

Encountering an ETIMEDOUT error while sending out large (10k) post requests with axios.all in a Node

I have implemented axios.all to make simultaneous post calls. Below is the code snippet: let postUrls = []; data.forEach(item => { const itemData = { stream: stream_name, key: item.serialNumber, addr ...

javascriptnode.jspromiseaxiosaxios-retry

Having trouble with redundant code while updating state in ReactJS - React JS

Currently, I am working on a prayer times web app using reactJS (nextjs). To achieve this, I first fetch the geolocation coordinates and then retrieve the city and country name based on these coordinates. Following that, I obtain the prayer times for the s ...

javascriptreactjsreact-hooksnext.js

Is there a way to retrieve the redirected URL from an AJAX request?

Hi everyone, I'm currently trying to solve a puzzle regarding how to identify whether a PHP script redirects during an AJAX call. Does anyone have insight into whether JQuery AJAX has the capability to detect and keep track of location changes? Let&a ...

javascriptphpjqueryajax

Obtaining JSON Response from a Function in Wordpress using AJAX

Can anyone guide me on how to receive a function as a JSON response in my AJAX call after the document loads? Here is what I've attempted so far: Here is my HTML <!--Where I want to load my function--> <div id="applications"></div> ...

phpjqueryjsonajaxwordpress

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser