Member Avatar for bobvaz

I have searched many sites looking for this solution and have been unsuccessful. In dynamic drive, there is a new collapsible content box (Switch Content Script II) that almost does what I need. To wit:
Switch Content Script II adds contact/expand functionality to any content using icons such as an image as the toggling interface. Apply it to content on your page you wish to give the viewer the option to hide. Cookies are used to remember and recall each content's last state.
Instead of displaying coded content, I would like to display 4 contnet boxes, each displaying content from a server side file using php. I get this to work fine as coded in DD. Since I am displaying the contents of 4 files, I would like to limit the display in each box to the first five lines in the file, with [more] appended to the last line. When the [more] is selected, the remaining lines would appear in the content box, extending its size and overlaying the other boxes. Any help on this would be appreciated. Thanks in advance.

  • 2 Contributors
  • 3 Replies
  • 100 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

A practical, robust approach is to generate a short preview server‑side and let client code expand the rest in place while switching the expanded box to absolute positioning so it overlaps siblings. This keeps a single page (contrary to 's multi‑page idea) but avoids heavy initial downloads by offering either an inline hidden remainder or fetching the remainder on demand. This also gives precise control over what counts as a "line" and lets the UI animate or set z‑index cleanly.

Server side: produce a preview (first N lines) and a hidden remainder, escaping output for safety.

<?php
// simple helper: return preview and remainder as HTML-safe strings
function split_file_preview($path, $lines = 5) {
  $fh = fopen($path, 'r');
  if (!$fh) return array('preview'=>'', 'rest'=>'');
  $i = 0; $preview = ''; $rest = '';
  while (!feof($fh)) {
    $ln = fgets($fh);
    if ($i++ < $lines) $preview .= htmlspecialchars($ln);
    else $rest .= htmlspecialchars($ln);
  }
  fclose($fh);
  return array('preview'=>nl2br($preview), 'rest'=>nl2br($rest));
}
?>

Client side: toggle the hidden remainder; when expanding, set the box to absolute and use getBoundingClientRect plus scroll offsets to lock its position and apply a higher z‑index; revert styles on collapse. Store original inline styles so the box can be restored exactly.

var rect = box.getBoundingClientRect();
var sx = window.pageXOffset||document.documentElement.scrollLeft;
var sy = window.pageYOffset||document.documentElement.scrollTop;
box._orig = box._orig || { pos:box.style.position, left:box.style.left, top:box.style.top, w:box.style.width, z:box.style.zIndex };
box.style.position = 'absolute';
box.style.left = (rect.left+sx)+'px';
box.style.top  = (rect.top+sy)+'px';
box.style.width = rect.width+'px';
box.style.zIndex = 9999;

Notes and cautions: define "line" policy (newline vs wrapped line) before counting. Escape file content to prevent XSS and never expose raw file paths — sanitize inputs or map IDs to server files. For large files prefer AJAX-on-demand to keep initial DOM small. Add aria attributes and keyboard handlers for accessibility. Test the absolute positioning approach across browsers and on scroll; if overlay complexity grows, consider a modal/lightbox fallback for the full content.

Recommended Answers

All 3 Replies

Member Avatar for MidiMagic

You are making this too hard.

Why not just have a truncted version of each file displayed on your master page (including an a tag for the link), and open a new page for each of the four files?

Member Avatar for bobvaz

Thanks for the reply - will give it a try, but client may not like second page. Any other options?

Member Avatar for MidiMagic

Why is he insisting on only one page?

You can put buttoms on each of the pages to change to any of the other pages.

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.