How to completely remove the canvas element with Jquery/JavaScript? - javascript

I have a canvas object that loads on my page dynamically from a jQuery plugin. It has no wrapper, no id or class associated to it. But I need to remove it after
$(window).resize(function)() {...}
takes place. I have tried using jQuery's
...next().remove();
technique, so that the neighboring div element can remove it from the DOM, but I am getting issues. specifically, additional elements on my page are also getting removed. Is there a healthy way to about this?
Thanks!

If you are not using multiple canvas elements, simply
$('canvas').remove();
Will remove all matched elements on the page. http://jsfiddle.net/vj6NP/
If you do have multiple canvas on the page and would like to remove only one, you could select which one to remove using nth-of-type.
For example to remove the first instance http://jsfiddle.net/vj6NP/3/: -
$('canvas:nth-of-type(1)').remove();

How many canvas elements do you have on the page? If there is only one; and you don't plan to ever add any in the future it might be simplest just to do
var dynamic_canvas = $('canvas');
if(dynamic_canvas) dynamic_canvas.remove();

The easiest way is to keep a reference to the canvas element added to the document then remove it using JQuery:
this.canvas = document.createElement('canvas');
//later...
$(this.canvas).remove();

Related

How to insert an object from SVG file using javascript/html?

I have an SVG file with a bunch of different objects on one layer. Is there anyway to display a specific object from the file on a webpage without first splitting the objects out into their own file?
That’s a perfect use case for the use element ...
https://developer.mozilla.org/en/docs/Web/SVG/Element/use:
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, and then pasted where the use element is
https://css-tricks.com/svg-use-with-external-reference-take-2/ explains how to make use of it for an SVG icon system, where all the icons are combined into one single SVG. Might be adaptable for your use, or at least give some more insight on how this works.
Sure. Give an ID or a class to the object in the SVG code. Then you can hide the objects via
.mySvgObjectClass {
visibility: hidden
}
or in Javascript
document.querySelector('.mySvgObjectClass').style.visibility = 'hidden';
or in jQuery:
$('.mySvgObjectClass').css('visibility', 'hidden');

How to use common js function for two divs containig elements of identical ids?

I have common jQuery function and two div tags. Both div tags have different names but both containing elements of identical ids now i want to use this common Jquery function for them both?
I have implemented common function but it's not working for both.
Here's link to my jsfiddle -jsfiddle.net/xS7zF/1/
In my jsfiddle there are two div tags namely example1 and example2 and both tags have elements of identical ids. Function is working fine for first div but not for second.
please help me to sort out this.
Yeah, under the hood, jQuery selection on an ID will use the Document.GetElementById() function implemented by the browser, which is really fast, but (i guess depending on the browser) will stop after it finds the first element, since ID's should be unique and no further searching is needed after the first one is found.
For instance, rename the divs with id="eb" to class="eb" and you can still target specific elements using $("#example1 .eb") and $("#example2 .eb")
UPDATE:
Using your new Fiddle I created this: http://jsfiddle.net/xS7zF/5/
I cleaned up a lot of code and hopefully you can see what I have done. I changed all elements that appear twice from id to class. Now, when you attach an event to an element using $(".classname").click(), it attaches to all the elements. In the handler function where you set HTML and do your show()/hide(), you don't target a specific element using it's ID, but you find it relative to the element that does the event. You can do this using parent(), parentsUntil(), next(), find(), etc. Check jQuery docs for all possibilities. So for instance, the change-handler attaches to all inputs with name=Assets. But instead of doing $("#b1").show(), I go to the parent of the specific input that fires using $(this).parent(). Then I find the element with a class=".b1", which it will only find the one that is next to this specific input and I set the HTML to just that element.
Since there is another input, the same actions happen when THAT input changes, but instead it finds IT's parent, and finds the element with class=".b1" that is next to IT. So both divs with input are contained since they act on elements relative to itself and not across the document.
For extra fun and to show you how flexible this way of programming is, here is a fiddle with the Javascript-code unchanged, but with the exact same question-div copied 8 times. No matter how many times you repeat this, the same code will act on as many divs as you create since everything works relative. http://jsfiddle.net/xS7zF/7/
Hopefully this helps, the rest is up to you!
ID's must be unique, you should not repeat them. You could replace id with class and in the jQuery function do (".ub").each() or manually referencing the object using eq(x). e.g. (".ub").eq(1).
You shouldn't assign same id's to different elements.
You CAN but you SHOULDN'T. Instead of giving the same id, use class
IDs must be unique, try fix this, change to classes.
You can try something like this:
$("div div:first-child")
instead of
$("#eb")
But depends of the rest of your page code. So, change to classes first and use
$(".eb")
when jQuery / javascript find the first ID it would ignore the rest, please read more about it
http://www.w3schools.com/tags/att_global_id.asp

Isotope plugin: How to implement 'insertAfter" method?

I'm trying to add an element to the middle of the elements list.
I have tried adding it using jQuery with insertAfter method and applying isotope('reLayout').
However, this doesn't really work.
$('#insertAfter a').click(function() {
var $newEl = $(fakeElement.getGroup()).first();
$newEl.insertAfter($container.children().eq(3));
$container.isotope('reLayout');
return false;
});
jsfiddle
Any ideas how to make it work?
Thanks
Isotope does not allow you to manually insert an element into a specific position since it's supposed to automatically handle the element placement. One way to solve your problem is to add a special attribute to every element that can be used to sort the elements in the required order. Then, configure Isotope to use the created attribute to sort the elements. When you need to insert an element, assign a value to that attribute of the new element that will place it into the required position.
Please see the solution on jsfiddle: http://jsfiddle.net/9V2Mj/20/

jQuery data() cleared when drag and drop

I have a contenteditable container with some images inserted. Also I have defined some internal values to these images with the jQuery.data() function.
Everything is working well untill I move these images inside the contenteditable. Then, all data associated with the images is gone.
Do you know how to avoid this? or if there is a better solution to assign information to DOM elements?
I used to assign values to DOM elements within their data- attributes.
So instead of data(), i'd use
set: $('image').attr('data-attr1', 'value1');
get: $('image').attr('data-attr1');

How do I "refresh" element in DOM?

I've got an empty DIV element in which I append images by using function createElement("img") and append them with appendChild. So now I've got DIV element full of images.
I would like to use one button to clean this DIV and add new images in it simultaneously.
Thanks for your help
Are you just looking for method replaceChild? Or you could remove all child elements before adding new images:
// assuming yor div is in variable divelement
while (divelement.firstChild)
divelement.removeChild(divelement.firstChild);
what do you mean by clean? If you just want to empty it, you can do
document.getElementById('mydiv').innerHTML = '';
And then add on whatever new images you want.
While both setting innerHTML and calling removeChild() in a loop will clear the contents out of the DIV, the innerHTML method is going to be much faster due to the nature of browsers today.

Categories