Switching between different fonts...

[tlendz]

Hi,

I've got several divs with the same id/name, and text inside (font-
family:georgia,serif), and would like the users to be able to change
the font, in case they don't like the default one. I have come up with
this code, however it updates the divs' style only once, to 'arial',
whereas I would like them to be switched to 'times new roman',
'verdana', back to 'georgia', and so on. All with consecutive click on
a single link:

<a href="javascript:fontnew();\>Change Font</a>>

function fontnew() {
var div;
var newfamily;
if (!done) { var done; }
done = 0;
if (!newfamily) { newfamily = 'georgia,serif'; }

if (done==0 && newfamily == 'georgia,serif') { newfamily = 'arial';
done = 1; }
if (done==0 && newfamily == 'arial') { newfamily = 'times new roman';
done = 1; }
if (done==0 && newfamily == 'times new roman') { newfamily =
'verdana'; done = 1; }
if (done==0 && newfamily == 'verdana') { newfamily ==
'georgia,serif'; done = 1; }
var divs = document.getElementsByName('M');
for (i = 0; i < divs.length; i++) {
div = divs[i];
div.style.fontFamily = newfamily;
}
}

Any suggestions?

Take care!

[Randy Webb]

tl****@gmail.com said the following on 4/11/2007 3:46 PM:

Hi,

I've got several divs with the same id/name,

A duplicate ID in a document makes it invalid HTML and anything that
happens with it is guess work at best. From the looks of your code, you
are using the name attribute and not the ID though. And DIV elements
are not allowed to have a NAME attribute.

and text inside (font-family:georgia,serif), and would like the users
to be able to change the font, in case they don't like the default one.
I have come up with this code, however it updates the divs' style only
once, to 'arial', whereas I would like them to be switched to 'times
new roman', 'verdana', back to 'georgia', and so on. All with
consecutive click on a single link:

Assign them a class and modify the CSS rules or change the className.
Search the archives for some examples of modifying the className property.

<a href="javascript:fontnew();\>Change Font</a>>

<URL: http://jibbering.com/faq/index.html#FAQ4_24>

function fontnew() {
var div;
var newfamily;
if (!done) { var done; }
done = 0;

If you set done to 0 every time the function enters how can you expect
it to ever be anything but 0?

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[tlendz]

From the looks of your code, you

are using the name attribute and not the ID though.

Actually I'm using both ID and NAME attributes in all my DIVs (e.g.
<div id='M' name='M'...). This is the only way I could get the script
to work in FF and IE (I tried with the CLASS attribute, couldn't get
it to perform though).

Assign them a class and modify the CSS rules or change the className.
Search the archives for some examples of modifying the className property.

The reason I'd prefer to change only fontFamily, rather than the
class, is because I'd like later to add another link that plays with
fontSize only, keeping fontFamily (the user was playing with)
unchanged.

function fontnew() {
var div;
var newfamily;
if (!done) { var done; }
done = 0;

If you set done to 0 every time the function enters how can you expect
it to ever be anything but 0?

I set it to 1 right after changing the value of newfamily to the new
fontFamily, depending on what was stored in newfamily previously. I do
it to avoid changing the value of newfamily several times. Even being
a beginner, it seems logical to me. I just don't know why it works
only once, with the first click, as if the value of newfamily after a
click (and changing fontFamily in all the DIVs) was being forgotten,
rather than used in the function next time (I need that state to know
what font is displayed at the moment, and what font should be shown
next time the user clicks).

if (done==0 && newfamily == 'georgia,serif') { newfamily = 'arial';
done = 1; }
if (done==0 && newfamily == 'arial') { newfamily = 'times new roman';
done = 1; }
if (done==0 && newfamily == 'times new roman') { newfamily =
'verdana'; done = 1; }
if (done==0 && newfamily == 'verdana') { newfamily ==
'georgia,serif'; done = 1; }

var divs = document.getElementsByName('M');
for (i = 0; i < divs.length; i++) {
div = divs[i];
div.style.fontFamily = newfamily;
}

Thanks for the FAQ! :)

still fighting...

Thomas

[Randy Webb]

tl****@gmail.com said the following on 4/12/2007 6:00 AM:

>From the looks of your code, you
are using the name attribute and not the ID though.

Actually I'm using both ID and NAME attributes in all my DIVs (e.g.
<div id='M' name='M'...). This is the only way I could get the script
to work in FF and IE (I tried with the CLASS attribute, couldn't get
it to perform though).

The NAME attribute is not allowed in valid HTML. If it "works" in FF/IE
then consider yourself lucky - it doesn't have to - and may not work in
the future.

As for CLASS attributes, you assign a class and modify it's className
property:

<div class="someClass" id="someID">

But you have to modify the className:

document.getElementById('someID').style.className = "newClassName";

>Assign them a class and modify the CSS rules or change the className.
Search the archives for some examples of modifying the className property.

The reason I'd prefer to change only fontFamily, rather than the
class, is because I'd like later to add another link that plays with
fontSize only, keeping fontFamily (the user was playing with)
unchanged.

OK.

>>function fontnew() {
var div;
var newfamily;
if (!done) { var done; }
done = 0;

If you set done to 0 every time the function enters how can you expect
it to ever be anything but 0?

I set it to 1 right after changing the value of newfamily to the new
fontFamily, depending on what was stored in newfamily previously.

And then it follows these steps:

Exits the function.
Function gets re-executed upon a click.
Function resets the var done to 0.
You test to see if that var is 0 or not.
It will *ALWAYS* be 0 the way you have it coded.

If you want to use done as a variable to track with, make it a global
variable (declare it outside the function), then it won't get reset
every time the function executes.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

tl****@gmail.com wrote :

Hi,

I've got several divs with the same id/name,

That's invalid. id must be document-unique.

and text inside (font-
family:georgia,serif), and would like the users to be able to change
the font, in case they don't like the default one.

They can do this with their browser preferences too. Why do you need to
code this for them? At the very least, you would be better with
alternate stylesheets.

I have come up with

this code, however it updates the divs' style only once, to 'arial',
whereas I would like them to be switched to 'times new roman',
'verdana', back to 'georgia', and so on. All with consecutive click on
a single link:

<a href="javascript:fontnew();\>Change Font</a>>

"javascript:" pseudo-links become dysfunctional when javascript support
is disabled or inexistent.
"javascript:" links will interfere with advanced features in tab-capable
browsers: eg. middle-click on links, Ctrl+click on links, tab-browsing
features in extensions, etc.
"javascript:" links will interfere with the process of indexing webpages
by search engines.
"javascript:" links interfere with assistive technologies (e.g. voice
browsers) and several web-aware applications (e.g. PDAs and mobile
browsers).
"javascript:" links also interfere with "mouse gestures" features
implemented in browsers.
Protocol scheme "javascript:" will be reported as an error by link
validators and link checkers.

http://jibbering.com/faq/#FAQ4_24

>
function fontnew() {
var div;
var newfamily;

newfamily is declared and created locally; the scope of newfamily is
local, not global here.

if (!done) { var done; }

done is declared locally and created locally.

done = 0;
if (!newfamily) { newfamily = 'georgia,serif'; }

The above instruction is bound to be created and recreated at each call
of fontnew().

>
if (done==0 && newfamily == 'georgia,serif') { newfamily = 'arial';
done = 1; }
if (done==0 && newfamily == 'arial') { newfamily = 'times new roman';

Times new roman must be quoted in valid CSS since it has blank spaces.
Font names containing any whitespace should be quoted according to CSS 2.x

done = 1; }
if (done==0 && newfamily == 'times new roman') { newfamily =
'verdana'; done = 1; }
if (done==0 && newfamily == 'verdana') { newfamily ==
'georgia,serif'; done = 1; }
var divs = document.getElementsByName('M');

<div>s can not have names; that's invalid markup code. If all divs are
to change their font-family, then you don't need to assess them id or
name or classes: just iterate them all or just set the font-family to
their top wrapping element within the containment hierarchy. What you do
or try to do is not efficient and frankly not recommendable. Defining
an alternate stylesheet makes a lot more sense.

for (i = 0; i < divs.length; i++) {
div = divs[i];
div.style.fontFamily = newfamily;
}
}

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[Randy Webb]

Gérard Talbot said the following on 4/12/2007 5:12 PM:

Defining an alternate stylesheet makes a lot more sense.

Define an alternate stylesheet to allow a user to toggle a font? I don't
see where that is a very good idea if you want to allow them to
customize the display. With the presentation aspects (font-family,
color, background, font-face, etc..) the possible alternate stylesheets
could run into the millions in a hurry.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/index.html
Javascript Best Practices - http://www.JavascriptToolbox.com/bestpractices/

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

Randy Webb wrote :

Gérard Talbot said the following on 4/12/2007 5:12 PM:

> Defining an alternate stylesheet makes a lot more sense.

Define an alternate stylesheet to allow a user to toggle a font? I don't
see where that is a very good idea if you want to allow them to
customize the display.

If you want to offer a whole new webpage display/configuration,
including a font-family, then, yes, an alternate stylesheet is ok.
Create an alternate stylesheet just to change font-family, no, that's
not recommendable.
Sorry, my previous post may have been unclear or misleading on this.

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages