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 :


Found the answer:

var topOffset = screen.height / 2;

var leftOffset = screen.width / 2;

    CSS Howto..

    How to only show certain parts with CSS for Print?

    How can I stop mobile Safari from pausing before beginning a transition

    How do I create a 3 nested stamina bar that will regenerate from last to first

    How can I define fieldset border color?

    How can I delay the speed of hover purely via CSS3 for a div?

    How to use css value for javascript in IF-THEN construction? [closed]

    How to make bevel and Embosed effect to button in CSS 3 for web-kit based browsers?

    How to increase checkboxes size with css which work in Google Chrome?

    How to have 100% width for last column only in html and css?

    How to override a display:none property applied to parent element in specific child elements

    How to use jQuery UI icons without buttons?

    How to style a dynamic html created by PHP

    jquery - how to change the display css attribute of a button within a li on hover

    How to use CSS timing functions to animate an arc?

    How to make the gif photo to be same width as the table?

    How to override default CSS in modern GWT applications?

    How to negate conjunction of two attributes in CSS selector

    How to localize the CSS just for this table's use?

    How do I (by default) style different types of labels differently?

    jquery css how to retain position if you remove margin

    what is jquery CSS frame work and how to use the frame work for giving look and feel to the website? [closed]

    CSS: How to put content between header and footer

    How to preserve css class name through GWT compilation?

    How to show foreground image and then hide on hover?

    How to import a css file in a react component?

    How to set my span text vertical align and next to my image?

    how can i make the li inside the div be horizontal?

    How can I print a full gridview area via a custom print window?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to get image url in css inside a public folder in Rails?