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 3 123 LastLast
Results 1 to 15 of 31
  1. #1
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question One Last question - possible to relatively position with DOM?

    Ok, one last weird question for THIS forum (I promise!!!) : Is there a way to control relative positioning of a table using the same format of DOM scripting like in my previous post? :

    document.getElementsByTagName('table').item(#)... ? ? ?

    Again, possibly using DOM syntax with "ByTagName" and an item# like above but, most importantly (this is a requirement-->), NOT dependent on the table tag having an ID nor NAME? For instance, if a table needs to be shifted up 10px from its current position? Can this be done?


  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try something like:


    var tableObjects = document.getElementsByTagName('table');
    var tableLen = tableObjects.length;

    for(i=0;i<tableLen;i++){
    tableObjects[i].setAttribute("style","position:relative");
    tableObjects[i].style.top = "-10px";
    }

  • #3
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey brothercake,

    How would this be done for just one table repositioning? Let's see... I'll give it a shot though I know it will be probably wrong:

    document.getElementsByTagName('table').item(5).setAttribute("style","position:relative")
    document.getElementsByTagName('table').item(5).style.top = "-10px"

    Wrong, right?!! So what's the correct way? Syntax is so confusing when it comes to DOM. Can you tell me of a good source (online, book, or otherwise) for DOM & CSS scripting?





  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    IE is stupid and doesn't let you setAttribute('style'), although it should. No problem in Gecko though.

    Should be as easy as:

    refToElement.setAttribute('style', 'position: relative; top: -10px;');

    But instead in order to make it work in IE:

    refToElement.style.position = 'relative';
    refToElement.style.top = '-10px';

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by tired&amp;lonely
    Syntax is so confusing when it comes to DOM. Can you tell me of a good source (online, book, or otherwise) for DOM & CSS scripting?
    What about W3C' site?

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by jkd
    IE is stupid and doesn't let you setAttribute('style'), although it should.
    Yeah it should

    So the whole thing would be

    refToElement.setAttribute('style');
    refToElement.style.position = 'relative';
    refToElement.style.top = '-10px';


    Is that right?
    Last edited by brothercake; 10-08-2002 at 10:33 PM.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Bosko
    What about W3C' site?
    A newbie (or not-so-newbie) using the W3C website as a reference is roughly equivalent to a 2nd grader trying to read the King James Bible. The information is there, but without knowing what you are reading or having a fundamental understanding, It's difficult to extract any meaning.

    SO, I suggest that you check out the MSDN and Gecko links in my signature. While some people don't like MSDN as a DOM reference, I like it because[list=1][*]It's the easiest to use[*]Has more/better examples than the Gecko DOM reference[*]Always indicates when a property/method/whatever is IE only, so you can steer away from those.[/list=1]
    Last edited by beetle; 10-09-2002 at 06:55 PM.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't see whats so hard about it,you don't have to be a genius to understand it.Besides it covers all the DOM methods,which I can't say about the MS or Gecko reference.
    I do agree that the Gecko DOM reference is a bit easier,because it also provides some example code.

  • #9
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Uhh, what's so hard about it? I'll tell you.

    Pretend you are a newbie with just a loose understanding of what the DOM is, and have just begun to understand the relationships between methods, events, and objects. Now, let's say you visit the W3 site looking for some DOM reference material, so naturally you click the DOM link to the left. WHOA...a page with not so aesthetically formatted text with a sea of links. Where do you go? What do you click on? Maybe only after reading EVERY word on the page do you realize that the link you need is labeled 'DOM Technical Reports' under the 'Public Release of Specifications' heading and is over halfway down the page. THEN what? How do you choose next? DOM 1 Level 1? DOM 1 Level 1 2nd ed.? DOM 2 Core? Sure, this is an easy choice for me or you to make, but not nearly to the majority of people that visit this board.

    Go to the Gecko or MSDN reference, and you're smack dab in the middle of DOM goodness. After all, we want what these browsers are acutally using, and not just what the W3C recommends, right?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #10
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    ... I learned all of my DOM knowledge from the W3C pages. I also learned all I know about SVG and MathML from them. I attribute most of my XML knowledge though to XML in a Nutshell by O'Reilly publishing.

  • #11
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Beetle is right. I had a hard time deciphering that W3C site, and I'm if anything the epitome of a novice. Also, I can't even get the darn W3C site to load right now (whats up with that?!). But I guess what I'm really looking for is not just a reference lising all the nuts&bolts of DOM, but also (and maybe more imprtantly) a good guide for learning and understanding DOM written without too much jargon... ya know, a DOM for Dummies sort of thing. Does something such as this exist online?


    Ok, I'm gonna break my promise I made at the top of this post, since I'm having problems loading that wonderful W3C site right now...

    but if I have a <table name="thisone"> on a webpage, how can I find the DOM item number -- .item(#) -- for that table based on its name="thisone"?


  • #12
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Found another good site...

    http://www.xs4all.nl/~ppk/js/

    Why do you need the table's item# if you already have it's name?
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Useful resource and overview:
    http://www.zvon.org/xxl/DOM1reference/Output/index.html

    ... though I learned the DOM from what a drunken cat scratched into the wooden door of the wine cellar in a full moon night . In other words: Full ACK to what beetle wrote.

  • #14
    New Coder
    Join Date
    Aug 2002
    Posts
    69
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know it's a weird question (but then, if it wasn't, it wouldn't be a tired&lonely question, would it?!!).... but the reason I need to determine a table's item# (even if I have its name) is because it will be used as an offset value to determine where other tables are located relative to that item# so that I can control their attributes using DOM.

    {It's kinda hard for me to explain, but to give you some background on my problem: At load time the top and bottom of my webpage will be appended with code not generated by me but by outside sources. So, if I know the item# of my uppermost table (that is, within MY code generated portion) after the webpage is put together, then I can change the attributes of the tables that were appended above, by using the item# as an offset. Likewise, the same should be true for the bottom of the webpage. Anyway, I hope that's how that works.}

    So now (with that crazily explained), how can I get a table's item# position within my webpage given that I know its name (or ID, for that matter)?

  • #15
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    You'll have to iterate the collection to find it.

    Assume your table has an id of "myTable":

    var table = document.getElementById('myTable');
    var tables = document.getElementsByTagName('table');
    for (var offset = 0; offset < tables.length; offset++) {
    if (tables.item(i) == table) break;
    }


    Now the variable offset refers to the offset of the specified table from within the document-level collection of tables.


  •  
    Page 1 of 3 123 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
    •