EonerCMS-CMS (7) for a desktop-like system)

Intelligently modify the location of a window

During the test, I found that after adjusting the browser size, the window close to the browser edge was directly hidden, such:

The cause of this problem is also very simple, because the top and left values of the window are written to death, when the width and height of the browser is smaller than the top and left values of the window, it will inevitably be hidden. The solution is to modify the top and left of the window while adjusting the browser size. But how much does it need to be modified?

After your own consideration and the guidance of others, the final solution is to change proportionally, that is to say, scale the ratio of the distance from the current window to the left, top, and bottom of the window to the size of the whole window. It may be a bit confusing. Let's look at the modification formula:

　　Top = top margin of the browser zoom window/(height before browser zoom-height of the window before browser zoom) * (height after browser zoom-height of the window after browser zoom );

　　Left = the left margin of the window before the browser zoom/(the width before the browser zoom-the width of the window before the browser zoom) * (the width after the browser zoom-the width of the window after the browser zoom );

In the formula, I subtract the width and height of the window from the width and height of the browser. The reason is that no matter how the browser scales, the width and height of the window will never change. If the width and height of the window are not subtracted, it cannot be scaled proportionally.

The final effect is as follows:

You should have seen the demo. Try zooming the browser to see the effect.

I'm a demo. Read the article and read it again.

Demo source code, js

$().ready(function(){var dfw = $(window).width() - $("#div1").width();var dfh = $(window).height() - $("#div1").height();var dl = $("#div1").offset().left;var dt = $("#div1").offset().top;$(window).bind("resize",function(){var ctw = $(window).width() - $("#div1").width();var cth = $(window).height() - $("#div1").height();$("#div1").css({"left":(dl/dfw*ctw)+"px","top":(dt/dfh*cth)+"px"});});});

Html

<Div id = "div1" style = "width: 300px; height: 30px; line-height: 30px; text-align: center; padding: 5px; background: red; position: absolute; top: 100px; left: 100px "> I am a demo. I will read the article again. </div>