What is the best way to align an image in a particular div based on the current position of the viewport

Question

What is the best way to align an image in a particular div based on the current position of the viewport

I want to add a sleek animation while loading content using ajax. My goal is to display an icon while the "Content" div is reloading, but I'm not sure if this can be achieved with just CSS.

The icon needs to:

Always be horizontally centered within the "Content" div
Be vertically centered within the visible part of the content
Remain vertically centered within the visible part of the content throughout a sliding animation that hides the Menu

If vertical centering based on the visible part of the content isn't possible, I'm fine with centering the image according to the browser's viewport.

[EDIT]:

Check out my fiddle here: http://jsfiddle.net/QWB9x/74/. The section that probably needs adjusting is:

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: 50%;
    display: block;
}

ajax css jquery

Answer 1

Answer №1

This solution has proven to be the most effective for me :)

function fetchNewData(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {

 $("#hide_button").on("click", function () {
      $(this).closest(".bottom").toggleClass("left_hided");
      $(".loaderCont").toggleClass("left_hided2");
 });

 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
     $(".loaderCont").addClass("loading");
     setTimeout(fetchNewData, 2000);
 });
});

CSS:

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
     height: 100px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
    width: calc(100% - 140px);
    float: right;
}

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
    background-color: rgba(255, 0, 0, 0.6);
    height: 100%;
    width: calc(100% - 140px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
    background: url(https://i.sstatic.net/FhHRx.gif) no-repeat center center;
    position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
     height: 32px;
     width: 32px;
}

.loading {
    z-index: 9001;
}

JSFiddle: http://jsfiddle.net/ZRwzr/1/

Answer 2

This solution has proven to be the most effective for me :)

function fetchNewData(){
 $(".loaderCont").removeClass("loading")
}

$(document).ready(function () {

 $("#hide_button").on("click", function () {
      $(this).closest(".bottom").toggleClass("left_hided");
      $(".loaderCont").toggleClass("left_hided2");
 });

 $("#filter1,#filter2,#filter3,#filter4").on("click", function() {
     $(".loaderCont").addClass("loading");
     setTimeout(fetchNewData, 2000);
 });
});

CSS:

.header {
    background-color: Green;
    width: 100%;
    margin-bottom: 20px;
     height: 100px;
}
.left {
    background-color: Red;
    float: left;
    width: 100px;
}
.left_hided .left{
    margin-left: -85px;
}
.right {
    background: Aqua url("http://i.imgur.com/ifyW4z8.png") 50% repeat-y;
    width: calc(100% - 140px);
    float: right;
}

.left_hided .right{
     width: calc(100% - 55px);
}

input{
    float:right;
}

.loaderCont {
    background-color: rgba(255, 0, 0, 0.6);
    height: 100%;
    width: calc(100% - 140px);
    position: fixed;
    right: 0;
    top: 0;
    z-index: -1;
}

.left_hided2 {
     width: calc(100% - 55px);
}

#loader {
    background: url(https://i.sstatic.net/FhHRx.gif) no-repeat center center;
    position: relative;
    top: calc(50% - 16px);
    left: calc(50% - 16px);
    display: block;
     height: 32px;
     width: 32px;
}

.loading {
    z-index: 9001;
}

JSFiddle: http://jsfiddle.net/ZRwzr/1/

Answer 3

Answer №2

To meet your specific requirements, JavaScript must be used to determine the precise placement of the loading image over the visible section by utilizing a fixed position div. The image should be repositioned whenever the user scrolls or resizes the window to ensure it remains in the desired location.

$(window).scroll(function() {
    scrolling();
});

$(window).resize(function() {
   scrolling(); 
});

scrolling();

function scrolling() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $('#thediv')[0].offsetTop;
    var offsetHeight = $('#thediv')[0].offsetHeight;

    var offsetWidth = $('#thediv')[0].offsetWidth;

    var top = offsetTop - scrollTop;
    top = top < 0 ? 0 : top;

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
    bottom = bottom < 0 ? 0 : bottom;

    $('.image').css('top', top);
    $('.image').css('bottom', bottom);
    $('.image').css('width', offsetWidth);
}

It's important to note that if the width of the div is changed, the scrolling() function must be called again to recalculate the positioning.

The loading image has been added as a background image to the fixed div, allowing CSS to center it with ease.

.image {
    position: fixed;
    text-align:center;
    background-image:url('https://i.sstatic.net/FhHRx.gif');
    background-repeat:no-repeat;
    background-position:center center;
    background-color:rgba(255,255,255,.4);
}

Check out the JSFiddle for a demonstration: http://jsfiddle.net/QWB9x/89/

Answer 4

To meet your specific requirements, JavaScript must be used to determine the precise placement of the loading image over the visible section by utilizing a fixed position div. The image should be repositioned whenever the user scrolls or resizes the window to ensure it remains in the desired location.

$(window).scroll(function() {
    scrolling();
});

$(window).resize(function() {
   scrolling(); 
});

scrolling();

function scrolling() {
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();
    var offsetTop = $('#thediv')[0].offsetTop;
    var offsetHeight = $('#thediv')[0].offsetHeight;

    var offsetWidth = $('#thediv')[0].offsetWidth;

    var top = offsetTop - scrollTop;
    top = top < 0 ? 0 : top;

    var bottom = (scrollTop + windowHeight) - (offsetHeight + offsetTop);
    bottom = bottom < 0 ? 0 : bottom;

    $('.image').css('top', top);
    $('.image').css('bottom', bottom);
    $('.image').css('width', offsetWidth);
}

It's important to note that if the width of the div is changed, the scrolling() function must be called again to recalculate the positioning.

The loading image has been added as a background image to the fixed div, allowing CSS to center it with ease.

.image {
    position: fixed;
    text-align:center;
    background-image:url('https://i.sstatic.net/FhHRx.gif');
    background-repeat:no-repeat;
    background-position:center center;
    background-color:rgba(255,255,255,.4);
}

Check out the JSFiddle for a demonstration: http://jsfiddle.net/QWB9x/89/

Answer 5

Answer №3

To position a loader, you don't need complex scripting - simple CSS will do the trick.

Simply make the loader relative to its parent, give it a height and width, and add the following CSS:

.loader{
    position: relative;
    top: -half of the height;
    left: -half of the width;
    margin-top: 50%;
    margin-left: 50%;
}

This method is compatible with all devices.

Answer 6

To position a loader, you don't need complex scripting - simple CSS will do the trick.

Simply make the loader relative to its parent, give it a height and width, and add the following CSS:

.loader{
    position: relative;
    top: -half of the height;
    left: -half of the width;
    margin-top: 50%;
    margin-left: 50%;
}

This method is compatible with all devices.

Answer 7

Answer №4

example using z-index property:

 <div style="z-index:100;">loading image</div>

Answer 8

example using z-index property:

 <div style="z-index:100;">loading image</div>

Answer 9

Answer №5

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: calc(50% + 55px);
    display: block;
}

To further enhance the solution, you can use JavaScript to update the left dynamically based on your requirements.

Answer 10

.loading #img_loading {
    position: fixed;
    top: 50%;
    left: calc(50% + 55px);
    display: block;
}

To further enhance the solution, you can use JavaScript to update the left dynamically based on your requirements.

What is the best way to align an image in a particular div based on the current position of the viewport

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

How can I style the inner div by adding a class to the first div?

Looking to create a format for displaying short comic strips in a grid pattern

Guidance on displaying values from one PHP file in another PHP file

Steps to reinitialize the error code after removal from the roster

Tips for incorporating dimensions from ajax svg text with jquery:

Creating expandable card components with React and CSS using accordion functionality

Ways to place the footer in the middle of 2 divs?

"Initiate an Ajax call in Full Calendar before an event is displayed on the calendar

What is causing the SVG element to malfunction on iOS devices?

Basic selection menu layout

Tips for making a DIV span the entire width of a page when it is within a column with the Bootstrap class 'col-md-6'

Troubleshooting a problem with jQuery and Drupal behavior when the document is ready

Conflict between jquery and hoverIntent libraries

Utilizing the keydown event in jquery with specific key restrictions

Submitting an mvc partial view form to send data from the parent view

Techniques for transferring images directly into HTML canvas games

Tips for organizing divs once another div has been hidden using jquery

What is the best way to iterate over my JSON data using JavaScript in order to dynamically generate cards on my HTML page?

Adjusting the height property to zero in the absence of an element

Issue with alert timing