1

I'm playing with CSS styles. how to make this somehow intelligently?

enter image description here

I'm able to create manually x variation of green color in css file, but it mustn't be a solution..

<h:outputText value="#{bean.date1}" styleClass="green1"/>
<h:outputText value="#{bean.date2}" styleClass="green2"/>
<h:outputText value="#{bean.date3}" styleClass="green3"/>

How to decrease it "dynamically"?

gaffcz
  • 3,469
  • 14
  • 68
  • 108

2 Answers2

2

I'll assume when you say "dynamically" you mean "somehow programmatically, without having to manually maintain different CSS classes". If so, your scenario is fairly straightforward - you could have all your output have the same color, but different opacity. You should be able to directly set style attribute:

<h:outputText value="#{bean.date1}" style="opacity:1"/>
<h:outputText value="#{bean.date2}" style="opacity:0.8"/>
<h:outputText value="#{bean.date3}" style="opacity:0.6"/>

~Fiddled

Oleg
  • 24,465
  • 8
  • 61
  • 91
0

With JQuery (many JSF frameworks already use it/include it), you can select all elements with class MyClass like that:

$(".myClass")

Then you can use the each() to define a function to execute in all of them, and use css in the function to change attributes.

$(".myClass").each(function() {
  $this.css("color", "myNewColor");
}

Launch this code with a timeout and set the various levels of color.

I have searched but I have found no way of directly editing the CSS style; I do not know if someone can propose a method for it.

UPDATE: A way of changing the class; the downside is that it seems that it replaces all the classes and maybe your JSF library is adding some classes by itself, if it is in a component. Use with care.

Community
  • 1
  • 1
SJuan76
  • 24,532
  • 6
  • 47
  • 87
  • Why would it ever be appropriate to push this logic to be executed on the client side? Not only painful to maintain, it's also [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_content)-ish – Oleg Oct 08 '12 at 07:47
  • I have read again your question and I had misunderstood it; I thought that you wanted to fade all your text over a span of time (that's why there is a timeout). You can still try with a variation of my soluction (keep "myNewColor" as a global variable, change for each use) but I am not so sure about the order in which the elements will be returned. – SJuan76 Oct 08 '12 at 07:52