asked on
SVG mouseover event not changing circle Fill color
VS 2017 / ASP.NET / VB.NET code behind / SVG
The current working code has SVG circles that change color to show progress based on the color hex values set in the code behind. Also, some circles will show an AJAX ModalPopupExtender containing data when clicked on. All that is working fine.
The goal of what I am trying to add is if a Boolean is set to true in the code behind (indicating data to view exists), I want the circle to change to a lighter color on "mouseover" and return to it's normal color on "mouseout".
UPDATE: See my next post on problem description. The events are firing - the colors just won't change.
I have not gotten to figuring out how to implement to "IF" conditional for the hovering effect or not.
I cannot even get it simply change circle color on the "mouseover" to a hard coded value. Nothing happens as if the mouseover event is not firing.
For simplicity, I am only showing the code pertaining to the circles functioning.
Note - the arrayState code sets the circle base on variables from the code behind.
"circle4" is the one I am trying to get the hover effect on.
What am I doing wrong?
Thanks,
![SVG circles]()
The current working code has SVG circles that change color to show progress based on the color hex values set in the code behind. Also, some circles will show an AJAX ModalPopupExtender containing data when clicked on. All that is working fine.
The goal of what I am trying to add is if a Boolean is set to true in the code behind (indicating data to view exists), I want the circle to change to a lighter color on "mouseover" and return to it's normal color on "mouseout".
UPDATE: See my next post on problem description. The events are firing - the colors just won't change.
I have not gotten to figuring out how to implement to "IF" conditional for the hovering effect or not.
I cannot even get it simply change circle color on the "mouseover" to a hard coded value. Nothing happens as if the mouseover event is not firing.
For simplicity, I am only showing the code pertaining to the circles functioning.
Note - the arrayState code sets the circle base on variables from the code behind.
"circle4" is the one I am trying to get the hover effect on.
<head runat="server">
<style type="text/css">
/* Array code is what changes the colors of the circles and lines (from Code Behind hex values)*/
<%
Dim arrState(8) As String
arrState(1) = strOrderAck
arrState(2) = strDrawSub
arrState(3) = strDrawApp
arrState(4) = strEngnrd
arrState(5) = strMfgStart
arrState(6) = strMfgComp
arrState(7) = strShipRdy
arrState(8) = strShipped
Dim stepNum As Integer
For stepNum = 1 To UBound(arrState)
Response.Write("#circle" & stepNum & " { fill: " & arrState(stepNum) & ";}" & vbCrLf)
Response.Write("#line" & stepNum & " { stroke: " & arrState(stepNum) & "; stroke-width:8;}" & vbCrLf)
Next
%>
/* End of Array code */
</style>
<%-- Needed so we can call the same ModalPopupExtender from 2 different events --%>
<script type="text/javascript">
function ShowModalPopup() {
$find("mpe").show();
return false;
</script>
</head>
<body>
<div style="margin: 5px; padding-left: 50px">
<div style="position: relative; height:0; width: 100%; margin:0; padding: 0; padding-bottom: 12%; overflow: hidden" >
<svg viewBox="0, 0, 1200, 140" preserveAspectRatio="xMinYMin meet" style="position: absolute" >
<style type="text/css">
.datacircle {
cursor: pointer;
}
.label {
pointer-events: none;
}
</style>
<circle id = "circle1" runat="server" cx = "50" cy = "50" r = "36" >
<title style="color: #42B4E6">The order is in queue</title>
</circle>
<text x="30" y="105" fill="black" font-size = "16" font-family = "sans-serif">Order</text>
<text x="1" y="125" fill="black" font-size = "16" font-family = "sans-serif">Acknowledged</text>
<line id = "line1" x1 = "86" y1 = "50" x2 = "140" y2 = "50" />
<circle id = "circle2" runat="server" cx = "176" cy = "50" r = "36" >
<%If strDrwReqd = "0" Then%>
<title>No drawings required for this order</title>
<%End If%>
</circle>
<text x="147" y="105" fill="black" font-size = "16" font-family = "sans-serif">Drawing</text>
<text x="141" y="125" fill="black" font-size = "16" font-family = "sans-serif">Submitted</text>
<line id = "line2" x1 = "212" y1 = "50" x2 = "267" y2 = "50" />
<%If strDrwReqd = "0" Then%>
<line id = "line2Xa" x1 = "157" y1 = "31" x2 = "195" y2 = "69" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
<line id = "line2Xb" x1 = "157" y1 = "69" x2 = "195" y2 = "31" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
<%End If%>
<circle id = "circle3" runat="server" cx = "303" cy = "50" r = "36" >
<%If strDrwReqd = "0" Then%>
<title>No drawings required for this order</title>
<%End If%>
</circle>
<text x="274" y="105" fill="black" font-size = "16" font-family = "sans-serif">Drawing</text>
<text x="271" y="125" fill="black" font-size = "16" font-family = "sans-serif">Approved</text>
<line id = "line3" x1 = "339" y1 = "50" x2 = "394" y2 = "50" />
<%If strDrwReqd = "0" Then%>
<line id = "line3Xa" x1 = "284" y1 = "31" x2 = "322" y2 = "69" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
<line id = "line3Xb" x1 = "284" y1 = "69" x2 = "322" y2 = "31" style="stroke:#d0d0d0; stroke-width:6; stroke-linecap:round"/>
<%End If%>
<%-- IF Code Behind boolean is True, show circle in lighten color on mouseover. Return to normal color on mounse out. --%>
<%-- No mouse effect if Code Behind boolean is False. --%>
<circle class="datacircle" id = "circle4" runat="server" cx = "430" cy = "50" r = "36" />
<text class="label" x="389" y="105" fill="black" font-size = "16" font-family = "sans-serif">Engineered</text>
<line id = "line4" x1 = "466" y1 = "50" x2 = "521" y2 = "50" />
<%-- onclick needed on this circle because it calls the same ModalPopupExtender as another circle --%>
<circle id = "circle5" runat="server" cx = "557" cy = "50" r = "36" onclick="return ShowModalPopup()" />
<text x="505" y="105" fill="black" font-size = "16" font-family = "sans-serif">Manufacturing</text>
<text x="532" y="125" fill="black" font-size = "16" font-family = "sans-serif">Started</text>
<line id = "line5" x1 = "593" y1 = "50" x2 = "648" y2 = "50" />
<%-- onclick needed on this circle because it calls the same ModalPopupExtender as another circle --%>
<circle id = "circle6" runat="server" cx = "684" cy = "50" r = "36" onclick="return ShowModalPopup()" />
<text x="632" y="105" fill="black" font-size = "16" font-family = "sans-serif">Manufacturing</text>
<text x="646" y="125" fill="black" font-size = "16" font-family = "sans-serif">Completed</text>
<line id = "line6" x1 = "720" y1 = "50" x2 = "775" y2 = "50" />
<circle id = "circle7" runat="server" cx = "811" cy = "50" r = "36" />
<text x="762" y="105" fill="black" font-size = "16" font-family = "sans-serif">Ready to Ship</text>
<line id = "line7" x1 = "847" y1 = "50" x2 = "902" y2 = "50" />
<circle id = "circle8" runat="server" cx = "938" cy = "50" r = "36" />
<text x="910" y="105" fill="black" font-size = "16" font-family = "sans-serif">Shipped</text>
<script type="text/javascript" >
var dcircles = document.getElementById("circle4");
dcircles.addEventListener("mouseover", mouseOverEff);
dcircles.addEventListener("mouseout", mouseOutEff);
function mouseOverEff() {
dcircles.style.color = "blue";
}
function mouseOutEff() {
dcircles.style.color = strEngnrd; <%-- generates Error: 'strEngnrd' is undefined --%>
}
</script>
</svg>
</div>
</body>
What am I doing wrong?
Thanks,
ASP.NET* SVGJavaScript
Last Comment
Zvonko