Adjusting the size of absolutely positioned div elements

Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively.

The central part needs to be resizable with some margin between the header and footer. A critical requirement is that the window should not display any scrollbars, and all divs must be centered.

The approach I'm taking involves positioning all three main divs absolutely, but I'm encountering challenges when trying to resize the middle portion. While @media queries initially seemed to work well, resizing the window vertically without affecting the width caused issues. To address this, I resorted to using jQuery to dynamically change CSS properties based on window size changes. However, this method lacks consistency as image sizes need adjustment, and CSS properties defined in JavaScript override those in the stylesheet due to higher precedence levels.

Are there alternative methods to achieve this design? What would you recommend as the best way to resize the middle section?

I've included the code snippet below for reference:

    <div class="container">
        <header>

        <div class="nav">
           ---upper navigation part
        </div>

        </header>   

        <div id="content">

            <span class="arrow-left"><a href="#"></a></span>
            <span class="arrow-right"><a href="#"></a></span>
            <div class="central">
            <div class="inner">                                  
                <h2>Contact Us</h2>

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputat</p>
                <div class="contacts">
                <p>some text </p>
                <p>some text </p>
                <div>image div</div>
                </div>

            </div>

            </div>

        </div>

        <footer>
             <div class="nav">
                 ---- navigation part
             </div>
         </footer>             
    </div>
</body>

CSS:

.container{
   position: relative;
    height:100%;
    margin:0 auto;
    width:100%;
}

header{
    position:absolute;
    top:50px;
    width:1000px;    
    left:50%;
    margin-left:-500px;
}
footer{
    position:absolute;
    bottom:50px;
    width:1000px;    
    left:50%;
    margin-left:-500px;
}

#content{
    width:1000px;
    margin:auto;
    position: absolute;
    top: 113px;
    bottom: 113px;
    left: 0px;
    right: 0px;

}
.central{
    height: 100%;
    position:relative;
    width:560px;
    float:right;
    background:red;
    overflow:hidden;
}

.inner{
    width:500px;
    float:right;
    padding:0 30px;
    margin: 4px 0;
}
.inner h2{
    font-family: sans-serif;
    font-size:2em;
    line-height:140%;
}
.inner p{
    line-height:120%;
    font-size:1em;
    padding:15px 0;
}
.image{
    background-image:url(image.png);
    margin-right:0 !important;
    display:block;
    margin:10px auto;
    width:500px;
    height:232px;
}

AND JS file:
$(window).resize(function(){
    var inner_h = $('.inner').height()/2;
    console.log(inner_h);
    $('.inner').css({
    position:'absolute',
    left: 0,
    top: '50%',
    'margin-top': '-'+inner_h + 'px'
    });
    $('.inner h2').css({
        'font-size': '2em'
    });
    $('.inner p').css({
        'font-size': '100%'
    });

    if($(window).width() < 1100){
        $('.map').css({
            'background-size':'350px 162px',
            'background-image':'url(images/contact-map350.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });     
    }
    if($(window).height() < 750){
        $('.inner').css({
            position:'absolute',
            left: 0,
            top: '55%',
            'margin-top': '-'+inner_h + 'px'
        });
        $('.inner h2').css({
            'font-size': '1.5em'
        });
        $('.inner p').css({
            'font-size': '90%'
        });
        $('.image').css({
            'background-size':'350px 162px',
            'background-image':'url(image.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });
    }
    if($(window).height() < 650){

        $('.image').css({
            'background-size':'350px 162px',
            'background-image':'url(image.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });

    }

});
$(window).load(function(){

    var inner_h = $('.inner').height()/2;
    console.log(inner_h);   
    $('.inner').css({
            position:'absolute',
            left: 0,
            top: '50%',
            'margin-top': '-'+inner_h + 'px'
    });
    $('.inner h2').css({
        'font-size': '2em'
    });
    $('.inner p').css({
        'font-size': '100%'
    });

    if($(window).width() < 1100){
        $('.image').css({
            'background-size':'350px 162px',
            'background-image':'url(image.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });     
    }
    if($(window).height() < 750){

        $('.image').css({
            'background-size':'350px 162px',
            'background-image':'url(image.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });

    }
    if($(window).height() < 650){

        $('.inner').css({
            position:'absolute',
            left: 0,
            top: '55%',
            'margin-top': '-'+inner_h + 'px'
    });
        $('.image').css({
            'background-size':'350px 162px',
            'background-image':'url(image.png)',
            'width': '350px',
            'height':'162px',
            'float':'left'
        });
    }

    });

// run the function:
$(window).resize();
$(window).load();

Answer №1

To effectively resize all of your absolutely positioned DIVs, a dynamic approach using straight Javascript or jQuery is recommended over relying on media queries. By handling everything within the window resize event, you can achieve a more fluid resizing experience.

Providing an exact solution is challenging without seeing any code and knowing where your image is located. One potential strategy is to load an image into a DIV element and then use new Image() in JavaScript to retrieve its dimensions. By comparing these dimensions to the screen's dimensions, you can adjust the size of the image accordingly.

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

Modify File Name with Fine Uploader: Personalize Your File Titles

When attempting to save files with a specific directory structure in my S3 bucket, I am encountering an issue where the getName method only returns the reference instead of the actual value of the file name. The output of getName is displayed as [object O ...

Efficiently and consistently refreshing the DOM with information while maintaining page integrity

I'm currently developing a Single Page Application (SPA) that utilizes AJAX to dynamically load content into a specific div. The layout consists of a side accordion menu, where clicking on an item loads relevant information in a neighboring div. Howev ...

Incorporating timed hover effects in React applications

Take a look at the codesandbox example I'm currently working on implementing a modal that appears after a delay when hovering over a specific div. However, I've encountered some challenges. For instance, if the timeout is set to 1000ms and you h ...

Is there a way to retrieve the current object as a JSON string from inside the object using either jquery or javascript?

Looking for a way to return the current instance as a JSON text so that the values can be sent via an ajax request to a server-side script. Uncertain about where to apply the "this" keyword in a jQuery selector function Actor(){ this.input=function(pnam ...

Selecting content loaded via Ajax using jQuery

I recently implemented a library that I found at this website According to the documentation, I need to use the following syntax: autosize($('textarea#description')); This works fine for regular elements, but when my textarea is loaded via aja ...

Encountering a NULL argument in an MVC controller when executing an Ajax post request

I am facing an issue with my ajax post request where I send JSON string data, but it is showing null in my controller. Here is the AJAX Call: var jsonData = JSON.stringify(matrixPresenter); $.post("/matrix/Savematrix?matrixData=" + jsonData , fu ...

Is Your Website Sluggish because of an Excessive Amount of JavaScript on Page

After finally resolving some of the Javascript issues I was facing, I have streamlined my code to utilize just one library now, which is a huge improvement from how chaotic it was before. However, I have noticed a slight delay in the page load time, and I ...

Tips for ensuring a consistent highlight for an active link in Bootstrap

Does anyone have a solution for maintaining highlighted links on a web page? <div id="productnav"> <nav> <ul class="nav"> <li><a href="<?php echo $prefix; ?>pages/one.php?category=1" id="navelement1"<?php if ($c == 1) e ...

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

Turn off Appbar padding at the top and bottom

I am looking to create a customized box within the Appbar that spans the full height, as illustrated in the image below: https://i.stack.imgur.com/CFMo0.jpg However, the default Appbar provides padding from all sides to its internal elements, leading to ...

Navigating and interacting with dynamically loaded content received through Ajax requests

I'm facing a challenge in binding to content loaded via Ajax and then traversing through it to detect any newly added elements. The current jQuery code I have is as follows: jQuery(document).ready(function($) { $(document).find('.my-selecto ...

Place the element at the bottom of the row above

I'm utilizing Angular to retrieve a list of items from the server and exhibit them on the page using: <div class="col-sm-6 col-md-4" ng-repeat="activity in activities"> <img ng-src="[[ act.icon ]]" height="100" alt=""> <h3>[ ...

Retrieving the class ID when clicked

In my PHP while loop, I am generating multiple classes to display information (such as user posts) along with two buttons at the bottom of each post. One button increments and the other decrements a numerical value. I am trying to figure out how to retri ...

Incorporating jQuery Masonry for seamless overlapping effect while implementing infinite scroll

I've developed a script that enables infinite scrolling on my website: $(document).ready(function() { function getLastId() { var lastID = $(".element:last").attr("id"); $.post("2HB.php?action=get&id=" + lastID, ...

What is the best way to dynamically assign an id to an ajax Actionlink in ASP.NET?

I have a collection of items and each item contains an Ajax.ActionLink. I would like to dynamically set the id for each action link based on the item's id. @Ajax.ActionLink("Join","ajaxview", new{id = tour.TourId}, new { HttpMethod = "GET", Insertion ...

What could be causing jQuery submit to navigate to its own page even when the action is pointed to a different page

I have the following form on my settings.asp page, designed to submit to sendmail.asp. However, when I click the button, I notice in the console that it is triggering settings.asp instead of sendmail.asp. I've checked and confirmed that both the form ...

Tips for personalizing react-show-more text length with Material-UI Icons

In my SharePoint Framework webpart using React, I am currently utilizing the show more text controller. However, I am interested in replacing the "Show More" and "Show Less" string links with the ExpandMore and ExpandLess Material UI icons. Is there a way ...

Superimpose a canvas onto a div element

I'm struggling to overlay a canvas on top of a div with the same dimensions, padding, and margins. Despite using position: absolute and z-index as suggested in similar questions, the canvas keeps appearing underneath the div. Here's my current co ...

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

positioning newly generated dropped elements within the DOM structure dynamically

Hello everyone, I have a query related to drag and drop functionality. I am currently working on an application that allows users to create websites using only drag and drop features. I am facing a challenge in implementing a feature where users can drop e ...