Web Analytics Made Easy -
StatCounter Object Positioning - CodingForum

Announcement

Collapse
No announcement yet.

Object Positioning

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Object Positioning

    Hey all, I'm sure this is just a simple syntax error but I am at a loss.

    I have two elements on a page and I want element 1 to cover element 2. It's that simple. My script works great until it comes to positioning the second element. Can someone please shed some light on my error?

    Here is my script:
    Code:
    <script language="javascript" type="text/javascript">
    <!--
    function findPos(){ 
    var obj = document.getElementById('aw'); 
    var posX = obj.offsetLeft;
    var posY = obj.offsetTop; 
    while(obj.parentNode){ 
    posX=posX+obj.parentNode.offsetLeft; 
    posY=posY+obj.parentNode.offsetTop; 
    if(obj==document.getElementsByTagName('body')[0]){
    break
    }else{
    obj=obj.parentNode;
    } 
    } 
    var hpos = posX;
    var vpos = posY;
    document.getElementById('awcover').style = 'position:absolute; left:' + hpos + 'px; top:' + vpos  + 'px; z-index:10;'
    } 
    onload=findPos;
    //-->
    </script>
    • Jesus called. He says He misses you.

  • #2
    Can you post the html you are using?
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      Here is the streamlined version.
      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
      <html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Object Positioning Problem</title>
      <script language="javascript" type="text/javascript">
      <!--
      function findPos(){ 
      var obj = document.getElementById('aw'); 
      var posX = obj.offsetLeft;
      var posY = obj.offsetTop; 
      while(obj.parentNode){ 
      posX=posX+obj.parentNode.offsetLeft; 
      posY=posY+obj.parentNode.offsetTop; 
      if(obj==document.getElementsByTagName('body')[0]){
      break
      }else{
      obj=obj.parentNode;
      } 
      } 
      var hpos = posX;
      var vpos = posY;
      document.getElementById('awcover').style = 'position:absolute; left:' + hpos + 'px; top:' + vpos  + 'px; z-index:10;'
      } 
      onload=findPos;
      //-->
      </script>
      </head>
      <body>
      <table cellspacing="4" cellpadding="0" align="center" border="0" style="font-family:arial, helvetica; font-size:10px;">
      <tr><td align="center">
      <div name="aw" id="aw" style="z-index:1; width:120px; height:60px;">
      Code Here
      </div>
      </td></tr></table>
      Lota junk here . . .
      <br>
      <br>
      <br>
      <div name="awcover" id="awcover" style="width:120px; height:60px;">
      <a href="" target="new"><img src="gif.gif" border="1" /></a>
      </div>
      </body>
      </html>
      • Jesus called. He says He misses you.

      Comment


      • #4
        Try this
        Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Object Positioning Problem</title>
        <style type="text/css">
        html, body {
        font-family:arial, helvetica;
        font-size:10px;
        margin:0;
        padding:0;
        }
        table {
        width:100%;
        }
        #aw {
        width:120px;
        height:60px;
        position:relative;
        z-index:0;
        text-align:center;
        margin:auto;
        background:#F00;
        }
        #awcover {
        width:120px;
        height:60px;
        position:absolute;
        z-index:1;
        display:none;
        background:#00F;
        }
        </style>
        <script type="text/javascript">
        <!--
        function findPos()
        { 
        	var obj = document.getElementById('aw'); 
        	var obj2 = document.getElementById('awcover').style;
        	var posX = obj.offsetLeft;
        	var posY = obj.offsetTop; 
        	while(obj.parentNode)
        	{ 
        		posX = posX+obj.parentNode.offsetLeft; 
        		posY = posY+obj.parentNode.offsetTop; 
        		if(obj == document.getElementsByTagName('body')[0])
        		{
        			break
        		}
        		else
        		{
        			obj = obj.parentNode;
        		} 
        	} 
        	var hpos = posX;
        	var vpos = posY;
        	obj2.display = 'block';
        	obj2.left= hpos + 'px';
        	obj2.top = vpos + 'px';
        } 
        window.onload = findPos;
        //-->
        </script>
        </head>
        <body>
        <table cellspacing="4" cellpadding="0" border="0">
        	<tr>
        		<td>
        			<div id="aw">
        				Code Here
        			</div>
        		</td>
        	</tr>
        </table>
        Lota junk here . . .
        <br />
        <br />
        <br />
        <div id="awcover"><a href="" target="_blank"><img src="gif.gif" border="1" alt="" /></a></div>
        </body>
        </html>
        For z-indexing to work the element needs to have position:relative, position:fixed, or position:absolute applied to it.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          Works like a dream. Thanks!

          But now there is another problem. I think I need to explain what I am trying to do.

          There is a link in the div being covered which is generated by an offsite javascript that I can't control. I want the link to open in a new window [which it doesn't]. Thus the cover. It will link to the same location as the covered link but will open in a new window.

          Now the problem. Even with the z-index set, the script generated link is coming to the top. Is there a way to override this?
          • Jesus called. He says He misses you.

          Comment


          • #6
            I think you should post a link to your page. It also sounds like you shouldn't be doing something that you are trying to do.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment


            • #7
              The page isn't available. It is for an internal application interface.

              And to ease your concern, I am not attempting anything unseemly [just trying to rectify some bad design]. The link needs to open in a new window to prevent breaking the workflow of the parent interface. All that is required is that all links to the secondary site are maintained which is what I am attempting to accomplish by the additional scripting.

              I didn't even think about it until you pointed it out. Now I'm not sure I want to pursue this because unethical coders COULD use it to subvert somebody else's work. I think I'll dump the idea and pursue a different direction. Sorry for the trouble but thanks for the help, and for pointing out a potential problem.

              Peace Out!
              • Jesus called. He says He misses you.

              Comment

              Working...
              X