[Layer] Resolutie/Center

[Verwijderd]

Zoals al eerder over is gepost,maar
ik kom er nog niet helemaal uit,
hoe maak ik nu een layer die in midden van scherm komt precies en bij andere resolutie zo blijft ?

[Verwijderd]

code:

One of the keys to dynamically altering your interface to accommodate to a users screen resolution is the ability to position layers by screen height and screen width. To illustrate this lets look at how we would center a layer across varying screen resolutions.

First off out Browser Sniffer:

function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) && 
(agent.indexOf('spoofer') == -1) &&
(agent.indexOf('compatible') == -1) &&
(agent.indexOf('opera') == -1) &&
(agent.indexOf('webtv') == -1));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major >= 4));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0") != -1));
this.ieX = (this.ie && !this.ie3 && !this.ie4);
}

var is = new Is();

The purpose of this portion of the script is to be able to detect which browser the client is using. In reality, we could use direct object detection here, instead of browser detection, but in many instances, object detection is not strict enough. For example, some Netscape 4 browser versions allow you to take over the whole screen, while others will display the Microsoft Windows status bar by default.

The browser sniffer is composed of a number of variables that converts the user agent string into an object for us to use later in the script. What may be confusing for some is the term object. So lets make a differentiation between direct objects and created objects. The browser sniffer consists of developer created objects. In other words, we create the objects. As long as the variable is associated with the correct user agent string, we wont run into many problems.


DOM:

Each browser though has its own document object model (DOM). As developers, we can tap into the DOM of each browser and directly create a condition based on the DOM of each browser. This is what I term direct object detection, because we are not creating the object detection routine, since it already exists. The following table outlines each direct object detection method for DHTML capable browsers.

Internet Explorer 5 / Netscape 6 Internet Explorer 4 / Internet Explorer 5 Netscape 4 
document.getElementById() document.all document.layers 


Note: Internet Explorer 5 accepts both its proprietry document.all method and the W3C recommendation of document.GetElementById.

If you are interested in going the direct objection detection route then use the above as a guideline. For the purposes of this demonstration, we are going to run with the created object detection method.

From the browser sniffer script we need to use the 4 variables that cover the major DHTML capable browsers: is.ns4, is.ns6, is.ie4, and is.ie5. The easiest way to understand these variables is to think of them as eventually taking the form of a question.

if (is.ie5||is.ns6){
do the script here

Asks the question is this either Internet Explorer 5 or Netscape 6. If the answer is yes, then run the portion of the script specific to this question. If the answer is no, then go to the next question and see if the answer is yes.

} else if(is.ie4) {
do the script here

Asks the question is this Internet Explorer 4. As before, if the answer to the question is yes then run this portion of the script, if the answer is no then go to the next question.

} else if(is.ns4) {
do the script here

} else if(is.ns3 || is.ns2|| is.ieX) {
do the script here.

Asks the question is this browser a non-DHTML capable browser. If the answer is yes, then we would either pass an alert or redirect the user to some page that caters for these browsers. We could also build in other variables, which detect for Opera, WebTV etc and also redirect or pass an alert. The trade of is that your detection routines and scripts tend to become quite large. Coupled with the very small percentage of users, employing a non-DHTML capable browser, then the effort at times hardly seems worthwhile.

Object Constructors:

Having understood the basic premise of detection routines and if/else statements, lets begin to build the script. The method used here is commonly referred to as an object constructor.

The first part of the script converts layers into JavaScript objects that can be easily manipulated later on in the scripting routine.

function layerObject(id,position,left,top,visibility) {
if (is.ie5||is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;

} else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;

} else if(is.ns4) {
this.obj = document.layers[id];
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
} 

}


Layer Attributes:

The next part of the script is dedicated to creating attributes for the JavaScript object. A good way to think of this is to conceptualise a CSS layer written in the body section of your document:

<DIV ID="centerLayer" STYLE="position: absolute; width:200px; height:24px; left: 0px; top: 0px; z-index: 6; visibility: hidden;"> </DIV>

You will notice that in the div tag we have an id attribute. Similarly, in our layer object we also assign an id attribute. The reasoning behind this is that what we are attempting to achieve is a JavaScript replication of the attributes of a 
tag. Following this course of logic, we then assign more CSS layer attributes to the layerObject. We assign, position, top, left and visibility. More attributes could be assigned as needed, for instance we could include z-index, height and width and so on. The object constructor can become very detailed and thus ideally open itself to a myriad of dynamic manipulations. But for our purposes, lets stick with just a couple of assigned attributes.

We then return the object with the statement return this.obj;

In essence, the function of this statement is to tell the browser to run this portion of the script.

This same sequence is repeated for each condition, so that only the portion of the script that meets the condition criteria is performed. It is important to note, that thus far we have not really created anything. All we have done is prepared our documents for the creation of new layer objects. Therefore, we now need to focus our attention on creating new layer objects. This is achieved with the layerSetup() script.


function layerSetup() {
centerLyr = new layerObject('centerLayer','absolute', available_width/2-100,available_height/2-12,'visible');
}


The first line defines the functions name. The second line does quite a few things so lets pull it apart to better understand it. We create a new variable centerLyr and then tell the browser that it will equal a new layerObject(). The sole purpose of this section of the JavaScript statement is to hook back into our layerObject() script so that we can then assign the specific values needed for that particular layer. You can identify the attribute value that belongs to layerObject() properties by looking at the following table.

Function Name ID Property Position Property Left Property Top Property Visibility Property 
LayerObject id position left top Visibility 
LayerSetup centerLayer absolute available_width/2-100 available_height/2-12  visible 


The upshot of this little piece of scripting is that we end up with a new variable called centerLayer which has the CSS attributes of positioning, left, top, and visibility assigned to it. From a scripting perspective this is enormously usefull because if we so wished we can then manipulate any of the css properties with a single call that is cross-browser and backward compatible. For example if we wanted to toggle a layers visibility backwards and forward we could write something akin to this:


function showLyr(){
centerLyr.visibility='visible';
}

function hideLyr(){
centerLyr.visibility='hidden';
}


But then this is another story.

Lets get back to positioning our layers by a users screen resolution. You will note that instead of assigning a numeric value to the left and top attributes of the new layer object, available_width and available_height are used.

onLoad:

These are variables created and set at the onload event handler:


onLoad="
if(is.ns4 ||is.ns6) {
available_width=innerWidth;
available_height=innerHeight;
layerSetup();
} else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}"

Once again we need to create a little cross browser and backward compatible DOM switch. Netscape 4 and Netscape 6 use innerWidth and InnerHeight to detect a users screen resolution. Therefore, we create a browser detection condition.

if(is.ns4 ||is.ns6) {

if this condition holds true then the variables available_width and available_height are assigned the correct DOM method for Netscape 4 and Netscape 6 and the layerSetup() script is triggered.

available_width=innerWidth;
available_height=innerHeight;
layerSetup();


If the condition is not true then attention is focused on the Internet explorer part of the script and the DOM for those browsers is utilised.

} else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}"


Screen Resolution:

Having captured a users screen resolution settings we can then use the newly formed variables to position the layer by screen resolution. Hence, the values of available_width/2-100, available_height/2, in the layerSetup() script. To determine the meaning of these values, lets think about this in a different way. The value available_width/2-100 literally stands for the users screen resolution divided by 2 and minus 100 pixels from left.

Dividing the screen by half, centres the layer. However, its positioning is determined by the top left corner of the layer. Therefore, if the content of the layer is sufficiently wide enough, then the layer appears as not being centred. To overcome this we need to take into consideration the layer width. In this instance, the css layer centerLayer width is 200 pixels. We halve that and recognise that for it to appear centred we need to move it over to the left by 100 pixels. Hence the -100 in the left value. The same logic is applied to top attribute where the screen resolution is divided in half and then the layers height is taken into account.

Lets look at the completed script:

<html>
<head>
<title>How to Center A Layer</title>

<script>
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) &&
(agent.indexOf('spoofer') == -1) &&
(agent.indexOf('compatible') == -1) &&
(agent.indexOf('opera') == -1) &&
(agent.indexOf('webtv') == -1));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf("msie") != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major >= 4));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf("msie 5.0") != -1));
this.ieX = (this.ie && !this.ie3 && !this.ie4);
}

var is = new Is();

function layerObject(id,position,left,top,visibility) {
if (is.ie5||is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
} else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
} else if(is.ns4) {
this.obj = document.layers[id];
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
} 
}

function layerSetup() {
centerLyr = new layerObject('centerLayer','absolute', available_width/2-100,available_height/2-12,'visible');
}
</script>
<style type="text/css">
<!--
.main { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 16px; 
color: #FBEED5; 
text-decoration: none
}
-->
</style> 
</head>

<body bgcolor="#999999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll="no" onLoad="
if(is.ns4 ||is.ns6) {
available_width=innerWidth;
available_height=innerHeight;
layerSetup();
} else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
}"
onResize="
if(is.ns4 ||is.ns6||is.ie4||is.ie5) {
history.go(0);
}"
>

<DIV ID="centerLayer" STYLE="position: absolute; width:200px; height:24px; left: 0px; top: 0px; z-index: 6; visibility: hidden;">
<span class="main">This is a Layer Centred By Screen Resolution</span> 
</DIV>

</body>
</html>

Edit: Sorry voor layoutverneuking...
Wat ik nog kwijt wou is dat je dit makkelijk(er) zelf had kunnen vinden, zoeken op ggl met DIV+centered oid...

[cutter]

eeejjj, hoeveel topics wil jij eigenlijk openen voor het zelfde probleem, met je 600+ posts zou je toch weten hoe het hoort....
[topic=414709]

[OzBoz]

Gebruik gewoon je oude topic. Dit is de 4e al met betrekking tot het zelfde? Ik type toch geen Koreaans?