Solved

Absolute positioning depending on resolution

Posted on 2003-11-13
257 Views
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
0
Question by:Quarfelburg
• 5
• 4
• 3
• +1

LVL 5

Expert Comment

ID: 9741664
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>
0

LVL 2

Accepted Solution

Codescripter earned 500 total points
ID: 9741680

<script language="JavaScript">
function reposition(divName) {
var d = document.getElementById(divName);
var left = screen.availWidth / 2 - d.style.width / 2;
var top = screen.availHeight / 2 - d.style.height / 2;
d.style.posLeft = left;
d.style.posTop = top;
}
</script>
0

LVL 5

Expert Comment

ID: 9741685
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>
0

LVL 2

Expert Comment

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

LVL 5

Expert Comment

ID: 9742002
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.
0

LVL 11

Expert Comment

ID: 9743441
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. :-)
0

LVL 2

Expert Comment

ID: 9744133
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.
0

LVL 5

Expert Comment

ID: 9744254
Maybe so but the question was about positioning based on the screen resolution.
0

LVL 11

Expert Comment

ID: 9744724

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.
0

Author Comment

ID: 9764567
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
0

LVL 2

Expert Comment

ID: 9765342
Hmmm...

<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>
0

Author Comment

ID: 9765386
I'll try that.

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

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20800605.html
0

LVL 11

Expert Comment

ID: 9767192
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.)
0

Author Comment

ID: 9767399
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.
0

LVL 2

Expert Comment

ID: 9768092
Hi Quarfelburg,

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

~Tom
0

Featured Post

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the â€¦
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the â€¦
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQueryâ€¦