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.

SeanPercy42
SeanPercy42Author
Known Participant
August 22, 2013

It's exactly like you said. In the resize function just test with a condition to see if you should proceed with changing the values.

Just pre-test your calculation on navBarIcons.x above like so:

if ((stage.stageWidth / 2 - 420) <= 200)

{

     navBarIcons.x = int(stage.stageWidth / 2 - 420);

}

I'm just wrapping the math in an int() because it will cut off the decimal and everything after so you always stay on a whole pixel (it helps with clarity, especially on text).


I figured everything out, thank you so much for all your help!

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