CSS - How do I center a loading icon on a page that contains an iframe?


Tags: javascript,jquery,html,css,iframe

Problem :

How do I center a loading icon on a page that contains an iframe ?

The iframe height is variable and it contains a table with some editing buttons such as Edit Delete. When one of the buttons is pressed, while the ajax call is working, I want to center the loading icon on the center of the screen, but instead it is centered on the center of the iframe, that depending on the data available ,the height could be anywhere between 1024px to 6000px. I'm using blockUI - jQuery for the loading icon. My CSS is the following :

var topOffset = $(window).height() / 2;
var leftOffset = $(window).width() / 2;
var style = {
  position: 'fixed',
  top: topOffset,
  left: leftOffset
};

I'm setting it to the the blockUI via jQuery.

Any thoughts ?



Solution :

Update

Found the answer:

var topOffset = screen.height / 2;

var leftOffset = screen.width / 2;


    CSS Howto..

    How to draw a horizontal line between two circles with css?

    How can i get spaces between images with the same class?

    How to script CSS to achieve hide/appear effect based on hover

    Showing a large amount of HTML alternative content with swfobject & swffit flash site

    How stop elements from moving

    Angularjs - How to have same height for the child divs when one child div's size is increased dynamically with ng-repeat

    How to Achieve Word Wrap Effect With Children Divs

    How to make this div using html and css?

    Can't figure out how to make a box with multiple images with CSS/HTML

    How to reference / link to a Css-File styling elements in a webview for Android

    How can I get a jquery css container to pop up letting the user know data was successfully entered?

    How to make css border shape [duplicate]

    How can I get a rounded rectangle graphic to span across all columns within an ASP.NET GridView header row?

    CSS select: how to count and select child of a specific class only?

    How can I change the number of columns in the product list?

    How to set link on image using maplink in responsive theme?

    How to catch div position and reposition it later (on MAC)

    How do I make a div link open in a new tab Javascript onClick="window.location

    How to make a word bold in a text mentioned in bootstrap tooltip CSS/Jquery

    How to fill an HTML form with CSS?

    How to optimize CSS code?

    How to make dynamic content positioning?

    How to hide expand/collapse icon in vaadin treetable?

    How do I add CSS font styles to PHP echos?

    How to use nify javascript to make round corner box? Im using but not working

    How to vertically center items in a div while keeping responsiveness? [duplicate]

    How to manage div positionning?

    How can I fix this Bootstrap layout issue?

    How to select first a element of li with CSS?

    CSS - how to place an error/hint message to the right of the input box