Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Can I use Javascript for positioning?

    I have four layers (2 of them are below)
    <STYLE TYPE="text/css">
    #layer1 {POSITION: absolute; Z-INDEX: 49100; VISIBILITY: visible; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px}
    #layer2 {POSITION: absolute; Z-INDEX: 49150; VISIBILITY: hidden; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px}
    </STYLE>

    When I test this in IE, NN4.7, NN6x, firefox there positions are different. I am using these layers to position some drop downs dynamically. But I also have some fixed checkbox, drop downs in my page.

    So in some browsers these dropdowns created with positioning is overlapping with the other drop downs which were created without layers. Is there any way to avoid this?
    May be write a javascript within the style tag to see what browser it is and then put the left and top value?

    Also can I omit the "height" tag and the z-index? Will it cause any problems?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    dont understand the problem

    PHP Code:
    <html>

    <
    head>
      <
    title></title>
    <
    STYLE TYPE="text/css">
    #layer1 {POSITION: absolute; Z-INDEX: 0; VISIBILITY: visible; LEFT: 190px; TOP: 245px; WIDTH: 196px; HEIGHT: 190px; }
    #layer2 {POSITION: absolute; Z-INDEX: 1; VISIBILITY: visible; LEFT: 290px; TOP: 145px; WIDTH: 196px; HEIGHT: 190px; }
    </STYLE>
    </
    head>

    <
    body>
    <
    div id="layer2" style="background-Color:red;" ></div>
    <
    div id="layer1" style="background-Color:blue;" ></div>
    </
    body>

    </
    html
    seems ok

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeh, the code is ok and doesnt have any problem. But my problem is say in my layers, I have said...

    #layer1 {POSITION: absolute; Z-INDEX: 0; VISIBILITY: visible; LEFT: 190px; TOP: 245px...

    Here the LEFT is 190px which is a position in IE. But in Netscape 4.7 this is not the same as IE. In NN4.7 layer1 is positioned a little bit more toward left and up. In Firefox it is positioned even a bit differently.

    So I am trying to position them exactly at the same spot which borwser I use. That is what I am not being able to do.

  • #4
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    When you say you have some fixed checkboxes I am assuming that they are coded as normal in the page.

    It is not the css that is the problem but how the different browsers position things in the normal flow of the document.

    For example, the default line height may be different.

    Running the following simple test I found that in IE div1 was positioned 15px from the top and div2 was positioned 34px from the top yet in Mozilla, Firefox, and NS7 the positions were 8px and 28px respectively


    <div id="d1">Hello world</div>
    <div id="d2">Hello world</div>

    <script>
    alert(document.getElementById("d1").offsetTop+"\n\n"+document.getElementById("d2").offsetTop)
    </script>
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #5
    New Coder
    Join Date
    Apr 2005
    Location
    Burnaby, BC, Canada
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately, with my experience, positioning things with css results differ in each type of browser.

    One way would be to either redirect the user to a page specialy created for that browser, or make one page, detect the browser, and output the position for that browser.
    'Programming is the only artform that fights back!'

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    What MR J said is exactly I am facing. So to solve this may be I should write a javascript to detect the browser and then have different values for each browser.

    But can you have the <style> tag inside a javascript function? - Function to detect different browsers? I got some errors
    Last edited by chelvis; 04-14-2005 at 09:08 PM.

  • #7
    New Coder
    Join Date
    Apr 2005
    Location
    Burnaby, BC, Canada
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You cant put a style inside script tags taht I know of. You will have to do something like this:

    document.getElementById('id name').style.left = 100;
    document.getElementById('id name').style.top = 100;
    'Programming is the only artform that fights back!'

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    but Netscape 4.7 does not understand getElementById. I have to make it work on NN4.7 also.

  • #9
    New Coder
    Join Date
    Apr 2005
    Location
    Burnaby, BC, Canada
    Posts
    68
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't code for netscape at all, so I can't help you with the format.

    But what I would do in this case would be to write a function to get the object. The function would get the object (based on what browser you are using), and return the object.
    'Programming is the only artform that fights back!'

  • #10
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Does NS4.7 recognise document.layers?

    If it does you could go

    if(document.layers){
    do this
    }
    else{
    if(document.getElementById){
    do this
    }
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried with document.layers and it didnt work in NN6.2. Also I have to support (PC) NN4.7 and higher, IE5.0 and higher, firefox and also in Mac IE, NN, and firefox. So thats why its been a bit tricky

    I will try with a function

  • #12
    New Coder
    Join Date
    Apr 2005
    Location
    Detroit, MI: Home of the body bag
    Posts
    35
    Thanks
    1
    Thanked 8 Times in 8 Posts
    What a coincidence...I have this exact same problem too.

    Only thing is I can't get to a Mac until school labs are open on Tuesday, so I can't check stuff to be sure for those browsers. But I should have something available by then, and hopefully I can share it with whoever has the problem. I'm also open to suggestions. Thanks for the contributors of this thread.

  • #13
    Regular Coder
    Join Date
    Jun 2002
    Posts
    406
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks judgment Day. If you get to work in Mac, please post it here too.

  • #14
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    First at all. If no special CSS, pages have a "border" left/top of different values in IE, NS or Moz. You must specify the body's margins to be 0
    <style type="text/css">
    <!--
    body {
    margin-top: 0px;
    margin-left: 0px;
    }
    -->
    </style>

    NS 4 uses document.layers to refere document's objects, but does not necesary means they have to be <layer> tags...

    On the other hand, modern browsers set the CSS attributes as
    object.style.attribute
    while NS 4 uses simply
    object.attribute

    There are other differences also. NS4 needs the object to be absolute/relative positioned before almost all the on-the-fly modifies. NS4 does not use relative positioning (it uses <layer><ilayer> combination for that). NS 4 uses other value for visibility (show/hide instead of visible/hidden)... and some small other differences are to be found in particular cases
    Last edited by Kor; 04-18-2005 at 05:01 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by diablo2_v
    You cant put a style inside script tags taht I know of. You will have to do something like this:

    document.getElementById('id name').style.left = 100;
    document.getElementById('id name').style.top = 100;

    document.getElementById('id name').style.left = 100+'px';
    document.getElementById('id name').style.top = 100+'px';
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •