i am trying to add a new image when i click the z pass button
my this part of the code is not working
http://jsfiddle.net/UjJEJ/24/
$(".ctaSpecialOne").click(function(){
alert("clicked");
$(this).parent().unbind("mouseenter").children("img").attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
});
You need to traverse to the sibling a since that's where your image is
$(this).parent().unbind("mouseenter").siblings('a').children("img").attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg");
http://jsfiddle.net/WAvVw/
EDIT
You need to traverse to get the element which you bound hover to
$(this)
.closest('.specialHoverOne') // get element you bound hover to
.unbind("mouseenter") // unbind event
.end() // start over at this
.parent() // get parent
.siblings('a') //find a sibling
.children("img") // get children img
.attr("src", "http://www.onlinegrocerystore.co.uk/images/goodfood.jpg"); // change src
http://jsfiddle.net/mwPeb/
I'm sure there's a better way to traverse but I'm short on time right now
Related
I'm enjoying learning about KonvaJS with react and typescript.
I have a click handler on component that will create a new star at the x and y coordinates where it was clicked. It does this by adding the x and y coords to state.
That coord array is mapped over which renders the stars in the layer.
What I want to know is for recommended ways for the Stage component to know whether a blank space has been clicked or if a star has been clicked.
If a star has been clicked I want to remove it from state, but currently the stage is adding a new star there.
Is there a way for a child component, a star, to communicate up to its grandparent, the stage, letting it know it has been clicked, and therefore remove this star, not add another?
You could check the target of the click, using a function similar to that posted below, and check an attribute on that target. If it matches, call remove on it. Otherwise, add a new star.
stage.on('click', function (e) {
console.log(e.target)
if(e.target.attrs.name === "star") //this would require you adding a name: "star" attribute to all star objects, but could be done another way
{
//code to remove star
}
else {
//code to add star
}
});
What I wanna do: I have a basic line chart which is initialy load with an array of data (series: [...]) which creates me lets say x lines. I will also render x checkboxes above the chart. On click on one of the checkboxes the corresponding line should disappear or appear. Therefor I am listening to the click event and then I want to add or remove a line.
The problem: I can not figure out how to replace the whole series with a new one. What I have found is the setData() method, but that only works on an item of the data array. I also found the methods addSeries() which will add an item. And remove() which will remove a specific item. The problem is, I dont know which item is which. What I would like is to hide a line or show them, but have the full x lines in the data series all the time. I think.
I also found the method update() which will let me pass a new configuration object to the chart, but its not working if i pass the option 'series: newData (array)'.
I am either looking for an option to pass the full data array at the beginning and then hide or show a line, or, to overwrite the full series data at any given them with a new array.
Hopefully thats understandable and someone can point out what I am missing! Thanks!
I have found a solution. I would load the whole data array in the beginning and show or hide certain series for the initial display with the option visible:false.
On click of the checkboxes I need to find the right series and then there are the methods show() and hide() to manipulate that visible property on runtime.
chart.series[myIndex].show();
chart.series[myIndex].hide();
You can use setVisible method for series and bind checkboxes with the series:
var checkboxes = document.getElementById('checkboxes').children;
for (var i = 0; i < checkboxes.length; i++) {
(function(i) {
checkboxes[i].addEventListener('change', function() {
chart.series[i].setVisible(this.checked);
});
})(i);
}
Live demo: http://jsfiddle.net/BlackLabel/ur31g4j5/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setVisible
I would like to drag a svg element onto HTML element.
Not sure what a smart way to do so.
However, I think my method is dirty, but I think I can start drag from svg element with d3.behavior.drag() and on drag function of d3, I am going to clone a copy(please think it is simply a circle object) and let jquery ui handle the drag events.
The problem is I don't know how to trigger drag event on newly created jquery element.
var drag= d3.behavior.drag()
.on("drag", function(d) {
// make a Clone html object .dragging-node
$('.dragging-node').attr('draggable', true);
$('.dragging-node').trigger('dragstart');
});
var node = vis.selectAll("g.node")
.data(nodes)
.enter().append("svg:g")
.attr("class", "node")
.call(drag);
Any idea how to start drag for this newly created clone object?
Or is there any smarter way to get what I want?
Any help would be appreciated!
I did something like this once, and it worked ok for simple stuff, but after some time it became clear that using jQueryUI's Draggable is saner, since it's much more robust. I also needed to use Droppable functionality in conjunction; maybe your needs are less demanding. If so:
You don't need to artificially trigger events from the cloned element (aka "drag helper" in jQueryUI's draggable terminology). Instead, let the events continue to be triggered on the element that initiated the drag and has the drag behavior applied to it, but update the helper's position.
Something like this:
// Helper is the cloned element, which doesn't exist until dragging begins
// (alternatively it could pre-exist but be hidden)
var $helper = null
// the parent container of $helper,
// which presumably is outside of the SVG
var $helperParent = $('body')
var drag = d3.behavior.drag()
.on("dragstart", function(d) {
$helper = ... // somehow make the cloned helper, on dragstart (not on drag)
.appendTo($helperParent)
})
.on("drag", function(d) {
// determine the mouse position relative to the helper's parent
// (not relative to the SVG element that initiated the drag)
mousepos = d3.mouse($helperParent[0])
// update the helper's position
$helper.css({
left: mousepos[0],
top: mousepos[1]
});
})
.on("dragend", function(d) {
// remove (or hide) the helper
$helper.remove();
});
I want to drop a small pattern into a div or into the body and have the background for that div or the body, whichever received the pattern, repeat the pattern in x and y. See jsfiddle . If I drag the pattern from the Gallery div and drop it in the body, just the body gets the background pattern. Great! That works. But if I drop the pattern into the canvas div, both the body and the canvas get the pattern. How can I just have the canvas get the pattern when it's the drop target. I tried every way I know, at the end of the drop handler, to stop propagation . . .
e.stopPropagation();
e.stopImmediatePropagation();
return false;
but nothing is working.
Thanks for any help.
You had it almost right. I've modified your fiddle to show the change.
You needed to add the greedy property in the thumb_dropOps object. Modify your function to be the following:
var thumb_dropOps = {
drop : thumb_drop,
accept : '#pattern',
greedy: true
};
Here is a reference link: jQuery UI - Droppable API Docs
Per the jQuery UI Documentation:
By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element. The drop event will still bubble normally, but the event.target can be checked to see which droppable received the draggable element.
I try to show context menu jstree on hover event with using api context menu plugin, but it doesn't work. Have you any idea how to do this?
I had to implement the same thing. Here's what I ended up doing:
var $treeView = "myTreeList";
$treeView.jstree({
/* options */
})
.on('loaded.jstree', function() {
$(".myTreeList a").hover(
function(){
$treeView.jstree("show_contextmenu", $(this));
}
);
})
I just hooked up a hover event to every anchor in the tree when the loaded event fired (don't try to use the li elements or the event on a child will fire along with all it's ancestors). You could also use "on" instead of just hover and you wouldn't need to do this in the loaded event handler but that's what worked for me.