/    Sign up×
Community /Pin to ProfileBookmark

a javascript challenge

Copy linkTweet thisAlerts:
Oct 06.2008

I am working on this page:
[url]http://vue.resolvedigital.com/pages/art-aesthetic-development[/url]

If you scroll down and click the link that says “Click here to see examples of Stage 1 comments.” you’ll get to what I need help with.

You’ll notice a popup div appears. The text in it is all supposed to be white but because the CMS I’m using is generating CSS that makes all <b>, <i> and <blockquote> tags colored dark grey, much of the text is too dark.

What I want is for all the text to be white, including the bold, italic, etc…

Now, yes, I could create a class and set these to white, BUT…. here’s the thing:

I’ve set up the color of the text in this box to be based on a variable set in a javascript function which opens the box. There’s a line:
obj.style.color = color;
where “color” is a variable passed to the function. You see why just creating a CSS class won’t work? The color won’t always be the same in the class as it is dependent on the parameter passed as the “color” variable to the function. I want to keep this function as flexible as possible. That is, I want to be able to put #FFFFFF into the function I created, and have ALL the text white, but if I send #0000FF to the function I want all the text to be blue. The CSS is taking precedence as it is.

First, is there a way in javascript to set the color of the bold text. So, for instance, when I set the color of the basic text with:
obj.style.color = color;
Is there a way to do something like:
obj.style.bold = color; ??? (I know that won’t work, right?)
Same for italic and blockquote.

OR….. is there a way to use css to simply remove the previous CSS definitions. For instance, in one of the CSS files generated by the CMS, there’s a link that says:
b { color: #333333; }
or something like that. I’d like to just eliminate this, but I don’t have access to that CSS file (although I can include additional CSS).
Can I do something like:
b {color:none;} ???
That didn’t seem to work, but I would like to one way or another remove that CSS definition.

I know this is a very specific need and I hope it is clear. I expect I’ll get some answers that miss the point, but please read this thoroughly. If you can help that would be really great!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangOct 06.2008 — Either reference the elements in the popup box:#stage1 b {color:#fff;}
Or use theDOM to change all elements according to a variable:var elms=document.getElementById('stage1').getElementsByTagName('b');
for(var i=0; i&lt;elms.length; i++) {
elms[i].style.color=newValue;
}
Copy linkTweet thisAlerts:
@ZeroKilledOct 06.2008 — it would be more easier if msie support the standard on styleSheets module. for DOM compliant browser you can append a new rule to a stylesheet and modify it's value according what you need. for example, having this piece of code on your function would be neat:

<i>
</i>document.styleSheets[0].insertRule('#stage1 *{color:' + color + ';}', 0);


that will give every element inside #stage1 the color white. but sadly, msie doesn't support [b]insertRule[/b] method. to do something similar on msie you have to append the string to the property [b]cssText[/b] which for me is more slower:
<i>
</i>document.styleSheets[0].cssText += '#stage1 * {color:' + color + '};';


or give it another approach. create a stylesheet specially for this purpose. in there, you will type a very basic rule as [b]#stage1 *{...}, #stage2 *{...}[/b] and so on. keep it simple because the number of rules are different for DOM compliant and msie. then you can refer to each rule on the proper [b]styleSheets[/b] object and modify it's property:

<i>
</i>document.styleSheets[2].cssRules[0].style.color = color; // for DOM compliant;
document.styleSheets[2].rules[0].style.color = color; // for msie;


here i'm assuming that [b]styleSheets[2][/b] refer to the stylesheet specially designed for this purpose (of course, have to be loaded on document) and [b]cssRules[0][/b] or [b]rules[0][/b] refering to the first rule on the stylesheet (let assume it is #stage1 * selector). this way you can define a default color and at the same time give the flexibility to be changed by the function. of course, i'm giving the idea, you have to properly embed the code on your function.
×

Success!

Help @junkdmail spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...