Trying to create a notice line at the top of screen

HTML & CSS
21

And finally,
The envelope please.

I have looked at and tested the suggestions that you have made
and have decided on the following default HTML and CSS definitions
for my standard Page.

The attached files will give me the Notice area that I had originally
asked for in this forum.

The Notice will be the top 20px across the entire width of the
browser window.

When resized down, a scroll bar is added to the bottom that will
display the Notice for the entire defined width.

When the Page is opened by a browser on a display with a
greater resolution, I get the Notice at the entire browser width.

If the browser has scripting enabled I can make adjustments in
the function window.onload() to the #notice-default and #page-default
values contained in Application.css file to center my page at the
greater resolution.

If the browser does not has scripting enabled,
that’s all you get for 2 bucks.

Thanks again for all of your help,

Raney

22

We didn’t even know we were nominated :slight_smile:

23

And now for something completely different.

As I said above, I would like to do some initialization work when the page loads.

I have been looking at threads and trying all day, but no luck.

As I understand window.onload() is the place to do this.

I can get a simple alert(“here”); to display so I know that I am getting there.

If I try to do anything with the getElementById, it just dies.

<!doctype html>
<html>
<head>
<title>Test getElementByID</title>
<style type = “text/css”>
#page-default
{
width: 890px;
left-margin: 20x;
}
</style>
<script = “text/javascript”>
window.onload = Init();
function Init()
{
alert(document.getElementById(‘page-default’).style.leftMargin);
document.getElementById(‘page-default’).style.leftMargin = “200px”;
alert(document.getElementById(‘page-default’).style.leftMargin);
}
</script>
</head>
<body>
<div id = “page-default”>
Page Default.<br>
</div>
</body>
</html>

All I get is my page with “Page Default.”.

Raney

24

Sorry.

boB the dyslexic programmer strikes again.
Thats Bob not boB.

<script = “text/javascript”>
window.onload = Init; // not Init()
function Init()
{
alert(document.body.clientWidth); // this works
alert(document.getElementById(‘page-default’).style.marginLeft); // this does not return a value
document.getElementById(‘page-default’).style.marginLeft = “200px”; // this works
alert(document.getElementById(‘page-default’).style.marginLeft); // this works
}
</script>

Raney

25

Hi,

That was really a question for the javascript forum :slight_smile: But it looks like you need to remove the brackets after init and it’s marginLeft not leftMargin :slight_smile:

e.g.


<!doctype html>
<html>
<head>
<title>Test getElementByID</title>
<style type = "text/css">
#page-default {
    width: 890px;
    margin-left: 20px;
}
</style>
<script type="text/javascript">
[B]window.onload = Init;[/B]
function Init()
{
alert(document.getElementById('page-default').style.marginLeft);
document.getElementById('page-default').style.marginLeft = "200px";
alert(document.getElementById('page-default').style.marginLeft);
}
</script>
</head>
<body>
<div id="page-default"> Page Default.<br>
</div>
</body>
</html>

Although rather than use onload you could just place the script at the end of the html before the closing body tag.


<!doctype html>
<html>
<head>
<title>Test getElementByID</title>
<style type = "text/css">
#page-default {
    width: 890px;
    margin-left: 20px;
}
</style>
</head>
<body>
<div id="page-default"> Page Default.<br>
</div>
<script type="text/javascript">
document.getElementById('page-default').style.marginLeft = "200" + "px";
</script>
</body>
</html>

You might want to post specific javascript questions in the JS forum as I’m not much good at javascript :slight_smile:

Edit:

whoops -I’m much too slow…

26

Hello Paul,

I am going to follow your lead and use a basic html document for my questions, testing and (with a little luck) helping others.

I have been copying my code to the reply, I see that you are adding a box to include the code that you have been suggesting.

I cannot seem to find a way to do this.

?

Thanks,

Raney

27

When you post a reply click the “go advanced” link at the bottom and you will get a bigger edit box and a load of tools across the top. One of the icons across the top will be the hash symbol (#) which will wrap “code tags” around the selected text.

Or you can just write it by hand using: [ code ] and [ /code ] (remove spaces inside brackets) to hold your html.

28

Paul,
Sorry to hijack this post, but I am curious as to why the position “fixed”( or position “absolute”) does not annihilate display:block in your ruleset. I was under the understanding that floating an element or giving it position:fixed or absolute immediately gave it display:block?

29

Hi,

Where am I looking exactly :slight_smile: I’m not sure I saw a display:block in there.

If an element is absolutely positioned then its display value is set according to a table of values.

If it’s display:value for example is inline (position:absolute; display:inline) the the inline will be computed as display:block.

If its display value is block then it remains block.

If it’s display:value is “table” then it remains as “table” but if its value were table-cell then it is reset to block (because you can’t absolutely position table-cells).

You can see the whole list of values in the sitepoint reference link above.

It may be that you have often seen display:block added to absolutely positioned elements and this was to cure a bug in legacy browsers I believe because they didn’t like inline elements being absolutely placed although I can’t remember which browser that was (probably opera).

30

OH ok, both of those reasons make sense now. I didnt know :

If an element is absolutely positioned then its display value is set according to a table of values.

Thanks. ==:)