Reply To: Matching a numerical variable

[benjamin.goddard]

Yes of Course!

I am asking for help as I am as good at jQuery as a toddler is at drawing an animal on an etch-a-sketch! I wish I could say Spaghetti instead but it’s only been a year and I am still getting confused by it!

I am always spending half days doing web searches for helpful “stack-overflow” answers and how to’s, trying to remember types of selectors and how to write statements properly etc!

So apologise if I sound like I want someone to do my work for them (this is just a personal experiment, to prove to myself I can at least get a working bistro of CSS and SVG)

Essentially if you can picture a double (two) digit red lit display to show speeds below 100, just like you would see on an old digital alarm clock (that would have 4 digits).

Each digit contains 7 svg shapes (well paths really) to dislay a number from 1-9, pretty obvious I guess now you know it’s like a clock.

The 7 shapes for the first digit all have unique ids starting with “#lcd-1-“, and second one with “#lcd-2-”

So to say I wanted to display 88, I would need to keep/make each & every one visible.

For 86, I would need to make digit 2’s top right shape (“#lcd-2-topright”)hidden/transparent.

Or for 91, I would have to hide “#lcd-1-bottomleft” and “#lcd-2-top” / “#lcd-2-topleft” , “#lcd-2-middle” , “#lcd-2-bottom” & “#lcd-2-bottomleft”

I am not asking anyone to to the hard work for me, just just wanted to know what command lines/syntax I need to use if that makes sense.

so basically turn a 2 digit numerical variable in to a display wit the svg shapes.

I hope this is enough info!

I should also note this is designed for mobile devices, as you may be figuring out by now, so do I need to use “opacity:”, “fill-opacity:”, and “visiblity:” together in case of certain mobile browser SVG CSS incompaibilities?