How to test window size

[MichaelF]

I have a CSS style that creates a TOP button fixed to the bottom right of a web page so, as you scroll, it stays put. How can I detect when the browser window is maximized so as to keep the Top button on the lower right edge of the content?

My page design uses an 850px wide whole page table for content so the page width is fixed whether the browser window is at 850px or maximized. This is how a Word or PDF document behaves. The Top button appears at the lower right of the window at 850px but at the center of the page when the browser is maximized.

The basic properties position the Top button to the left and slightly above the bottom of the window.

  position: fixed;
  bottom: 85px;
  left: 800px;

with other properties specifying font properties and border effects.

Yours,

Michael F

 

[dsonesuk]

left: calc(50vh + 425px); I think is what you are describing.

If it is fixed 850px width, centred horizontally you need 50% of viewport browser window + 50% of fixed width( might require adjustment).

Other option is to make same width 850px, position fixed container, centre it with left: calc(50vh - 425px); then add button within that

[MichaelF]

Dear dsonesuk,

I tried inserting the left: calc(50vh + 425px); into my <a href> tag as part of the style parameter, but whatever changes I tried for the two values, the Top button would not line up at the right edge of the content table in the 850px width and the max width.

I checked the W3schools CSS site for more details about calc and found an example that used percentage instead of whatever vh stands for. After some experimenting, I found that left: calc(50% + 370px); positioned the Top button at the same relative position in the 850px width and the maximized width. That method seemed to use 50% of the browser width + 370px as the distance from the left edge of the window.

Thanks for your help. It finally led me to the solution I had hoped for.

Michael F

[Makwana Prahlad]

Try this line:

window = Object.assign(window, { innerWidth: 500 });