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

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');

Related

How to attach file objects to html elements?

A user can browse multiple img files with an <input type="file"> element. The selected file objects are than stored temporarily in an array and the attributes are shown to the user in a table build from div's and other elements.
This way the user can browse and select files multiple times and add them to the table or even delete some of them again before he finally upload the collection to the server.
While it is not a problem to append objects to an array and appending rows to a table so they match 1:1. It's getting tricky to delete rows from a table and elements of the array and keeping them matched.
So my question is if there is a nicer way to add/bind file objects to html elements, so when elements are deleted binded file objects are deleted as well ?
BTW I'm using pure JS.
I answer my question myself:
The easiest way to bind objects to a html element is described here by Osacr Paz. I tested it and it solves my problem.
Here is the answer copied from the link :
The easiest way is to do this:
<div id="myDiv">...</div>
In javascript
var myDiv = document.getElmentById('myDiv');
myDiv._variable = variable;
You can recover this later if you want, simply using the same myDiv variable, or, again, with document.getElementById() or any other DOM method that returns the element.
var variable = myDiv._variable;
The downside of doing it this way is that you can't specify, in the server, or from the markup, which object you want to attach to the element.

How to attach a DOM object to a div (propertyeditor)

I am building a small property editor in Javascript. I have a list of objects with some properties (x, y, width, height) for drawing a "<div>" inside a div. Im making so that the user can drag images/divs around.
All these objecs are in a list and then I traverse the list and render the view. Next to the view I have a small editor with the properties. I can add multiple of these elements to the editor/viewer and of different kinds (text and images, and maybe other stuff in the future).
My question is this:
How do I make it so that when editing a property (like the X-coordinate) for the "first/top" box, it updates ONLY the corresponding object in the list (NOT in the view, the view is just being rendered from the list of objects). I'm adding all these in runtime and I have no round-trip to server. I'm cool with having a save button on each item.
You could follow some naming patterns when creating elements and creating property editors. Example, when new image element button is clicked, create image element with id : el_img_01 and property editor for corresponding image element as id : el_img_prop_01.
so for all images will have (el_img_, el_img_prop_), in order to know the img element for a property editor, we can read the property editor id, and remove the 'prop' text from the id to get the associated DOM element.
Several steps here:
You need a way to identify the elements, for instance, one
id.
You have to be able to select one element and be aware of
it. You can put a select containing all the ids, for example.
Now you can select the element, you just need to load/save
the values from your form.

How to completely remove the canvas element with Jquery/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();

How to get element from template by javascript?

I dont know good method how to get DOM element from template by javascript.
Example template:
<script id = "template" type="text/template">
<div>text1</div>
<div>text2</div>
<div>text3</div>
</script>
For example i want get div with "text2"
There is ways which i know, all of them are bad:
Add "class" to all elements - it breaks semantics (class created for CSS). In big projects you must use very long names for classes, its very inconvenient.
Get element by his number (index) - when adding a new element, you must rewrite old numbers in your code.
I see a couple of options:
If you don't want to use class , you can use a data-* attribute.
Assuming you load the template once and then duplicate its contents as desired, you could put id values on the elements in the template, which you then remove when cloning them and adding them to the document (so you don't end up with the same id on more than one copy of the element, which would be invalid and probably counterproductive).
Maybe you can also create as many templates as you need.
One for each div.
If you need to get each div at a time you must set ids to them ... of course you can also browse the dom inside script element to find the one you're interested in ...
Home this helps
Regards
mimiz

How can I set a css ":hover" on a DOM created element in JavaScript?

I'm using the DOM to manage a JSON response from an AJAX function I'm running. The script I'm writing needs to be completely portable, so I am defining the styles for the created elements on the fly (meaning, no linking to an external CSS, and no providing CSS in the HTML doc itself, because I won't have control of the doc).
I'd like to create a hover effect on some of the elements.
example:
#myDiv:hover { background:#000000; }
Is there a way to define that in the DOM? Or do I have to use mouseover?
You can dynamically create and manipulate stylesheets. See here for some of the cross-browser issues with this approach.
I've got a wrapper function lying around which works around some of them; using it, the code would read
document.createStyleSheet().addRule('#myDiv:hover', 'background:#000000;');
you may create element with predefined class:
.h:hover{color: #c00}
var elem = document.createElement('div');
elem.className = 'h'

Categories