Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 284
  • Last Modified:

Possible to reference CSS3 id as a control like a button

Please check this  JS Fiddle CSS Sample and advise if and the individual CSS classes elements could be referenced in HTML5 as controls.

using either C# / Javascript . JQuery etc
0
XGIS
Asked:
XGIS
  • 5
  • 5
1 Solution
 
GaryCommented:
What do you mean as controls
CSS is just plain text - it is not like a programming language.
0
 
XGISAuthor Commented:
See how you can click it... use javascript to perform an action when the class item or div item is clicked... Maybe within MVVM or knockoutjs this is possible? like this  <div style="cursor: pointer;" onclick="theFunction()">
0
 
GaryCommented:
Nothing to do with CSS
Are you using jQuery or just plain javascript?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
XGISAuthor Commented:
most likely jquery but custom javascript functions where required.  The css is good for referencing since there is so much addressable code such as the ids or classes?  The plan was to have two sector layers, with one underneath that goes beyond the extent of the one displayed
0
 
GaryCommented:
Well you can start with this
http://jsfiddle.net/GaryC123/LMPcB/85/

And then do whatever you want in the click function.
0
 
XGISAuthor Commented:
Thankyou Cathal..  I have one final query about this issue.  If I have the CSS layer so the "Top" sector Wheel overlays the "Bottom" Sector Wheel.  This assumes the "bottom" layer is physically under the "TOP" layer base on complexity of coding curved segments.  Is it possible to subtract CSS where overlap occurs.  Only the Outer segments of the "Bottom" sector should be active.  

eg in the image if the green actually underlays the blue, and the yellow underlays green and blue and the orange underlays all.  Any ideas on this? It does not need to be perfect, essentially it only needs to be a rectangle, unless curve subtraction is simpler nowadays?

CSS Sectors
0
 
GaryCommented:
In this case you would probably better going for image mapping.
http://www.kolchose.org/simon/ajaximagemapcreator/

But since that image is nothing like your original question I don't know.
0
 
XGISAuthor Commented:
Hello Cathal ..Thankyou for your time.  The last link you sent is more relevant to another project I am doing, but I see what you mean. It may be useful if I can maintain coordinates relative to the html canvas in multiple browsers across multiple devices. Otherwise I will get the CSS developers to work harder to achieve this goal as per requirement.
0
 
GaryCommented:
If you have a static size you can use a transparent image absolutely positioned over your image above.  Map the coordinates and fire off whatever css/js as you mouseover/click.

Are these images you are using or are you drawing the concentric circles with canvas?
0
 
XGISAuthor Commented:
Definitely Canvas at this stage.. no images planned for any component of this task.
I have seen calc() used in CSS 3 which may be useful as long as it does not significantly alter the shape on the outer ring, as it is based on degrees and angles.  Maybe that minor difference in shape would enhance visibility as a standalone "element/button control".
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now