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.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Apr 2003
    Location
    Sat at desk in a dull office
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Absolute position of element

    I have a tree that has elements dynamically added via database load...blah blah....

    Basically creating elements and appending to a list.. to create an entry comprising of an image, link and text, then repeating for any clicked nodes.

    Code:
    oNOBR = oLI.appendChild(document.createElement("nobr"));
    ......
    
    oA = document.createElement("a");
    //add a load of properties...
    .....
    
    oA = oNOBR.appendChild(oA);
    oA.onclick = new Function("highlightObj('" + sKey +"')"); 
    //more events
    .....
    
    whatever=oA.appendChild(document.createTextNode(sText));
    --- Anyhow this creates a nice long Unordered list for each tree node. Now what I can't work out is how to scroll to one of these list elements (if is out of view on scree). Well actually, I know how to scroll, but I don't know the position. How do you find the position of a dynamically created element? It can obviously change after creation as nodes above it can be loaded and push it all down or closed and push it up....

    I Highlight the node using the highlightObj function created above. This gives me access to the element with a document.getElementById(...) But there does not seem to be any positional info there.

    So JavascriptGods, any ideas or shall I go sit down, have a beer and wait for inspiration to hit?

    Thanks....
    'The weekend starts here' (FBS)

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can find the position of any element with a recursive function, something like this:
    Code:
    function getRealPos(ele,dir)
    {
    	(dir=="x") ? pos = ele.offsetLeft : pos = ele.offsetTop;
    	tempEle = ele.offsetParent;
    	while(tempEle != null)
    	{
    		pos += (dir=="x") ? tempEle.offsetLeft : tempEle.offsetTop;
    		tempEle = tempEle.offsetParent;
    	}
    	return pos;
    }
    You call it with, for eg:
    Code:
    var position = {
    	x : getRealPos(obj,'x'),
    	y : getRealPos(obj,'y')
    	};
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey bcake...is it accurate to call a function recursive if it's not really recursive, but uses a while-loop instead?
    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”

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by beetle
    Hey bcake...is it accurate to call a function recursive if it's not really recursive, but uses a while-loop instead?
    No? Is recursive not an accurate way of describing a while loop, where each value depends on the value of the previous iteration ..?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, that is accurate, but then it uses a recursive loop, but that does not make it a recursive function. Or, you could say the function uses a recursive algorithm

    Ahh, semantics

    Just trying to give ya a hard time there, bcake
    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”

  • #6
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by beetle
    Yes, that is accurate, but then it uses a recursive loop, but that does not make it a recursive function.
    and I thought I was a pedant
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    <http://www.wikipedia.org/wiki/Recursion>

    A function that calls itself or second function that calls the first function using the value of the first function is recursive.

    A while loop is a recursive loop, though.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by liorean
    A function that calls itself or second function that calls the first function using the value of the first function is recursive.
    Okay, so

    function continueForever()
    {
    setInterval("continueForever()",100);
    }

    is a recursive function?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No - it has to pass a value to itself for it to be recursive. Recursiveness means it passes it's own value to itself.
    Code:
    function fnRecursive(t){
        t=isNaN(t)?10:t;
        if(t>0)
            t*=fnRecursive(--t);
        return t;
    }
    Like that.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Another recursive function:

    Code:
    function countBack( number )
    {
         window.status += number + ", ";
         if ( number > 1 )
             countBack( number - 1 );
    }
    Don't forget that the only thing that is important in a recursive function is actually the condition that it stops. You could say it's the only thing that makes a recursive function, and better to say: It's the most beautiful part of it. Just my 2 cents!

  • #11
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Boomshanka, I thought a little bit about your case and it's one thing that I don't understand. You said if you know the position of an element from top/left of the document, you can scroll to it, how? Do you use something like this:
    Code:
    document.body.scrollTop = aNumber; // Assuming aNumber is the actual y position of your element
    Well, I tried that code, but it really didn't do what I expected. If you even put 10000 for the scrollTop, it doesn't scroll the page that much, I'm talking about a normal page.

    Also why don't you use anchors? I wrote this dummy code:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    	<title>Untitled</title>
    <style>
    .firstClass
    {
    	background: #336699;
    	color: white;
    }
    a.bijan
    {
    	color: #ffcc66;
    }
    
    .secondClass
    {
    	background: #cc0000;
    	color: #ffff00;
    }
    </style>
    </head>
    
    <body bgcolor="#000000">
    
    <script>
    altClass = 1;
    anchorCounter = 0;
    function makeStuff()
    {
    	
    	
    	div = document.createElement("div");
    	div.style.height = 200;
    	div.innerHTML = "<a name='#anchorNo" + (anchorCounter++) + "'></a><br />" + 
    					"<center>" + anchorCounter + "</center>";	
    	if ( altClass == 0 )
    	{
    		div.className = "secondClass";
    		altClass = 1;
    	}
    	else
    	{
    		div.className = "firstClass";
    		altClass = 0;
    	}
    	document.body.appendChild(div);
    
    	brk = document.createElement("br");
    	div.appendChild(brk);
    
    
    	txt = document.createElement("span");
    	txt.innerHTML = "Enter a valid anchor number in this field to get a dynamically created link that gets you there!<br />"
    	div.appendChild(txt);
    	
    	txtInput = document.createElement("input");
    	txtInput.type = "text";
    	txtInput.onchange = function() {
    										// Checking if the input is not a string and also is not more than the total
    										// number of the page anchors!
    										if ( (/\d/.test(this.value)) && (num = parseInt(this.value))<=anchorCounter )
    										{
    											brk = document.createElement("br");
    											this.offsetParent.appendChild(brk);
    											
    									        a = document.createElement("a");
    											a.className = "bijan";
    											num = parseInt(this.value);
    											a.href = "#anchorNo" + (num - 1);
    											a.innerHTML = "Click here to go to No." + num;
    											this.offsetParent.appendChild(a);
    										}
    										else
    										{
    											alert("You have to enter a valid anchor number, not a string or anything else!");
    											this.focus();
    											this.select();
    										}
    										
    								   };
    	div.appendChild(txtInput);
    	
    	
    }
    for (i=0; i<20; i++)
    	makeStuff();
    </script>
    	
    
    
    </body>
    </html>
    You see I'm calling makeStuff() 20 times and you see an input text for each division in the page, entering an anchor number and clicking somewhere else on the page will give you a link to that div. How's that?!

  • #12
    New to the CF scene
    Join Date
    Apr 2003
    Location
    Sat at desk in a dull office
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up All encompassing hand of destiny

    Ok folks,
    Firstly, thanks for the responses. Even if you did get off-track slightly with recursion and iteration (or not), brothercake, your code (falling under the definition of: 'An expression or function, such as a polynomial, each term of which is determined by application of a formula to preceding terms') works exactly how I hoped.
    So thanks. (I've created you in the code with a link to this thread..)

    ConfusedOfLife, I'm just scrolling using window.scroll(x,y).
    I will check out the magic "makeStuff()" code you have written and see if it also fits in with all the rest of my code. I reckon it probably will. Then, of course, I will have to do some speed testing dependant on user levels in the trees and the repercussions of wind direction..

    Once again, thanks folks. It's damn fine to have a code forum where people know what there are talking about. (apparently).
    Last edited by Boomshanka; 04-07-2003 at 05:50 AM.

  • #13
    Regular Coder
    Join Date
    Jul 2002
    Location
    Iran
    Posts
    695
    Thanks
    0
    Thanked 0 Times in 0 Posts

    LOL

    I reckon it probably will. Then, of course, I will have to do some speed testing dependant on user levels in the trees and the repercussions of wind direction..
    I'm sure that the wind doesn't have any effect on the code, but check for the trees!

    I know that I didn't help, but when I started the code, I really wanted to make something. Ok ok, even in the middle of the code, I found out that it's useless! But I usually finish what I start!


  •  

    Posting Permissions

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