I am adapting the following chords example using d3.js to display relationships between groups. Can somebody explain how the chords appear back after they have faded out.
I'm interested in hooking up a handler into this to display information and have it go away on mouseout.
There is a mouseover handler that adds a fade class to the path element but I don't see any code to remove it.
<path class="chord fade" d=<elided> style="fill: rgb(247, 129, 191);">
<title>Financial District → Western Addition: 1.1%Western Addition → Financial District: 1.1%</title>
</path>
Despite this when I mouse out of a group the chords that were faded out reappear. My question is how is it achieved?
For convenience here is a jsfiddle to play with: http://jsfiddle.net/huynhjl/hxby165d/7/
I am aware of this question/answer D3.js Chord diagram - Have text appear/disappear when hovering over an arc, but I am wondering how the original showcase does it.
If you are using Bootstrap on your site, then this same problem may occur even with adding
#circle:hover path.fade {
display:none;
}
This is due to Bootstrap already having a fade class!
To remedy this, I changed my D3 class to be "fadechord" and now have:
#circle:hover path.fadechord {
display:none;
}
and then in the mouseover listener I have:
function mouseover(d, i) {
chord.classed("fadechord", function(p) {
return p.source.index != i
&& p.target.index != i;
});
}
This seemingly odd behavior is accomplished with the css.
What's happening in the script is that when one of the paths fires the mouseover event, the handler selects all of the chords, and for each one, switches the fade class off or on, based on whether that chord is connected to the hovered element or not.
So, how is the fade class being handled? Check out the selector that actually hides the elements:
#circle:hover path.fade {
display: none;
}
What that css rule is really saying is:
when there is a <path> element with a class of "fade" that is a descendant of a hovered element with an id of "circle", set its "display" property to "none".
In other words, the fade class doesn't hide the elements unless the g element that has id #circle is being hovered. Therefore, when the mouse is no longer over that group, the paths are visible again, even if they still have the fade class.
Related
I'm using this scroll bar from idiotWu which works great so far:
https://github.com/idiotWu/react-smooth-scrollbar
What I need to do next is in my react project, I need to programatically change the scroll position. In my project, when my fires reactComponent.render() again because of some things I'm doing, I need to scroll back to the top of the <Scrollbar />. I don't see in the documentation any mention of how to do something like a element.scrollTop() or <Scrollbar scrollPosition={0} />.
I tried to manually set the transform translate3d of <div class="scroll-content">, but that didn't work because the scrollbar is saving it's scroll position value somewhere, and I don't know how to access it.
How do I reset the scroll to the beginning? Alternatively, how do I state the scroll position?
EDIT
I also tried each of these but they all did not produce the results I wanted
export default class MyClass extends React.Component {
render() {
document.getElementById('panel').setPosition(0,0); // setPosition is not a defined method
document.getElementById('panel').scrollTop=0; // had no effect
scrollbar.setPosition(0,0); // scrollbar not defined
scrollbar.scrollTop=0; //scrollbar not defined
return (<Scrollbar id="panel">stuff</Scrollbar>);
}
}
Try scrollbar.scrollTop = 0 or scrollbar.setPosition(scrollbar.offset.x, 0).
Currently I have a page which on load scatters draggable divs randomly over a page using math.random
Using media queries however the page uses packery to display the same images for browser widths under 769px in a grided fashion.
I had the idea that it could be interesting to create a 'sort/organize' button which would rearrange these divs using packery and remove the draggable class already applied, however i have no idea if this is possible or how to go about it. If there is any method of animating this process that would also be a bonus!
If anyone could at the very least point me in the right direction i would be extremely thankful!!
Hopefully this gives you a bit of a starting point.
I would read up on JQuery as it has some useful helpers for DOM manipulation.
I don't think this is the most efficient way to do it, and I think you will need to rethink your test harness for doing this in the future, but hopefully this gets you started.
Firstly I've added a button to trigger the sort
<div class="rotate" id="contact">Contact</div>
<div id="logo">Andrew Ireland</div>
<button id="sort">sort</button>
Then updated the script to override the css setting to switch between draggable view and item view.
// general wait for jquery syntax
$(function(){
// trigger the layour to sort get the packery container
var container = document.querySelector('#container.packery');
var pckry = new Packery( container );
//button function
$("#sort").click(function(){
//Hide all the dragged divs
//ui-helper-hidden is a jquery ui hider class
if($('.box').css('display') == 'block') {
$('.box').css({'display':'none'});
//Show all the item class's
$('.item').css({'display':'block'});
//show the container
$('#container').css({'display':'block'});
// trigger the layour to sort
pckry.layout();
} else {
//hide all the item class's
$('.item').css({'display':'none'});
//hide the container
$('#container').css({'display':'none'});
//show the draggable box's
$('.box').css({'display':'block'});
}
});
$( ".pstn" ).draggable({ scroll: false });
$(".pstn").each(function(i,el){
var tLeft = Math.floor(Math.random()*1000),
tTop = Math.floor(Math.random()*1000);
$(el).css({position:'absolute', left: tLeft, top: tTop});
});
});
As I said this is more to get started. The packery documentation details how to trigger its layout functions so another approach would be to only have the draggable elements, and put these inside a packery container. Then when you want to sort them you can just trigger that the packery.layout() function.
I hope this is helpful, I am only just getting started on stack overflow so any feedback would be appreciated.
I am making photo collage application for which I need better object selection method. The current or default selecting technique is little bit confused when there are lot's of objects. User are confused on which object is selected. So I want to highlight over the object before selecting it so that use know prior which object is going to be selected.
I have looked at hovering which is what I want but it is only for shapes and don't work for images. How to apply this to images, text and cliparts.
Here is the code :
canvas.on('object:over', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('object:out', function(e) {
//I want to remove the border on mouseout on non-selected object
});
The border and corner is only applicable for selected objects but I want to enable border for non-selected object on mouse hovering.
Here is my app : Edit Photos For Free
For now I think the solution for this is -
canvas.on('mouseover', function(e) {
//I want to draw border only (not corner) on mouseover and non-selected object
});
canvas.on('mouseout', function(e) {
//I want to remove the border on mouseout on non-selected object
});
As the title says. I want to make a list of div elements inside a div. I want to be able to scroll the list up and down, and when the list is not scrolling anymore, i want to be able to click the listed elements do to something. I cant figure out how to do this.
the touchmove event executes whenever the user touches the div, even if the div its scrolling. THen i cant figure out how to make let the program know that the div isnt scrolling anymore, so the next touch on the elements will trigger a non scrollable event.....
EDIT:
what i have so far is this... However this is a quick "fix" and its not working as intended. For example if you scroll quickly up and down, then the div will think you pressed on one of the elements..
exerciseWrapper is the elements inside the scrolling div. Each element is wrapped around exerciseWrapper.
$('.exerciseWrapper').on('touchstart',function(){
touchstart=true;
setTimeout(function(){
touchstart=false;
}, 100);
});
$('.exerciseWrapper').on('touchend',function(){
if(touchstart)
{
$('.exerciseWrapper').not(this).css('border-color','black');
$(this).css('border-color','orange');
}
});
Ok so i finally figured this one out.. Reason why i couldnt wrap my minds around the solution on this, was because i couldnt get other events then eventstart and event end to work... At the time of writing i still cant get the other events like eventcancel and eventleave to work. However eventmove works and i solved the problem using this event. eventmove keeps updating the element its linked when you move your finger. Then i had a variable of touchmove to constantly be true if i am scrolling my div (with touchmove event). WHen i stop moving i can clik on selected element again and use a normal eventstart event.. This is my working code:
var touchmove=false;
function AddExercisesEvents()
{
$('#exerciseMenu').on('touchmove',function(){
touchstart=true;
$('h1').text("move");
});
$('.exerciseWrapper').on('touchend mouseup',function(event){
event.stopPropagation();
event.preventDefault();
// $('.exerciseWrapper').off();
if(event.handled !== true)
{
touchstart=false;
//ENTERING editExercise Menu..!
if(!touchstart)
{
//insert magic here
alert($(this).attr('id'));
}
}
return false;
});
}
I am using highcharts to graph multilple series (several lines with multiple points each on one chart). The user selects one or more points on multiple lines. Data about the selected points is shown in a gridview on my asp page. After some server side logic I would like to redraw the page and put an image, marker, flag or some other way of showing the user the redrawn graph with those points "marked".
I have been playing with jquery to add an image (small circle) to the div where the chart is rendered but not having much luck with the X/Y position of the image within the div.
Any advice or examples on how I might do this? Not married to image in DIV other suggestions appreciated.
I figured it out. I made a function that is called when the point is clicked passing the whole point object. An if statement toggles the marker of the ponit and using the acumulate = true it shows all the points on my curve that have been selected. Likewise if it is already selected it toggles the marker off. Much easier than what I was trying.
Here is my function to toggle point and make them all seleted
function ChartClicked(oPointObject) {
if (oPointObject.selected) {
oPointObject.select(false, true);
}
else {
oPointObject.select(true, true);
}
}
Here is a snipet of my graph. It is in the plotOptions I call the click event
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
ChartClicked(this);
}
}
}
}
},
Hope this helps someone else.