Skip to main content
SeanPercy42
SeanPercy42
Known Participant
August 21, 2013
Answered

Trying to float my icons so they're always at the bottom right corner of browser window.

  • August 21, 2013
  • 1 reply
  • 3531 views

I am currently using div tags to accomplish this but because I'm now encorporating a preloader, I'm unable to use this method. I have elements that need to float including my logo on the bottom left, my icons on the bottom right, and a quote request tab on the top right of the window. I also need my main_mc to center itself to the browser window. I was able to do all of this using CSS and DIV tags but because I would like to use a preloader, need to figure out how to do it in AS instead.

Someone mentioned on a previous discussion that I could use javascript somehow to position the items, but don't know much of it. If someone could post a relatively easy solution to accomplish this I would really appreciate it.

This topic has been closed for replies.
Correct answer sinious

What kind of preloader is this? Are you using some kind of javascript preloader that shades the site and preloads the page? How does preloading affect your need to change the CSS? Does the SWF resize itself?

If you're not very familiar with JavaScript it's best to get a framework that will handle things like browser differences for you. jQuery is a very popular and easy to use framework. You could use the AS ExternalInterface class to inform JavaScript that your Flash has finished loading and use jQuery to measure and align your SWF object. You'd need a resize event handler to adjust the position as needed also in the event the user resizes the browser.

Although I think just keeping it simple with CSS is best. I just don't understand why a preloader isn't allowing CSS to work unless the SWF actually changes size.

An example of a JavaScript function using jQuery that ExternalInterface could call to reposition the SWF, assuming the SWF has the id="MainSWF":

// javascript

$(document).ready(function()

{

          // resize listener

          $(window).resize(function() { AlignElements(); });

          // make sure SWF is absolute positioned

          $('#MainSWF').css({'position':'absolute'});

          // call it to start

          AlignElements();

});

function AlignElements()

{

          // use top/left properties to align SWF

          var left = Math.round(($(window).width() - $('MainSWF').width()) / 2) + 'px';

          var top = Math.round(($(window).height() - $('MainSWF').height()) / 2) + 'px';

          $('#MainSWF').css({'left':left,'top':top});

}

AS:

// AS, called when SWF finished preloading

ExternalInterface.call("AlignElements");

Make sure you download and load jQuery into your pages so it's available or that won't work. There's plenty of other JavaScript frameworks you might like more or are overall lighter on page load for this basic stuff. Looking around doesn't hurt.

1 reply

sinious
siniousCorrect answer
Legend
August 21, 2013

What kind of preloader is this? Are you using some kind of javascript preloader that shades the site and preloads the page? How does preloading affect your need to change the CSS? Does the SWF resize itself?

If you're not very familiar with JavaScript it's best to get a framework that will handle things like browser differences for you. jQuery is a very popular and easy to use framework. You could use the AS ExternalInterface class to inform JavaScript that your Flash has finished loading and use jQuery to measure and align your SWF object. You'd need a resize event handler to adjust the position as needed also in the event the user resizes the browser.

Although I think just keeping it simple with CSS is best. I just don't understand why a preloader isn't allowing CSS to work unless the SWF actually changes size.

An example of a JavaScript function using jQuery that ExternalInterface could call to reposition the SWF, assuming the SWF has the id="MainSWF":

// javascript

$(document).ready(function()

{

          // resize listener

          $(window).resize(function() { AlignElements(); });

          // make sure SWF is absolute positioned

          $('#MainSWF').css({'position':'absolute'});

          // call it to start

          AlignElements();

});

function AlignElements()

{

          // use top/left properties to align SWF

          var left = Math.round(($(window).width() - $('MainSWF').width()) / 2) + 'px';

          var top = Math.round(($(window).height() - $('MainSWF').height()) / 2) + 'px';

          $('#MainSWF').css({'left':left,'top':top});

}

AS:

// AS, called when SWF finished preloading

ExternalInterface.call("AlignElements");

Make sure you download and load jQuery into your pages so it's available or that won't work. There's plenty of other JavaScript frameworks you might like more or are overall lighter on page load for this basic stuff. Looking around doesn't hurt.

SeanPercy42
SeanPercy42Author
Known Participant
August 21, 2013

Basic Flash preloader that's on the 1st frame and AS3 tells it to go to frame 2 once the complete file has been loaded. Here is the very short code I'm using to accomplish this:

function loadProgress(my_content:ProgressEvent):void{

    var percent:Number = Math.floor((my_content.bytesLoaded*100)/my_content.bytesTotal);

    preloader.progressBar.gotoAndPlay(percent);

}

function loadComplete(e:Event):void{

    currentFrame+1;

}

loaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);

loaderInfo.addEventListener(Event.COMPLETE, loadComplete);

Basically I was importing each of my elements (flash icons, logo, quote request drop down form) into seperate div tags and positioning them with CSS so they would float when the browser window is resized. But then I read that you can't use a flash preloader to load an HTML page, so I'm needing to move those elements into my main flash file and have them reposition using AS3 and/or Javascript. For some reason my website's not displaying on the hosting site I just signed up with or I could show you a visual.

sinious
sinious
Legend
August 21, 2013

So you moved the edge-of-browser elements inside Flash? Are you making your SWF fill the browser? If so you'll need to just pay attention to properties (after load) like resize above, but the AS versions.

e.g.

stage.addEventListener(Event.RESIZE, _resizeHandler);

function _resizeHandler(e:Event):void

{

     // reposition elements code

}

Then you're just using basic available properties like stage.stageWidth / stage.stageHeight to determine what x/y position to put your elements at.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices