Changing opacity on Mouseover - javascript

The ultimate goal of my project is to make my image of circle chart interactive on mouseovers. I want the pieces of the circle to change opacity to .5 (from 1) when the user hovers them. I have an image of the chart but I'm not sure how to make areas of one single image change opacity on hover. I have tried several things:
I image mapped the chart with each piece in its own map, but I wasn't sure how to change opacity of an area of one single image (css)(if its even possible)
My second approach was that i sliced the chart up into individual pieces and made their opacity .5 and saved them all separately. Then, I image mapped the single image of the chart and tried to load the individual piece on hover (css)
My final approach was saving each piece of the chart as individual images and when the image is hovered, change the opacity to .5 with css. This works perfectly except i am not sure how to position the pieces to form a perfect circle in dreamweaver.
Any direction or advise is greatly appreciated. I am willing to learn javascript or jquery to help get this done.
Thank you
EDIT Image of the chart is now attached
http://i.stack.imgur.com/KwIfY.jpg

I'm not sure if I understood the question right regarding the current answers but if you want to make the parts of the chart interactive I have 2 approaches:
To achieve the effect with pure CSS I guess you need to divide the chart in individual images as you already mentioned. The positioning is quite simple. I've used in my demo below one image an let it rotate. In your case you can cut each part of the chart individually and get the right place for them with absolute positionig.
Again as you already mentioned you can use map area to define the parts of the chart. With a plugin like this: ImageMapster you can achieve what you want. I've used this once for the following map. It's again very simple, when hovering any part of the map it's background will be replaced by another background. In your case you could save the chart with full opacity and display on hover an image of the chart with 50% opacity.
Demo
The Demo is not very clean as I didn't spent much time in position the parts perfectly but you can see how it works.
transform: rotate(45deg);

I don't know if CSS3 transition will fit to you:
http://www.w3schools.com/css/css3_transitions.asp
.chart-item { opacity: 0.5; transition:opacity 2s; }
.chart-item:hover { opacity: 1; }
Check documentation for browser support.

Maybe create a div and put each image as the background or content of one div (in order), then create a listener for the div class to change opacity upon mouseenter or mouseleave using jQuery.
Here's a simple example (pardon any mistakes):
jQuery:
$( ".somedivclass" )
.mouseenter(function() {
$(this).fadeTo(200, 0.5);
})
.mouseleave(function() {
$(this).fadeTo(200, 1);
});
Here's more info on $.mouseenter(). Here's some for $.fadeTo().

Check this demo. Hover your cursor exactly on the eyes of the owl, and you will see the opacity changing. It will not change if you hover on the rest of the image.
http://jsfiddle.net/q6d57/14/
$('.eye1').on('mouseenter mouseleave', function(e) {
$('.box2').stop(true, false).fadeToggle(1500)
});

I suggest using svg. Here is an implementation of exactly what you are trying to do, because I felt like learning d3.js today:
http://jsfiddle.net/6m26k/1/
You don't need to make the chart through code though, because you can just load the svg onto the page with html5 and use css similar to mine:
.arc.filled:hover {
opacity: .8;
cursor: pointer;
}

Related

Scale svg map regions on hover

I have an svg map. And I need to make the next thing:
When I'm hovering a region, it needs to be scaled. But I have an issue, some paths are still visible beneath the hovered region. You can see it when you hover bottom center region.
Tried to use z-index in css styles, but then found out that it won't work.
I'm free to use anything, to make it work
Thanks in advance)
[codepen]https://codepen.io/chegonenko/pen/gmoWWy
Add this style
path:hover {
transform: scale(1.2);
}

tooltips of a scaled jquery flot chart appear in wrong position

I'm using the flot library
How do I get the correct tooltips if I scale the chart with this css rule: transform: scale(0.7);
flot source uses the function findNearbyItem to find hovered items.
[FIDDLE] that demonstrates both cases - scale(1), and scale(.7)
taking your fiddle as source of the question, there is actually several problems to take care of:
the tooltip doesn't work correctly, if you hover over the tooltip, it disappears (starts flickering). Check the updated fiddle, which now hides the tooltip if you move away from the bar and stays if you hover over the tooltip itself.
scaling issue: just scale the canvas wrapper.
<div id="placeholder2" style="width:420px;height:210px;margin-top:40px;"></div>
scales the canvas to the same size like the css transform
<div id="placeholder2" style="transform:scale(.7)"></div>
but maintains the correct bar values and shows the tooltip in the correct position.

Resetting transform: rotate() by removing and appending canvas not showing data after appending and redrawing chart

I am trying to overcome the problem found in my previous question. Since it doesn't seem to be 100% possible I am attempting to destroy the canvas element and re-append it thus clearing all the rotation on the canvas element.
This almost works however the last step, when redrawing the chart from chart.js, nothing appears.
Putting some console.log inside the onComplete for the chart.js shows data in the console but nothing appears.
Current jsfiddle with onComplete data not appearing.
jsfiddle with rotation problem that I am trying to fix.
Previous question: here
I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?
I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.
Many thanks
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});
With a couple of changes, your code should work
Looks like there is some problem with the Chart.js version you are using. I changed it to the latest version (2.1 # https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js)
Before you do $('#wheel').remove(); you need to do myChart.destroy(); to remove that particular chart from Chart.js's internal list of objects (which it uses to resize existing charts when the window resizes)
The following bit in your code clears off the complete data.
...
for(i=chartData.datasets[0].data.length-1; i>=0; i--) {
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);
}
...
Since you then user chartData to initialize your chart, you are effectively trying to draw a blank chart. I assume this was some sort of copy-paste error. I've changed it in the updated fiddle to just remove the last sector alone, like so.
var i=chartData.datasets[0].data.length-1;
chartData.datasets[0].data.splice(i,1);
chartData.datasets[0].backgroundColor.splice(i,1);
If you want all the sectors again for the next run, just remove that block.
Fiddle - https://jsfiddle.net/wzbxuo5n/

Javascript element opacity situation

Let's say i have a div element which opacity is set to 0.5 .
I have a script which function is to draw a rectangle over the div based on the first time the user clicks with the left mouse button on the div element and the way he drags the mouse over the div.
I am trying to figure out how to make the rectangle the user draws to not be affected by the opacity of the div container element.
For example if you upload a photo to google+ there is an option to crop some part of the image so only your face is visible. Thay have this kind of functionality i am looking for. When you draw the part over the image you'd like to crop the image opacity is set to 0.5 for example but the region you are drawing is clearly showing the original style of the image.
the opacity of a wrapping element is inherited by all containing elements,
you could simply solve this by creating a png-image with your desired opacity with size 1x1px and make this as background-image and repeat x and y
I think what you are trying to do is called masking, it can be achieved atleast with svg. You could have one layer with specific opacity and a mask with the rectangle properties to "burn a hole" in the opacity at a desired location.
Take a look at this:
http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-the-mask-property

Javascript animations in jQuery using transform.js

i'm performing some animations with transitions using the plugin demo'd here http://www.binpress.com/app/demo/app/145
However i'm using multiple transitions on the same element.
Basically i have an animation with 5 circles working as satellite objects around a central point. The central point has a little arrow and as you hover over any of the satellite points it transforms using this plugin to the satellite circle being hovered over.
Here's an example of what i'm doing, simplified.
jQuery(".applications").bind('mouseover', function(){
console.log('fired the second animation');
jQuery(".midpointer").animate({
transform: 'rotate(190deg)'
});
});
jQuery(".hosting").bind('mouseover', function(){
console.log('fired the second animation');
jQuery(".midpointer").animate({
transform: 'rotate(190deg)'
});
});
Now the problem with this, is that after the first animation any subsequent hovers do not rotate the element. So i'm assuming I need to do some form of reset, I had been looking at .stop() in jQuery but to little avail.
Anyone shed any light on this for me?
I believe that you rotate 190deg from the starting position each time you do a mouse over, not relative to the current rotation of the object.
According to the documentation, you can use += to add to the current rotation:
transform: '+=rotate(190deg)'

Categories