problems adding buttons to a page using a "for" loop

[lancevictor]

I'm learning javascript, and toward that end, I am recreating a page
"my way". The original page: http://stenbergcollege.com and the one
that I'm creating: http://www3.telus.net/neustaeter/Stenberg

When I added the buttons manually, everything was hunky-dory and it
looked pretty much exactly like the original page. When I changed the
script so that it uses the for loop to insert the top row of buttons,
space seems to get inserted between them, plus for some reason the
following <div> gets pushed way down, too.

Can anyone tell me what's going on?

Thanks,
Lance

 

[Janwillem Borleffs]

When I added the buttons manually, everything was hunky-dory and it
looked pretty much exactly like the original page. When I changed the
script so that it uses the for loop to insert the top row of buttons,
space seems to get inserted between them, plus for some reason the
following <div> gets pushed way down, too.

Can anyone tell me what's going on?

In the #topnav css declaration, you define a width of 780px, which is fine,
but you also define a border of 1px, which makes the total width 782px
(780px + a border of 1px on the left and a border of 1px on the right).
Changing the width to 782px will fix this problem (or add a
white-space:nowrap property).

The div gets pushed down because you forgot to close the topnav div just
after the closing script tag.


JW

 

[VK]

for() loop by itself cannot change elements' positioning, you can take
my word for it.

I see the problem in your layout approach where you're using absolutely
positioned div's with absolutely positioned images in them and all this
within table cells. You told us that you want to do the page "your
way", so no advise about it (it's not a JavaScript problem anyway).

But from other side who wants to drink this cocktail as it is? ;-) It's
rather difficult even to see what part of your page this "gap"
apparteins to.
Could you please post a basic showcase?

 

[Lasse Reichstein Nielsen]

for() loop by itself cannot change elements' positioning, you can take
my word for it.

for(var i = 0; i < 100; document.getElementById('foo').style.left=i+'px',i++);

Just proving a point
/L

 

[VK]

Just proving a point

Did you just smile?!

"for() loop by itself" means "by using this programming entity in your
code" (like "don't use addition operators anywhere or your page will
get corrupted")

Just proving a point

 

[Lance]

Doh! Thankyou so much. The missing </div> was the problem. I'm not
sure if the border contributed to the other problem (I added the border
because of the problem), but it went away after I fixed the missing
</div> as well, so I'm happy!

L

 

[Lance]

VK:

for() loop by itself cannot change elements' positioning, you can take
my word for it.

I noticed that the layout of my page would get slightly messed up based
strictly on exactly where I put my carriage returns when I placed the
buttons manually. The original (the one I'm reverse engineering) used
tables to position and wrapped each button image within an
anchor--which I've removed to just use the image with an "onclick"
event (I don't see very many recommendations on the internet about
this. Should I not do that and leave it as an Anchor-wrapped img?
IMO, anchors are for hypertext--but I'm a bit of a loose cannon).

Anyways: I figured out that I needed to put my carriage returns
*within* the tags and not between them. I supposed that, by using a
for loop to do what the original author had done manually might have
re-introduced that problem. But that wasn't the problem. (Perhaps
document.writeline() doesn't add a cr/lf at the end).

I see the problem in your layout approach where you're using absolutely
positioned div's with absolutely positioned images in them and all this
within table cells. You told us that you want to do the page "your
way", so no advise about it

I've removed the tables (they were from the original source that I was
changing). I'll post a link, if you're interested in where I'm at
now...

But from other side who wants to drink this cocktail as it is? ;-) It's
rather difficult even to see what part of your page this "gap"
apparteins to.
Could you please post a basic showcase?

I'll re-post the links. The original page: http://stenbergcollege.com

My problem page (cured by the addition of </div>.
Thanks Janwillem!): http://www3.telus.net/neustaeter/Stenberg

and where I'm at now (no more tables):
http://www3.telus.net/neustaeter/Stenberg/inprocess.html

Thanks,
L

 

[VK]

Thanks Janwillem!): http://www3.telus.net/neustaet­er/Stenberg

It's not cured, I still see the gap both in IE and FF (plus in IE the
last top menu item is shifted below other items).

The original page: http://stenbergcollege.com

I think that this "learning" page was a bad choice on the first place
and it is the real source of your problem. It's a rather chaotic
agglomeration of what a person knows, barely knows and doesn't know at
all (reminds me my code sometimes though . If it's a side of your
friend, I'm really sorry, but it's true. But the graphics design is
excellent.

my page would get slightly messed up based
strictly on exactly where I put my carriage returns
when I placed the buttons manually.

No one browser reacts on the place and amount of spaces, carriage
returns and tabs in the source HTML code (unless you're using <pre> tag
or equivalent). If you can catch any of the Co on the act, it would be
a biggest discover of the WWW Era.
In your case I see just a mis-use of styles and tables (nothing to do
with JavaScript).

each button image within an anchor--which
I've removed to just use the image with an "onclick"
event (I don't see very many recommendations on
the internet about this.

Well, there were officially only two mouse events for <img>:
onmousedown and onmouseup. But it could be changed (I don't feel like
to see w3.org again right now, this morning is too beautiful for it).
The onmouseup could be a reliable alternative to avoid anchor wrappers.

<style>
image {cursor: pointer; cursor: hand}
</style>
would make your buttons to look like links

 

[Thomas 'PointedEars' Lahn]

Did you just smile?!
Probably.

"for() loop by itself" means "by using this programming entity in your
code" (like "don't use addition operators anywhere or your page will
get corrupted")

He posted only a `for' statement (without a following block). Read again.

Just proving a point

As `for' is a control statement, your demand is ridiculous.


PointedEars, not smiling