I am trying to append SVG element circle to an existing SVG element , i want to circle to sit on top of map i.e overlay but i am unable to do it properly , i have created JSfiddle for it .Please let me know how to achieve this.
MY code is here
How to append at exact co ordinate i am using below code
document.getElementById('us').appendChild(c1);
You should remove onmouseover attribute from html and bind mouseover event in javascript code, something like this pseudocode:
var item = document.getElementById('id');
item.addEventListener('mouseover', function() {
var x = getXPosition();
var y = getYPosition();
circleElement.setAttribute('cx', x);
circleElement.setAttribute('cy', y);
}, false);
You should also show/hide element when needed with css classes, inline style or any other method.
Related
i have multiple div with same classname but i want to change only one of their opacity, the one that i interact with a mouse or touch. How can i do it? The below code changing all of theirs properties, apparently. Full .js code is here if anyone would like to take a look at: https://jsfiddle.net/b7y6mfv4/
var target1 = document.getElementsByClassName('beforeLabel');
var target2 = document.getElementsByClassName('afterLabel');
for (var i=0; i<target1.length; i++) {
target1[i].style.opacity = beforeAfter;
target2[i].style.opacity = beforeAfter2;
}
Based on your fiddle, change document.getElementsByClassName to evt.target.getElementsByClassName and get rid of the loop.
Target lets you reference only the element that is the target of the event.
Your JS is looping through all elements with either of those two class names and applying opacity. What you can do is make use of the mouse events target property, which will give you the specific element which has been interacted with, and apply the opacity to that.
document.addEventListener('mouseover', (event) => {
if (event.target.className.includes("beforeLabel")) {
event.target.style.opacity = 0.5;
}
});
You can see a full working example here.
I need a simple and pure javascript script that toggle a custom tag (like <mytag>some text</my tag>) in a contenteditable div. Any ideas?
You cannot outright replace an element's tag with JavaScript.
However, you can create an element on the fly, and set the contents of that element to be the original element.
This can be seen in the following:
var e = document.getElementsByClassName('editable')[0];
e.onclick = function() {
var d = document.createElement('textarea');
d.innerHTML = e.innerHTML;
e.parentNode.replaceChild(d, e);
}
<div class="editable">Text</div>
As for toggling it, you'd need to set the element back to a <div>.
Hope this helps! :)
I have this code which creates an element but the problem i am facing is it appends it at the very bottom of the page, in order for this to work i need it to be positioned in a certain place in the DOM how can i do this ?
var x = document.getElementById('options_10528_1');
var pos = document.getElementById('options-10528-list');
x.onclick = function(){
var elem = document.createElement('div');
elem.setAttribute("class","uk-warning");
elem.innerHTML = "Unfortunately, we cannot supply this medicine. Please consult your GP.";
document.body.appendChild(elem);
}
afterWhichNode.parentNode.insertBefore(newNode, afterWhichNode.nextSibling);
This code will insert a node after the afterwichNode, thats using vanilla javascript, if you are using jquery, just use .after()
Currently you are appending the element in the body tag, it will always goes at bottom. So if you want to append the element in a specific position, you have to append it in that container. let say you want to append it in "pos", you can do this:
pos.appendChild(elem);
I am developing a canvas application on which a user can draw various shapes. Various elements are drawn using d3.js. I want to use jsplumb to connect two SVG elements for which I need the id of each element when it is clicked on. Each element has an id that is generated by code when it is drawn and thus I don't know it before hand.
Is there a javascript implementation by which I can get the id of the elements on which I click? I wouldn't preferably want to add '' on each element that is being drawn on the canvas.
Can anyone suggest a way to do this?
You can use something like this
<script type='text/javascript'>
doClick = function (sender){
alert(sender.id);
}
</script>
<div id='a1' onclick='doClick(this)'>div1</div>
<div id='a2' onclick='doClick(this)'>div2</div>
https://jsfiddle.net/dy47dbvp/3/
You can simply access an element's ID using that element's attributes
var elemID = droppedElement.attr('id');
To get the id of the clicked Element:
$('#container').on('click', '.droppedElement', function (e) {
var elemID = droppedElement.attr('id');
}
The container is your canvas id and the droppedElement is the variable that captures the svg element or the clone of the svg element(if that is your case)
I want to use jQuery to add an image that is on a div to another div, but when I do it the image disappears from the original div. I would like the image to be copied and not moved. Here is the current code.
$( ".rectangle" ).click(function() {
$('.bigRectangle').css('display','block');
$(".notBig").css('opacity',0.2);
var x = $(this).find('img');
$('.bigRectangle').append(x);
});
This is because a DOM node can only have one parent. Appending it to another element will move it to being a child of the other element. Use the .clone method to clone the img element before appending it.
$('.bigRectangle').append(x.clone());
All you would need to do is perform this:
var x = $(this).find('img').clone();
I would recommend you check out the function clone "https://api.jquery.com/clone/"
In your code you are essentially moving the image, when you assign the image in the variable "x" it holds the dom element in that variable. It is a reference. Matter of fact you are holding all images in the document.
Hope this helps, please let me know.
Mr Alexander