Can jQuery Alignment be Adjusted Based on the Size of the Browser Window?

Question

Can jQuery Alignment be Adjusted Based on the Size of the Browser Window?

After browsing through several websites, I managed to create a basic pop-up box using javascript to showcase my contact details. While I am content with its functionality, I have encountered an issue where the popup window is positioned absolutely rather than relative to the browser window. Ideally, I would like the pop up to appear at the center of the browser window regardless of the user's location on the page when they click the info icon.

Although I have a good understanding of HTML, javascript is still a bit challenging for me. I understand that relative positioning in javascript operates differently, making it hard for me to resolve this problem on my own. Any guidance or suggestions on how to address this dilemma would be greatly appreciated.

You can find the webpage here:

The script used is shown below:

<script type="text/javascript">
function toggle( div_id ) {
    var el = document.getElementById( div_id );
    if( el.style.display == 'none' ) {
        el.style.display = 'block';
    }
    else {
        el.style.display = 'none';
    }
}
function blanket_size( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportheight = window.innerHeight;
    }
    else {
        viewportheight = document.documentElement.clientHeight;
    }
    if( ( viewportheight > document.body.parentNode.scrollHeight ) && ( viewportheight > document.body.parentNode.clientHeight ) ) {
        blanket_height = viewportheight;
    }
    else {
        if( document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight ) {
            blanket_height = document.body.parentNode.clientHeight;
        }
        else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById( 'blanket' );
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById( popUpDivVar );
    popUpDiv_height = window.innerHeight / 2 - 200;
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos( popUpDivVar ) {
    if( typeof window.innerWidth != 'undefined' ) {
        viewportwidth = window.innerHeight;
    }
    else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if( ( viewportwidth > document.body.parentNode.scrollWidth ) && ( viewportwidth > document.body.parentNode.clientWidth ) ) {
        window_width = viewportwidth;
    }
    else {
        if( document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth ) {
            window_width = document.body.parentNode.clientWidth;
        }
        else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById( popUpDivVar );
    window_width = window_width / 2 - 200;
    popUpDiv.style.left = window_width + 'px';
}
function popup( windowname ) {
    blanket_size( windowname );
    window_pos( windowname );
    toggle( 'blanket' );
    toggle( windowname );
}
</script>

(I apologize for having it all in one line; Cargo Collective, the platform I use for my website, requires scripts to be formatted this way).

javascript jquery css popup css-position

Answer 1

Answer №1

Utilize CSS position: fixed:

#my-element {
    position : fixed;
    top      : 50%;
    left     : 50%;
    margin   : -100px 0 0 -250px;
    width    : 500px;
    height   : 200px;
    z-index  : 1000;
}

Check out this demonstration: http://jsfiddle.net/huRcV/1/

This method centers a 500x200px element in the viewport. Negative margins are applied to ensure the element remains centered based on its dimensions. Even when the user scrolls, the element will remain centrally positioned within the viewport.

For more information on position, refer to the documentation here: https://developer.mozilla.org/en/CSS/position

fixed

No space is reserved for the element. It is positioned at a defined location relative to the screen's viewport and stays fixed when scrolling. When printed, it retains that fixed position on every page.

While achieving this effect with JavaScript is possible, using the CSS approach is generally recommended. If you prefer jQuery, below is a quick example:

var $myElement = $('#my-element');
$(window).on('scroll resize', function () {
    $myElement.css({
        top : ($(this).scrollTop() + ($(this).height() / 2)),
    });
});

Here is a demo showcasing this functionality with jQuery: http://jsfiddle.net/huRcV/ (note that in this demo, position: fixed has been changed to position: absolute)

Answer 2

Utilize CSS position: fixed:

#my-element {
    position : fixed;
    top      : 50%;
    left     : 50%;
    margin   : -100px 0 0 -250px;
    width    : 500px;
    height   : 200px;
    z-index  : 1000;
}

Check out this demonstration: http://jsfiddle.net/huRcV/1/

This method centers a 500x200px element in the viewport. Negative margins are applied to ensure the element remains centered based on its dimensions. Even when the user scrolls, the element will remain centrally positioned within the viewport.

For more information on position, refer to the documentation here: https://developer.mozilla.org/en/CSS/position

fixed

No space is reserved for the element. It is positioned at a defined location relative to the screen's viewport and stays fixed when scrolling. When printed, it retains that fixed position on every page.

While achieving this effect with JavaScript is possible, using the CSS approach is generally recommended. If you prefer jQuery, below is a quick example:

var $myElement = $('#my-element');
$(window).on('scroll resize', function () {
    $myElement.css({
        top : ($(this).scrollTop() + ($(this).height() / 2)),
    });
});

Here is a demo showcasing this functionality with jQuery: http://jsfiddle.net/huRcV/ (note that in this demo, position: fixed has been changed to position: absolute)

Can jQuery Alignment be Adjusted Based on the Size of the Browser Window?

Answer №1

fixed

Similar questions

What is the code to incorporate a color using PHP?

Creating jQuery tabs through looping

In TypeScript, how are angle brackets like methodName<string>() utilized?

Make sure to verify the existence of the data before trying to access it to avoid encountering an

What is the best way to execute a series of AJAX functions one after the other in JavaScript?

Why isn't the connect.use() function working in Node.js?

Using only if-else statements and else-if conditions in JavaScript, arrange four numbers in order

Does Javacc have a capability to generate JavaScript code as an output?

Preventing Vimeo from continuing to play when the modal is closed by clicking outside of it

What is the method to define a function in express js that is accessible from all views?

Effortless Sidebar Navigation for populating primary content

Executing a group query for Mongoose in a node.js/express route

Is there an implicit transformation or action involved when the promise chain is resolved or rejected in $q?

Why is the ID not being sent after a successful AJAX call using jQuery?

Implementing defaultProps in conjunction with withStyles

Unusual activity observed in HTML5 contenteditable functionality

What could be the reason for one function returning undefined from identical API calls while the other functions produce successful results?

Google Extension PHP Plugin

The rotation of the Torus object in Three.js is not centered around the 0z axis

JavaScript Code to Remove an Element from an Array