<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
This is something I’m trying out on my own…
<In what way does your code behave incorrectly? Include ALL error messages.>
I want to make a svg stroke in a graphic with the following attribute ---- “stroke-opacity: 0.08;” go darker (opacity 1) when I hover over it. I thought it would be a situation where similar code to the exercise might work. Obviously not… ! Maybe JQuery won’t work here?
Is there an HTML element, <path></path> to which this might refer? The selector is written in element type syntax. If path is a variable, then remove the quote marks.
There are a bunck of paths each with code like this:
<path style="fill: none; stroke-width: 66.6781px; stroke: #00b6de; stroke-opacity: 0.08;" d="M100,345.0770667313858C266.6,345.0770667313858 409.40000000000003,185.89050951364635 576,185.89050951364635" class="link"> <title>Computer and Information Canada → Computer and Information US
5,997</title> </path>
What I want to do is to use JQuery to “select” the paths on hover so that the paths will highlight as the mouse hovers over them.
I was trying out a few selectors in console while on the page.
Since it would only apply to the path being hovered over, I thought selecting based on the path tag would work.
…and that’s what you want. But then, moving your mouse off of it does nothing - stroke-opacity stays the same, which isn’t what you want. So you need to have another function which handles the event when you stop hovering the path, and reverts the stroke-opacity on it back to what it originally was
Works like a charm! Thanks! So using attr will change the value to a string? If I want to change the value to another value I need to use css. I guess I could just change the actual css to get the same effect but at least this way I won’t need to access the actual css file.
Here’s another dumb question: do I put the js code into a in the body of the page somewhere? Does it matter where? Because this page is in a CMS I don’t have access outside the body tag.
I would like to make a slight refinement…
There are yellow lines that need to be made more opaque than the other colors. So I could put an if statement to make the color vary depending on the original colour.
You could do that, a commonly recommended thing to do is in <script> tags before the closing <body> tag - like this:
<script>
// javascript code here
</script>
</body>
</html>
You could do that, but that seems like it would be overly complicated - it would be easier to make them slightly brighter by default, I think (unless your CMS won’t allow that). That way, people can also find the lines in the first place to hover over them, without hovering in the hope of randomly finding something that changes.
Also, having the lines automatically adapt to the numbers is pretty cool, but you might want to implement a minimum line width? Some of the lines (for example, “Insurance: 62”) are nearly impossible to hover on
Okay, so PATH is an element. The thing to bear in mind is that $('path') will return a collection of all PATH elements in the document, not just the one being hovered over.
If there are multiple path elements on the page (in the document) hovering will be self-evident Everything (all <path> elements) will be affected by this rule.
By delegating we remove our listeners from the identity and treat event objects in their own context. This is where on() comes in, Give it a read and think in terms of ‘loading up’ rather than ‘reactive’ event handling.
The listener may be bound to the parent class or object, so that each path is independent and not directly bound. This way, new paths can be injected and others removed without having to update the listener.