Forums » Impact Engine » Controlling HTML with Impact code

This is probably not possible because Impact includes its own font command, but I want to know if it's possible to move around images and specifically text boxes that are regular HTML styled with CSS.

I don't know the terminology well, but let's say I have

<div id="myTextBox">
This is HTML text that I want to move
</div>

Using Impact, can I access the (DOM element?) "myTextBox" and affect it in some way, like change the text, move it around on the canvas or turn visibility on/off?

I noticed this post which is interesting, but I can't get it to work. but I think it show you could possibly change the text, but maybe not move it onto the canvas.

http://impactjs.com/forums/code/html-buttons-plugin/page/1#post2933

It's all javascript. You could use jQuery or whatever you want to interact with the DOM, even within Impact. Or am I missing the point of the question?

Impact does has some basic DOM functions... see Utility Functions on http://impactjs.com/documentation/class-reference/ig-core

Really Impact is only built to work with the 2D canvas but nothing is really stopping you from mixing things together.

that's true! i mix and match a lot of stuff for my game.

Looks like you need something like

var element = ig.$( selector );

to grab the element you want to manipulate.

Hope that helps a little

When I put this in my impact code

var element = ig.$( "#test" );				
console.log(element);

The console shows:

<div id=​"test">​My test text​</div>​

It's returning the whole HTML line as a string. I want that DOM element to be an object that I can manipulate, such as

element.htmlText = "my new text";
element.position='absolute';
element.top=60 + 'px';
element.left=120 + 'px';

Is that possible? This following code doesn't work, but would I have to make it something like

var element = new Object;
element = ig.$("#test");

The console shows the markup as a convenience. Your element var is not a string representation, it is the actual HTMLElement.

This works:

var element = ig.$( "#test" );
element.innerHTML = "my new text";
element.style.position = 'absolute';
element.style.top = 60 + 'px';
element.style.left = 120 + 'px';

@dominic That works. Thank you!

I noticed that for accurate placement of elements, you have to make sure the canvas does not centre, as it does by default in Impact in the index.html file. Here I have changed margin:auto to margin:absolute:

#canvas {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: absolute;
			border: 1px solid #555;

The canvas must be at top left. This is probably not a great way to do things, but it works as long as you know you're not going to have anything outside the canvas.

Here is an example of regular HTML following the player around. This permits using accents (but the HTML code still has to be typed in the string).

Page 1 of 1