troubleshooting Question

SVG mouseover event not changing circle Fill color

Avatar of sqdperu
sqdperuFlag for United States of America asked on
JavaScriptASP.NET* SVG
11 Comments1 Solution106 ViewsLast Modified:
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.

<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,

SVG circles
ASKER CERTIFIED SOLUTION
Zvonko
Systems architect
Join our community to see this answer!
Unlock 1 Answer and 11 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 11 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros