Problem with left property of div

P

Paulo Almeida

Hi,

I have the following page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
<!--
#div_slider {
height: 16px;
width: 19px;
position:absolute;
top: 229px;
left: 46px;
}
-->
</style>
</head>
<body>
<div id="div_slider">
<img src="slider.png" width="19" height="16" />
</div>
<script type="text/javascript">
document.write("<p>"+document.getElementById('div_slider').style.left+"</p>");
</script>
</body>
</html>

The problem is I'm not getting any value from the document.write statement.
Am I missing something?

Thnaks in advance

Paulo Almeida
 
T

Thomas 'PointedEars' Lahn

Paulo said:
I have the following page:
Click to expand...

You have an XHTML _document_.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Click to expand...

Avoid the not universally supported XHTML on the Web for the time being,
especially when you don't know what you are doing (the `lang' and `xml:lang'
attributes are missing here).
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Click to expand...

This declaration only makes sense if you serve XHTML as text/html instead of
with the proper media type application/xhtml+xml; in the latter case, or if
an XML parser is used for another reason, this declaration comes too late to
make the markup well-formed and is therefore ignored.

http://hsivonen.iki.fi/xhtml-the-point/
<title>Test</title>
http://www.w3.org/QA/Tips/good-titles

<style type="text/css">
<!--
Click to expand...

Are you aware that this means actually commenting out the `style' element's
content when this XHTML code is properly parsed by an XML parser?
#div_slider {
height: 16px;
width: 19px;
position:absolute;
top: 229px;
left: 46px;
}
-->
</style>
</head>
<body>
<div id="div_slider">
<img src="slider.png" width="19" height="16" />
Click to expand...

The required `alt' attribute is missing.
</div>
<script type="text/javascript">
document.write("<p>"+document.getElementById('div_slider').style.left+"</p>");
Click to expand...

Are you aware that this is invalid XHTML? In XHTML, the content of the
`script' element is of type PCDATA; if you want to use markup delimiters
like `<', `>' and `&' in it, you have to declare them CDATA or escape them
accordingly.

http://validator.w3.org/
</script>
</body>
</html>

The problem is I'm not getting any value from the document.write statement.
Am I missing something?
Click to expand...

Provided that the document.write() statement is even executed (Gecko-based
UAs have an issue with that method when using an XML parser), the reason is
that the `style' property of element objects encapsulates the stylesheet
that was set for this element with the `style' attribute. You want to
retrieve the computed stylesheet instead.


PointedEars
 
P

plalmeida

Bjoern,

The structure of the page I posted was created by Dreamweaver
automatically. And I used it just for the sake of the example.

Can you please elaborate on the following remark?
Provided that the document.write() statement is even executed (Gecko-based
UAs have an issue with that method when using an XML parser), the reason is
that the `style' property of element objects encapsulates the stylesheet
that was set for this element with the `style' attribute. You want to
retrieve the computed stylesheet instead.
Click to expand...

What do you mean by "computed stylesheet"?

Best Regards

Paulo Almeida
 
V

VK

Bjoern,

The structure of the page I posted was created by Dreamweaver
automatically. And I used it just for the sake of the example.

Can you please elaborate on the following remark?


What do you mean by "computed stylesheet"?
Click to expand...

To Thomas: _first_ answering the question, _then_ criticism if really
feeling like. It is not only necessary Usenet politeness, but a
technical consideration as well: 50/50 poster will drop reading OT
comments before arriving to anything useful at the very bottom of of
everything.

To OP:

It reports nothing because nothing is set ;-)
Element.style refers to styles set over "style" attribute in the tag
itself, so like <div style="..."> - or to style set at runtime over
scripting like elementReference.style.left = '100px';
Because neither is done, it is properly reported as ''.
stylesheets are not reflected here. You may try this instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
#div_slider {
height: 16px;
width: 19px;
position:absolute;
top: 229px;
left: 46px;
}
</style>
<script type="text/javascript">
function init() {
var elm = document.getElementById('div_slider');

var out = document.getElementById('output');

var val = (document.defaultView) ?
// W3C branch:
document.defaultView.
getComputedStyle(elm,null).
getPropertyValue('left') :
// IE branch:
elm.currentStyle.left;

out.innerHTML = val;
}
window.onload = init;
</script>
</head>
<body>
<div id="div_slider">
div_slider
</div>
<p id="output">
script output
</p>
</body>
</html>
 
T

Thomas 'PointedEars' Lahn

Bjoern,
Click to expand...

My name is Thomas.
The structure of the page I posted was created by Dreamweaver
automatically.
Click to expand...

That explains a great many things.
And I used it just for the sake of the example.
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Can you please elaborate on the following remark?
Click to expand...

Elaborate in what way?

http://www.catb.org/~esr/faqs/smart-questions.html
What do you mean by "computed stylesheet"?
Click to expand...

STFW.


PointedEars
 
P

Paulo Almeida

Thanks VK for your help.
You have solved some doubts I had regarding
CSS property manipulation in JavaScript.
 
P

Paulo Almeida

My name is Thomas.

I've already apologized for my mistake in a previous message, that
was sent before I read your second answer.

I'm grateful you had the time to answer my doubts even the existencial ones.
I've learned so much from your answers. And because of you
I now believe in God and I will join the Missionaries of Charity so I can
do humanitarian work to help the poor souls that are haunted by you
in this newsgroup.

Best Regards

Paulo Almeida
 
T

Thomas 'PointedEars' Lahn

Paulo Almeida said:
I've already apologized for my mistake in a previous message,
Click to expand...

And that was noted. After I replied with the above.
that was sent before I read your second answer.
Click to expand...

This is not a real-time communications medium like Internet chat. Usenet is
distributed all over the planet from the injecting NetNews server to several
others (its peers). You cannot expect other people to see your message the
same moment you sent it to the server. Besides, I read NetNews messages in
threaded-chronological order.

http://en.wikipedia.org/wiki/Usenet

Unfortunately, your address headers does not comply with Internet standards,
so there was no way to inform you in private. Hopefully other people can
learn from that.
[sarcastic rant]
Click to expand...

Go away.


PointedEars
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Aligned to the left 3
Clickable Div Block 1
Help with my responsive home page 2
Help with code 0
Responsive width SVG image with fixed height rectangle at left and bottom - see my pen 0
Need help , Having problem with Drag n Drop... 1
Having difficulty with the layout of these images / video for this web page 2
Need help , Having problem with Drag n Drop ? 9

Members online

No members online now.
Total: 100 (members: 2, guests: 98)
Robots: 258

Forum statistics

Threads
473,995
Messages
2,570,230
Members
46,819
Latest member
masterdaster

Latest Threads

Top