LogoLogo
  • Home
  • Projects
  • About
  • Contact

Auto Resizing Popups with Actionscript

Devon O. · January 20, 2008 · Actionscript, Flash · 0 comments
1

While, normally I dislike popups, they are definitely an occasional necessary evil. This little utility class can make them much easier to create. Simply pass it the path of an image file (i.e. a .jpg) and it will open up a popup window containing that image and automatically resize itself to fit the picture. Only the path to picture is required, but you can also include a title to display in the popup window as well as specify the usual features of a popup (scrollbars, resizable, status, etc.).

So far I’ve only tested in IE and Firefox on Windows XP, so if someone tries it on another browser/system, let me know if it works. Admittedly, I’m not that javascript savvy.

The util class:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
* Use to create a popup an image file that automatically resizes to fit its content.
* Works ONLY with image files.
*
* usage:
*
* OBO_Popup.pop("path/image.jpg", ["Window Title", "yes", "yes", "yes", "yes", "yes", "yes"]);
*
* Only the path to image is required - all other arguments are optional. If not supplied,
* the default window title is "Image".
*
* @author Devon O.
*/        
 
package com.onebyonedesign.extras {        
 
    import flash.external.ExternalInterface;        
 
    public class OBO_Popup {        
 
        public static function pop(url:String, title:String = "Image", resizable:String = "no", toolbar:String = "no", menubar:String = "no", status:String = "no", directories:String = "no", location:String = "no"):void {
            if (ExternalInterface.available) {        
 
                //    does browser use layers or divs?
                var hasLayers:Boolean = ExternalInterface.call('document.layers');        
 
                //    open popup
                ExternalInterface.call('imgWin=window.open', '', '', 'scrollbars=no, resizable=' + resizable + ', toolbar=' + toolbar + ', menubar=' + menubar + ', status=' + status + ', directories=' + directories + ', location=' + location + 'scrollbars=0, width=50, height=50, left=50, top=50');        
 
                //    begin html
                ExternalInterface.call('imgWin.document.writeln', '<script>                \\\\\\\\');                
 
                //    resize function                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'function resizeWin() {\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var imageHeight = document.images[0].height, imageWidth = document.images[0].width;\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( !imageHeight || window.doneAlready ) { return; }\\\\\\\\');    // images are disabled                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'window.doneAlready = true;\\\\\\\\');    // Safari and Opera stuff                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var win = window; win.resizeTo( imageWidth + 200, imageHeight + 200 );\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var currWidth = 0, currHeight = 0, de = win.document.documentElement, bod = win.document.body;\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( win.innerWidth ) { currWidth = win.innerWidth; currHeight = win.innerHeight; }\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'else if( de && de.clientWidth ) { currWidth = de.clientWidth; currHeight = de.clientHeight; }\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'else if( bod && bod.clientWidth ) { currWidth = bod.clientWidth; currHeight = bod.clientHeight; }\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( window.opera && !document.childNodes ) { currWidth += 16; }\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'win.resizeTo( imageWidth = imageWidth + ( ( imageWidth + 200 ) - currWidth ), imageHeight = imageHeight + ( (imageHeight + 200 ) - currHeight ) );\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'}\\\\\\\\');                
 
                //    title function                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'function writeTitle() {\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'document.title = "\\\\\\\\' + title + \\\\\\\\'";\\\\\\\\');                
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'}\\\\\\\\');                
 
                ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'</script>');
                ExternalInterface.call('imgWin.document.writeln', '');        
 
                if (hasLayers) {
                    ExternalInterface.call('imgWin.document.writeln', '<layer left="0" top="0"></layer>');
                } else {
                    ExternalInterface.call('imgWin.document.writeln', '
<p style="left: 0px; position: absolute; top: 0px">');
                }        
 
                ExternalInterface.call('imgWin.document.writeln', '<img src="https://blog.onebyonedesign.com/wp-admin/'%20+url%20+%20'" alt="Loading image ..." />');        
 
                if (hasLayers) {
                    ExternalInterface.call('imgWin.document.writeln', '');
                } else {
                    ExternalInterface.call('imgWin.document.writeln', '      
 
');
                }
                ExternalInterface.call('imgWin.document.close');
                ExternalInterface.call('return', 'false');
            } else {
                trace ("Cannot call javascript functions from current container.");
            }
        }
    }
}

and an example document class:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
package {    
 
    import com.onebyonedesign.extras.OBO_Popup;
    import flash.display.Sprite;
    import flash.events.TextEvent;
    import flash.text.TextField;
    import flash.text.TextFieldAutoSize;
    import flash.text.TextFormat;    
 
    public class PopupExample extends Sprite {    
 
        public function PopupExample():void {
            var fmt:TextFormat = new TextFormat("_sans", 12);    
 
            var html:String = "Click <font color="#0000dd"><a href="event:test.jpg|Picture Digest">here</a></font> to open a resizing popup.\n\n";
            html += "Or, click <font color="#0000dd"><a href="event:test2.jpg|Saucer Men">here</a></font> to open another."    
 
            var textField:TextField = new TextField();
            textField.defaultTextFormat = fmt;
            textField.autoSize = TextFieldAutoSize.LEFT;
            textField.addEventListener(TextEvent.LINK, openPopup);
            textField.htmlText = html;
            textField.x = 50;
            textField.y = 50;
            addChild(textField);
        }    
 
        private function openPopup(te:TextEvent):void {
            var argumentArray:Array = te.text.split("|");
            var url:String = argumentArray[0];
            var title:String = argumentArray[1];
            OBO_Popup.pop(url, title);
        }
    }
}

which yields:

EDIT: I just realized that class is all but completely illegible thanks to the AS parsing script I use. Below is a link to the actual .as file for anyone actually interested..

OBO_Popup

  Facebook   Pinterest   Twitter   Google+
  • OBO fPlayer (desktop AIR flv player) updated
    January 01, 2009 · 9 comments
    3361
    2
    Read more
  • FOTB In Review – Day 1
    September 21, 2009 · 0 comments
    1584
    3
    Read more
  • Unity3D Endless Runner Part II – Scrolling Worlds
    January 02, 2017 · 6 comments
    Happy New Year, all! And here it is, my first blog post of 2017. Unfortunately,
    12028
    49
    Read more

Sorry, the comment form is closed at this time.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang