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

Tips for sending multiple forms and having PHP interpret it as a single form using $.ajax

I am working on an email function using $.ajax with 3 different forms that are loaded through an ajax request. When a user clicks on a button, the current form will disappear and a new form will appear. The challenge I am facing is how to send data from al ...

javascriptphpjqueryajaxforms

What is the procedure for matching paths containing /lang using the express middleware?

I need to target paths that contain /lang? in the URL, but I am unsure how to specifically target paths that begin with /lang? I have two routes: app.get('/lang?..... app.get('/bottle/lang?....... I want to target these routes using app.use(&a ...

javascriptnode.jsexpress

Guide: Looping through a typed Viewbag array - best practices

I have passed a List<AdminUsers> through the Viewbag to a view. This list is then assigned to a JavaScript variable and looped through. However, when debugging on the view, I noticed that the for loop is not being executed, even though I set a break ...

javascriptasp.netlistfor-loopdocument-ready

JQuery does not support manipulated content

I'm facing a frustrating issue. I am using Ajax to call a PHP file and then incorporating the response into my HTML content. This method allows me to have dynamic content without having to reload the page. The problem I'm encountering is that th ...

phpjqueryajaxparsing

What is the best way to determine the total of values from user-input fields that are created dynamically

Scenario- A scenario where a parent component is able to create and delete input fields (child components) within an app by clicking buttons. The value of each input field is captured using v-model. Issue- The problem arises when a new input field is crea ...

javascriptformsvue.js

Rotating display for pictures accompanied by a clickable tab for accessing EDITED material

I have made some updates to my issue and here is the fiddle link: http://jsfiddle.net/kozola/8M6wS/ Here's the code snippet: <style> #container { margin-top: 200px; position: relative; padding: 0 10px 0 100px; border: gray 1px dotted; float ...

jqueryhorizontal-accordion

"What is the purpose of using the `position: absolute` property for movement transitions while deleting an item from a list

Click here to see an example where items smoothly move in a list when one item is removed. To achieve this effect, the element needs to be styled with: .list-complete-leave-active { position: absolute; } I'm curious as to why it doesn't work w ...

javascriptcssanimationvue.js

Obtaining a roster of file names with the help of the Glob

I'm attempting to gather a list of file names in node, however I believe I am encountering a scoping problem. var files = []; glob(options.JSX_DEST + "/*.js", function (er, files) { files = files.map(function(match) { return path.relati ...

javascriptnode.js

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Currently, I have successfully created a pop-up form, but there are two issues that need fixing. The form is not responsive. After filling/submission, the form redirects to a separate landing page for another fill out. Expected Outcome: Ideally, I would ...

javascripthtmlcssresponsive-designmodal-dialog

Server experiencing problem with image uploads

Need Assistance with the Following Issue: Here is the code snippet in ASPX: <input type="Button" id="BtnUpload" class="button1" value="Upload Image" onclick="clickFileUpload();" /> JavaScript function on the ASPX page: function UploadImage(path) ...

javascriptjqueryasp.net

template not being loaded with form

My Django form is not showing up when I try to implement it. Even after checking the browser's inspector, there is no sign of it being loaded at all. If more information is required, please let me know. Here is the project structure: /beerad url ...

pythonhtmldjango

What could be the reason for the malfunctioning toggle button on the Bootstrap navbar?

I'm having trouble with my bootstrap navbar. I've added the .sidebar-collapse class to the body tag so that when I click on the toggle button, the data should appear on the right side. However, this isn't happening. Can anyone spot what&apos ...

htmltwitter-bootstrapbootstrap-4

What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

I'm trying to center a CSS spinner on the page, but I am struggling with making it happen. Even when scaled down by 50%, the height and width remain at 200px. <div class="center" style=""> <div class="uil-default-css" style="width: 200px ...

htmlcss

What is the best way to implement a dialog box that displays a website within it, all while keeping my SharePoint site running in the background?

For a while now, I've been working on SharePoint Online and trying to troubleshoot an issue without success. That's why I'm considering starting over with a specific section of my SP site from scratch. My current project involves creating a ...

javascripthtmliframesharepointmodal-dialog

Tips for implementing varying styles depending on the number of columns in a table

I am working with multiple tables that share similarities, but differ in the number of columns each table has. I am looking to create a styling rule where depending on the number of columns, the width of each column will be set accordingly. For example, if ...

htmlcss

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

(Definition) What is the proper way to reference a variable inside another variable?

Currently, my project is using inconsistent terminology when referring to variables, and I need to clarify this issue. Let's take an object defined in this way: var anObject = { a: { value1: 1337, value2: 69, value3: "420 ...

javascriptterminology

Versatile route able to handle any request thrown its way

My Node.js app is up and running smoothly using the Express.js framework. All routes in my application are set to post routes, such as: app.post('/login', function(req, res){ //perform login validation }); app.post('/AppHomepage', fun ...

javascriptnode.jsexpressroutes

Check input validation using jQuery

Looking for a jQuery function to validate the value of a textbox. Criteria: required field:true, minimum length: 8, maximum length: 16, only alphabets and numbers allowed. I have attempted to write a function: jQuery.validator.addMethod("nameRegex", f ...

jquery

Unable to configure node and express for file serving

Currently using Windows 7, I have successfully installed nodes 0.10.12 and the latest versions of express and express-generator globally. I then proceeded to create a new express project called nodetest1 and installed all dependencies using npm install. U ...

javascriptnode.jsexpress