I have an html page with an svg image embedded on it.
The SVG image is in a separate file. The SVG image references a javascript file which performs some image positioning functions.
The HTML page references the same javascript file and has a control for zooming into the image and resetting the image zoom and position, the functionality of this is implemented in the javascript file.
What I want to do is when the image is re positioned set a flag so that the I know when to show and hide the reset image button on the html page.
Because I have referenced this javascript file twice I have 2 separate versions running and hence the flag being set by the svg reference isn't the same flag being read by the html reference. The problem is that the image positioning is initiated by the svg image and the zooming is initiated by the html page.
Any ideas how I can solve this problem?
May I suggest you do the following, let the script inside the SVG hide/show the button by calling the html page script.
The external script you access like this:
window.parent.toggleButton();
Then the button itself could be your "flag", if it is hidden or not.
I also found this code, which exist in the SVG file, where you can pass a reference to the SVG's clicked element to your html page:
function sendClickToParentDocument(evt)
{
// SVGElementInstance objects aren't normal DOM nodes,
// so fetch the corresponding 'use' element instead
var target = evt.target;
if(target.correspondingUseElement)
target = target.correspondingUseElement;
// call a method in the parent document if it exists
if (window.parent.svgElementClicked)
window.parent.svgElementClicked(target);
}
Src: https://stackoverflow.com/a/10516723/2827823
Related
I am using createFileInput() from the P5.js library. More info on that here.
function setup() {
noCanvas();
var fileInput = createFileInput(addedFile);
}
When I use this in my setup function it simply adds the element to the end of the HTML page. I cannot figure out how to place the input anywhere within my page, like between some span tags.
I've tried .html(), .value() and even tried placing it directly inline in the HTML file but I cannot get it to appear where I want it. Usually it just disappears or I get an error.
I've tried using this tutorial and looking at the js to figure out how he placed it in the middle of the page but I can't even find that!
Any help on this would be much appreciated!
Your first stop should be the reference.
Specifically, it looks like the parent() function does what you want: it takes an element you created in your P5.js code (in your case, your fileInput variable) and moves it into a parent element in the HTML webpage.
So your first step would be to create an html webpage that contains an element (probably a <div>) in the middle of the page. Then you'd write P5.js code that calls the parent() function and passes in the id of that <div> element.
I am using a content script in my chrome extension that gets the src attributes (from several images from the user's active tab) in order to display them in my popup HTML file that is displayed when a browser action is clicked. Certain images that I need to display use src values that are paths to local files.
Example:
src = "/image/17_x.px?wid=450&hei=500&bgcolor=xxx...etc"
the src starts with a "/", has a brief identifier denoted by "17_x", followed by various attributes of the image. Also itemprop = "image" is set on these image elements. The "xxxx...etc" is just showing that other attributes and values are listed in the src
When I create a new image element with this "local" src, the desired image is not displayed in my popup html file. Is there another way that I can use this image data to display the image within my extension?
Cause: element.getAttribute("src") or $(...).attr("src") return the original html markup.
Solution: use DOM property instead element.src or $(...)[0].src to return a full URL.
holder.js
I want to dynamically add a placeholder image to my page.
Inserting it like so doesn't work:
$('<li>',{class:'file-item'})
.append($('<img>',{'data-src':'holder.js/150x150'}))
.append($('<span>',{class:'file-name'}).text(file.name))
.appendTo('#file-list');
Because the holder script has already ran and isn't searching for new elements.
We can, however, run it again manually:
Holder.run()
But then it will scan all the elements that are already added.
So...is there way I can get holder.js to create and give me back a DOM element so I can add it manually without re-running the whole thing?
Pass a Node as the images property to Holder.run and you'll be able to run Holder on any individual image. Holder itself doesn't create a DOM element, it just changes the src value.
Code:
var image = $("<img>").attr({
"data-src": "holder.js/300x200"
})
Holder.run({
images: image[0]
});
image.appendTo("body");
Live example here: http://jsfiddle.net/imsky/p3DMa/
I'm trying to dynamically insert some HTML/JS/CSS on command. (holding
off this code for page loading speed). I found a neat way
of doing this, inserting a HTML5 tag pointing at the html-
file which in turn references the css and js, like so:
function toggleObject() {
var object = document.getElementById('myObject');
if (!object) {
var e = document.createElement('object');
e.setAttribute('data', 'testing.html');
e.setAttribute('id', 'myObject');
// inject data into DOM
document.getElementsByTagName('body')[0].appendChild(e);
} else {
document.getElementsByTagName('body')[0].removeChild(object);
}}
The only problem with this is that upon inserting the tag the object (height, width and position as defined by css) flashes white before loading which isn't very attractive.
Is there a remedy for the ugly white flash?
Note! I experimented with toggling the visibility property of the object and firing up a loader div, but I can't figure what event would be able to call off the loader and turn visibility back on when the object is fully injected in the DOM. In end I settled for just a timeout of 1 sec, which feels less than optimal..
Try setting the visibility to hidden when you create the OBJECT Element and then setting it to visible once it has been appended to its parent Node.
I have links such that when the user clicks on them, the DOM is quckly updated using the methods below.
Basically, I just set the innerHTML document to the text and the page updates.
However I would like html code with other html code when applicable. This is the only place in my .js file that has a significant amount of text. How do I move this?
/*
link - quick dom links - would like to find a way to move this into xhtml where it belongs
*/
function o2(a,b)
{
return document.getElementById(a).innerHTML=b;
}
function l1()
{
........
I would recommend putting all of the possible HTML into your HTML file. Assign a unique id to each element and use CSS to hide them all or all but one by default (using 'display: none'). Then your javascript function can simply change CSS based on which html fragment you need to be visible.