JavaScript+CSS: user switch italic, bold, none

**a_design_interactive** · 02-10-2007, 08:43 PM

hi. you've probably got a script for this already, but i've searched and i keep coming up w/ stuff about "innerText"... which, i can only assume is a DOM thing, and probably not what i'm looking for

it's simple- i want a visiter to be able to change italic, bold, normal-- some part of the text, to and fro. the idea is to be able to sample a browser-font-display in different versions, so it's really a developer tool... so... you know, keep it on the DL.

the action, i imagine would be "click here for the < p > below to become italic", click for this word to be bold bold. switch everything back to normal you far-from-normal-geek and go outside for once!

click for different colors would be cool too-- but i'm sure i can get all of that once i get even a piece of the javascript / CSS / html concept of how it would work together... actually, color i will leave as my "challenge" as it is likely a different part of the page elements, so it will be good to see if i can get that-- if we get the font-style thing happanin okay.

(thank goodness i'm FINALLY starting to catch-on to at least a few techniques! -- with much thanks to the kindly help here at Dynamic Drive, i want to shout that out! now i can actually picture some "cool-stuff" going on in my pages-- which i never before would have considered. it's also a "letting go" of the idea to have 0% javascript, in favor of 100% CSS-- now i focus on the "duality" of accessibility vs coolness.)

EDIT: actually, in the meantime, i'm going to see if i can convert the "display:none" [more...] trick... i just need to know the right elements though, which is actually why i came here in the first place... so i am still looking for help, of course...

thanks!

**jscheuer1** · 02-10-2007, 09:58 PM

Another thing that you might want to do is to 'storyboard' what you are talking about by setting it up without the functionality you envision. I say this because your description of what you are after seems a little vague. I get the main idea. But if you were to make up a page with all the text on it, it would be a simple matter to fill in the functionality.

Here's food for thought:

HTML Code:

<span style="cursor:pointer;" onclick="document.getElementById('to_red').style.color='red';">Click here to make the below text red</span><br>
<span id="to_red">Make me Red!</span>

Most likely though, you would want to make up a function or functions to handle style transformations with just a few parameters to plug in, like id property and value like:

Code:

function sxform(id, prop, val){
var el=typeof id=='object'? id : document.all? document.all[id] : document.getElementById(id);
el.style[prop]=val;
}

**jscheuer1** · 02-10-2007, 10:09 PM

Here's a little demo:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function sxform(id, prop, val){
var el=typeof id=='object'? id : document.all? document.all[id] : document.getElementById(id);
if(el.holder==val)
el.holder=el.style[prop]='';
else
el.style[prop]=el.holder=val;
}
</script>
</head>
<body>
<span style="cursor:pointer;" onclick="sxform(this, 'color', 'red');">Toggle me Red</span><br>
<span style="cursor:pointer;text-decoration:underline;color:blue;" onclick="sxform('tog_ital', 'fontStyle', 'italic');">Toggle Below Italic</span><br>
<span id="tog_ital">Sample Text</span>
</body>
</html>

**a_design_interactive** · 02-18-2007, 04:50 AM

Originally Posted by jscheuer1

Here's food for thought:

HTML Code:

<span style="cursor:pointer;" onclick="document.getElementById('to_red').style.color='red';">Click here to make the below text red</span><br>
<span id="to_red">Make me Red!</span>

Hey, John-- thanks very much!! hey, is that what you'd call a "bookmarklet" essentially going on inside of the onclick event handler?... or no? i ask because, from my rudimentary perspective on it so far, i was have expected to see, or have the need for some code... more like you did in your second part i guess...

and yes, i like the second idea better because then i can just go in there and easily change some stuff around (i think..)
could i even use PHP to send values to javascript variables in a <script></script> element tag?

in other words... something like this

PHP Code:


<?php $jsone = "$_GET['somethingvalue']"; ?>
<html>
<head>
<!-- and then down inside of the script tag something along the lines of... -->
<script>
myCoolness() {
var jsone = "<?php print $jsone; ?>";
}
</script>
<!-- sorry for shotgunning w/ questions again but 
what about CDATA and/or the comment tags inside the script tag? -->

i have no idea what i'd do w/ that necessarily, but knowing "how" to do it, as i'm learning w/ javascript, really does help to generate ideas of "what" you might want there in any given situation. to not know the ability exists makes the creativity a little less exciting i suppose.

now, below-- where you've got the '?'... what is the purpose of that?
could you please "mouth-the-words" to the following (excerpt of your code):

Code:

id=='object'? id : document.all? document.all[id] :

and why the "colon" ... is that a concatenation operator?
man, i'm sorry. i suppose i'd learn all of this just as well on my own by reading the most excellent resource down on the Mozilla Farm. sometimes it's nice to be able to learn in the context like this, yet not knowing one little operator / function, etc, it can really make the difference

anyway-- thanks a TON for your help. this will really get me moving in the right direction. if you have any recommendations in terms of stuff like the mozilla link i posted, or perhaps even any CHM / PDF files i might have lying around in my vast collection of "stuff" (which definitely includes some javascript-specific titles, example pages from SAMS, Oreilly, etc.)
for me, a little nudge in the right direction, and to hear someone say "try this example, it really nails the X Y Z technique!" can be a huge help.

(of course, you've been an extraordinarily valuable reference as it stands already!!)

**jscheuer1** · 02-18-2007, 08:42 AM

Not exactly like a bookmarklet because most bookmarklets do not rely on anything in the markup being a certain way like - the id of the element we wish to influence. And, bookmarklets usually make use of the the:

javascript:alert(some code)

or the:

javascript:void(some code)

methods. However, other than that yes, it is very much like a bookmarklet.

As far as I know, CDATA and comment tags aren't required in any javascript on HTML pages.

The line with the ?'s and :'s is a condensed version of the perhaps more familiar:

Code:

if(some condition){
some declaration
}
else if(some other condition){
some other declaration
}
else {
yet another declaration
}

to wit:

Code:

if(typeof id=='object'){
var el=id;
}
else if(document.all){
var el=document.all[id];
}
else {
var el=document.getElementById(id);
}

**a_design_interactive** · 03-05-2007, 01:55 AM

Originally Posted by jscheuer1

As far as I know, CDATA and comment tags aren't required in any javascript on HTML pages.

so then, i don't really ever need to worry about something like what i've read here, about escaping elements with CDATA? i originally became concerned-- probably due to something that i read in a W3C Rec. -- where i saw CDATA being used-- yet, i don't think i ever found a very straightforward explanation there in the Rec's (imagine that). i explain because it took me to externally researching the issue, to which i found the URL shown above-- a while ago, and i've generally used it as a quick-ref in terms of escaping stuff from XHTML. i had never been a javascript user, so i've kept the reference... well, for now i suppose.

i might also be mixing this up w/ CSS, and rec's to use CDATA instead of the HTML comments for "keeping the 'older browsers' on course" with parsing CSS properly, etc. you know-- all that stuff that matters to like one Granny out in Wisconsin eatin' a piece of too-old cheese, browsin' on an Apple IIc, or some such... anyway... still curious about all that. it's fine to read about it-- but sometimes, it all comes together when someone w/ experience can bring on the epiphony-- i don't really know anyone to "speak to" about this sort of thing, so hence my rambling in forums.

(sorry!)

Originally Posted by jscheuer1

The line with the ?'s and :'s is a condensed version

so, it's basically a flow-control construct? does "?" essentially mean "IF", and ":" mean "else" ?

do you happen to have a favourite URL for learning that particular element of the language (the flow-control / conditional logic stuff)?

btw-- thanks for your input here, J. I thought i replied to this a long time ago!
thanks again for always being so helpful!

**jscheuer1** · 03-05-2007, 06:34 AM

I really see two main questions. The one about CDATA is valid if you are writing xml. If you are and it is valid, IE including IE 7 cannot parse it. As far as writing for the web today, HTML 4.01 strict or possibly transitional is the way to go. Strict is better but more limiting as to the element and attribute sets that may be included. Confusing the issue is the fact that no matter how you write your document, browsers will still try to parse it so, you cannot rely upon how it looks in the browser.

The other question seems to be about the condensed if/else syntax in javascript. You are essentially correct when you say that ? = if and : = else but, it is slightly different. One may test like so:

Code:

if (var_name==10)

or

Code:

var_name==10?

But, you can do this:

Code:

if (var_name==10)
alert("It's 10")

not this:

Code:

var_name==10?
alert("It's 10")

You can do this:

Code:

var_name==10?
alert("It's 10"):
alert("Not 10")

The trick to the ? and : in tests is that they create a compound test, there must be an else represented after a colon. With if tests, there need be no alternative but, can be one after an else or an else if.

I'm not sure where the best place to go to learn this is, I've learned it over the years by looking at code that works and by experimentation.

Thread: JavaScript+CSS: user switch italic, bold, none

Thread Tools

Search Thread

JavaScript+CSS: user switch italic, bold, none

Bookmarks

Bookmarks

Posting Permissions