We Keep Coding

DOM events loading challenge with D3 graph

I am new to D3 /Javascript / html and I just made my first interactive viz. Its 93% done, but I have coded myself into a corner. There is a toggle switch on the graph which changes the numbers from counts to percentages. When the toggle is switched the graph appears, but I can't figure out how to get the graph to render upon loading without the click event while maintaining the functionality of the toggle feature which happens to load the data.
The likely culprits are here:
document.addEventListener('DOMContentLoaded', function () {
//Initialize with vanilla counts
var fileName = "data.csv"
var checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', function () {
if (checkbox.checked) {
The full code is available here:
https://www.philippou.us/jensweb/interactive_viz.html
How can I get my D3 graph to load without someone clicking on the toggle switch?

Put all the code after "checkbox.addEventListener('change', function () {", i.e., from "if (checkbox.checked) {" down, into a function, e.g., "function drawGraph() { ...}". Calling the function in the change event will be exactly what you're doing now. Then add a call to the function at the end of loading the page, e.g., "[script]drawGraph();[/script]" just before the "[/body]" statement. (Note: I'm using square brackets rather than angle brackets around script and body because they don't display otherwise and I don't know how to make them display. Sorry.)

change default cursor style in PIXI.js

I want to change my cursor when triggering a mousedown event. I found a lot of hints how to achieve that - but these have one major issue. To change the defaultCursorStyle property I need to instantiate the InteractionManager prototype.
var renderer = PIXI.autoDetectRenderer(640, 480),
var interactionManager = new PIXI.interaction.InteractionManager(renderer)
interactionManager.defaultCursorStyle = "crosshair" // a native html/css cursor style
That looks fine at first but the problem here is that this InteractionManager seems to batch-register all events applied to PIXI object via the .on(event, callback) event-binding function per instance.
That means that if there would be a second instance of this InteractionManager, all events would be bound twice and therefore triggered twice. I had this exact issue.
So I needed to revert my changes and try to access the default InteractionManager. Somebody in the HTML5GameDev forum told me to access it like this:
renderer.plugins.interaction
knowing that I tried the following:
renderer.plugins.interaction.defaultCursorStyle = "crosshair"
My events now worked properly again. But the cursor change did not happen. However debugging the line told me that the property defaultCursorStyle was successfully set to "crosshair". Now I'm looking for a way to make this change visible.
My question:
Is there a better way to change the cursor style than the mentioned one above? If no, how can I make my default cursor change visible after setting the new style to the default InteractionManager?

There's a setCursorMode method in the docs, guess it's what you need.
const app = new PIXI.Application({ height, width })
app.renderer.plugins.interaction.cursorStyles.default = 'crosshair'
setTimeout(() => {
app.renderer.plugins.interaction.setCursorMode('pointer')
}, 1000)
Whenever cursor leaves the renderer, PIXI resets cursor mode (here's exactly the line). So you might want to set new cursor mode as default each time you change it.
function changeCursorMode (cursorMode) {
app.renderer.plugins.interaction.cursorStyles.default = cursorMode
app.renderer.plugins.interaction.setCursorMode(cursorMode)
}
app.renderer.plugins.interaction.cursorStyles.crosshair = 'crosshair'
changeCursorMode('crosshair')

How do I add a hyperlink to a shape in a KineticJS canvas?

I'm working on my homepage which consists of several shapes being drawn in the middle of the screen using an HTML5 canvas and KineticJS, but I've run into a roadblock trying to add hyperlinks to each of the shapes. My code thus far (which doesn't work) is:
midHexPoly.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
midHexPoly.on('mouseout', function() {
document.body.style.cursor = 'default';
}); //this works, the mouse changes to a pointer on
//mouseover, and back on mouseout
var linkTest = "http://www.google.com"
midHexPoly.on('click', function() {
window.open = linkTest;
});
After much googling, I can't seem to find any resolutions to this issue, and there doesn't seem to be a function in Kintetic for redirecting or adding hyperlinks.
Is there any way to fix this? Thanks!

window.open is a method, so you should call it like so: window.open(linkTest);. You'll find more info, such as its arguments on w3schools. I suggest using the second argument (name) to make sure all links will open in the same new window.
If however you want to open all links in the same window as your homepage, you could use this piece of code instead of window.open: location.assign(linkText);.
If those don't work, make sure the click event is fired by adding a console log inside your callback function, e.g.
midHexPoly.on('click', function() {
console.log('clicked on midHexPoly');
});
or
midHexPoly.on('click', function() {
alert('clicked on midHexPoly');
});

TinyMCE opened in jqueryUI modal dialog

When using tinyMCE in a jqueryUI modal dialog, I can't use the hyperlink or 'insert image' features.
Basically, after lots of searching, I've found this:
http://www.tinymce.com/develop/bugtracker_view.php?id=5917
The weird thing is that to me it seams less of a tinyMCE issue and more of a jqueryUI issue since the problem is not present when jqueryUI's modal property is set to false.
With a richer form I saw that what happens is that whenever the tinyMCE loses focus, the first element in the form gets focus even if it's not the one focused / clicked.
Does some JavaScript guru have any idea how I might be able to keep the dialog modal and make tinyMCE work?

This fixed it for me when overriding _allowInteraction would not:
$(document).on('focusin', function(e) {
if ($(event.target).closest(".mce-window").length) {
e.stopImmediatePropagation();
}
});
I can't really take credit for it. I got it from this thread on the TinyMCE forums.
(They have moved their bugtracker to github. tinymce/issues/703 is the corresponding github issue.)

It seems there are no propper solution for this issue yet. This is kind of a hack but it really worked for me.
Every time you open the Dialog remove the text area and re add it like following,
var myDialog = $('#myDialog');
var myTextarea = myDialog.find('textarea');
var clonedTextArea = myTextarea.clone(); // create a copy before deleting from the DOM
var myTextAreaParent = myTextarea.parent(); // get the parent to add the created copy later
myTextarea.remove(); // remove the textarea
myDialog.find('.mce-container').remove(); // remove existing mce control if exists
myTextAreaParent.append(clonedTextArea); // re-add the copy
myDialog.dialog({
open: function(e1,e2){
setTimeout(function () {
// Add your tinymce creation code here
},50);
}
});
myDialog.dialog('open');

This seems to fix it for me, or at least work around it (put it somewhere in your $(document).ready()):
$.widget('ui.dialog', $.ui.dialog, {
_allowInteraction: function(event) {
return ($('.mce-panel:visible').length > 0);
}
});

OpenLayers SelectFeature control with hover delay?

Using OpenLayers, I have a OpenLayers.Control.SelectFeature installed on a layer, with the hover option set to true. When creating the layer I call
<layer>.events.register("featureselected",...)
and
<layer>.events.register("featureunselected",...)
to register functions that create and destroy a popup. This all works fine. Now I want to add a small delay before the popup is created in order to avoid the popup flickering that currently occurs when moving the mouse across multiple features. However, I can't seem to figure out how to do this. I did find the OpenLayers.Handler.Hover handler, which has a delay option, but I don't know how to combine that with the SelectFeature control (if I even can).

I think this post has some valuable info, which I'm about to verify. Some answers down, someone talks about the flickering.
edit: In case you are making your own labels, I noticed the effect is less when you raise the labelOutlineWidth . It seems that only the letters of the label count as 'hover' and not the whole PointRadius radius. When you make the label outline too big, the label looks like a fly that hit a windscreen though (not a square but it follows the label contours, the letters more specifically).
update: apparently this is why when you hover a text label , check this out: pointer events properties. set this attribute (pointerEvents: ) in your OpenLayers.Style and try value 'all' and the others. It sure makes a difference for me.

I bind my feature selections a little different, here's a quick (untested) example that should get you what you need.
var timer,
delay = 500, //delay in ms
hover = new OpenLayers.Control.SelectFeature( <layer> , {
hover: true,
onSelect: function (feature) {
// setup a timer to run select function
timer = window.setTimeout(function () {
// your select code
}, delay);
},
onUnselect: function () {
// first cancel the pending timer (no side effects)
window.clearTimeout(timer);
// your unselect code
}
});
<map>.addControl(hover);
hover.activate();