How to call another div that has buttons into p5 div

Dazzid

Hello I have a technical problem, I need to add this div http://museupicassobcn.org/ontologia/entity/ArchivedDocument/esborrany-de-ladlan/es into a call that p5 makes: ficha = createDiv(""); ficha.position(40, height+10); ficha.size(width*0.95, height); ficha.id("ficha"); ficha.class("myFicha"); ficha.hide();

and then I call it like this: httpDo('http://museupicassobcn.org/ontologia/entity/' + enterInfo,[],'txt',showFicha,getFicha); And it works well, but the buttons doesn't work in my p5 canvas, but they do in the independent link. What do I miss here? Thanks David

blindfish

What do I miss here?

Your http request fetches the HTML content of the page. It sounds like you're then taking all of this and injecting it into a div. That's bad on many levels; primarily:

1. semantically incorrect: there should only be one html tag on the page
2. because the injected code isn't interpreted as a unique page, resources that make it work (e.g. CSS links in the page head) probably won't be loaded. The scripts may well load (since they're at the bottom of the page and not in the head); but may not work as expected because of the semantically incorrect HTML structure of your page; or they may rely on CSS that isn't loaded.
3. if the original source isn't yours you're likely to be in breach of copyright

If you want to embed content from another site within your page a far better approach is an iframe; though even that may be considered by some to be a breach of copyright...

Dazzid

copyright is not an issue here, all pages are mine, or design inside my team. It is a technical problem I need to resolve, so from your response I should resolve it using iframe. Is somewhere an example of that on p5? The main problem is that I need a responsive structure with picture and text, exactly the link I added before, and I'm trying to embed into a div this responsive (bootstrap) page on it, actually it seems to work, but that gallery of images doesn't, I know this is not an elegant solution, then what might be? Thanks for the help

blindfish

What are you actually trying to achieve here? Will you be interacting in any way with a canvas element or are you just working with the DOM? I ask because if you're just doing DOM manipulation there are far better JS libraries available - e.g. jQuery, or even just raw JS. From what I can see the p5 DOM library looks fairly limited.

To insert an iframe dynamically you'd need to use:

var container = createElement('iframe');
container.attribute('src', 'http:'+'//museupicassobcn.org/ontologia/entity/' + enterInfo);

...and then set any other required attributes with repeated calls to attribute(). It's not clear how'd you'd then position this in your page: the documentation is unclear:

Appends to the container node if one is specified, otherwise appends to body.

I see no way to pass a container node in the documentation for createElement; so you may have to make another function call...

In jQuery you could do it like this:

$('<iframe 
src="http: //museupicassobcn.org/ontologia/entity/' + enterInfo + '"' + 
'frameborder="0" scrolling="no" 
width="200" height="100"/>').appendTo('[anySelector]');

Dazzid

Hey Blindfish! Thanks for the help. It is resolved