DHTML/js set text content w/ styles

[one man army]

New to this, good programmer, picking up some js

I wanted to set a line of text as
text BOLD more text BOLD text BOLD

I can set the text in javascript in a single <div>, but I tried this

<div id="divResText1_id" style=" font-family: Arial,sans-serif;
text-align: center; font-size: 14px;"> The search returned </div>
<div id="divResTextCnt_id" style=" font-size: 20px; font-weight:bold;">
0 </div>
<div id="divResText2_id" style=" font-size: 14px;"> results within
</div>
<div id="divResTextMiles_id" style="font-size: 20px;
font-weight:bold;"> 20 </div>
<div id="divResText3_id" style=" font-size: 14px;"> chars of
</div>
<div id="divResTextZip_id" style=" font-size: 20px; font-weight:bold;">
TERM </div>

when I previewed the page in Firefox, the <div>'s created <br> also.

If this makes sense, any ideas on how to do this??

thanks

[Adrienne Boswell]

Gazing into my crystal ball I observed one man army
<ne****@screenlightDOT.com> writing in
news:ne**************************@newsclstr02.news .prodigy.com:

New to this, good programmer, picking up some js

I wanted to set a line of text as
text BOLD more text BOLD text BOLD

I can set the text in javascript in a single <div>, but I tried this

<div id="divResText1_id" style=" font-family: Arial,sans-serif;
text-align:
center; font-size: 14px;"> The search returned </div> <div
id="divResTextCnt_id" style=" font-size: 20px; font-weight:bold;">
0
</div> <div id="divResText2_id" style=" font-size: 14px;"> results
within </div> <div id="divResTextMiles_id" style="font-size: 20px;
font-weight:bold;"> 20 </div> <div id="divResText3_id" style="
font-size: 14px;"> chars of </div> <div
id="divResTextZip_id" style=" font-size: 20px; font-weight:bold;">
TERM </div>

when I previewed the page in Firefox, the <div>'s created <br> also.

If this makes sense, any ideas on how to do this??

thanks

Well, in the first place, you have a lot of needless repetition. This
[font-size: 20px; font-weight:bold;] can be changed to class="something"
where the class is defined as .something {font-size: 20px; font-
weight:bold;}.

Second, DIV is a block element. You should be using SPAN, which is inline,
eg. <span id="divResTextMiles_id" class="something">Data</span>.

Third, don't use pixels for font sizes, they cannot be resized by the user
in IE, use ems or percentages instead.

--
Adrienne Boswell
http://www.cavalcade-of-coding.info
Please respond to the group so others can share

[Jukka K. Korpela]

one man army <ne****@screenlightDOT.com> wrote:

New to this, good programmer, picking up some js
Since you post here, you haven't learned the difference between programming
and markup yet. Please study some elementary introduction to HTML first, and
please return when you have HTML questions.
I wanted to set a line of text as
text BOLD more text BOLD text BOLD
It sounds you would like to _emphasize_. The HTML markup for strong emphasis
is <strong>...</strong>.
when I previewed the page in Firefox, the <div>'s created <br> also.

No, they don't, but <div> elements are blocks by default, in visual
rendering.

If your markup is essentially a soup of <div> tags, you should study some
elementary introduction to HTML first.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

[axlq]

In article <Xn****************************@69.28.186.121>,
Adrienne Boswell <ar********@sbcglobal.net> wrote:

Third, don't use pixels for font sizes, they cannot be resized by the user
in IE, use ems or percentages instead.

Or use points. A 12pt font looks like a 12pt font no matter what
resolution the display is. A 12px font, on the other hand, appears
smaller or larger depending on display resolution.

-A

[Els]

axlq wrote:

In article <Xn****************************@69.28.186.121>,
Adrienne Boswell <ar********@sbcglobal.net> wrote:

Third, don't use pixels for font sizes, they cannot be resized by the user
in IE, use ems or percentages instead.

Or use points. A 12pt font looks like a 12pt font no matter what
resolution the display is. A 12px font, on the other hand, appears
smaller or larger depending on display resolution.

But they can't be resized by the user in IE either.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Jethro Tull - Broadsword

[Alan J. Flavell]

On Mon, 30 Jan 2006, axlq wrote:

Adrienne Boswell <ar********@sbcglobal.net> wrote:

Third, don't use pixels for font sizes,
Good advice
they cannot be resized by the user in IE,

That's not the only reason!
use ems or percentages instead.
Good advice.
Or use points.
Don't.
A 12pt font looks like a 12pt font no matter what resolution the
display is.

That would be the first reason for *not* using it, if browsers really
did work to specification. Or don't you care about those whose
eyesight isn't as acute as yours? Or about a lecturer who was trying
to exhibit your content to a large audience?

But, over and above that, how many users do you know who calibrate
their display resolution? How many browsers do you know which
accurately respect that calibration?

The *worst* thing that can happen with px units, and with absolute
length units such as pt, across the general web situation, is that
browsers might implement them to specification. What use would a 12pt
font be, on a thirty-foot high projector screen, seen from the back of
the hall? IE's stubbornness with px units is just a small taste of
what might happen if you got what you asked for.

Conclusion: don't ask for stuff that you don't really want - or
rather, that your readers wouldn't really want; there is no need to
rely on browsers failing to implement the specifications, if you use
the right units (em or percent).

[David Dorward]

axlq wrote:

Or use points. A 12pt font looks like a 12pt font no matter what
resolution the display is.

In theory. In practise its the rare computer has its DPI correctly
calibrated, so 12pt often isn't.

Not to mention that ignoring the user's preference of font size isn't very
helpful.

Then there are the other drawbacks mentioned elsewhere in the thread.

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

[axlq]

In article <1n******************************@40tude.net>,
Els <el*********@tiscali.nl> wrote:

Or use points. A 12pt font looks like a 12pt font no matter what
resolution the display is. A 12px font, on the other hand, appears
smaller or larger depending on display resolution.

But they can't be resized by the user in IE either.

I thought they could. I just tried it on one of my web pages and the
font resized just fine.

But then I noticed that I had defined the font size as 12pt the body
only, and not tables (it's a table-layout page). When I defined the
size for tables, I couldn't resize it. So you and the other replies I
got are correct!

I learn something new every day.

Trouble is, on some pages the layout actually matters, and a
variable-size font in a fixed-width table is a bad idea because any
change ruins the apperance. Variable-width tables (using % width)
is only viable if I can set a MINIMUM width, and I cannot do so in
HTML.

I'm in the throes of deciding whether to change my table-layout
page to CSS layout. CSS is a lot faster and smaller. The problem
is that we get visits from 3rd world countries which may not have
CSS-capable browsers. Tables look the same in any browser, and the
layout matters on some pages.

-A

[one man army]

In article <Pi*******************************@ppepc56.ph.gla. ac.uk>,
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:

Third, don't use pixels for font sizes,
Good advice
they cannot be resized by the user in IE,

That's not the only reason!

use ems or percentages instead.

Good advice.

wow, ems are out of control! I tried that for a good laugh.
Anyway, I am obviously clueless about the finer points here. I
appreciate your feedback, well, most of it ;-)

Here is how I changed it:

..sDisp0 {font-family: Arial,sans-serif; font-size: 100%;}
..sDisp1 {font-family: Arial,sans-serif; font-size: 133%;}

<div>
<span class=sDisp0 >
The search returned </span>
<span id="spanResTextNum_id" class=sDisp1 >
0 results</span>
<span class=sDisp0 >
within </span>
<span id="spanResTextDist_id" class=sDisp1 >
20 chars </span>
<span class=sDisp0 >
of </span>
<span id="spanResTextZip_id" class=sDisp1 >
TERM </span>
</div>

The Javascript function gets each item one at a time and sets them.
Nothing too fancy there. It seems to work.

On Fonts: The bigger font has the effect of bold, so I left it at that.

I don't like the Modern Design Takover of sans serif fonts, but I have a
demo and my associate did a "white background clean" design, so the sans
serif works, so whatever. Maybe later I can do somethin about that.
thanks again

[kchayka]

axlq wrote:

Trouble is, on some pages the layout actually matters, and a
variable-size font in a fixed-width table is a bad idea because any
change ruins the apperance.

This usually means the design is flawed. ;)

BTW, you cannot control the visitor's font or text size. The user is
always free to ignore author choices. Not all users exercise that
control, but they can when they wish.

So, your design is always susceptible to ruination unless you make it
more flexible. That's just the way the web works. Accept that, and
you'll have much less frustration.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

[axlq]

In article <44************@individual.net>, kchayka <us****@c-net.us> wrote:

axlq wrote:

Trouble is, on some pages the layout actually matters, and a
variable-size font in a fixed-width table is a bad idea because any
change ruins the apperance.
This usually means the design is flawed. ;)

I suppose one could tie the table width to the font size using em
units, but I've never had consistent results doing that. I think em
unit calculation is broken in some browsers.
BTW, you cannot control the visitor's font or text size. The user is
always free to ignore author choices. Not all users exercise that
control, but they can when they wish.
That's fine. If they want to navigate a page that gets kind of messed
up with funny wordwraps and such, they're free to knock themselves out.
So, your design is always susceptible to ruination unless you make it
more flexible. That's just the way the web works. Accept that, and
you'll have much less frustration.

I'm trying, slowly, to convert what I can to CSS.

My original point was CSS layout vs table layout. I was arguing that
tables have better support than CSS, and a site using a table layout
will provide a consistent experience across more browser platforms.

-A

[Eric Lindsay]

In article <dr**********@blue.rahul.net>, ax**@spamcop.net (axlq)
wrote:

In article <44************@individual.net>, kchayka <us****@c-net.us> wrote:

So, your design is always susceptible to ruination unless you make it
more flexible. That's just the way the web works. Accept that, and
you'll have much less frustration.

I'm trying, slowly, to convert what I can to CSS.

My original point was CSS layout vs table layout. I was arguing that
tables have better support than CSS, and a site using a table layout
will provide a consistent experience across more browser platforms.

I've spent about three months on this list attempting to learn about
HTML, and expect to spend the next three months trying to do the same
with CSS (the guys in these groups are great). I've started doing a
couple of sites for friends, as a way to force myself out of my comfort
zone (that at least worked!)

While I am confident my own site will eventually be all valid, all CSS,
all fluid, I would never again try to do a CSS site from scratch for
anyone else.

I'll give them a copy of David Siegel's "Creating Killer Websites", and
point them at whatever drag and drop web page creation package works on
their computer, so they can release another table based site on the
world. Or I'll point them at one of the web designers around town, who
will use a similar package to produce a web page that looks just like
the printed posters they also produce.

--
http://www.ericlindsay.com

[kchayka]

axlq wrote:

In article <44************@individual.net>, kchayka <us****@c-net.us> wrote:

BTW, you cannot control the visitor's font or text size. The user is
always free to ignore author choices. Not all users exercise that
control, but they can when they wish.

That's fine. If they want to navigate a page that gets kind of messed
up with funny wordwraps and such, they're free to knock themselves out.

You miss the point - people don't override author text sizes just for
grins. Most do it because they need to.

For example, I have a very hard time reading text smaller than 17px, so
I set that as my browser's minimum font-size. Web sites that can't adapt
to that often become unusable. I won't change my browsing environment to
suit these web sites, so off I go to a competitor who is more focused on
usability.

If you are more concerned about aesthetics than accommodating your
visitors, you may be missing out on more than you thought.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.