Member Avatar for namit

I came accross a website tha was all java css and html and it was websites within websties you also could move the ladyers around the websites and positon them

Does anyone know of a website like this

  • 3 Contributors
  • 4 Replies
  • 203 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tgreer

Dani AI

Generated

A lot of pages that look like "websites within websites" are just layered panels (absolute/fixed DIVs or iframes) made draggable with client-side JavaScript, while AJAX is only used when content needs to be fetched dynamically. 's AJAX note and 's DHTML correction both apply: the visible movement is client-side scripting (HTML/CSS/JS); AJAX is optional and only relevant for loading or updating panel content.

Two common approaches:

  • Embed full pages with an iframe when isolation is needed (note same-origin script access is restricted; use postMessage for cross-window comms).
  • Load fragments into DIVs via AJAX for tighter styling and scripting control. For simple movable UI, prefer DIV panels; use iframes only when the embedded page must remain a separate document.

Minimal, modern drag example (drop this into a test page — the header is the grab handle):

<div class="panel" style="left:100px;top:80px;">
  <div class="panel-header">Drag header</div>
  <div class="panel-body">Panel content</div>
</div>

<style>
.panel { position:absolute; width:320px; border:1px solid #ccc; background:#fff; user-select:none; }
.panel-header { background:#eee; padding:8px; cursor:grab; }
</style>

<script>
(function(){
  let z = 1;
  document.querySelectorAll('.panel').forEach(p => {
    const header = p.querySelector('.panel-header') || p;
    header.style.touchAction = 'none';
    header.addEventListener('pointerdown', function(e) {
      e.preventDefault();
      p.style.zIndex = ++z;
      const rect = p.getBoundingClientRect();
      const offsetX = e.clientX - rect.left;
      const offsetY = e.clientY - rect.top;
      const pid = e.pointerId;
      p.setPointerCapture(pid);
      function onMove(ev){ p.style.left = (ev.clientX - offsetX) + 'px'; p.style.top = (ev.clientY - offsetY) + 'px'; }
      function onUp(ev){ try{ p.releasePointerCapture(pid); }catch{}; p.removeEventListener('pointermove', onMove); p.removeEventListener('pointerup', onUp); p.removeEventListener('pointercancel', onUp); }
      p.addEventListener('pointermove', onMove);
      p.addEventListener('pointerup', onUp);
      p.addEventListener('pointercancel', onUp);
    });
  });
})();
</script>

Troubleshooting notes (relevant to ’s “nothing happens”): common causes include JavaScript disabled, the script running before the DOM is ready, the draggable element lacking position:absolute|fixed, other elements overlaying the handle (blocking pointer events), or browser lacking pointer-event support (add mouse-event fallbacks or use a library such as jQuery UI Draggable for broader compatibility).

Recommended Answers

All 4 Replies

Member Avatar for Dani

This can be done with AJAX I believe.

Member Avatar for tgreer

You mean DHTML, I think, rather than "AJAX". There are entire sets of objects and methods for drag/drop in HTML/Javascript/CSS (which is what "DHTML" means, essentially).

AJAX, on the other hand, involves using the XHTTP Request Object to give the appearance of dynamic-content sans server-roundtrip.

On my own site, for example, if you click one of the technical articles, you'll see a graphic header with my logo. Click it, and a "popup" DIV appears, which is draggable/positionable. That's done with DHTML, not AJAX.

Member Avatar for tgreer

The header on the technical articles pages themselves, not the index to the articles. For example:

http://www.tgreer.com/aspnet_html_04.html

Click in the white/gray header area.

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.