I have the following code:
function preload() {
this.load.svg('table', 'assets/svg/table.svg');
}
function create {
this.add.image(400, 300, 'table');
}
How can I highlight this picture when I hover over it?
You can use the pointerover event like so:
First, declare a variable to hold the svg image.
let tableSvg;
Second, preload the svg image.
function preload() {
this.load.svg('table', 'assets/svg/table.svg');
}
Third, add the svg image to the variable.
tableSvg = this.add.image(400, 300, 'table');
Fourth, set the svg image to be interactive.
tableSvg.setInteractive();
Fifth, add an mouse over event listener like so:
tableSvg.on('pointerover', () => {
console.log(tableSvg)
});
Edit:
You can change the image's color like so:
tableSvg.on('pointerover', () => {
// setTint method takes a color value & change the image's color accordingly
tableSvg.setTint(185273)
});
Related
I am using fabric.js and I have the below issue.
I have added a circle on my canvas. now I want to fillpattern to the Circle with some SVG pattern image. And I want to change the color of the patter(SVG) dynamically.
I have tried below:
fabric.util.loadImage('../images/cross.svg', function (img)
{
newObj = img;
currentObject.setPatternFill({ source: img, repeat: 'repeat' });
canvas.renderAll();
});
And Code is working fine for pattern filling in the circle. but I am not able to change the color of the svg.
i have i problem and tried different solutions, but no success.
I have an amChartXY chart, which has white labels and legend text is white, but when i want to build custom pdf report, i cannot convert those white text into black.
First i have a function which exports chart to base64 string, and i want there to convert the text color to black, but it won't work.
Here is a code snippet of a menu item, that converts to SVG that is saved to global array object.
menu: [
{
class: "",
label: "Save to draft",
click: function() {
var overrideObject = {
backgroundColor : "rgba(255,255,255,1)",
color : "#000",
legend : {
color : "#000"
}
};
var chartObject = this;
chartObject.capture(overrideObject, function () {
chartObject.toJPG({}, function (base64) {
// charts is global array
charts.push({
name: customName,
chart: base64
});
});
});
}
},
Here the overrideObject is changing the backgroundColor attribute with white ( before is was transparent ) but it's not changing font color. Also i have tried different attributes to add, but nothing seems to work.
Is this possible at capture time ?
Here are some images preview of what i want to accomplish :
AmChart for export isn't that well documented, so any feedback would be welcome
The overrideObject you're passing only accepts the same parameters listed in the list of export settings. If you need to change the appearance of specific elements on the chart, you need to use the reviver callback mentioned in the annotation settings section to selectively apply your modifications. For example, here's how to target the value axis labels:
"export": {
"enabled": true,
"reviver": function(nodeObj) {
if (nodeObj.className === 'amcharts-axis-label' && nodeObj.svg.parentNode.classList.contains('amcharts-value-axis')) {
nodeObj.fill = 'rgba(255,0,0,1)';
}
},
// ...
}
Note that you need to use SVG attributes to change the appearance, so you'll have to set the fill to change the color of the text element.
Codepen demo
I'm trying to accomplish two things:
Left Column: Steps are faded by default, but individual steps fade in to full color on hover.
Right Column: A different image is displayed based on the step being hovered in the left column. By default, the first image should be displayed.
I am using the fadeIn function, but I cant get it to work the way I'm hoping. Whats the best way to go about doing this?
Jsfiddle Example
$(document).ready(function() {
$('#step-one')
.hover(
function() {
$('#step-one-image-holder').fadeIn('slow');
}, function() {
$('#step-one-image-holder').fadeOut('fast');
}
);
$('#step-two')
.hover(
function() {
$('#step-two-image-holder').fadeIn('slow');
}, function() {
$('#step-two-image-holder').fadeOut('fast');
}
);
$('#step-three')
.hover(
function() {
$('#step-three-image-holder').fadeIn('slow');
}, function() {
$('#step-three-image-holder').fadeOut('fast');
}
);
});
If you use "hover" the images will disappear always when you leave the left column (I not sure if you want it). You may use "fadeIn" and "fadeOut" inside a "mouseenter" event:
(Maybe you need to put the images on absolute position to avoid the flickering)
//---Show images on mouseenter
$("div[id^='step-']").on("mouseenter", function(){
var image = $("img[id='" + $(this).attr("id") + "-image-holder']");
$("img[id^='step-']").not(image).fadeOut();
image.fadeIn();
});
//---Hide images by default
$("img[id^='step-']:gt(0)").hide();
jsfiddle
I'm really struggling to get the same header effect of this website http://demo.qodeinteractive.com/bridge13/.
I'm using Wordpress plugin myStickymenu but the results is not what I'm looking for and want to use jquery instead but I have no idea how to do it.
You need to check the 'scroll' event to get the scroll position. If the scroll position is below the height of the header, add a class. The class that gets added will have a different height value which will overwrite the default value.
function init() {
// Check scroll event
window.addEventListener('scroll', function(e){
// Check scroll position
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector("header");
// If the scroll position is a larger value than the chosen value (shrinkOn)
if (distanceY > shrinkOn) {
// Add class "smaller"
classie.add(header,"smaller");
} else {
// Otherwise remove it
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();
Source: http://callmenick.com/2014/02/18/create-an-animated-resizing-header-on-scroll/
can you help me to place a Highchart inside a SVG element instead of an HTML . Cascaded elements work fine. I have already done it with the jquery SVG plot. But Highchart throws an error 13. What can i do?
Kind regards
Markus Breitinger
You can generate chart in div, which will have negative margin. Then use getSVG() function and paste it ot svg element.
http://api.highcharts.com/highcharts#Chart.getSVG()
Unfortunately it is not suppored, highcharts renders the chart in additional divs and adds elements like labels/datalabels as html objects.
But you can copy the SVG of highstock in you SVG. But you will lose all attached events.
Like drag and drop, click ....
Here an Example of it.
http://jsfiddle.net/L6SA4/10/
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
// Create a hidden and not attached div container.
var div = $('<div>This is an hidden unatached container.</div>');
// Create the chart
div.highcharts('StockChart', {
chart: {
width: 480,
height: 400,
events: {
load: function () {
// If hidden div was generated, take the svg content and put it into svg.
var stockSvg = $('svg', this.container);
var svgObj = $('#mySvg').svg();
// Force position of highstock
stockSvg.attr('x', 20);
stockSvg.attr('y', 30);
// Replace ugly rect with highstock
$('#container', svgObj).replaceWith(stockSvg);
}
}
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});