asked on

Absolute positioning depending on resolution

I am wondering if it is possible to define absolute positioning dynamically, based on screen resolution.

So if the resolution is 1280x1024 it will deliver specified positioning.

Thanks

wfRGB

This should do it.

<HTML>
<BODY>
<DIV id="d" style="position : absolute; width: 100px; height: 100px; background-color: red;"></DIV>
<SCRIPT>
if(screen.width <= 1280 && screen.height <=1024)
{
document.getElementById("d").style.top="200px";
document.getElementById("d").style.left="200px"
}
</SCRIPT>
</BODY>
</HTML>

ASKER CERTIFIED SOLUTION

Codescripter

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

wfRGB

Sorry..
<HTML>
<BODY>
<DIV id="d" style="position : absolute; width: 100px; height: 100px; background-color: red;"></DIV>
<SCRIPT>
if(screen.width == 1280 && screen.height ==1024)
{
document.getElementById("d").style.top="200px";
document.getElementById("d").style.left="200px"
}
</SCRIPT>
</BODY>
</HTML>

Codescripter

The reason to use availWidth and availHeight is so that the dimensions of the browser toolbars and scrollbars are taken into consideration.

wfRGB

The reason not to use availWidth and availHeight is that the dimensions of the browser toolbars and scrollbars are taken into consideration even if the page is viewed in fullscreen.

Zontar

No need for JS when you can just use relative units in the CSS...

#myDiv {position:absolute; left:25%; top:15%;}

Works fine in MSIE, Mozilla, and Opera. :-)

Codescripter

Perhaps, but with the js I listed above, you can make sure the middle of the div is placed in the middle of the page.

wfRGB

Maybe so but the question was about positioning based on the screen resolution.

Zontar

You lot are just mad because you beat your brains out instead of using them. <G>

More seriously. It is a better solution because it

(a) doesn't depend on JavaScript

(b) doesn't assume that the user's browser window is maximised

(c) positions the element in relation to the actual size of the browser window at ANY resolution -- THIS is true absolute positioning determined dynamically IMNSHO

(d) does not assume the the original poster wanted the content centered, which a couple of you folks did, and which he did not ask for. Why would he need to use JS for that when a simple HTML align="center" attribute or CSS text-align:center or proper use of CSS margins/padding will accomplish that task already?

The screen.availWidth/screen.availHeight reasoning is flawed in any case. What happens if the user's screen res is 1280X1024, but his browser window is open to a size of 800X600, and it's positioned at 25px from the left edge of the desktop and 50px from the top? Seriously, make a little sketch on some graph paper and see where that div winds up relative to the user's browser window. I can tell you already -- it will wind up off in La-La Land.

Quarfelburg

ASKER

Hi guys sorry for not being around to comment, I've been terribly sick all week and not able to come into the office.

What I have are hidden layers over an image, that become unhidden onmouseover. The hidden layers are 4 borders that border a specific item on the screen. http://www.greenteadesign.com/test2.html

So it works fine on 800x600 and 1024x768 but above that it goes outta whack. I suppose I could try using percentages - for some off reason it never occured to me. After seeing the page is there any alteration in your opinions?

Cheers,
Hayden

Codescripter

Hmmm...
How about this:

<script language="JavaScript">
function reposition(mainpicDivname, borderDivname) {
var d1 = document.getElementById(mainpicDivname);
var d2 = document.getElementById(borderDivname);

var dx = 50; // You set these amounts based on where you want the border within the main image
var dy = 50;

d2.style.posLeft = d1.offsetLeft + dx;
d2.style.posTop = d1.offsetTop + dy;
}
</script>

Quarfelburg

ASKER

I'll try that.

I just got an idea that would may easily fix all my problems but I don't know JS.

https://www.experts-exchange.com/questions/20800605/Dynamically-deliver-script-based-on-screen-width.html

Zontar

posLeft and posTop are MSIE only.

Use

d2.style.left = d1.offsetLeft + dx + "px";
d2.style.top = d1.offsetTop + dy + "px";

You might also be able to use CSS position:relative;

(I'm not anti-JS, but I really think this particular issue is addressed better using CSS if possible.)

Quarfelburg

ASKER

Zontar, I've figured out a temporary solution that works on all resolutions but the page is essentially forced to be maximized. I know a CSS solution can be done - I just don't know how. I will post it in the HTML or CSS section later.

Codescripter

Hi Quarfelburg,

I'm glad it helped, and thanks for the points.

~Tom