User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 391,551 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,602 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser:
Views: 2465 | Replies: 3
Reply
Join Date: Mar 2006
Posts: 11
Reputation: preist is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
preist preist is offline Offline
Newbie Poster

Tutorial Flash Document with dynamic geometry!

  #1  
Aug 1st, 2006
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.
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Aug 2005
Posts: 4,663
Reputation: iamthwee is just really nice iamthwee is just really nice iamthwee is just really nice iamthwee is just really nice 
Rep Power: 16
Solved Threads: 297
iamthwee's Avatar
iamthwee iamthwee is offline Offline
Industrious Poster

Re: Flash Document with dynamic geometry!

  #2  
Aug 1st, 2006
When you say resize the window do you mean, change the resolution?
Member of: F-ugly code club

Join today don't delay!
Reply With Quote  
Join Date: Mar 2006
Posts: 11
Reputation: preist is an unknown quantity at this point 
Rep Power: 3
Solved Threads: 0
preist preist is offline Offline
Newbie Poster

Re: Flash Document with dynamic geometry!

  #3  
Aug 1st, 2006
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.
Last edited by preist : Aug 1st, 2006 at 7:28 am.
Reply With Quote  
Join Date: Jun 2004
Location: Hemet, CA
Posts: 427
Reputation: FC Jamison is on a distinguished road 
Rep Power: 5
Solved Threads: 17
Colleague
FC Jamison's Avatar
FC Jamison FC Jamison is offline Offline
Posting Pro in Training

Solution Re: Flash Document with dynamic geometry!

  #4  
Aug 3rd, 2006
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;
};

-->
Last edited by FC Jamison : Aug 3rd, 2006 at 10:19 am.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb Site Layout and Usability Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the Site Layout and Usability Forum

All times are GMT -4. The time now is 9:21 pm.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC