Jak wyśrodkować obraz w określonym dziale według aktualnej pozycji rzutni?

Question

Próbuję utworzyć ładną animację podczas ładowania zawartości za pomocą ajax. Chcę użyć ikony wyświetlania podczas przeładowywania div z "Treścią", jednak nie mogę się domyślić, że jest to możliwe tylko przy użyciu CSS.

Ikona powinna:

1. poziomo zawsze w centrum div z „Treść”
2. pionowo zawsze w centrum „widocznej części zawartości”
3. powinien pozostać w trakcie całej animacji w pionie centrum "widocznej części treści" podczas animacji slajdów, która ukrywa menu.

Jeżeli centrowanie pionowe zgodnie z „widocznej części zawartości” nie jest możliwe, to byłoby ok do centrum obrazu według rzutni przeglądarki.

[EDIT]:

Oto moje skrzypce: http://jsfiddle.net/QWB9x/74/ i część, która prawdopodobnie należy zmienić:

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

Answer 1

ten działa najlepiej dla mnie :)

function loadNewContent(){ 
$(".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(loadNewContent, 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(http://i.stack.imgur.com/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

Przykład zastosowania z-index: -

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

Answer 3

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

Powyższe rozwiązuje połowę problemu, ty ne ed, aby dynamicznie aktualizować lewą stronę za pomocą javascript.

Answer 4

Aby to działało zgodnie z Twoimi wymaganiami, musisz użyć JavaScriptu, aby określić miejsce, w którym obraz ładujący musi zostać umieszczony nad widoczną częścią, używając stałego div pozycji, a następnie zmienić położenie, gdy użytkownik zmieni rozmiar okna lub przewinie okno więc zawsze jest w pożądanej pozycji.

$(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); 
} 

Należy pamiętać, że jeśli zmienić szerokość div będą zawsze trzeba wywołać funkcję scrolling() tak, że można go ponownie obliczyć pozycję.

Dodałem również obraz ładujący jako obraz tła do ustalonego elementu div, abyśmy mogli użyć CSS do jego wyśrodkowania.

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

Oto JSFiddle http://jsfiddle.net/QWB9x/89/

Answer 5

Nie trzeba robić tyle skryptów na to stanowisko przypisać. Możesz to zrobić za pomocą prostych css.

Po prostu ustaw ładowarkę względem jej rodzica. Przypisz wysokość i szerokość i wykonaj następującą część css.

.loader {position: relative; góra: - połowa wysokości; left: - połowa szerokości; margin-top: 50%; margin-left: 50%; } Współpracuje z każdym urządzeniem