[Layer] Positie

[Verwijderd]

Kan een layer ook net als een tabel een positie in midden houden ? zodra ik mijn resolutie veranderd staat layer op verkeerd plaats omdat hij ingested staat op x,y maar kan ie ook op centered ofzo en groot/hoogte in %-en zoals tables?
hoe dit anders op te lossen?

[StratoFarmer]

ik heb hier erg veel mee lopen klooien, maar het is me niet gelukt zonder tables.

[Verwijderd]

mag ook met table,belangrijk is dat ik een fixed background kan hebbne in midden scherm ,dat kan niet met tabel

[maikel]

Je kunt met Javascript je Layer positioneren op:
X: (Screen.Width / 2) - (Layer.Width / 2)
Y: (Screen.Height / 2) - (Layer.Height / 2)

[Verwijderd]

iemand een compleet scriptje ?
en hoe daar mijn layer op af te stellen?

[RM-rf]

Op maandag 18 februari 2002 00:24 schreef Warezhelp het volgende:
iemand een compleet scriptje ?
en hoe daar mijn layer op af te stellen?

ja, Danny Goodman heeft dat script: en ~gerard heeft daar een nederlandse bescrhrijving bij: http://www.kw.nl/~gerard/cross/center.html

zo enkel de regel:

code:

var obj = eval("document." + coll + "card" + styleObj)

veranderen naar:

code:

if (document.getElementById) 
   var obj = document.getElementById('card')
else 
   var obj = eval("document." + coll + "card" + styleObj)

zodat het script ook werkt in mozilla

[SchizoDuckie]

Ik heb gister middag / avond een scriptje geschreven dat ditzelfde doet voor BeeHive®


Je maakt dan een layer aan, set z'n properties, en roept dan de functie: MoveLayerFromCenter() aan.

Deze geef je de id van de layer, en de positie vanaf het midden in pixels (dit met positieve getallen voor een positie rechts van het midden, en negatieve getallen voor de top van het midden.

ik hoop morgen een exampletje online te hebben.

Het mooie is dat je nu met 3 regels code de hele layer kan aanmaken, hoogte/breedte, bgimage of color visibility en z-order kan setten, en em op z'n plek kan zetten

[Clay]

je kan ook een relative divje centeren, en daar al je absolute divjes in nesten

[Verwijderd]

dat script van gerard,
is dat een javascript ofzo ? hoe/waar plaats dat nu dan,das me niet echt duidelijk,en werkt het ook al resolutie gechanged wordT?

[Verwijderd]

ik heb een sriptje geprobeerd:

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>


Maar zodra ik de layer grootte aanpas,zit ie niet meer in het midden maar begin ie op het punt in hetmidden en breide uit naar rechts en naar onder

[Willem]

Warezhelp:
ik heb een sriptje geprobeerd:

[...]

Dit is geen script Piet, dit is een regelrecht-ge-copy-paste verhaal van een website.
Wat wil je hiermee zeggen?

[Verwijderd]

je moet het wel eerst snappen voor je er dingen in kunt gaan veranderen..

[crisp]

Het beste kan je naast je available width en height van je scherm ook de width en height van je layer capturen:

code:

layer_width = document.getElementById('centerLayer').clientWidth;
layer_height = document.getElementById('centerLayer').clientHeight;

en dan vervolgens de functie als volgt aanpassen:

code:

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

[Clay]

Ik denk toch echt dat het makkelijker is als je je absolute layers wil centeren dat je dat gewoon met een relative div eromheen doet:

code:

<html>
<head>
<style type="text/css">
body    {text-align:center;}
div     {text-align:left;}

#container  {
    position:relative; width:640; height:480; 
    margin-left:auto; margin-right:auto; 
    border-style:solid; border-width:1; border-color:blue;
    
}

#dinges {
    position:absolute;
    left:300; top:300; 
    width:100; height:100; 
    background-color:silver;
}

</style>
</head>


<body>

<div id="container">
    <div id="dinges"> hoi </div>

</div>

</body>
</html>

[Verwijderd]

Volgens onderstaand script voor center layer,welke resolutie dan ook,werkt goed in IE maar in netschaap doet ie weer ns raar,zet hem nl links en rare breedte van denk 25% van scherm:


<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
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,height,width) {
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;
this.obj.height = height;
this.obj.width = width;
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;
this.obj.height = height;
this.obj.width = width;
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;
this.obj.height = height;
this.obj.width = width;
return this.obj;
}
}

function layerSetup() {
alert(available_width);
if(available_width < 700 )
centerLyr = new layerObject('centerLayer','absolute', available_width/2-308,0,'visible',245,616);
if (available_width < 1000 && available_width > 700)
centerLyr = new layerObject('centerLayer','absolute', available_width/2-383,0,'visible',330,766);
if(available_width > 1000)
centerLyr = new layerObject('centerLayer','absolute', available_width/2-383,0,'visible',460,766);
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link rel="stylesheet" href="muiskort.css" type="text/css">
</head>

<body bgcolor="#6699ff" text="#000000" lefmargin="0" topmargin="0" 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();
};MM_preloadImages('bedrijfsprofiel_over.gif')"
onResize="
if(is.ns4 ||is.ns6||is.ie4||is.ie5) {
history.go(0);
}" leftmargin="0"
>
<DIV ID="centerLayer" STYLE="position: absolute; left: 0px; top: 0px; z-index: 6; visibility: visible;; overflow: scroll" class="midden" >

[SchizoDuckie]

Okee, zoals beloofd, mijn scriptje. De sourcecode is zwaar gecomment, en hij is cross browser.

http://www.nvlf.nl/beehive/duck.html

[Verwijderd]

bij resize etc,doe ie niet veel

[Dark Blue]

Op maandag 18 februari 2002 14:19 schreef papa_eend het volgende:
Okee, zoals beloofd, mijn scriptje. De sourcecode is zwaar gecomment, en hij is cross browser.

http://www.nvlf.nl/beehive/duck.html

Als het scherm groter is dan de layer pleurt ie m in het midden, if not, dan zet ie hem tegen de linkerbovenhoek aan.