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
Related
I am fighting with CKEditor in order that after CKEditor is loaded with a content and without selecting any style from toolbar, the changes (new text) made from an user, are automatically set in bold (no toolbar needed for the user).
I tried executing a command on the "click" event setting the bold style but it does not work very well
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
myEditor.commands.bold.exec();
});
});
so I changed inserting element with bold style on click event
myEditor.on("instanceReady", function() {
var editable = myEditor.editable();
editable.attachListener( editable, 'click', function() {
var parent = myEditor.getSelection().getStartElement()
//simplified code without check if span already exist
myEditor.insertHtml('<span class="boldStyle">');
myEditor.insertHtml('</span>');
});
});
This works a bit better but I wonder if this approach is a good idea or how I could do better
Thanks
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)
});
I am using ZingChart for a standard bar graph. I have the selected state for individual bars working as I would like but for one thing. Is there a way to show the value box (set to visible:false globally) to show just for the selected node when it is clicked/selected? I was able to make the value box for every node show in a click event I added to call an outside function using the modifyplot method but I don't see a similar method for nodes such as modifynode. If this is not an option, is there any way to insert a "fake" value box the markup of which would be created on the fly during the click event and have that element show above the selected node? Below is my render code for the chart in question. Thanks for your time!
zingchart.render({
id: "vsSelfChartDiv",
width: '100%',
height: '100%',
output: 'svg',
data: myChartVsSelf,
events:{
node_click:function(p){
zingchart.exec('vsSelfChartDiv', 'modifyplot', {
graphid : 0,
plotindex : p.plotindex,
nodeindex : p.nodeindex,
data : {
"value-box":{
"visible":true
}
}
});
var indexThis = p.nodeindex;
var indexDateVal = $('#vsSelfChartDiv-graph-id0-scale_x-item_'+indexThis).find('tspan').html();
updateTop(indexDateVal);
}
}
});
You'd probably be better off using a label instead of a value-box. I've put together a demo here.
I'm on the ZingChart team. Feel free to hit me up if you have any more questions.
// Set up your data
var myChart = {
"type":"line",
"title":{
"text":"Average Metric"
},
// The label below will be your 'value-box'
"labels":[
{
// This id allows you to access it via the API
"id":"label1",
"text":"",
// The hook describes where it attaches
"hook":"node:plot=0;index=2",
"border-width":1,
"background-color":"white",
"callout":1,
"offset-y":"-30%",
// Hide it to start
"visible":false,
"font-size":"14px",
"padding":"5px"
}
],
// Tooltips are turned off so we don't have
// hover info boxes and click info boxes
"tooltip":{
"visible":false
},
"series":[
{
"values":[69,68,54,48,70,74,98,70,72,68,49,69]
}
]
};
// Render the chart
zingchart.render({
id:"myChart",
data:myChart
});
// Bind your events
// Shows label and sets it to the plotindex and nodeindex
// of the clicked node
zingchart.bind("myChart","node_click",function(p){
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"text":p.value,
"hook":"node:plot="+p.plotindex+";index="+p.nodeindex,
"visible":true
}
});
});
// Hides callout label when click is not on a node
zingchart.bind("myChart","click",function(p){
if (p.target != 'node') {
zingchart.exec("myChart","updateobject", {
"type":"label",
"data":{
"id":"label1",
"visible":false
}
});
}
});
<script src='http://cdn.zingchart.com/zingchart.min.js'></script>
<div id="myChart" style="width:100%;height:300px;"></div>
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
}
}]
});
});
I want to position Dojo's Dijit Dialog relative to one of my html element. is it Possible?
If yes. How?
currently it always shows dialog in middle of viewport.
Can any one help me regarding the matter?
Thanks.
amar4kintu
Another way that I do this (not great because I override a private method but it gives me the flexibility I want):
var d = new Dialog({
title:"Your Dialog",
_position:function(){
if(this.refNode){
p = Geo.position(this.refNode);
Style.set(this.domNode,{left:p.x + "px", top:p.y + "px"});
}
},
showAround:function(node){
this.refNode = node;
this.show();
}
});
d.showAround(dojo.byId("someNode"));
This example uses "dojo/dom-style" as Style and "dojo/dom-geometry" as Geo.
I did that by adjusting default absolute position of dijit.dialog using dojo..
I used following code to readjust absolute position of dialog to what I want..
dijit.byId('dialog').show();
dojo.style('dialog','background-color','#AAAAAA');
var co = dojo.coords('period'); // element below which I want to display dialog
dojo.style('md1','top',(co.y + 25)+'px');
dojo.style('md1','left', co.x+'px');
Hopefully this will help someone..
Thanks.
amar4kintu
I think dijit.TooltipDialog is what you need.
var dialog = new dijit.Dialog({
title: myTitle,
content: myDialogContent,
style: "width: 300px;",
onShow: function() { dojo.style(this.containerNode.parentNode,'visibility','hidden'); },
onLoad: function() { dojo.style(this.containerNode.parentNode,{top:'100px', visibility:'visible'}); }
});
Instead top:'100px' you can use also top:'20%' but not tested well. My dojo is 1.7.1.