Member Avatar for nouth

How can I display a string at any x and y coordinated position of a webpage? Using only JavaScript, unless I have to have the text already included in the HTML and then hide or reveal it using javascript? I can already do that but I can't use x and y values and it's not what I want. Everything is input dependant.

I don't want to use JQuery or any such. And I would also like to use % for height and width positions.

I want like this demo http://oldstatic.travisberry.com/demos/canvas-text-demo/index.html
It comes from here http://www.travisberry.com/2011/05/write-text-anywhere-with-html5-canvas/
But I want JavaScript solution, not HTML.

Imagine this is the only HTML.

<html>
<body>
</body>
</html>
Edited by nouth
  • 2 Contributors
  • 2 Replies
  • 198 Views
  • 22 Hours Discussion Span
  • Latest Post Latest Post by nouth

Dani AI

Generated

Short answer: create the text element entirely in JavaScript, set its CSS position to either fixed (so percentages are relative to the viewport) or absolute (percentages are relative to its positioned parent), set left/top with percent strings, and append it to the document. This requires no jQuery and works with an empty HTML body — it follows what hinted at (create the element in JS) and matches 's request for percent-based placement.

A minimal, reusable approach — create a DIV, set textContent (safer than innerHTML), apply position: fixed if you want coordinates relative to the viewable area, and optionally use transform: translate(-50%, -50%) to treat the given x/y as the element center instead of its top-left. Use pointer-events: none if the label should not intercept mouse events and white-space: nowrap to avoid wrapping.

function placeTextAt(xPct, yPct, text, opts) {
  opts = opts || {};
  var el = document.createElement('div');
  el.textContent = text;
  el.style.position = opts.fixed ? 'fixed' : 'absolute';
  el.style.left = xPct + '%';
  el.style.top = yPct + '%';
  if (opts.center) el.style.transform = 'translate(-50%, -50%)';
  el.style.whiteSpace = 'nowrap';
  el.style.pointerEvents = opts.interactive ? 'auto' : 'none';
  el.style.zIndex = (opts.zIndex || 1000).toString();
  if (opts.className) el.className = opts.className;
  document.body.appendChild(el);
  return el;
}
// example: placeTextAt(50, 10, 'Hello', { fixed: true, center: true });

Notes and troubleshooting: percent left/top are relative to the containing block — use fixed for viewport positioning or ensure the parent has position: relative and known size for absolute. If you need layout-independent coordinates, consider vw/vh units. For many labels or heavy animations, DOM nodes can be slow — use canvas or SVG for performance. Always use textContent/ARIA for accessibility and avoid injecting untrusted HTML.

Recommended Answers

All 2 Replies

Member Avatar for pzuurveen

first create te code in html to make sure you get what you want.
Then create that html-code using javascript with document.createElement

commented: thanks :) +1
Member Avatar for nouth

Thanks, much appreciation, I guess I need to learn more about this DOM.

Edited by nouth
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.