Page 1 of 1

[SOLVED] top attribute change on resize

Posted: Sat Jul 28, 2007 4:06 am
by UrButtFullOfArr0ws
I'm trying to make one of divs i got, change height based on the top of another div that has bottom: 0px; attribute set if the user resizes the page.
I tried something like:

Code: Select all

var height = document.getElementById('div2').style.top
function changeheight(){
	var difference = document.getElementById('div2').style.top - windowheight
	document.getElementById('div1').style.height = document.getElementById('div1').style.height + difference
}

Code: Select all

<body onresize="changeheight()">
It might of worked good (probably :D) ONLY that style.top is only for setting not for recalling :?
The logic is, when the user resizes the page, div2 's top changes and the difference between the previous value and the post-resize value is added to the height of div1.
I've looked at almost all the attributes in DOM, JS and CSS, to no avail :(
Anyone help? :D

Re: [Unanswered] top attribute change on resize

Posted: Sat Jul 28, 2007 6:37 am
by superdezign
UrButtFullOfArr0ws wrote:I've looked at almost all the attributes in DOM, JS and CSS, to no avail :(
I don't believe you. :P
Have you looked at any of the attributes of HTML elements in the DOM, which is what you are attempting to alter?

offsetLeft, offsetTop, offsetWidth, and offsetHeight. Look into it.

Posted: Sat Jul 28, 2007 7:38 am
by UrButtFullOfArr0ws
Heh, that's why i said "almost" :D

Ok i looked into it, but what i don't get is exactly how they're supposed to work...
As i've seen i can't use offsetTop directly and i need to state which is the parent with offsetParent
How exactly do i do that?... MSDN had some complicated examples :)

Posted: Sat Jul 28, 2007 9:18 am
by superdezign
UrButtFullOfArr0ws wrote:MSDN had some complicated examples :)
MSDN? You went to the producers of the browser with the worse possible DOM in existence for JavaScript documentation? ... You're one crazy kid. :lol:

Code: Select all

/**
*   @param  obj : Object    A reference to the actual HTML element
*   @return Object          An object with two members: x and y
*/
function GetPosition(obj)
{
    if(!obj.nodeName)
    {
        return null;
    }

    var x, y, tmp;

    for(x = 0, y = 0, tmp = obj; tmp; tmp = tmp.offsetParent)
    {
        x   += tmp.offsetLeft;
        y   += tmp.offsetTop;
    }

    return {'x' : x, 'y' : y};
}
I just wrote that, but I'm pretty sure that it'll work. Mozilla doesn't have the problem with offsetTop and offsetLeft that Microsoft has, because they always make offsetParent the highest element in the DOM. However, Microsoft just makes the offsetParent the next element up, which is logically what the offsetParent should be (from it's name), but it is generally a useless position unless the offsetParent has a position attribute, which can complicate things if you don't calculate correctly.

This loops through up through the hierarchy from one parent to the next until it reaches the highest element that has no parent, and adds all of those offsets together, giving you the absolute position.

Posted: Sat Jul 28, 2007 1:03 pm
by UrButtFullOfArr0ws
Thanks a lot for your answer...
MSDN? You went to the producers of the browser with the worse possible DOM in existence for JavaScript documentation? ... You're one crazy kid.
:lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol: :lol:
It was the one with the best possible definition for it (at least for my search query :D)
And i AM crazy :D :D

You went a bit further in your function and implemented also the x position but at this moment it isnt needed but thanks anyway :)
Unless i'm mistaken i can just take off wherever i see "x" ?
No time to test it now...later :)



Edit: Oooooh... :) I just had a brainfart...out of thin air...
When does onresize activate? I mean does it execute the function every time the window size is one pixel wider or thinner or one pixel higher or shorter? If it would be so i could just add/substract 1 px to/off the height of the div i need to change the height :D
Would it work?

2nd Edit: I get null for the value returned by the function.... obj.nodeName returns DIV ... :?

Posted: Sun Jul 29, 2007 7:53 am
by superdezign
UrButtFullOfArr0ws wrote:You went a bit further in your function and implemented also the x position but at this moment it isnt needed but thanks anyway :)
Unless i'm mistaken i can just take off wherever i see "x" ?
No time to test it now...later :)
The function returns an object with the x and y position, but you can simplify it to just return an integer of the y position.
UrButtFullOfArr0ws wrote:Edit: Oooooh... :) I just had a brainfart...out of thin air...
When does onresize activate? I mean does it execute the function every time the window size is one pixel wider or thinner or one pixel higher or shorter? If it would be so i could just add/substract 1 px to/off the height of the div i need to change the height :D
It depends on the browser. Some browsers do it for each pixel (I think IE does), and others only do it after the resize is complete (i.e. Mozilla).
UrButtFullOfArr0ws wrote:2nd Edit: I get null for the value returned by the function.... obj.nodeName returns DIV ... :?
obj.nodeName is there to ensure that you are providing an HTML element to the function... Are you sure you are getting null? Did you try to place an alert in the 'return null' branch to be sure?

Posted: Sun Jul 29, 2007 10:18 am
by UrButtFullOfArr0ws
superdezign wrote: The function returns an object with the x and y position, but you can simplify it to just return an integer of the y position.
So i can get the y value with GetPosition('div2')['y'] ??
superdezign wrote: It depends on the browser. Some browsers do it for each pixel (I think IE does), and others only do it after the resize is complete (i.e. Mozilla).
IE does, i just figured out.
superdezign wrote: obj.nodeName is there to ensure that you are providing an HTML element to the function... Are you sure you are getting null? Did you try to place an alert in the 'return null' branch to be sure?
Yes, i changed the return null with alert('nothing') and it alerted :(
If i take out obj.nodeName from the function, it doesn't even work anymore and gives another Object Required error...

Code: Select all

function GetPosition(obj) 
{ 
	if(!obj.nodeName)
	{
		alert('nothing')
	}
    var y, tmp; 
    for(y = 0, tmp = obj; tmp; tmp = tmp.offsetParent) 
    { 
        y   += tmp.offsetTop; 
        document.getElementById('body2').innerHTML = y
    } 

    return {'y' : y}; 
}
Oh and doing this:

Code: Select all

function GetPosition(obj) 
{ 
    obj.nodeName
    var y, z, tmp; 
    for(y = 0, z = 0, tmp = obj; tmp; tmp = tmp.offsetParent) 
    { 
        y   += tmp.offsetTop; 
        z   = z + 1;
        document.getElementById('body2').innerHTML = z
    } 

    return {'y' : y}; 
}
... z in body2 was always 1 (meaning that the for() is executed only once? ... it should be run 2-3 times (not sure which) becouse the div's parent is not body but another div :?
Looking forward for your answer (honestly... i wanna get over this, becouse it actually looks like i'm doing nothing becouse it's quite pathetically simple at first looks :D)

Posted: Sun Jul 29, 2007 10:29 am
by superdezign
UrButtFullOfArr0ws wrote:
superdezign wrote: The function returns an object with the x and y position, but you can simplify it to just return an integer of the y position.
So i can get the y value with GetPosition('div2')['y'] ??
You are using the function completely incorrectly. I gave you the parameters in the comment. The obj parameter does not take a String, it takes an Object. Think about it.
UrButtFullOfArr0ws wrote:z in body2 was always 1 (meaning that the for() is executed only once? ... it should be run 2-3 times (not sure which) becouse the div's parent is not body but another div :?
Looking forward for your answer (honestly... i wanna get over this, becouse it actually looks like i'm doing nothing becouse it's quite pathetically simple at first looks :D)
Where'd you get a z from?

Posted: Sun Jul 29, 2007 11:05 am
by UrButtFullOfArr0ws
superdezign wrote:You are using the function completely incorrectly. I gave you the parameters in the comment. The obj parameter does not take a String, it takes an Object. Think about it.
Heh i was trying to get it not as a string but as an array :D And becouse im relatively new to JS i'm looking at w3schools js reference untill i can get used to it, but w3schools isn't working for some reason...
superdezign wrote:Where'd you get a z from?
Look above that quoted section there's a JS code

Edit:
Oh i was being stupid :lol:
Only until i stopped a little to figure out the word "object" did i get what u meant :D
Still that doesn't stop if(!obj.nodeName) returning null :?

Posted: Sun Jul 29, 2007 2:10 pm
by UrButtFullOfArr0ws
Never mind... Nailed it :D
Here's the solution i came up with ...

Code: Select all

function GetPosition(obj) 
{ 
    var y, tmp; 
    y  = document.getElementById('div2').offsetTop;
    return {'y' : y}; 
}
I haven't tried using the "obj" object that i enter into the function but i'm fine with it if it works :lol:

Posted: Sun Jul 29, 2007 6:32 pm
by superdezign
That's... not a solution. Why do you think we needed to create a function? That will only work in Mozilla. IE won't work. I think Safari won't work. I also think Opera won't either (though unconfirmed).

You've figured out how to get the object... Why can't you put 2 and 2 together?

Posted: Mon Jul 30, 2007 2:54 am
by UrButtFullOfArr0ws
That's... not a solution. Why do you think we needed to create a function? That will only work in Mozilla. IE won't work. I think Safari won't work. I also think Opera won't either (though unconfirmed).
For the first time i can say this phrase: you're wrong! :lol:
It works in both IE and Opera
I made a mistake from the beggining when i didn't call the offsetTop right and thought i need offsetParent (not that it might still need it but not in my case)
I also looked again on MSDN (yeah i know :wink: ) and they say IE returns most of the time "body" with offsetParent...
As I said this might work for me but if you're right this won't work for others
Thanks for all the help anyway!!
:D

Posted: Mon Jul 30, 2007 7:38 am
by superdezign
UrButtFullOfArr0ws wrote:For the first time i can say this phrase: you're wrong! :lol:
It works in both IE and Opera
Really? What versions are you using? Both IE6 and Opera 8 would fail.
How far is the element that you are after nested into the document?

Posted: Mon Jul 30, 2007 10:09 am
by UrButtFullOfArr0ws
Heh, :(

IE 7 and Opera 9, though ive always had problems on Opera with divs :lol:
The div isn't nested at all.. it's directly on the Body element

You just stunned me....I just figured im using IE 7 and not 6 :?