Member Avatar for SameerMughal

hi all,

I am new to web development but have managed to develop a database driven tree menu. The problem is that even though I enabled scrolling in my menu frame, content is not very nicely readable as it goes to the second child level and the file names are quiet long.

I was just wondering if there is any way of Frame auto resize such if the content goes beyond the origional width the frame automatically resize - i.e not the scrolling but the frame width.

It will be great if some one could answer this one.

Regards,

Sameer.

  • 2 Contributors
  • 4 Replies
  • 121 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Quick reality check: embedding the menu as part of the page is the cleanest solution (fewer layout quirks, easier styling and accessibility) — this is the direction was pointing to. If that is not an option and the menu must live in a separate frame/iframe, there are two robust paths: let the parent measure the iframe content (same-origin), or have the iframe tell the parent its width (cross-origin) using postMessage.

Same-origin auto-resize (parent reads content)

// parent page
const iframe = document.getElementById('menuFrame');

function resizeMenuFrame() {
  try {
    const doc = iframe.contentWindow.document;
    const w = Math.max(doc.documentElement.scrollWidth, doc.body.scrollWidth);
    iframe.style.width = Math.min(Math.max(w, 200), 1200) + 'px'; // clamp to sane bounds
  } catch (err) {
    console.warn('Cannot access iframe content (cross-origin):', err);
  }
}

iframe.addEventListener('load', resizeMenuFrame);

Cross-origin (use postMessage)

// inside iframe (menu)
function sendWidth() {
  const w = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
  parent.postMessage({type: 'menuWidth', width: w}, 'https://your-parent.example');
}
window.addEventListener('resize', () => { clearTimeout(window._t); window._t = setTimeout(sendWidth,150); });
sendWidth();

// parent listens for the message and sets iframe.style.width (with origin checks)

If changing the frame setup isn’t possible, improve the menu itself so it doesn’t force huge widths: truncate long filenames with text-overflow: ellipsis, allow breaks for long tokens with overflow-wrap/word-break, or present long labels via tooltip/detail pane instead of one long line. Always clamp the width you set from scripts to avoid breaking the layout, debounce resize messages, and validate postMessage origins to stay secure.

References: MDN docs for iframe element, postMessage, Element.scrollWidth, and CSS text-overflow/overflow-wrap are useful for implementation details (see the MDN site for each API).

Recommended Answers

All 4 Replies

Member Avatar for almostbob

Frames are dead and buried
have been superseded for most uses by shtml includes, (shtml php asp)
as an include your menu would be in the page, and not need any sizing

Member Avatar for SameerMughal

Hi there,

Can please tell me how can I achive it? Any tutorial or some guiedlines.


Thanks,

Sameer.

Member Avatar for almostbob

May be some errors, this my understanding
ssi php asp, are, dunno, extensions to html I suppose
ssi php asp includes provide a templating system,
never sure what words to usethey run on the server and output html pages
if all the pages carry the same header and menu and footer and the content is different
then in php it can be

<?php 
include ('header.php');
include ('menu.php');
?>
<!-- 
regular html for the body 
as long or as short as you need
-->
<?php include ('footer.php'); ?>

header.php includes the doctype declarations necessary for proper html validation, css, scripts, et al.
footer php likewise
menu php is a menu

>=thousands of pages all with the same theme
when you need to alter it you only need to alter 1 file
framesets or Iframes need to be tweaked on different screens and browsers to get the look right.

the output to the browser is complete syntactically correct html, tailored to OS capability (if the author is good) by the headers sent when the browser requests the page.

Choice of language depends on the support given by the host, Apache/linux mostly use php
MS mostly ASP
just about everybody can use shtml, but the other two seem more capable (personal opinion, no supporting data)
server languages can produce web sites, without much input, just from directory lists,
drop a file in the root, - menu
drop a file in a folder of images, - slideshow
drop a file in a folder of movies, - utube clone

Depending on what your server supports: a script to do what you want is already sitting on HotScripts.com or CNet.com (or one of the other repositories) waiting for download

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.