Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How do I position a layer with Javascript?

Posted on 2005-04-15
9
Medium Priority
?
1,053 Views
Last Modified: 2012-06-27
I use this script but it doesnt work


function poslayer(){
  OBJ1=document.getElementById('advert');
  OBJ1.style.left='100px';
}
0
Comment
Question by:Fern2
9 Comments
 
LVL 1

Expert Comment

by:jboyfinn
ID: 13789371
function poslayer(){
  OBJ1=document.getElementById('advert');
  OBJ1.style.posLeft=100; //i.e. an integer
}
0
 
LVL 1

Author Comment

by:Fern2
ID: 13789408
Sorry it doesnt work :(

0
 
LVL 7

Expert Comment

by:searlas
ID: 13789436
The advert element must have a position of relative or absolute.

e.g.
<style type="text/css">
#advert { position: relative; }
</style>

Then, you can use your original script.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Expert Comment

by:jboyfinn
ID: 13789437
Hi Sorry that should be


OBJ1.style.pixelLeft = 100


Do you want me to supply code to move objects that is compliant with older browsers? i.e. Netscape 4.xx uses :

document.layers['advert'].moveTo(x,y)

--jf
0
 
LVL 1

Accepted Solution

by:
jboyfinn earned 1500 total points
ID: 13789499
Hi,

All yr position problems sorted. I've tested this on IE 6 /Firefox 1.0 and Mozilla 1.7.6 on Win XP; I am just about to test it on Netscape 4.76 on Mac & IE 4 /IE 4.5 on mac OS 9

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>test Layers</title>
      <style type="text/css">

#advert {position:absolute; left:0px; top:0px width:300px;  background-color:aqua; }
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--
  function posLayer(x,y) {
    if (!isNaN(new Number(x)) && !isNaN(new Number(y))) {
      
         if (document.layers) { //Netcape 4
           document.layers['advert'].moveTo(x,y);
       } else if (1==1) {
           document.getElementById('advert').style.left = x;
           document.getElementById('advert').style.top = y;
         } else if (document.getElementById()) { //IE 5+
           document.getElementById('advert').style.pixelLeft = x;  
           document.getElementById('advert').style.pixelTop  = y;         
         } else if (document.all) { //IE 4
           document.all.advert.style.pixelLeft = x;  
           document.all.advert.style.pixelTop = y;  
         } //End if DOM sniff
        
      } //End if check input params valid  
  } //end function
//-->
</script>
</head>

<body><div id="advert"><a
href="#" onclick="posLayer(20,40)">Click here to change layer position</a></div>


</body>
</html>


That should do it

--jf
0
 
LVL 17

Expert Comment

by:mreuring
ID: 13789509
@Fern2

I would strongly advise you to try and keep your script W3C compliant and try the comment searlas supplied. Nothing is wrong with your script so it must be the environment of the element. Using the pixelLeft attribute or moveTo function will not solve that for you. As the first is proprietary code and the second obsolete you'd be well advised to stay with your supplied script.
No offence jboyfinn, but it's just not going to help to change the script at this time, unless fern2 is trying to attempt this on a browser that simply doesn't confirm with the current standards.
0
 
LVL 1

Expert Comment

by:jboyfinn
ID: 13789552
Hi,
   

yes he's right; there's little chance of you coming unstuck if you ignore older browsers. I just put all the code in to be thorough cos to make up ground for cocking-up my first post

PS the '  if (1==1)'  should have been  '  if (document.layers)   ' in my last post just FYI.
OK here is the final code posting (again tested on Mozilla, IE 6 and Firefox)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>test Layers</title>
      <style type="text/css">

#advert {position:absolute; left:0px; top:0px width:300px;  background-color:aqua; }
</style>
<script language="JavaScript1.2" type="text/javascript">
<!--
  function posLayer(x,y) {
    if (!isNaN(new Number(x)) && !isNaN(new Number(y))) {
      
           document.getElementById('advert').style.left = x;
           document.getElementById('advert').style.top = y;
                 
      } //End if check input params valid  
  } //end function
//-->
</script>
</head>

<body><div id="advert"><a
href="#" onclick="posLayer(20,40)">Click here to change layer position</a></div>


</body>
</html>


Note, I have only added an aqua background colour to the div and a width to it  for the purposes of making it stand out. Also how you fire the event to get the 'posLayer' fuinction running is up to you. It doesn't have to be an 'onclick'

--jf
0
 
LVL 17

Expert Comment

by:mreuring
ID: 13789710
All that does not sit well with me is your insistance on posting a quirks solution. It's a javascript habit from the time we had no rules to bind us and the browser would make up for our inconsequent use of the standards. Please use a compliant doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Someday you'll thank me for stressing this point, even though at first it'll only make your life seem that much harder.
If you choose to go standards, setting any style property without adding a unit will break, so in the above example, wether or not you're rendering in quirks or standards mode, you'd best get used to always add 'px' as this is no linger implied. So:
          document.getElementById('advert').style.left = x + "px";
          document.getElementById('advert').style.top = y + "px";

Now a last adition, I'm not in this for the points, just hoping to get more compliant code in this TA, for the original sugestion of altering the styles so that your element has a position see this comment: http:#13789436 As the rest of the comments are based around this idea, and most likely it's all you need to do to get your script working, that comment deserves at least a marginal amound of points.

 Hope I got you around to the standards point of view :)

  Martin
0
 
LVL 1

Expert Comment

by:jboyfinn
ID: 13789938
Hi mreuring

   I've taken your points on board. Yeah, that Doctype thing was pretty inexcusable..I just went to Homsite to get me a HTML template up and running as quickly as possible. I've been dissatisifed with its standard template for a while...only yesterday I created loads of snippets for quick insertion of charset 'meta' tags as they don't come with the templates as a default (even the XHTML ones).. I've now bitten the bullet and updated Homesite's configuration.

 To be fair to me with respect to the DHTML though I only guesswork to go on as to what browsers Fern2 wants the code to support.

--jf
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question