Here's my question!

check this website: http://landing.ancestry.com/military/vday/
When I resize the window, so does the flash document, it changes it's geometry to fit my window not just shrinking or expanding the whole document, but managing it.

Lots of code might be involved, so what I'm looking for is a tutorial that teaches you how to make it.

Apprecicate, thank you.

Recommended Answers

All 3 Replies

Member Avatar for iamthwee

When you say resize the window do you mean, change the resolution?

No, I mean it literary, resize the browser window.. something like:

var stageResizer:Object = new Object();
stageResizer.onResize = repositionContent;
function repositionContent(){
// Here you write the code to repositionate your elements.
// Something like this. :)
};
Stage.addListener(stageResizer);

But I need something more detailed, something better.

ssuming the foregoing is correct, here is a script that will center the content of a Web pabe both horizontally and vertically between a header and footer, as long as the content is smaller than the window height.

If the content, including header and footer, exceeds the window height, the footer will float to the bottom of the content.

If the window width is smaller than content width, the content will remain at a fixed width.

/* 
   Title:   Center Content with Floating Footer Script
   Author:  Frank C. Jamison
   Revised: July 25, 2006
*/

window.onload   = initPage;
window.onresize = initPage;

function initPage() {
	
  // Get main page elements
  var header =  document.getElementById('header');
  var content = document.getElementById('content');
  var footer  = document.getElementById('footer');
	
  // Get element dimensions
  var headerHeight   = header.offsetHeight;
  var contentHeight  = content.offsetHeight;
  var contentWidth   = content.offsetWidth;
  var footerHeight   = footer.offsetHeight;
	
  // Calculate height of content
  var pageHeight     = (headerHeight + contentHeight + footerHeight);

  // Get browser window dimensions
  var windowHeight = getWindowHeight();
  var windowWidth  = getWindowWidth();

  // Set minimum page width
  minPageWidth = 759;
  minWidth = minPageWidth - contentWidth;
	
  // Adjust window height to account for horizontal scrollbar in non-IE browsers
  if (navigator.appName.indexOf("Microsoft") == -1) {
    if (windowWidth < minPageWidth) { windowHeight  -= 20; }
    windowWidth -= 20;
  }
	
  // Calculate white space for element positioning 
  var availHeight    = windowHeight - pageHeight;
  var availWidth     = windowWidth - contentWidth;
	
  // Adjust white space calculations for minimum dimensions
  if (availHeight <= 0) { availHeight = 0; }
  if (availWidth <= minWidth) { availWidth = minWidth; }
	
  // Set content area on page
  setContent(availHeight, availWidth, content, headerHeight, pageHeight, windowHeight);
	
  // Set footer area on page
  setFooter(availWidth, contentWidth, footer, footerHeight, pageHeight, windowHeight);
}


function setContent(ah, aw, c, hh, ph, wh) {
	
  if (ph < wh) {
    c.style.position = 'absolute';
    c.style.left = (aw / 2) + 'px';
    c.style.top = ((ah / 2) + hh) + 'px';
  }
	
  else { 
    c.style.position = 'relative';
    c.style.top = '0px';
    c.style.left = (aw / 2) + 'px';
  }
}


function setFooter(aw, cw, f, fh, ph, wh) {
  f.style.width = cw + 'px';
  f.style.left = (aw / 2) + 'px';

  if (wh > ph) {
    f.style.position = 'absolute';
    f.style.top = (wh - fh) + 'px';
  }
	
  else {
    f.style.position = 'relative';
    f.style.top = '0px';
  }
}


function getWindowHeight() {
  var windowHeight = 0;
	
  if (typeof(window.innerHeight) == 'number')
    windowHeight = window.innerHeight;
	
  else {
    if (document.documentElement && document.documentElement.clientHeight)
      windowHeight = document.documentElement.clientHeight;
	
    else {
      if (document.body && document.body.clientHeight)
        windowHeight = document.body.clientHeight; }; };
	
  return windowHeight;
};


function getWindowWidth() {
  var windowWidth = 0;
	
  if (typeof(window.innerWidth) == 'number')
    windowWidth = window.innerWidth;
	
  else {
    if (document.documentElement && document.documentElement.clientWidth)
      windowWidth = document.documentElement.clientWidth;
		
    else {
      if (document.body && document.body.clientWidth)
        windowWidth = document.body.clientWidth; }; };
	
  return windowWidth;
};

-->
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.