Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

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
0
Quarfelburg
Asked:
Quarfelburg
  • 5
  • 4
  • 3
  • +1
1 Solution
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 5
  • 4
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now