PDA

View Full Version : Changing layer placement through Javascript



EliteSeraphim
07-23-2005, 04:20 PM
Crazy idea, but hopefully there is a way to do this. As you know, here is the basic layer code


<div id="layer1" style="position:absolute; width:0px; height:0px; z-index:1; left:116px; top:0px;">

Now, here is where my questions comes. Is it possible for the "left" attribute to be altered by a javascript? This way all the layers in that particular page will be shifted to the left accordingly.

So, here is an example of how this javascript would be set up

if user's screen resolution is 800 X 600 then subtract X pixels from the "left" attribute in all layers
if user's screen resolution is 1024 X 764 then add 0 pixels to all "left" attribute in all layers
If user's screen resolution is 1280 X 1024 then add X more pixels to the "left" attribute in all layers

and so on...

I have tried doing relative positioning instead of absolute positioning but once you start to add more and more layers and lay them up to of each other with different Z index values, you run into some problems (well thats on my end since I don't know how to do it right). This way every layer has an "absolute" positioning, yet the left attribute will vary depending on the screen resolution.

jscheuer1
07-24-2005, 11:49 AM
It is better to design your page so that such shenanigans are not required. However, if you must resort to this sort of thing, it can be done but, be aware that users without javascript enabled or with some of its functions disabled will see some pretty odd sights. Basically what you want to do is collect all the divisions with the word 'layer' in their id attribute and then adjust them as desired with respect to their left style property all based upon the screen width. Let's start with the last thing (the screen width), then collect the layers and finally add the adjustment already calculated for them:

<script type="text/javascript">
function leftAdjLayers(){
var layers, leftAdj=0;
if (screen.width==800)
leftAdj-=12 //set to amount to subtract for 800x600
if (screen.width==1024)
leftAdj=0 // no change for your screen resolution that you designed the page for
if (screen.width==1280)
leftAdj+=22 //set to amount to add for 1280x1024
layers=document.getElementsByTagName('div')
for (i = 0; i < layers.length; i++)
if (layers[i].id.indexOf('layer')!==-1)
layers[i].style.left=parseInt(layers[i].style.left)+leftAdj+'px'
}
window.onload=leftAdjLayers:
</script>You can add other screen widths as you see fit, don't forget 1152! Oh, and don't forget that there is never any guarantee that folks will be viewing your page fullscreen, especially at those higher resolutions!

EliteSeraphim
07-24-2005, 04:17 PM
So all I need is to implement this code and then add the word "layer" to all of the div ID's I want changed?

and yeah, the site I am working with has alot of intricatate layers and whatnot so I thought this would be a good idea to go ahead and fix that problem until the future when we get a hold of a more skilled programmer that can code the entire site using realitve positioning. For now, I think this will work great. This is really not a big deal, it just that the right now, the site ish pushed to the left a bit on higher resolutions instead of being centered like it is on 1024 X 768. Now, here is a question regarding what you said. Is there a way to only enable this script to take effect if and only if the users browsing the site has the required Javascript functions? If not, I'd much rather have the site slightly pushed to the left instead of having them see a bunch of strange things.

EDIT: You know what, I think I might be making this too hard and much more complicated that what it could be. Is there a way to set this script so it works similar to a ratio? something like this:

For every 1 more pixel the screen width is greater than 1024, then move all layers to the left 1 pixel.

That way everything would align itself proportionally without having to worry about finding the specific values and entering them into the code above. This way it is much easier to manipulate and more practical. What do you think? possible?

jscheuer1
07-24-2005, 05:23 PM
Well, the script will not have any effect for browsers not using javascript. I said that could make for some pretty odd sights, in that if you are relying upon the script to get your layout right and using z-index for some of the layers, as indicated in your snippet of an example layer, things could get weird looking, yes. Even more so if a browser has only partial support of javascript, as is possible with Mozilla and even IE depending upon user configuration. Your idea of using a ratio is interesting but, wouldn't the ratio be more like half a pixel for every one? Say you get a window width 10px wider than 1024, wouldn't 5px be how far to the right you would want to move things to remain relative to center? That can be done, approximately, using window.innerWidth and document.body.clientWidth for Mozilla and IE respectively, to detect the user's window width. I think I have those right, always have to check when writing code, to be sure. Still there is a problem. Once the page loads and everything is adjusted, more or less, to spec and Oh Oh! the user changes resolutions or, more likely, viewport (window) size. Then all your nice calculations are toast (apologies to cr3) and things may look worse than if you never bothered with them. Now the nitty gritty. If your page is not a medium to slow load to begin with and there are no form elements or anything else that can get messed up by reloading the page, you can reload on resize but, I only know how to do that for Mozilla and IE so, there is a good chance other browsers will not cooperate. If I get terribly bored I may write up a demo but, this seems unpromising to me.

EliteSeraphim
07-24-2005, 06:51 PM
Like you said, how about making the script so it only does 1 calculation for every page load? so, lets say the page loads and adjustes itself to a 1280 X 1024 resolution, but then the user changes resolutions or resizes the window. When the changes occur, no further calculations will be made and the page will remain positioned like it was loaded. Then once the user clicks on a link to another page, another calculation will be made in order to re-center the page to the new specifications. As long as this works with the most popular browsers such as IE and Mozilla, I am good.

Just so you get an idea of the page that I am working on, here is the link. It is, more or less, centered in 1024 X 768. Like I said though, I don't know how to do relative positioning very well, and since this design is somewhat complex, even more odds against me getting it working properly.

http://www.projectcoe.com/pc/index.html

If you can get a demo of that ratio script whenever you have time, I would really appreciate it. We are still discussing various aspects of the design so it will be a while before that we change from our current layout: http://www.projectcoe.com/PCMain.html Then, if you find the time to do this ratio script, we can easily implement it on all the pages.

PS: What do you think of the layout? I am more of an artist than a programmer :rolleyes:

jscheuer1
07-24-2005, 10:55 PM
The Layout's good for that sort of thing. I really didn't look at the code very much but, from the way it looks visually, it should be able to be written so that it is centered at any resolution wide enough for it, left aligned for those that don't. I did write a script for what we were discussing but, it will render a part of the content off screen to the left if the window is too small. Other than that it works well. I'm looking into correcting for that and adding a 'memory' feature to readjust on resize without reload.

EliteSeraphim
07-25-2005, 04:34 AM
yeah, thats an even better solution. If the viewer's resolution is smaller than 1024 than 768, then it would be best to just align the site on the left. Also, I am not sure if you got to see the new layout since I capitalized one of the links above incorrectly. Here is the real link in case it didn't work for you when you tried it: http://www.projectcoe.com/pc/index.html

Also, that memory feature is a much better suited idea as well since I don't think viewers will change resolutions very often.

jscheuer1
07-25-2005, 02:34 PM
Well, it is a beta version but, it tests out well on your index.html. It will degrade (not execute) in IE5Mac, probably throw errors in IE5PC. The memory resize only works in IE6 but degrades in others (except IE5PC). FF works except memory resize. Safari not tested and I have my doubts but, let's see if anyone reports anything. I started out thinking this would be a configurable script but, since Mozilla and IE see the DOM differently, the script has to configure itself based upon what it finds. Let me know about any bugs that may crop up. The script goes in the head, or is linked to the head:

<script type="text/javascript">

/*Absolute Elements Left Adjust to Window Width
John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */

function iecompattest(){ // Credit: Dynamic Drive
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

var layOrigNew=new Array();

function leftAdjLayers(runKind){
var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mac')!==-1&&agt.indexOf("msie")!==-1)
return;
var layers, wWidth, leftAdj=0, layersReAdj=0;
wWidth=window.innerWidth? window.innerWidth : iecompattest().offsetWidth
leftAdj=Math.floor((wWidth-1024)/2)
layers=document.getElementsByTagName('*')

if (runKind=='reDo'){
if(window.opera||!document.all)
return;
for (i = 0; i < layers.length; i++){
if (layOrigNew[i]==undefined)
return;
if (layers[i].style.position=='absolute'&&layOrigNew[i][0]!==' ')
layers[i].style.left=layOrigNew[i][0]+'px'
}
}

for (i = 0; i < layers.length; i++){
layOrigNew[i]=[' ', ' ']
if (layers[i].style.position=='absolute'){
layOrigNew[i][0]=(parseInt(layers[i].style.left)==parseInt(layers[i].style.left)&&0<parseInt(layers[i].style.left))? parseInt(layers[i].style.left) : ' '
layOrigNew[i][1]=(parseInt(layers[i].style.left)==parseInt(layers[i].style.left)&&0<parseInt(layers[i].style.left))? parseInt(layers[i].style.left)+leftAdj : ' '
}
}

for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][1]<0&&layOrigNew[i][1]!==' '){
layersReAdj=Math.min(layOrigNew[i][1],layersReAdj)
}

if (layersReAdj<0){
for (i = 0; i < layers.length; i++)
layOrigNew[i][1]=(layOrigNew[i][1]!==' ')? layOrigNew[i][1]-layersReAdj : ' '
}

for (i = 0; i < layers.length; i++)
if (layers[i].style.position=='absolute'&&layOrigNew[i][1]!==' ')
layers[i].style.left=layOrigNew[i][1]+'px'
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", leftAdjLayers, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", leftAdjLayers );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
leftAdjLayers();
};
}
else
window.onload = leftAdjLayers;
}
window.onresize=function(){
leftAdjLayers('reDo');
}
</script>Added Later: Oddly enough IE5PC just ignores it!

EliteSeraphim
07-25-2005, 05:48 PM
Wow, beautiful! Amazing work with this, John, I trully appreciate it! I just tested it out on the index.html and yes, it works perfectly in both IE6 and Mozilla which is what the vast majority of our viewers are going to be using anyway. I also went through all the resolutions on my monitor and I don't see any bugs with any of them, so as far as I can see, no bugs on the javascript itself. With the two most popular browsers covered, I think that should do it. Of course, if you find a way to support other browsers, that would be great, if not, the defeault alignment off the left side will work out just fine.

Again, numerous thanks for the code and I'll be sure to let you know if I find any errors.

EDIT: Ok, nothing too difficult but is there a way to add an ignore function that tells the javascript to disregard certain layer id's when aligning the site? check out this page http://www.projectcoe.com/pc/games/half_life2.html?var1=sc3 (this page does not contain the alignment script since I have yet to send it to our web manager)

All of the text and images in that panel where the boxart is are made up relative layers (they are "relative" because they are inside the DD tab code and use the margins of the tabbed content as their reference instead of the user's window. The actual positioning in each of the layers is set to "absolute" though). When the javascript takes over, those layers are shifted to the left on higher resolutions. Would it possible to add to the javascript a place in which I can list all of the layer IDs to ignore? Because once the other layers are shifted through javascript, the relative ones will automatically adjust itself without further modification.

jscheuer1
07-25-2005, 08:27 PM
That is easy to do, done in fact. I am a little dubious as to its working in actual practice though. Test show it will exclude an id(s) entered in the array but, from some of my other tests (writing the script to begin with) I saw that Mozilla and IE6 saw things differently as far as which element had the absolute positioning property. The results were the same though, so it may only be internal differences. Here is the updated script, let me know if it acts as expected and don't forget to configure your id's!


<script type="text/javascript">

/*Absolute Elements Left Adjust to Window Width
with exclude Id's Array option
John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */

var excludeIds=new Array() // <<< Do not edit or remove this line
/*Set Id's to be excluded, use as many as you need */
excludeIds[0]='firstidtoexclude'
excludeIds[1]='secondidtoexclude'
excludeIds[2]='thirdidtoexclude'

/////////////////////No Need to Edit Below/////////////////////

function iecompattest(){ // Credit: Dynamic Drive
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function exIds(el){
var idTest=1
for (j = 0; j < excludeIds.length; j++)
if (excludeIds[j]==el.id)
idTest=0
return idTest
}

var layOrigNew=new Array();

function leftAdjLayers(runKind){
var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mac')!==-1&&agt.indexOf("msie")!==-1)
return;
var layers, wWidth, leftAdj=0, layersReAdj=0;
wWidth=window.innerWidth? window.innerWidth : iecompattest().offsetWidth
leftAdj=Math.floor((wWidth-1024)/2)
layers=document.getElementsByTagName('*')

if (runKind=='reDo'){
if(window.opera||!document.all)
return;
for (i = 0; i < layers.length; i++){
if (layOrigNew[i]==undefined)
return;
if (layers[i].style.position=='absolute'&&layOrigNew[i][0]!==' ')
layers[i].style.left=layOrigNew[i][0]+'px'
}
}

for (i = 0; i < layers.length; i++){
layOrigNew[i]=[' ', ' ']
if (layers[i].style.position=='absolute'&&exIds(layers[i])){
layOrigNew[i][0]=(parseInt(layers[i].style.left)==parseInt(layers[i].style.left)&&0<parseInt(layers[i].style.left))? parseInt(layers[i].style.left) : ' '
layOrigNew[i][1]=(parseInt(layers[i].style.left)==parseInt(layers[i].style.left)&&0<parseInt(layers[i].style.left))? parseInt(layers[i].style.left)+leftAdj : ' '
}
}

for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][1]<0&&layOrigNew[i][1]!==' '){
layersReAdj=Math.min(layOrigNew[i][1],layersReAdj)
}

if (layersReAdj<0){
for (i = 0; i < layers.length; i++)
layOrigNew[i][1]=(layOrigNew[i][1]!==' ')? layOrigNew[i][1]-layersReAdj : ' '
}

for (i = 0; i < layers.length; i++)
if (layers[i].style.position=='absolute'&&layOrigNew[i][1]!==' ')
layers[i].style.left=layOrigNew[i][1]+'px'
}

if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", leftAdjLayers, false );
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", leftAdjLayers );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
leftAdjLayers();
};
}
else
window.onload = leftAdjLayers;
}
window.onresize=function(){
leftAdjLayers('reDo');
}
</script>

EliteSeraphim
07-25-2005, 08:45 PM
EDIT: woops, nevermind. I see how this works now.

EliteSeraphim
07-25-2005, 09:10 PM
Alright, I have entered all the IDs and tested it out to make sure it all works perfectly. One last thing though, I don't experience any problems at all, but since there are over 9 layers that I want to exluded, I want to make sure that having "[10]" will not cause any unexpected errors or bugs. Other than that, this script is amazing!!

jscheuer1
07-25-2005, 09:27 PM
As long as you make no syntax errors as you add to the array (the most common error in these kinds of situations) it should be fine. There is no numerical upper limit that I know of. I've seen arrays of this type with 300 entries, more than enough for your purposes. In short:

excludeIds[10]='idName'

is fine.

jscheuer1
07-26-2005, 06:48 PM
Oh, and another thing. I was working on converting this script to DOM and found that it was now able to reposition on resize without reload in Mozilla as well as IE and will do so with or without a doctype. Also, since I've been using a local version of your page, Project COE | PC Gaming, as a guinea pig, I discovered that you are using an outdated version of the cmotion script from DD here. It has a bug that prevents full scrolling through all of the images in Mozilla under certain circumstances. The update is available. I see that you or someone altered the HTML part of the code though so upgrading would require reinstalling the HTML part. All configuration may be retained from the older version though.

EliteSeraphim
07-26-2005, 09:25 PM
Thanks for the Notice, John. I'll update the cmotion script. I think I have found something that the alignment script doesn't cover. Lets say that layers are not in the actual HTML page but rather they are in an external CSS file that looks something like this (this is what I will be using for the right side of the main page so it can easily be updated).



.cell1icon {position:absolute; width:100px; height:90px;
z-index:3; left:555px; top:350px;}

.cell1text {position:absolute; width:224px; height:90px;
z-index:4; left:658px; top:350px;}

.cell2icon {position:absolute; width:100px; height:90px;
z-index:3; left:555px; top:442px;}

.cell2text {position:absolute; width:224px; height:90px;
z-index:4; left:658px; top:442px;}

and so on..

I call these layers by using <span class=" ">, but because they are not written into the actual HTML, your javascript ignores them. Can this be implemented into the script somehow? so it not only shifts the layers in the HTML code, but all the layers in a specific CSS style sheet?

jscheuer1
07-27-2005, 02:06 AM
If there is a span on the page with absolute position it should be detected and adjusted. Have you seen evidence of the script missing these spans? If so, my new version may tackle it. I wasn't writing with that in mind however, it shouldn't matter if the position property is assigned from a style sheet or inline style, it is still a property of the element. The only elements that would escape (at least in theory) would be DOM created elements that are added after the page loads.

EliteSeraphim
07-27-2005, 02:43 AM
Here it is, John. The span tags in the page below get ignored for some odd reason. Which new version of the code did you refer to? did you update the one you posted on the last page?

http://www.projectcoe.com/pc/index.html

jscheuer1
07-27-2005, 04:18 AM
I see, well it was working before. Why do you need those spans? I'll see if I can find the problem. My current latest did not solve it. I told you at the beginning that this wasn't the best idea in the world. For now, don't use the spans or try marking their style in their tags to see what happen.

EliteSeraphim
07-27-2005, 04:34 AM
EDIT: YES! This is an example of how someone who doesn't know nearly as much coding as he should if he want to tackle making a site does in order to get by. :D I am kind proud of myself for figuring this one out. What I did was get rid of the span tag and insert the class attribute right into the div tag along with style="position:absolute;" this way, the rest of layer is still being relayed off the external sheet and the "position" style in the div tag is picked up by the aligment script. I thought I needed to use spans since they were smaller segments of the site and not really a division, but hey, it worked.

final code:


<div style="position:absolute; left:555px;" class="cell1content">
the contents featured in the first cell go here
</div>

By the way, I am relaying these layers off an external sheet so I don't have to manually go in and edit each individual layer every time a new entry is added to the right column of the index page (the section under the "updates" header). All of the cells are aligned the same measurement from the left, so that can stay inside the actual div tag. The part I am relaying is the top alignment, which varies as the cells go down the page. This way, I just change the class of that particular div and the content will automatically adjust itself.

jscheuer1
07-27-2005, 10:13 AM
That's a relief, in a way. Now I'm bugged as to why it misses the span tags. As I said before, they are elements on the page, they have absolute position. It shouldn't matter how they got there or how they got that positioning property assigned to them, as long as they are parsed by the browser before the script runs, they should get picked up. I'm just guessing now but it might be the fact that you have given them dimensions. Span's technically are not allowed dimensions and that may have made their left positioning invalid as it follows the height and width in the style declarations. Glad you found a work around.

jscheuer1
07-27-2005, 05:31 PM
It really was bugging me. You should be able to access and evaluate these properties even if set on a stylesheet. What if your entire page's style was external, as is the case with many sites? I wasn't able to come up with a direct method but, found a way that works with your page and hopefully many, if not any with center alignment set for one resolution via absolute positioning. It requires a little more configuration than the previous ones, some added to allow for stylesheet defined elements, some to allow for other scripts on the page that might need a new reference when the layout changes. Here it is based upon your page with the spans. The allowance I have made for the cmotion script requires the updated version of same. Here is the new script:


<script type="text/javascript">

/*Absolute Elements Left Adjust to Window Width
with exclude Id's Array option - DOM version
John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */

/*Set to orignal offset of left "margin", the
distance from left that your content appears
fullscreen in your preferred resolution. */
var origOffset=116

/*IMPORTANT NOTE! - The first display element
on your page with the above value set for its
left position must have an id. */

/*Set to preferred resolution, the resolution
at which the layout looks centered or 'good'
to you when viewed full screen. */
var prefRes=1024

var excludeIds=new Array() // <<< Do not edit or remove this line!

/*Set Id's to be excluded below, use as many as you need.
Things like special or temporary elements used by
other scripts are good candidates. This script will
assign the id 'missing#' to absolutely positioned
elements with no id, where '#' is the element's position
in the DOM. If you want any of these elements excluded,
give them a unique id and add it to the list below. */

excludeIds[0]='temp'
excludeIds[1]='motiongallery'
excludeIds[2]='u1'

/*This script automatically appends itself to any existing
onload and onresize events. However, if you have onload
or onresize events from other scripts that are dependent upon
the layout and dimensions of the page, they need to run after
this script. If so, put their events in the function below. */

function addLoads(){ // <<< Do not edit or remove this line!
if (typeof(restarea)!=='undefined') // test variable 'restarea' from script 'cmotion'
fillup(); // onload function from 'cmotion'
return;
} // <<< Do not edit or remove this line!

/////////////////////No Need to Edit Below/////////////////////
var runCount=1, layOrigNew=new Array();
function iecompattest(){ // Credit: Dynamic Drive
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function exIds(el){
var idTest=1
for (j = 0; j < excludeIds.length; j++)
if (excludeIds[j]==el.getAttribute('id'))
idTest=0
return idTest
}

function assignId(el){
var idTest=1
if (el.getAttribute('id')==null||el.getAttribute('id')==''){
idTest=0
el.setAttribute('id', 'missing'+i, 0)
}
return idTest
}

function leftAdjLayers(){
var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mac')!==-1&&agt.indexOf("msie")!==-1){
addLoads();
return;
}
var ray, wWidth, leftAdj=0, layersReAdj=0;
wWidth=window.innerWidth? window.innerWidth : iecompattest().offsetWidth
leftAdj=Math.floor((wWidth-prefRes)/2)
if (runCount){
layers=document.getElementsByTagName('*')
ray=layers
}
else
ray=layOrigNew
for (i = 0; i < ray.length; i++){
if (runCount)
layOrigNew[i]=[' ', ' ', ' ']
if (exIds(layers[i])){
if (runCount)
layOrigNew[i][0]=origOffset<=layers[i].offsetLeft? layers[i].offsetLeft : ' '
layOrigNew[i][1]=layOrigNew[i][0]+leftAdj
if (runCount&&layOrigNew[i][0]!==' ')
layOrigNew[i][2]=assignId(layers[i])? layers[i].getAttribute('id', 0) : 'missing'+i
}
}
while (layOrigNew[0][2]==' '||layOrigNew[0][2].indexOf('missing')!==-1)
layOrigNew.splice(0, 1)
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][1]<=origOffset&&layOrigNew[i][1]!==' ')
layersReAdj=Math.min(layOrigNew[i][1],layersReAdj)+origOffset
if (layersReAdj<0)
for (i = 0; i < layOrigNew.length; i++)
layOrigNew[i][1]=(layOrigNew[i][1]!==' ')? layOrigNew[i][1]-layersReAdj : ' '
for (i = 0; i < layOrigNew.length; i++)
if (layOrigNew[i][0]!==' '){
document.getElementById(layOrigNew[i][2]).style.left=layOrigNew[i][1]+'px'
}
runCount=0
addLoads();
}

if ( typeof window.addEventListener != "undefined" ){
window.addEventListener( "load", leftAdjLayers, false );
window.addEventListener( "resize", leftAdjLayers, false );
}
else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", leftAdjLayers );
window.attachEvent( "onresize", leftAdjLayers );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
leftAdjLayers();
};
}
else
window.onload = leftAdjLayers;

if ( window.onresize != null ) {
var oldOnresize = window.onresize;
window.onresize = function ( e ) {
oldOnresize( e );
leftAdjLayers();
};
}
else
window.onresize = leftAdjLayers;

}
</script>

EliteSeraphim
07-27-2005, 06:00 PM
Great to see this, John! thanks again! I have gotten the updated cmotion script and have it ready to send to the web manager (since I don't have direct access to the server). I'll also update your script to include the newly added functionalities. Other than the cmotion script though, is there anything else that should be noted in your alignment script? I am looking into optimizing the <head> of the site, particulary the index page so all the scripts and css styles and loaded in the correct order.

Here is the current head. The line highlighted in blue I have no idea what it is. I am thinking it is something the server adds, but not sure what is it for.




<script language='javascript' src='http://127.0.0.1:1029/js.cgi?pcaw&r=16541'></script>
<meta name="keywords" content="pc gaming, pc video games, pc gaming news">
<meta name="description" content="PC Game Reviews, Previews, Headlines and Media">
<meta name="generator" content="Notepad">
<meta name="author" content="Jarrod Nichol">
<meta name="copyright" content="Copyright (c) 2004 Project COE">
<meta name="distribution" content="global">
<meta name="revisit-after" content="15 days">
<meta name="robots" content="all">

<link rel="stylesheet" type="text/css" href="http://www.projectcoe.com/Scripts/textstyles.css">
<link rel="stylesheet" type="text/css" href="http://www.projectcoe.com/Scripts/linkstyles.css">
<link rel="stylesheet" type="text/css" href="http://www.projectcoe.com/Scripts/updates.css">
<link rel="stylesheet" type="text/css" href="http://www.projectcoe.com/Scripts/tabstable.css">
<link rel="stylesheet" type="text/css" href="http://www.projectcoe.com/Scripts/gallerystyle.css">

<script type="text/javascript" src="http://www.projectcoe.com/Scripts/features.js"></script>
<script type="text/javascript" src="http://www.projectcoe.com/Scripts/hovertabs.js"></script>

<script type="text/javascript" src="http://www.projectcoe.com/Scripts/rollover.js">
/***********************************************
* DOM Image Rollover II- By Adam Smith (http://www.codevendor.com)
* Script featured on and available at Dynamic Drive (http://www.dynamicdrive.com)
* Keep this notice intact for usage please
***********************************************/
</script>

<script type="text/javascript" src="http://www.projectcoe.com/Scripts/alignment.js">
/*Absolute Elements Left Adjust to Window Width
with exclude Id's Array option
John Davenport Scheuer (jscheuer1) 2005
as first published in Dynamic Drive Help Forums
http://www.dynamicdrive.com/forums/
Permission to use granted, this credit must remain */
</script>

jscheuer1
07-27-2005, 06:41 PM
Well, just in case I haven't explained everything properly and/or you've understood it. Keep a backup of what works, of course. That blue stuff must be a server add-on. As far as noted in the alignment. It is set for the Project COE | PC Gaming page we have been talking about and the cmotion add on stuff is done in such a way that if the script is used for a page without the cmotion script, it will ignore the call for it. Other than that, read the configuration comments and if anything needs to be adjusted do so. If you have questions or problems let me know and as I said, keep a copy of the one that was working handy, just in case.