I can't position my layers with these snippet

[michelle]

Hi, this works fine at first but now I don't know why its not positioning my layer correctly on issue of screen resolution or resize.



var activeSub=0;
var SubNum=0;

function reDo(){ window.location.reload() }
window.onresize = reDo;


//Define global variables

var timerID = null;
var timerOn = false;
var timecount = 200;
var what = null;
var newbrowser = true;
var check = false;

function init(){
// alert ("Running Init");
if (document.layers) {
// alert ("Running Netscape 4");
layerRef="document.layers";
styleSwitch="";
visibleVar="show";
screenSize = window.innerWidth;
what ="ns4";


}else if(document.all){
// alert ("Running IE");
layerRef="document.all";
styleSwitch=".style";
visibleVar="visible";
screenSize = document.body.clientWidth + 18;
what ="ie";

}else if(document.getElementById){
// alert ("Running Netscape 6");
layerRef="document.getElementByID";
styleSwitch=".style";
visibleVar="visible";
what="moz";

}else{
//alert("Older than 4.0 browser.");
what="none";
newbrowser = false;
}

check = true;
}

// Turns the layers on and off
function showLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="visible";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
}
}
else {// alert ("Please wait for the page to finish loading.");
return;}
}

function hideLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "moz"){
document.getElementById(layerName).style.visibility="hidden";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
}

}
else {// alert ("Please wait for the page to finish loading.");
return;}
}


function hideAll(){
hideLayer('layer1');
}


function startTime() {
if (timerOn == false) {
timerID=setTimeout( "hideAll()" , timecount);
timerOn = true;

}

}


function stopTime() {
if (timerOn) {
clearTimeout(timerID);
timerID = null;
timerOn = false;
}
}

function onLoad(){
init();

}



This is my style:



#layer1 { background-color : #666666;
layer-background-color : #666666;
width : 138px;
top : 99px;
left : 973px;
position : absolute;
z-index : 90;
visibility : hidden;
}



would be grate if any helps. Thanks in advanced

[michelle]

please help someone. thnks

[ShriekForth]

I'm not sure the problem is completely understood. It appears to be a script that will hide "layer1" after a few hundred milliseconds. I don't see anything in the script that will actually change or move the layer. The "left : 973px;" may be off the screen at lower resolutions. Maybe it should have been 97px; ?


This bit here

function reDo(){ window.location.reload() }
window.onresize = reDo;

is not really going to reposition the layer either as the position is absolute, so it will stay at exactly 99 pixels from the top and 973 pixels from the left. You probably want this to be relative to see any effect from resizing the browser.

so something like this would produce more visible effects

#layer1 { background-color : #666666;
layer-background-color : #666666;
width: 138px;
top: 50%;
left : 50%;
position : relative;
z-index : 90;
visibility : visible;
}

If neither of those are the problem, try stating your question again.



ShriekForth

[michelle]

Hi ShriekForth,

I state 973px is because my layer will be on the right side and my screen resolution was 1152 by 864. So I've position the layer very accurately now. But once I resize my browser, the layer stay at that 973 position and my layer end up like somehow fixed on 973px which was on the far right hand side which I need to scroll the horizontal bar in order to see that layer.

Earlier I did a test on the original script everything is ok but now, sigh, I've deleted it and forgot the url for that. But I never change the script. Also I did try relative and fixed too but the same result shown. I remember the original use absolute too. Any idea? Or will the problem lies on my div? Here's my div if you need.



<div id="layer1" onMouseOver="stopTime();" onMouseOut="startTime();">
<table width="138px" border="0" cellspacing="2" cellpadding="0" class="leftnav">
<tr>
<td height="15"><font size="2">&nbsp;&nbsp;</font><a href="#" title="Mailing
List">Subscribe/Unsubscribe</a><br></td>
</tr>
</table>
</div>

[ShriekForth]

do two things...

first, in your init function you need to get the screenSize for your dom2/ns6/mozilla browser


styleSwitch=".style";
visibleVar="visible";
screenSize = window.innerWidth;
what="moz";


Then replace your showLayer function with this one.


// Turns the layers on and off
function showLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "ie"){
document.all[layerName].style.left = screenSize - 138;
document.getElementById(layerName).style.visibility="visible";
}
else{
if(what == "moz"){
document.getElementById(layerName).style.left = screenSize - 138;
document.getElementById(layerName).style.visibility="visible";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"].left='+ (screenSize - 138) +''); ;
}
}
}
else {// alert ("Please wait for the page to finish loading.");
return;
}
}


it can be modified as you like the hardcoded width of 138 for the div can probably be changed. But this will get you working as you expect. I think.

ShriekForth

[michelle]

Oh my god, ShriekForth! It work great! Thanks a zillion!

[michelle]

By the way Shriek,



function showLayer(layerName){
if(check){
if (what =="none"){
return;
}

/* This part is for IE right? */

else if (what == "ie"){
document.all[layerName].style.left = screenSize - 138;
document.getElementById(layerName).style.visibility="visible";
}
else{

/* This part is for netscape? */

if(what == "moz"){
document.getElementById(layerName).style.left = screenSize - 138;
document.getElementById(layerName).style.visibility="visible";
}

/* then who is this for? */

else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"].left='+ (screenSize - 138) +''); ;
}
}
}
else {// alert ("Please wait for the page to finish loading.");
return;
}

[michelle]

Oh Shriek, Opera failed! hah. Do you know which DOM opera use? Earlier I came along a site with all specific but lost track now.

[ShriekForth]

WebMonkey (http://hotwired.lycos.com/webmonkey/reference/browser_chart/) has a fairly up to date chart. It does not have Opera version 7.0. I just read in the forums here somewhere that detection for the particular version is going to be different.

window.opera would be a temp solution, if it is opera it will return a true. Then you will need to figure out how to reference the window size.

That you might be able to find here Opera.com (http://www.opera.com/docs/specs/js/) look under Screen, availWidth or width might get you what you need. You will need to add one more layer of detection though :)

ShriekForth

[michelle]

right shriek, I can't seems to make it right here. It says reference error and error on line 87

For the function init() :



/* add an extra piece of snippet */

}else if(document.getElementByTagName){
// alert ("Running Opera 6 and above");
layerRef="document.getElementsByTagName";
styleSwitch=".style";
visibleVar="visible";
screenSize = window.width;
what="opera";

/* the function for showlayer */

function showLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "ie"){
document.all[layerName].style.left = screenSize - 182;
document.getElementById(layerName).style.visibility="visible";
}
else{
if(what == "moz"){
document.getElementById(layerName).style.left = screenSize - 165;
document.getElementById(layerName).style.visibility="visible";
}
else{
if(what == "opera"){
document.getElementsByTagName(layerName).style.left = screenSize - 138;
document.getElementsByTagName(layerName).style.visibility="visible";
}

else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"].left='+ (screenSize - 168) +''); ;
}
}
} /* Line 87 */
else {// alert ("Please wait for the page to finish loading.");
return;
}
}



what did I do wrong here?

[ShriekForth]

Sorry it took so long, I Was out of town.

The snippett you have here is missing a closing }

and the if/else nesting seems to be wrong

Try this


function showLayer(layerName){
if(check){
if (what =="none"){
return;
}
else if (what == "ie"){
document.all[layerName].style.left = screenSize - 182;
document.getElementById(layerName).style.visibility="visible";
}
else{
if(what == "moz"){
document.getElementById(layerName).style.left = screenSize - 165;
document.getElementById(layerName).style.visibility="visible";
}
else{
if(what == "opera"){
document.getElementsByTagName(layerName).style.left = screenSize - 138;
document.getElementsByTagName(layerName).style.visibility="visible";
}
else{
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
eval(layerRef+'["'+layerName+'"].left='+ (screenSize - 168) +''); ;
}
}
} /* Line 87 */
}
else {// alert ("Please wait for the page to finish loading.");
return;
}

}


ShriekForth