3

I've never tried my hand at javascript but I'm just wanting to know if it is actually possible to do this before I spend time learning the code.

I've spent a couple of days looking around the forums and trying to use code already generated on a demo site to see how changing certain properties affects a section as a whole.

My CSS specifies the 'a:link', 'a:active' and 'a:visited' as a set colour and the a:hover as its complementary color (#128EED = color, #ED7112 = complementary).

I want one of 8 pre-determined colors to be randomly selected when any of the pages are loaded, and the complementary color of the pre-determined, random color to be the a:hover color.

Any information would be greatly appreciated before I start to attempt to do this.

Thank you and kind regards.

jonniery
  • 33
  • 3
  • possible duplicate of [Setting CSS pseudo-class rules from JavaScript](http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript) – epascarello Mar 15 '12 at 20:39
  • as much as this post is likely relevant to the post mentioned above, I'd like to point out that there are a number of code newbies that wouldn't know particular terminology like pseudo-class and may have to ask a really basic question in order to understand something... everyone has to start somewhere! – jonniery Mar 15 '12 at 21:04
  • The accepted answer is wrong, since you can not set the link, active, and hover directly. The question I said was a duplicate actually has an answer on how you could do it. – epascarello Mar 15 '12 at 21:17

2 Answers2

0

Yes, you can do that. You can set the style on an element through javascript, you could create several classes to color what you need and apply those classes randomly, etc. There are multiple solutions to your problems, but it's very doable.

Also, it's never a waste of time to learn javascript if you are web programming. It can take a lot of stress off of a page needing to go back and forth to the server as well as add functionality that HTML can't provide or can't easily provide.

Yatrix
  • 13,361
  • 16
  • 48
  • 78
  • Thank you. I'm a photographer by trade but i'm sure js will be useful to know at a deeper level so I can edit myself. – jonniery Mar 15 '12 at 21:00
-2

EDIT: it is not possible to set certain style attributes, including hover, etc. But there are workarounds to this, one being linked in a comment to this answer. Apologies if I misled you.

Yup it is possible! Just use something like this; assuming you have an array called ColorArray which is an array of arrays (each sub array is the pair of complementary colors):

I'm not sure if the words after .style are accurate, but they should be easy enough to look up. I separated it into 5 lines so its easy to see what's going on, but im sure there is a better or more compressed way to express this.

// choose a random complementary pair
var pair = ColorArray[Math.floor(Math.random() * CollorArray.length)];

// grab elements and assign them style attributes
document.getElementsByTagName("tag").style.link = pair[0]
document.getElementsByTagName("tag").style.active = pair[0]
document.getElementsByTagName("tag").style.visited = pair[0]

// Your complementary color assignment now:
document.getElementsByTagName("tag").style.hover = pair[1]
zallarak
  • 5,287
  • 7
  • 38
  • 54
  • Thank's a bunch, I'll definitely use this as a base and I'll let everyone know how it goes so that the code can be used by anybody else. – jonniery Mar 15 '12 at 20:57
  • @JonathonRyan you're welcome. I recently learned JavaScript and found these videos immensely helpful, you may too: http://www.youtube.com/user/eusmile06/videos?view=1, good luck! – zallarak Mar 15 '12 at 21:08
  • 1
    How is this the answer? You can not set `:link` `:active` and `:visited` directly like this answer implies? – epascarello Mar 15 '12 at 21:16
  • @epascarello you are right, thanks for catching that. This link may help: http://stackoverflow.com/questions/714655/how-can-i-set-a-css-hover-on-a-dom-created-element-in-javascript – zallarak Mar 15 '12 at 21:19