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
QuarfelburgAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

wfRGBCommented:
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
CodescripterCommented:

<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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
wfRGBCommented:
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

CodescripterCommented:
The reason to use availWidth and availHeight is so that the dimensions of the browser toolbars and scrollbars are taken into consideration.
0
wfRGBCommented:
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
ZontarCommented:
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
CodescripterCommented:
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
wfRGBCommented:
Maybe so but the question was about positioning based on the screen resolution.
0
ZontarCommented:
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.
0
QuarfelburgAuthor Commented:
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
CodescripterCommented:
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>
0
QuarfelburgAuthor Commented:
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
ZontarCommented:
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
QuarfelburgAuthor Commented:
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
CodescripterCommented:
Hi Quarfelburg,

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

~Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.