Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Possible to reference CSS3 id as a control like a button

Posted on 2014-01-30
10
Medium Priority
?
283 Views
Last Modified: 2014-01-30
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
Comment
Question by:XGIS
  • 5
  • 5
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39822764
What do you mean as controls
CSS is just plain text - it is not like a programming language.
0
 
LVL 7

Author Comment

by:XGIS
ID: 39822771
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
 
LVL 58

Expert Comment

by:Gary
ID: 39822782
Nothing to do with CSS
Are you using jQuery or just plain javascript?
0
Veeam Disaster Recovery in Microsoft Azure

Veeam PN for Microsoft Azure is a FREE solution designed to simplify and automate the setup of a DR site in Microsoft Azure using lightweight software-defined networking. It reduces the complexity of VPN deployments and is designed for businesses of ALL sizes.

 
LVL 7

Author Comment

by:XGIS
ID: 39822792
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
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39822800
Well you can start with this
http://jsfiddle.net/GaryC123/LMPcB/85/

And then do whatever you want in the click function.
0
 
LVL 7

Author Comment

by:XGIS
ID: 39822902
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
 
LVL 58

Expert Comment

by:Gary
ID: 39822916
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
 
LVL 7

Author Closing Comment

by:XGIS
ID: 39822952
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
 
LVL 58

Expert Comment

by:Gary
ID: 39822976
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
 
LVL 7

Author Comment

by:XGIS
ID: 39822986
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

Learn Veeam advantages over legacy backup

Every day, more and more legacy backup customers switch to Veeam. Technologies designed for the client-server era cannot restore any IT service running in the hybrid cloud within seconds. Learn top Veeam advantages over legacy backup and get Veeam for the price of your renewal

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A long time ago (May 2011), I have written an article showing you how to create a DLL using Visual Studio 2005 to be hosted in SQL Server 2005. That was valid at that time and it is still valid if you are still using these versions. You can still re…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
Suggested Courses

885 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question