Sometimes you need to make a login screen and center the login form vertically and horizontally. I made this crossbrowser example to create a loginscreen screen. Look at the source how it is been done. You need a heightsetter span to center the content vertically.
Ever wanted to have your logo to be printed when background printing is disabled and for accessibility reasons you don’t want to add the image tag in your markup and control the image source in your stylesheet.
I heard this week that you can still print images inside an html document without having an image tag in the content.
The magic trick: When you want the logo to be clickable you can set the anchor to be displayed as list-item and set the list-style-image. This image will be printed even when the background printing is disabled and you have a clean accessible markup.. Be aware that not all the style sheet rules can be used for the text inside the anchor, like negative text-indent, vertical-align and overflow:hidden (FF mac doesn’t show the tag);
Sometimes you want the last div layer or iframe to be resized and have the scrollbar in stead of getting a scrollbar on the whole page. Here is an example script that calculates the height and width of the container respecting a given bottom and right space.
You need some extra functions to calculate the computed style and offset of the page. (note the initial height must be the smallest size if you are in standards mode)
This is a sample code that does the work and here are some examples with the remaining functions. (Look in the source).
/**
* Dynamically resize the wrapper div, which is generated by the table tag.
* @param {oElement} object html node
* @param {iHeightSpace} integer extra bottom space
* @param {iWidthSpace} integer extra right space
* @param {bSetWidth} boolean if width must be reset
* @param {iPercentage} integer percentage of total available height
* @param {iMinHeight} integer minimum height of container
* @param {bSetHeight} boolean if height must be reset
*/
function maximizeDiv(oElement,iHeightSpace,iWidthSpace, bSetWidth, iFraction,
iMinHeight, bFixHeight) {
var EXTRA_BOTTOM_SPACE = (iHeightSpace)? iHeightSpace : 0;
var EXTRA_RIGHT_SPACE = (iWidthSpace)? iWidthSpace : 0;
var MINIMUM_HEIGHT = (iMinHeight)? iMinHeight : 60;
var bFixHeight = (bFixHeight)? bFixHeight : false; // default also change the height
iFraction = (iFraction)? iFraction : 1; // set fraction of available height
var wrapper = (oElement)? oElement : document.getElementById('scrollContainer');
var iWidth= xGetComputedStyle(wrapper, 'width', true);
var iHeight = xGetComputedStyle(wrapper, 'height', true);
// get height of document
var iDocumentHeight = (document.documentElement.clientWidth > 0) ?
document.documentElement.clientHeight : document.body.clientHeight;
// get the top offset and add iExtraSpace
var objectPosition = getOffset(wrapper);
var iOffsetTop = objectPosition.top; /* only set when container is positioned relative */
if(!bFixHeight){
var iHeight = Math.floor(Math.max((iDocumentHeight - iOffsetTop -
EXTRA_BOTTOM_SPACE)* iFraction, MINIMUM_HEIGHT)) // minimum height 2 rows of 21px
wrapper.style.height = getCssValue(iHeight);
}
// get width
if (bSetWidth){
var documentWidth = (document.documentElement.clientWidth > 0) ? document.documentElement.clientWidth : document.body.clientWidth;
iWidth = Math.max(documentWidth - objectPosition.left - EXTRA_RIGHT_SPACE,300); // minimum width
wrapper.style.width = getCssValue(iWidth);
}
return [iHeight,iWidth];
}
We had a problem with printing tables with thead and tfoot on internet explorer for a while. When printing long tables an extra page would be printed before the table and the borders and page headers and footers did not print right at the table spanned pages. This was such a big issue for the client that we called the help of microsoft support ;not for free;-( The support pages on microsoft won’t help you with this problem so I’ll tell you here. After a long test period this solved our problems:
The problem was in de rule:
.containerOutline,.containerLeft,.containerRight,.container,.hspace { overflow-y:auto; }
The solution:
If you have a rule for overflow-y: auto remove this for printing. In the print stylesheet remove “overflow-y:auto;” by setting the overflow rule only for screen (@media screen) in a dedicated IE6 css file.
for the game platform editor from ffilmation I edited my previous flash swf which calculated the average pixel color in an image. Now create an image in black and white color and the swf creates xml based on the average black color in the image.
or load the source it here (its not so clean.. there are more functions in it which I don’t use for this example but maybe you can have some use of it)
In actionscript3 it is possible to add a movieclip to the stage by the class reference. It’s not so obvious though
To add a movieClip on stage you have to use the addChild method. You can get the movieclip reference in actionscript3 when you have added a classname on the library item by the use of getDefinitionByName. Be sure you use the DisplayObject for referencing the returned movieclip
example:
package
{
import flash.display.MovieClip;
import flash.utils.getDefinitionByName;
public class Background extends MovieClip
{
public function Background()
{
var _Class:Class = getDefinitionByName("backgroundmc") as Class;
var a:MovieClip = new _Class();
a.name = "a";
addChild (a);
}
}
}
example creating background movieclip:
package {
import flash.display.DisplayObject;
import flash.display.Sprite;
public class myDocClass extends Sprite {
public function myDocClass(){
var a:DisplayObject= new Background();
addChild (a);
}
}
}
Made this controller for a walkcycle in an educational flash game.
See:willie webwijs website
Took me a while to think about how I could do it. So made the walkcycle with 90 degree turn and stand and start in four directions put the frames after each other and marked every part (walkcycle, turn, stand, stopping, starting). Made an excel sheet with on one axe the animation cycle I needed to go and the other axe the current animation cycle. And converted this table into a two dimensional array in flash.
And on the cross I put the cycle I needed to jump to first after the current cycle has ended. Every time after I reached the end of the animationpart I look what the next part must be and jump to that. I will end at the target animation. and stop jumping. see: the animation controller here
With the aid of the tag CANVAS in not IE browsers and with the filter DXImageTransform possibility on IE Browsers you can add reflections (wetfloor effect) under your image just with a little bit javascript.
view the site http://cow.neondragon.net/stuff/reflection/ for the javascript
The trick is by unobtrusive javascript and just three classes on your image you add reflection.
add class “reflect”
add class “rheight##” where ## is the height in percentage for the gradient. default = 50
add class “ropacity##” where ## is the amount of opacity. default = 50
This is an example how to create a typeing effect without having to use masks. (you can repeat the text or add a pipe character )
import mx.utils.Delegate;
class myfolder.typingText { // replace myfolder with the folder structure you use
private var delayTime:Number;
private var destinationMc:MovieClip;
private var messageText:String;
private var currentChar:Number;
private var includePipe:Boolean; // include pipe character after text
private var doRepeat:Boolean; // repeat typeing after 5 sec
public function typingText(mcBot, mcRoom){
this.delayTime = 50;
this.destinationMc = null;
}
public function typeText(){
var dest = this.destinationMc;
if (dest && dest.html != null) {
dest.html = true;
dest.text = this.messageText.substr(0, this.currentChar);
if(this.includePipe)
dest.text = dest.text + "|";
var myText = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel est. Cras convallis quam non diam. ";
// textarea
var typing1 = new typingText();
typing1.startTyping(myText,200, taTypingText,true, false );
// dont use pipe in text area because a CR is generated and pipe end up under the last line
//inputtext
var typing2 = new typingText();
typing2.startTyping(myText.substr(0, 40),80, tiTypingText, true, true );
// textfield
var typing3 = new typingText();
typing3.startTyping(myText,500, dtTypingText, false, false );