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="divResTextC nt_id" style=" font-size: 20px; font-weight:bold;">
0 </div>
<div id="divResText2 _id" style=" font-size: 14px;"> results within
</div>
<div id="divResTextM iles_id" style="font-size: 20px;
font-weight:bold;"> 20 </div>
<div id="divResText3 _id" style=" font-size: 14px;"> chars of
</div>
<div id="divResTextZ ip_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]

Re: DHTML/js set text content w/ styles

Gazing into my crystal ball I observed one man army
<newsAT@screenl ightDOT.com> writing in
news:newsAT-733467.02192430 012006@newsclst r02.news.prodig y.com:
[color=blue]
> 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="divResTextC nt_id" style=" font-size: 20px; font-weight:bold;">
> 0
></div> <div id="divResText2 _id" style=" font-size: 14px;"> results
>within </div> <div id="divResTextM iles_id" style="font-size: 20px;
> font-weight:bold;"> 20 </div> <div id="divResText3 _id" style="
> font-size: 14px;"> chars of </div> <div
> id="divResTextZ ip_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
>[/color]

Well, in the first place, you have a lot of needless repetition. This
[font-size: 20px; font-weight:bold;] can be changed to class="somethin g"
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="divResTextM iles_id" class="somethin g">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]

Re: DHTML/js set text content w/ styles

one man army <newsAT@screenl ightDOT.com> wrote:
[color=blue]
> New to this, good programmer, picking up some js[/color]

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.
[color=blue]
> I wanted to set a line of text as
> text BOLD more text BOLD text BOLD[/color]

It sounds you would like to _emphasize_. The HTML markup for strong emphasis
is <strong>...</strong>.
[color=blue]
> when I previewed the page in Firefox, the <div>'s created <br> also.[/color]

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]

Re: DHTML/js set text content w/ styles

In article <Xns975B1E47FF6 56arbpenyahooco m@69.28.186.121 >,
Adrienne Boswell <arbpen2003@sbc global.net> wrote:[color=blue]
>Third, don't use pixels for font sizes, they cannot be resized by the user
>in IE, use ems or percentages instead.[/color]

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]

Re: DHTML/js set text content w/ styles

axlq wrote:
[color=blue]
> In article <Xns975B1E47FF6 56arbpenyahooco m@69.28.186.121 >,
> Adrienne Boswell <arbpen2003@sbc global.net> wrote:[color=green]
>>Third, don't use pixels for font sizes, they cannot be resized by the user
>>in IE, use ems or percentages instead.[/color]
>
> 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.[/color]

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]

Re: DHTML/js set text content w/ styles

On Mon, 30 Jan 2006, axlq wrote:
[color=blue]
> Adrienne Boswell <arbpen2003@sbc global.net> wrote:[/color]
[color=blue][color=green]
> >Third, don't use pixels for font sizes,[/color][/color]

Good advice
[color=blue][color=green]
> > they cannot be resized by the user in IE,[/color][/color]

That's not the only reason!
[color=blue]
> use ems or percentages instead.[/color]

Good advice.
[color=blue]
> Or use points.[/color]

Don't.
[color=blue]
> A 12pt font looks like a 12pt font no matter what resolution the
> display is.[/color]

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]

Re: DHTML/js set text content w/ styles

axlq wrote:
[color=blue]
> Or use points. A 12pt font looks like a 12pt font no matter what
> resolution the display is.[/color]

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]

Re: DHTML/js set text content w/ styles

In article <1n4qx9e33mebe. 1nefh4kdax7wb$. dlg@40tude.net> ,
Els <els.aNOSPAM@ti scali.nl> wrote:[color=blue][color=green]
>> 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.[/color]
>
>But they can't be resized by the user in IE either.[/color]

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]

Re: DHTML/js set text content w/ styles

In article <Pine.LNX.4.62. 0601301736190.2 7126@ppepc56.ph .gla.ac.uk>,
"Alan J. Flavell" <flavell@ph.gla .ac.uk> wrote:
[color=blue][color=green][color=darkred]
> > >Third, don't use pixels for font sizes,[/color][/color]
>
> Good advice
>[color=green][color=darkred]
> > > they cannot be resized by the user in IE,[/color][/color]
>
> That's not the only reason!
>[color=green]
> > use ems or percentages instead.[/color]
>
> Good advice.
>[/color]

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="spanResText Num_id" class=sDisp1 >
0 results</span>
<span class=sDisp0 >
within </span>
<span id="spanResText Dist_id" class=sDisp1 >
20 chars </span>
<span class=sDisp0 >
of </span>
<span id="spanResText Zip_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]

Re: DHTML/js set text content w/ styles

axlq wrote:[color=blue]
>
> 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.[/color]

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]

Re: DHTML/js set text content w/ styles

In article <44d34uF1jv9fU1 @individual.net >, kchayka <usenet@c-net.us> wrote:[color=blue]
>axlq wrote:[color=green]
>> 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.[/color]
>
>This usually means the design is flawed. ;)[/color]

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.
[color=blue]
>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.[/color]

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.
[color=blue]
>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.[/color]

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]

Re: DHTML/js set text content w/ styles

In article <drt3u7$uik$2@b lue.rahul.net>, axlq@spamcop.ne t (axlq)
wrote:
[color=blue]
> In article <44d34uF1jv9fU1 @individual.net >, kchayka <usenet@c-net.us> wrote:[color=green]
> >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.[/color]
>
> 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.[/color]

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]

Re: DHTML/js set text content w/ styles

axlq wrote:[color=blue]
> In article <44d34uF1jv9fU1 @individual.net >, kchayka <usenet@c-net.us> wrote:
>[color=green]
>>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.[/color]
>
> 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.[/color]

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.