Question about modifying the opacity on hover [jQuery]

Community Off Topic
1

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

```

('path').hover(function(){(this).attr(“stroke-opacity”, 1);})

<do not remove the three backticks above>
2

@textrockstar34699 Would you mind posting your entire HTML code that goes along with the jQuery code you have there?

Thanks :slight_smile:

3

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.

1 Like
4

The page is here:
http://www.conferenceboard.ca/itic/service-exports.aspx

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.

5

@textrockstar34699 You’ll need to do it slightly differently, but you have the right idea :slight_smile:

Use this code instead:

$('path').hover(function() {
  $(this).css("stroke-opacity", 1);
},
function() {
  $(this).css("stroke-opacity", 0.08);
});

stroke-opacity is a CSS property you’re using, not an attribute on the tag. Using attr() will do this:

<path style="..." stroke-opacity="1">
  <!-- ... -->
</path>

Using css() instead does this:

<path style="... stroke-opacity: 1;">
  <!-- ... -->
</path>

…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 :slight_smile:

6

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.

7

@textrockstar34699

Correct, attr() automatically does that :slight_smile:

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 :confused:

8

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.

9

Is this a bad thing? What is the practical consequence of this? Is there a performance hit?

10

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.

11

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.

12

@mtf I would modify the above with .on as follows?

$('path').on('hover', function() {
  $(this).css("stroke-opacity", 1);
},
function() {
  $(this).css("stroke-opacity", 0.08);
});
13

Could I use “.animate” to “ease” the opacity of the lines? It gets a little flashy when you move the mouse around?

14

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.

15

@textrockstar34699 Sure, I think that would work :slight_smile: