please... some info would be very appreciated.

Discussion in 'Javascript' started by primus, Jul 14, 2005.

  1. primus

    primus Guest

    Hello all,

    First let me tell you that I have searched this group and the internet
    and have not been able to find the answer to my problem. It is probably
    because I don't know what to look for. I did though find my question
    asked in 1997 by a guy in this group but it seems that noone answered
    his(my) question. As a very last resort I ask my question now.

    I have a function to handle many divs. How do I pass that function the
    'object' of the div, so that I may change its style.

    ---
    <div id="layer1" style="position:absolute;top:0;left:0;"></div>
    <script language="javascript">
    function move(divname){
    divname.style.top = 100;
    }

    move(window.document.all.layer1);
    </script>
     
    primus, Jul 14, 2005
    #1
    1. Advertisements

  2. primus

    Robi Guest

    one way is:

    function move(divname){
    document.getElementById(divname).style.top = 100;
    }
    move("layer1");

    but that will only work with browsers that support getElementById

    now check message Michael Winter added a nifty checker in there.

    there, if I understand it correctly, you would add the "var getReferenceById..." code
    into your move() function - changing move(divname) to move(id) or replacing the "id"
    references to "divname", whichever is easier for you - and then add

    if(getReferenceById && getReferenceById.style) getReferenceById.style.top = 100+'px'.

    I'm not sure where 'px' doesn't work, but there is a browser that doesn't work right
    if you omit the 'px' addition.

    Robi
     
    Robi, Jul 14, 2005
    #2
    1. Advertisements

  3. primus

    ASM Guest

    Hello alone,
    <html>
    <style type="text/css">
    * { text-align: center }
    </style>
    <script type="text/javascript">
    function move(divname,left,top){
    if(document.getElementById) {
    var d = document.getElementById(divname).style;
    if(top) d.top = top+'px';
    if(left) d.left = left+'px';
    }
    }
    </script>
    <div id="layer1"
    style="position:absolute;top:0;left:0;width:200px;border:1px solid red">
    <h2>DIV 1 to move</h2>
    <p><a href="javascript:move('layer1',100,50);">
    move layer1 from window-top = 50, from window-left = 100
    </a>
    <p><a href="javascript:move('layer2',320,20);">
    move layer2 to window-top = 50, and window-left = 320
    </a>
    </div>
    <div id="layer2" style="position:absolute;top:0;
    left:-300;width:200px;border:1px solid red">
    <h2>DIV 2 to move</h2>
    </div>
    </html>
     
    ASM, Jul 14, 2005
    #3
  4. primus

    primus Guest

    Thank you! Thank you! Thank you!

    My headache is gone now! I didn't know it was that easy.

    Again Thank You,
    Primus
     
    primus, Jul 14, 2005
    #4
  5. primus

    ASM Guest

    ASM wrote:
    [snip]
    [follow]

    if you need a compatibility even with my NC4.5 or IE4
    use that :

    <script type="text/javascript">
    function move(divname,left,top){
    var d = (document.all)? document.all(divname).style :
    (document.getElementById)?
    document.getElementById(divname).style :
    (document.layers)? document.layers[divname] :
    '';
    var p = document.layers? '' : 'px';
    if(top) d.top = top+p;
    if(left) d.left = left+p;
    }
    </script>



    Sorry, I didn't use :
    getReferenceById
    from Michael Winter
     
    ASM, Jul 14, 2005
    #5
  6. primus

    Randy Webb Guest

    And hope the UA supports innerHTML. Learn to code before posting here
    please.
     
    Randy Webb, Jul 14, 2005
    #6
  7. ASM wrote:
    It cannot be a good plan to place the above inside the body of a
    function that wants to make reference to a DOM element. Making such a
    reference is such a common task that the same (or similar) code would
    need to be repeated inside many function bodies as the size of the code
    increases.

    Instead it would make more sense to recognise that this is a task that
    would be more usefully done in a dedicated external function, or two
    (one for element reference retrieval and one for style object
    normalisation.
    This is object inference. It is not necessarily true that a browser that
    implements a document.layers collection does not require/understand 'px'
    units appended to a string that is to be assigned to a top or left
    property (it is even a bit dubious to be assigning a string).

    A more direct test would examine the existing top or left property and
    only add units where that property was a string. And where the property
    is not a string then it woudl also be better not to be assigning a
    string value. The latter can be achieved by taking advantage of the duel
    nature of the + operator; E.G.:-

    p = (typeof d.top == 'string')?'px':0;

    - so:-

    d.top = top + p;

    Assigns a string with 'px' appended if top was a string, and a number
    with zero added (so unchanged) if it was not a string.

    There is still an assumption in this approach but it is an assumption
    based on a test that has a close relationship with the action taken as a
    result, so it is an assumption that is less vulnerable to the influence
    of the unknown browser.
    <snip>

    If the function is passed top or left values of zero the above tests
    will cause it not to apply those values. Once positions have been set to
    non-zero values it is completely reasonable to assign zero value to
    those positions.

    Richard.
     
    Richard Cornford, Jul 14, 2005
    #7
  8. The code I posted results in the creation of one of three functions. The
    first is a simple wrapper around the document.getElementById method. The
    second uses the document.all collection to emulate gEBI by filtering the
    results that the all collection might return. The final function simply
    returns null, and will be used if the host supports neither gEBI nor the
    all collection.

    Part of the purpose of this code is to create a slightly more guaranteed
    environment. That is, getReferenceById will always exist, so you can
    rely on your ability to call it. All you need to do is check the return
    value to make sure you have an object reference.

    So, instead of:

    var obj = document.getElementById('myElement');

    if(obj) ...

    you'd write:

    var obj = getReferenceById('myElement');

    if(obj) ...

    [snip]

    Mike
     
    Michael Winter, Jul 14, 2005
    #8
  9. primus

    Robi Guest

    Michael Winter wrote:
    [...]
    Mike, thanks for the explanation.
    You can tell, I had some understanding problems :)


    Robi "s/some//g"
     
    Robi, Jul 14, 2005
    #9
  10. primus

    ASM Guest

    Yes you're absolutly right and I agree with you.
    (but in this answer the purpose was not to rebuild the world
    nor to confuse querer (fr: questionneur) )
    Good ! thanks
    not understood (I'll try and see)

    I dit test on Mac my function in : NC4.5, FF 10, IE 5.2
    and ... did work correctly :)

    thanks for *validate* corrections
     
    ASM, Jul 14, 2005
    #10
  11. primus

    Grant Wagner Guest

    This code is not completely safe. There is no guarantee that
    document.getElementById() will return a non-null object reference. Any
    attempt to access the -style- attribute of a null object reference will
    result in an error. Also, your tests -if (top)- and -if (left)- will
    never allow you to set your move() to [0,y] or [x,0].

    function move(divId, left, top) {
    var d;
    if (document.getElementById &&
    (d = document.getElementById(divId)) &&
    (d = d.style)) {
    if ('number' == typeof top) d.top = top + 'px';
    if ('number' == typeof left) d.left = left + 'px';
    }
    }

    will provide a slightly more robust implementation, although it still
    doesn't guarantee that setting d.top/d.left will actually do anything.
     
    Grant Wagner, Jul 15, 2005
    #11
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.