moving a div layer based on screen res:

scroce · Dec 20, 2004

So far I have this for javascript which works great:

Code:

<script language="JavaScript" TYPE="text/javascript">
function rightSize()
{ 
var screenWidth = window.screen.width;
switch (screenWidth)
{
	case 1024:
	  window.document.write ('ITS 1024!');	  
	  break;
	case 800:
          window.document.write ('ITS 800!');
          break;	  
	default:
	  window.document.write('HELLO THERE');
	  break;

}

  
} 

// call the above function
rightSize();

</script>

This is the div tag I'm trying to manipulate

Code:

<div id=layWording style="position:absolute; left:129px; top:208px; width:533px; height:258px; z-index:11">

All I want to do is change the left:129 to left:26 if the screen resolution is detected to be 800xsomething

I've tried permutations on a bunch of stuff that doesn't work - like this:

Code:

var element

element=window.document.getElementById("layWording");
element.style.left=26+"px";
element.style.left=26;
element=window.document.all[layWording]

I can't even get my browser to recognize my layer - much less move it - I keep getting an error when I refresh the screen. Now I'm just plain frustrated. Can someone point me in the right direction?

I know there's been a lot of postings on this topic, but I'm still unsure of the best way to proceed. It doesn't seem like a hard thing to do.

I am a nobody, and nobody is perfect; therefore, I am perfect.

scroce · Dec 20, 2004

ooo! ok I think I may have answered my own question, I came up with:

Code:

<script language="JavaScript" TYPE="text/javascript">
function rightSize()
{ 
  switch (screenWidth)
  {
	case 1024:	 
	  //window.alert("it's 1024");     
      var layer=document.getElementById("layWording");
      layer.style.left=129+"px";      
	  break;
	case 800:	  
      //window.alert("it's 800");     
      var layer=document.getElementById("layWording");
      layer.style.left=26+"px";
      break;
    case 640:
      //window.alert("it's 640");     	  
      var layer=document.getElementById("layWording");
      layer.style.left=26+"px";
      break;  
	default:
	  //window.document.write('This page may not be viewed optimally at your screen resolution.');
	  //window.alert('This page may not be viewed optimally at your screen resolution.');
	  break;
  }  
  //window.document.write (screen.width+"x"+screen.height);
  //document.write(screen.width+"x"+screen.height);  
} 

// call the above function
//rightSize();
</script>

with the following html:

Code:

  <body bgcolor="#FFFFcc" onLoad="rightSize();">

Seems to do it.

I am a nobody, and nobody is perfect; therefore, I am perfect.

chessbot · Dec 20, 2004

Congratulations on figuring it out yourself!

As an aside, you have some extra code in there. You are redefining layer for each case. How about defining it before the switch?

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

scroce · Dec 20, 2004

yes, I realized that, I'm going to make that cleaner, and also there is the fact the I don't think this code will work in Netscape, so I'm probably going to have to do some browser detecting stuff and translate the code appropriately - I think.....

I am a nobody, and nobody is perfect; therefore, I am perfect.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

moving a div layer based on screen res:

scroce

MIS

scroce

MIS

chessbot

Programmer

scroce

MIS

Similar threads

Part and Inventory Search

Sponsor