We Keep Coding

Any way to change the width of an element in real time?

So Im trying to change the width of a specific element in real time. Meaning that as you scale the browser window, the element changes width along with it.
Now, the way im calculating this width is by using another element as a reference point. So i just basically copy the reference element's width and apply it to my own element. However the problem is that this is only applied after every page refresh instead of a real time change.
Im using the following jquery code:
$("#lists ul").css("width", $("#lists").width());
As you can see, the code is pretty simple. #lists ul is the elements whose width I am attempting to change and #lists is the reference element. My question is, is there a way to achieve this effect? or should I use a different approach? thanks for the help!

No need to use JavaScript to adjust widths. This should be all you need:
#lists ul { width: 100%; }

What you're trying to do sounds crazy. As others have pointed out, using a percentage in CSS is probably much smarter.
If you insist on doing it this way though... I'm guessing your event is firing within $(document).ready(). Instead, try this.
$(window).resize(function(){
$("#lists ul").css("width", $("#lists").width());
});

You can use a combination of JavaScript and CSS. I don't know what your specific needs are, but you can easily set the width of an object like this:
var element=document.getElementById("my_element");
element.style.width=10+"px";// Simple as that.
If you just want to scale your element based on its parent element's size, this is best done with CSS percent width and height.
CSS:
#my_element{
width:20%;
}
Then CSS takes care of all your scaling needs whenever the parent element is resized.
CSS by itself may not look like what you want it to be, but if you make sure to define all applicable CSS properties of your element (like margin, padding, border, etc...) and then bolster the layout with JavaScript, you can do quite a bit.

HTML-Element bring to front with "z-index" or "append"?

HTML document has some HTML-Elements such as div, p, img, ...
Most of them are dynamically created ( if helpful css: "position:absolute;").
Every time after OnClick the element has to come to the front of other elements.
I mean:
element.parentNode.appendChild(element);
or
element.parent().append(element);
or
// E.g. with css as follows:
$('#ObjId').css('z-index', HighestIndx+1 );
I prefer the use of appendChild, due to the css style z-index won't be inserted into the element.
But I don't know whether the choice of appendChild vs z-index would be better.
My question: What is better to use z-index or append/appendChild ?
Thanks.

I would use z-index because I assume its faster and reliable in old browsers but anyway that's me.
Here is a useful article:
Why would appendChild disregard zIndex?
The article implies some points but isn't entirely focused to your question.

I don't think that appendChild() has anything to do with the z-index. It just add a new child to the calling parent to bottom as a last child. If you want to show your div in front of the other div then it is recommended that you should go with the z-index property.

Changing <div> CSS attributes

I have a <div> element reference in JavaScript as follows:
custom_div = document.createElement("div")
I want to change the position of this element to absolute and set the bottom alignment to 0, through JavaScript. I am looking for suggestions.

There are SO many ways to do this, but direct manipulation of DOM is not recommended. Either use CSS classes or try jQuery.

You can simply use:
document.getElementById("div#example").style.position="absolute";
document.getElementById("div#example").style.bottom="0";

Javascript - get width of child within some relative set to display:none

I have some list items that are hidden because of a hidden grandparent (or greater relative). I can recurse through the relatives and set each one to display:block;position:absolute;left:999em; then take the child width or shoudl I just offer an option argument in the getwidth function to take the hidden relative if one exists?
Or does anybody have a more elegant solution? This is in javascript no libraries.

I'm not 100% sure at this, but I've read somewhere (I think it was w3schools) that elements that are display="hidden" can be calculated upon (width/height), where as elements that are display="none" cannot.
So one solution could be to use display="hidden" instead of none?
But when do you want to get the width/height? When the element is hidden or visible?
Molle

how to get top and left properties of offsetParent div?

As we can get offset top of an element by using like this:
$(selector).offset().top;
But how can we get the top value of parent offset div?
I've tried like this but doesn't work?
$(selector).offsetParent().top;

Um, you can use like this:
$(selector).offsetParent().offset().top;
see documentation on offsetParent
offsetParent doesn't get offset value but it just select the closest positioned parent div. You can get the offset/position by using offset and position.
demo

Try to use parent() like,
$(selector).parent().offset().top;
Read Get position/offset of element relative to a parent container?

Don't forget you have to go get offsets all the way to the topmost parent. If you have enough nested content it's probably worth writing a recursive function to get after it.