Quick Steps

Pop documentation

  1. Unzip the Pop.Zip File and begin a New Project or see Copy Pop into an Existing Project (please follow carefully)
  2. Call Pop.Init() & Pop.Box() to raise a Pop Dialog Box - see one of my examples in this documentation or one the many example methods of raising a Pop Box included with the download File

Pop - a Scalable, Flexible, Bespoke Message Dialog Box UI with Progressbar for Excel

A Pop Box with a SAP Style Dialog Skin - see 'Skinning' a Pop Box:

A Skinned Pop Box with a SAP Style Dialog Skin

A Skinned Pop Box with a SAP Style Dialog Skin smaller Icon and longer Message

Pop Icon - Spanner

Pop Icon - Spanner, Close



Pop with Camera Icon and demonstrating Psuedo Styles for Buttons

Please Note: this Thumb Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop with Thumb Icon

Pop Box with Upload / Cloud - please Note: this Upload / Cloud Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop with Upload Cloud Icon

An Awesome Pop Box Dialog - see Creating an Awesome Dialog:

An Awesome Pop Box Dialog

Pop Box Dialog with Justify Text and different Button Colours:



Pop Box Dialog downloading data from Access:



MORE Dialog Screen Shots --v

Lightbox Screen Shots --v

Progressbar Screen Shots --v

Acknowledgement

Pop was written by Mark Kubiszyn

  • the latest version is version 1.2
  • as per terms of the Software License, you should leave the following code attribution in situ

' © Copyright/Author:
' Mark Kubiszyn 2012-2018. All Rights Reserved
' Website/Follow:
' http://www.kubiszyn.co.uk/
' https://www.facebook.com/Kubiszyn.co.uk/
						

Purchase

You can Purchase Pop for Price £5.99 via FastSpring by clicking here

License

When you purchase Pop, you will recieve a License for a single use of this Software. Please read the License carefully and observe the Terms of this License

The Pop Files

Pop comes as a .ZIP archive, meaning that you need to extract the Files before using the Software. You get 2 main Files featuring 1 Logo, 6 Preloaders and 18 Icons (or Images) that are embedded into the Msg Workbook - I also include any Files that are loaded into memory as opposed to Strings of Base64 data. The first File is the main 'Pop.xlsm' File used to Copy into your Project, or to test and develop as your finished Software. The second File is 'Test.xlsm' which was a Copy of the main Pop Code Modules whereupon I installed just the 'Camera' Icon - this is ready for deployment - see Copy Pop into an Existing Project

Copy Pop into an Existing Project

After unzipping the Pop.zip File (right-click->Extract Files...) !Important, make a Backup of Pop.xlsm Open both Pop.xlsm (or your Backup File) and your own Macro-enabled Project in the same instance of Excel (I am using a new Project called 'Test.xlsm'). Press ALT+F11 to enter the VBA Editor, Expand all visible Nodes and in the Project Explorer Window, drag the UserForm Code Modules, 'frmLightBox' and 'frmPop' into your Project from the Pop.xlsm Project. Drag the 'Pop' and 'mdIcons' Code Modules into your Project (see the image below):

Pop Copy Files into your own Project

Now you have 2 choices. If you don't want to use all of the Icons that came with Pop.xlsm, then you can simply rename 'Sheet1' in the Code Module (or any Sheet) to 'shPop' and in the 'Pop' Code Module, run the InstallIcons() subroutine to install just the Icons that you want. After this you are good to go!

If you do want to use all of the Icons that came with Pop.xlsm, then select Pop.xlsm and click on the 'Sheet1' Worksheet. Right-click on the 'Sheet1' Tab and choose 'Move or Copy...'. In the 'To Book' Dropdown Combo, select your Project, choose 'Before Sheet' and select the first Sheet Name in your Project. !Important - DO NOT CHECK 'Create a Copy' - you need to 'MOVE' the 'Sheet1' Worksheet otherwise the embedded Icons will not follow the Worksheet. Press the 'OK' Button

That's it, now you can add an Example to one of your Project Code Modules and run a Pop Box - you can also use the InstallIcons() Subroutine to install your own Icons - have fun

You can also Copy the Code that is in the 'ThisWorkbook' Code Module if you want Pop to run a dummy load of the UserForms on opening which is helpful in pre-caching and making the very fist Pop Box that is displayed upon opening run quickly (it is not essential)

What is Pop?

Pop is a Scalable, Flexible, Bespoke Message Dialog UI for Excel built using VBA/HTML/Javascript/CSS in a WebBrowser Control, featuring Icons, Images, Text, Buttons, a Progressbar and Preloaders. It includes a Javascript Fade-out for the Dialog Box when closed by a Button or the small Close Cross

Pop, PopBox (or Pop.Box) for Excel, uses Boxes as containers for Text, Frames, Images, Icons, a Progressbar and its Buttons. You can build a Modal Dialog with LightBox and Timeout to display Messages, Alerts and Notifications to users. Pop is flexible with extensive configuration Settings to adjust everything from the Lightbox Colour and Fade, the Size of the Window and Icons (in Percentage %) through to the Style used for all of the Boxes, including the Backgrounds, Borders and Fonts

Each Box can be adjusted through the CSS Styles() Parameter, by passing CSS string of Pipe '|' delimited values, for example:
"'canvas-box', {'border':'1px solid #3FC59D','width':'400px','height':'300px'} | "

Pop is written using HTML, CSS, JavaScript and VBA and is an enhancement to some extent, on the previously released 'Msg' - check out some of my Screen Shots

Scaling

The Scale Factor Named Argument allows you to dynamically resize all of the visible Boxes including the 'Canvas' Box and main Window Size by passing a Percentage as a String (the default is '0%', no Scaling). For example, passing "25%" will resize everything by one quarter. This is a required Parameter in the Init() Subroutine and must be set to "0%" wrapped in quotes, for example, 'ScalePercentage:="0%"'

You can also Scale individual Icons, Pictures & Images, which will over-ride the Scaling detailed above, by setting the appropriate Named Arguement in the Pop.Box Subroutine ie. IconSizePercentage:="100%" for the actual size or IconSizePercentage:="50%" to display it at half of its normal size

In Summary, the subtle, but crucial difference between Scaling the Dialog Box and Logos, Icons and Pictures

- Dialog Box, will Scale as a multiplier ie. '50%' means to Scale by a further 50% of its original Width/Height
- Logo, Icons & Picture, '50%' means to Scale as a percentage of its original Width/Height

Pop with Ring Preloader at 100% using 'ScalePercentage:="0%"'

Pop with Ring Preloader Scale Image

Pop with Ring Preloader scaled down by a quarter of its size using 'ScalePercentage:="-25%"'

Pop with Ring Preloader Scaled to 25% Image

Pop with Ring Preloader scaled to double its size using 'ScalePercentage:="100%"'

Pop with Ring Preloader Scaled to 100% Image

Please Note: if you do not specify a Width and Height and just turn on the Canvas, the ScalePercentage is not applied

You can choose not to Scale Images by setting 'ScaleImages:=False' in the Pop.Init() Subroutine - see the Image below (these settings can still be over-ridden by using the CSS Styles() Parameter giving complete control over Images):

Pop with Ring Preloader Scaled to 100% but no Scale Images Image

You can choose not to Scale Fonts by setting 'ScaleFonts:=False' in the Pop.Init() Subroutine - see the Image below (these settings can still be over-ridden by using the CSS Styles() Parameter giving complete control over Fonts):

Pop with Ring Preloader Scaled to 100% but no Scale Fonts Image

Placeholders

All Pop Boxes have a Placeholder - a chasing ants style (without the animation - believe me, it's not easy to do in Javascript for IE7, I did try!). This is useful when you begin a new design. To turn the setting on, ensure that you have at least one or more Boxes set to True ie. 'Canvas:=True', 'TitleText:=True' in the Pop.Box() Function and then set 'Placeholders:=True' in the Pop.Init() Subroutine - you will see something like the Image below; and there you have it - no more staring at a Blank Canvas:

Pop Placeholders turned on Image

And here is an Image displaying all of the available Pop Boxes (it may look a little messy, but you can now differentiate the individual Boxes from one another. The Logo, Icon and Picture Boxes are coloured Red, the Title, Strapline, Message, Buttons, Progress Percentage and Progress Title are coloured turquoise, and the Canvas, Frames and Progressbar is coloured Yellow):

Pop All Placeholders turned on Image

Please Note: the Icons, Images or Preloaders are not displayed because we have not set the Object Names ie. 'Logo:=icoCalendar'. When we do, they will be displayed inside the Placeholders as per the Image below (also note that they will not adhere to any kind of alignment if the area they occupy is smaller than the size of the Image! You can see below that the 'icoSearch' Icon makes a lovely fit because the Icon Placeholder size is larger than the actual Image so it can be centered both Horizontally and Vertically. By the way, the Frame and Buttons have coloured Backgrounds to emphasise the areas they occupy similar to the Buttons

Pop All Placeholders turned on and all Icons with Images

Here is a Screen Shot of me building a 'Msg' emulation Dialog Box using the Placeholders to get my bearings in the design process - they are a great help/guide, I think my favourite bit of the entire Project!:

Pop All Placeholders turned on Building Msg Emulation Dialog

Alignment

All of the Pop Boxes have some kind of Horizontal and Vertical alignment to align Icons, Images, Preloaders and Text - they use a 'Fix' specifically designed to work with IE7 and can be set through '(Pop Box Name)-box' and '(Pop Box Name)-psuedo' via the CSS Styles() Function. The Horizontal alignment Parameters are 'left, right, center' and the Vertical alignment Parameters are 'top, middle, bottom'

Here are the default alignments by Pop Box (X, Y):


Logo Left, Center

Icon Center, Center

Picture Center, Center

Title Left, Center

Strapline Left, Center

Message Left, Top

Progress Title Left, Center

Progress Percentage Left, Center

Close Button Center, Center

OK Button Center, Center

Cancel Button Center, Center

						

The Horizontal alignment is set through the CSS Styles() Function like this:


Styles:="'title-box', {'font-family':'Verdana','font-size':'12px','color':'#5E585F','text-align':'left','top':'-8px','left':'30px','width':'340px','padding':'0px','z-index':'99'}"

						

The Vertical alignment is set through the CSS Styles() Function like this:


Styles:="'title-psuedo', {'vertical-align':'bottom'}"

						

You can over-ride the fixed alignments by setting the 'position' as 'absolute' and then passing your own alignment Parameters into the JavaScript like this:


Styles:="'title-psuedo', {'position':'absolute','top':'15px','left':'15px','text-align':'left'}"

						

Please Note: Frame Boxes are the only Pop Boxes that do not use the IE7 fix to try to align both Horizontally and Vertically as they were not designed to hold Text, however should you want to use Text with a Frame Pop Box then you should simply set 'frame1-psuedo' with the required alignment Parameters and pass the text via the CSS PsuedoStyles() Function. Here is how you would do this:

' Pop.Init()
Styles:="'frame1-psuedo', {'top':'4px','left':'12px'}"

PsuedoStyles:="frame1-text|License"

' Pop.Box()
Frame1:=True

						

Logo (Image) Box

The Logo (Image/Icon/Animated GIF) is used to display an Image at the top of the Pop Box alongside a Title if required. The Logo has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. The Image Size can be adjusted using the LogoSizePercentage Parameter (default "100%"), for example, 'LogoSizePercentage:="50%"' which would reduce the Image by half. The Logo Box needs to be turned on by setting 'Logo:=True' in the Pop.Box() Function

Please Note: alignment within the Pop Box will only work if the Box is bigger than the Image or Preloader being displayed - also check using 'Placeholders:=True' that the Image or Preloader is within the Canvas area

Title (Text) Box

The Title Text is used to display a Message at the top of the Pop Box to accompany the Logo. The Title has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Title Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'TitleText:="Configuring Setup"'

A Title Box will Scale Fonts with the Scale set for the Dialog or you can over-ride the setting using the CSS Styles() Setting - see Scaling

Strapline (Text) Box

The Strapline Text is used to display a large heading in order to make a statement that stands out from the main Message or Dialog Title. The Strapline has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. You can have up to 2 lines of short Text - anything else will be cut off completely as the CSS overflow setting is set to 'hidden'. A Strapline Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'TitleText:="Configuring Setup"'

A Strapline Box will Scale Fonts with the Scale set for the Dialog or you can over-ride the setting using the CSS Styles() Setting - see Scaling

Message (Text) Box

The Message Text is used to display a long formatted Message to the user. The Message has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Message Box doesn't need to be turned on in the Pop.Box() Function, simply passing anything other than "" will display the Box ie. 'MessageText:="Configuring Setup"'

You can have up to as many lines of Text as you like until it is cut off completely as the CSS overflow setting is set to 'hidden'. You can use any kind of formatted HTML within reason ie. <b>, <u>, <span> etc. - remember to include the closing tags

A Message Box will Scale Fonts with the Scale set for the Dialog or you can over-ride the setting using the CSS Styles() Setting - see Scaling

Button Box

Pop can display Hover Buttons and capture their return values. 2 Buttons are available to use in Pop, an 'OK' Button and a 'Cancel' Button. A Button 'Text' has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. A Button needs to be turned on in the Pop.Box() Function ie. 'OKButton:=True' and 'CloseButton:=True'. Buttons use CSS PsuedoStyles() to change things like their Rollover, Rollout Background Colours and Font Colours, plus things like the Titles of the Tooltips when you hover over a Button

Just because the Button has a Name doesn't mean that you cannot use it for a different purpose, ie. you can use the 'OK' Button to have the Text Cancel and capture the return result. The 'OK' Button will always return 'vbYes' whereas the 'Cancel' Button will always return 'vbNo' and the Close Cross Click will always return 'vbCancel'. The default is set to be 'vbCancel' if you capture the result via a Lightbox Click. However if someone presses the 'Escape' Key you can check for 'vbAbort'

Buttons can have a 'Flat' look and feel about them by just using a Backgroound Colour or they can have cool 3D Borders effects applied ie. 'Ridge', 'Inset', 'Outset', Groove'. Here is a Pop Box with a nice 'Groove' effect and 'Thin' Border:

Pop Box Error Dialog Button with Thin, Groove Border

Here is the same Dialog with a 'Thin', 'Outset' Border:

Pop Box Error Dialog Button with Thin, Outset Border

Frame Box

Frames are used to hold Icons and Pictures or to draw a Border around Text or Images. Frames have Psuedo Rollover Background Colours. Frames can also be used as dividers between content

Progressbar Boxes

There are 3 parts to a Progressbar, the 'Progressbar' (and 'Progressbar Box), the 'ProgressbarTitleText' and the 'ProgressbarPercentageText'. The 'Progressbar' Box (progress-box) is the container for the 'Progressbar Box' (progressbar-box) and requires to be displayed using 'Progressbar:=True' in the Pop.Box() Function

The 'ProgressbarTitleText' is used to display Text alongside the Progressbar and can be used like this:


ProgressbarTitleText:="<i>Press {Esc} to cancel the process</i>"

						

The 'ProgressbarPercentageText' is used to display the actual Percentage value ie. "8%", "50%" or "100%". It can be used like this:


ProgressbarPercentageText:="0%"

						

All of these can be used in combination or in isolation to some extent depending on the result that you wish to achieve. You can also just use a normal 'Title' or 'Message' with a Progressbar. I have included extensive demonstrations of a whole variety of Progressbars running dummy tasks so that you get some idea of just how flexible the Code is

To use a Progressbar you must include a call to your Subroutine or Function by adding the Name of your Subroutine or Function to the 'Callback' Parameter in the Pop.Box() Function like this:


Callback:="Task7"

						

Then, in order that you can include a Progressbar whilst running a task, you need to use the 'CallbackUpdate()' Subroutine in conjunction with the 'Pop.Aborted()' Subroutine, passing the name of the 'Element' that you would like to update ie. a Message Box or a Title, like this (you will not neccessarily need to include all of these calls, this is just example Code to give you an idea, please see the examples that come with the Pop.xlsm download File):


If Pop.Aborted Then
 Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data<br />Please wait...<br /><br /><i>- Process aborted...</i>"
 Pop.Pause 3000
Else
 Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
 Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data<br />Complete..."
 Pop.CallbackUpdate DialogElement:="progress-percentage-box", UpdateValue:=iVal
 Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:=iVal
 Pop.Pause 3000
End If

						
To exit whilst running a task you would use the 'Pop.CallbackExit()' Subroutine which will then ensure a smooth exit from a Pop Box Dialog

To build a Pause into any of your routines, you can use the 'Pop.Pause()' Subroutine like this:


Pop.Pause 3000

						

Close Cross Box

The Close Box (or Close Cross Box) is used to dismiss the Pop Box or Dialog. The Close Box has both X and Y alignment, meaning you can specify both Horizontal and Vertical alignment in the CSS Styles() Parameter alongside many other TagName arguments via JavaScript like Width, Height, Font Colour/Size etc. It is turned on by setting 'CloseButton:=True' in the Pop.Box() Function

The Close Box uses CSS PsuedoStyles() for Rollover/Rollout Background, Font Colours and Tooltip. It is not Text and is not an Image. It is displayed using a single HTML Code which can be changed via CSS PsuedoStyles() - the default HTML Code is '✖' or '&#10006;'

If you don't like the Close Cross used or you fancy something different, then you can change this Symbol to (almost) anything you like that is represented by the HTML Code Table shown below

Here is the Code to change the Close Cross and display an alternative Tooltip using the '&#10007;' symbol '✗'


PsuedoStyles:="ok-rollover-background|#DAE3E8,ok-rollout-background|#D0D9E0,ok-rollover-colour|#3E585F,ok-text|Okay,ok-title|Close the dialog," & _
              "close-rollout-colour|#666666,close-cross|&#10007;,close-tooltip|Click this alternative close cross to close the dialog"

						

Here is a full Table listing of HTML Codes that you may be able to use depending on your system and how it interprets the Codes:


 	&#32;			Space
!	&#33;			Exclamation mark
"	&#34;	&quot;		Double quote
#	&#35;	&num;		Pound (hash) symbol
$	&#36;	&dollar;	Dollar
%	&#37;	&percnt;	Percent
&	&#38;	&amp;		Ampersand
'	&#39;	&apos;		Single quote
(	&#40;	&lpar;		Opening parenthesis
)	&#41;	&rpar;		Closing parenthesis
*	&#42;	&ast;		Asterisk
+	&#43;	&plus;		Plus sign
,	&#44;	&comma;		Comma
-	&#45;	&minus;		Minus sign - Hyphen
.	&#46;	&period;	Period
/	&#47;	&sol;		Forward slash
0	&#48;			
1	&#49;			
2	&#50;			
3	&#51;			
4	&#52;			
5	&#53;			
6	&#54;			
7	&#55;			
8	&#56;			
9	&#57;			
:	&#58;	&colon;		Colon
;	&#59;	&semi;		Semicolon
<	&#60;	&lt;		Less than sign
=	&#61;	&equals;	Equal sign
>	&#62;	&gt;		Greater than sign
?	&#63;	&quest;		Question mark
@	&#64;	&commat;	At symbol
A	&#65;			
B	&#66;			
C	&#67;			
D	&#68;			
E	&#69;			
F	&#70;			
G	&#71;			
H	&#72;			
I	&#73;			
J	&#74;			
K	&#75;			
L	&#76;			
M	&#77;			
N	&#78;			
O	&#79;			
P	&#80;			
Q	&#81;			
R	&#82;			
S	&#83;			
T	&#84;			
U	&#85;			
V	&#86;			
W	&#87;			
X	&#88;			
Y	&#89;			
Z	&#90;			
[	&#91;	&lsqb;		Opening bracket
\	&#92;	&bsol;		Backslash
]	&#93;	&rsqb;		Closing bracket
^	&#94;	&Hat;		Caret - circumflex
_	&#95;	&lowbar;	Underscore
`	&#96;	&grave;		Grave accent
a	&#97;			
b	&#98;			
c	&#99;			
d	&#100;			
e	&#101;			
f	&#102;			
g	&#103;			
h	&#104;			
i	&#105;			
j	&#106;			
k	&#107;			
l	&#108;			
m	&#109;			
n	&#110;			
o	&#111;			
p	&#112;			
q	&#113;			
r	&#114;			
s	&#115;			
t	&#116;			
u	&#117;			
v	&#118;			
w	&#119;			
x	&#120;			
y	&#121;			
z	&#122;			
{	&#123;	&lcub;		Opening brace
|	&#124;	&verbar;	Vertical bar
}	&#125;	&rcub;		Closing brace
~	&#126;			Equivalency sign - tilde
 	&#160;	&nbsp;		Non-breaking space
¡	&#161;	&iexcl;		Inverted exclamation mark
¢	&#162;	&cent;		Cent sign
£	&#163;	&pound;		Pound sign
¤	&#164;	&curren;	Currency sign
¥	&#165;	&yen;		Yen sign
¦	&#166;	&brvbar;	Broken vertical bar
§	&#167;	&sect;		Section sign
¨	&#168;	&uml;		Spacing diaeresis - umlaut
©	&#169;	&copy;		Copyright sign
ª	&#170;	&ordf;		Feminine ordinal indicator
«	&#171;	&laquo;		Left double angle quotes
¬	&#172;	&not;		Not sign
­	&#173;	&shy;		Soft hyphen
®	&#174;	&reg;		Registered trade mark sign
¯	&#175;	&macr;		Spacing macron - overline
°	&#176;	&deg;		Degree sign
±	&#177;	&plusmn;	Plus-or-minus sign
²	&#178;	&sup2;		Superscript two - squared
³	&#179;	&sup3;		Superscript three - cubed
´	&#180;	&acute;		Acute accent - spacing acute
µ	&#181;	&micro;		Micro sign
¶	&#182;	&para;		Pilcrow sign - paragraph sign
·	&#183;	&middot;	Middle dot - Georgian comma
¸	&#184;	&cedil;		Spacing cedilla
¹	&#185;	&sup1;		Superscript one
º	&#186;	&ordm;		Masculine ordinal indicator
»	&#187;	&raquo;		Right double angle quotes
¿	&#191;	&iquest;	Inverted question mark
×	&#215;	&times;		Multiplication sign
÷	&#247;	&divide;	Division sign
À	&#192;	&Agrave;	Latin capital letter A with grave
Á	&#193;	&Aacute;	Latin capital letter A with acute
#N/A
Ã	&#195;	&Atilde;	Latin capital letter A with tilde
Ä	&#196;	&Auml;		Latin capital letter A with diaeresis
Å	&#197;	&Aring;		Latin capital letter A with ring above
Æ	&#198;	&AElig;		Latin capital letter AE
Ç	&#199;	&Ccedil;	Latin capital letter C with cedilla
È	&#200;	&Egrave;	Latin capital letter E with grave
É	&#201;	&Eacute;	Latin capital letter E with acute
Ê	&#202;	&Ecirc;		Latin capital letter E with circumflex
Ë	&#203;	&Euml;		Latin capital letter E with diaeresis
Ì	&#204;	&Igrave;	Latin capital letter I with grave
Í	&#205;	&Iacute;	Latin capital letter I with acute
Î	&#206;	&Icirc;		Latin capital letter I with circumflex
Ï	&#207;	&Iuml;		Latin capital letter I with diaeresis
Ð	&#208;	&ETH;		Latin capital letter ETH
Ñ	&#209;	&Ntilde;	Latin capital letter N with tilde
Ò	&#210;	&Ograve;	Latin capital letter O with grave
Ó	&#211;	&Oacute;	Latin capital letter O with acute
Ô	&#212;	&Ocirc;		Latin capital letter O with circumflex
Õ	&#213;	&Otilde;	Latin capital letter O with tilde
Ö	&#214;	&Ouml;		Latin capital letter O with diaeresis
Ø	&#216;	&Oslash;	Latin capital letter O with slash
Ù	&#217;	&Ugrave;	Latin capital letter U with grave
Ú	&#218;	&Uacute;	Latin capital letter U with acute
Û	&#219;	&Ucirc;		Latin capital letter U with circumflex
Ü	&#220;	&Uuml;		Latin capital letter U with diaeresis
Ý	&#221;	&Yacute;	Latin capital letter Y with acute
Þ	&#222;	&THORN;		Latin capital letter THORN
ß	&#223;	&szlig;		Latin small letter sharp s - ess-zed
à	&#224;	&agrave;	Latin small letter a with grave
á	&#225;	&aacute;	Latin small letter a with acute
â	&#226;	&acirc;		Latin small letter a with circumflex
ã	&#227;	&atilde;	Latin small letter a with tilde
ä	&#228;	&auml;		Latin small letter a with diaeresis
å	&#229;	&aring;		Latin small letter a with ring above
æ	&#230;	&aelig;		Latin small letter ae
ç	&#231;	&ccedil;	Latin small letter c with cedilla
è	&#232;	&egrave;	Latin small letter e with grave
é	&#233;	&eacute;	Latin small letter e with acute
ê	&#234;	&ecirc;		Latin small letter e with circumflex
ë	&#235;	&euml;		Latin small letter e with diaeresis
ì	&#236;	&igrave;	Latin small letter i with grave
í	&#237;	&iacute;	Latin small letter i with acute
î	&#238;	&icirc;		Latin small letter i with circumflex
ï	&#239;	&iuml;		Latin small letter i with diaeresis
ð	&#240;	&eth;		Latin small letter eth
ñ	&#241;	&ntilde;	Latin small letter n with tilde
ò	&#242;	&ograve;	Latin small letter o with grave
ó	&#243;	&oacute;	Latin small letter o with acute
ô	&#244;	&ocirc;		Latin small letter o with circumflex
õ	&#245;	&otilde;	Latin small letter o with tilde
ö	&#246;	&ouml;		Latin small letter o with diaeresis
ø	&#248;	&oslash;	Latin small letter o with slash
ù	&#249;	&ugrave;	Latin small letter u with grave
ú	&#250;	&uacute;	Latin small letter u with acute
û	&#251;	&ucirc;		Latin small letter u with circumflex
ü	&#252;	&uuml;		Latin small letter u with diaeresis
ý	&#253;	&yacute;	Latin small letter y with acute
þ	&#254;	&thorn;		Latin small letter thorn
ÿ	&#255;	&yuml;		Latin small letter y with diaeresis
Œ	&#338;	&OElig;		Latin capital letter OE
œ	&#339;	&oelig;		Latin small letter oe
Š	&#352;	&Scaron;	Latin capital letter S with caron
š	&#353;	&scaron;	Latin small letter s with caron
Ÿ	&#376;	&Yuml;		Latin capital letter Y with diaeresis
ƒ	&#402;	&fnof;		Latin small f with hook - function
Α	&#913;	&Alpha;		Greek capital letter alpha
Β	&#914;	&Beta;		Greek capital letter beta
Γ	&#915;	&Gamma;		Greek capital letter gamma
Δ	&#916;	&Delta;		Greek capital letter delta
Ε	&#917;	&Epsilon;	Greek capital letter epsilon
Ζ	&#918;	&Zeta;		Greek capital letter zeta
Η	&#919;	&Eta;		Greek capital letter eta
Θ	&#920;	&Theta;		Greek capital letter theta
Ι	&#921;	&Iota;		Greek capital letter iota
Κ	&#922;	&Kappa;		Greek capital letter kappa
Λ	&#923;	&Lambda;	Greek capital letter lambda
Μ	&#924;	&Mu;		Greek capital letter mu
Ν	&#925;	&Nu;		Greek capital letter nu
Ξ	&#926;	&Xi;		Greek capital letter xi
Ο	&#927;	&Omicron;	Greek capital letter omicron
Π	&#928;	&Pi;		Greek capital letter pi
Ρ	&#929;	&Rho;		Greek capital letter rho
Σ	&#931;	&Sigma;		Greek capital letter sigma
Τ	&#932;	&Tau;		Greek capital letter tau
Υ	&#933;	&Upsilon;	Greek capital letter upsilon
Φ	&#934;	&Phi;		Greek capital letter phi
Χ	&#935;	&Chi;		Greek capital letter sigma
Ψ	&#936;	&Psi;		Greek capital letter psi
Ω	&#937;	&Omega;		Greek capital letter omega
α	&#945;	&alpha;		Greek small letter alpha
β	&#946;	&beta;		Greek small letter beta
γ	&#947;	&gamma;		Greek small letter gamma
δ	&#948;	&delta;		Greek small letter delta
ε	&#949;	&epsilon;	Greek small letter epsilon
ζ	&#950;	&zeta;		Greek small letter zeta
η	&#951;	&eta;		Greek small letter eta
θ	&#952;	&theta;		Greek small letter theta
ι	&#953;	&iota;		Greek small letter iota
κ	&#954;	&kappa;		Greek small letter kappa
λ	&#955;	&lambda;	Greek small letter lambda
μ	&#956;	&mu;		Greek small letter mu
ν	&#957;	&nu;		Greek small letter nu
ξ	&#958;	&xi;		Greek small letter xi
ο	&#959;	&omicron;	Greek small letter omicron
π	&#960;	&pi;		Greek small letter pi
ρ	&#961;	&rho;		Greek small letter rho
ς	&#962;	&sigmaf;	Greek small letter final sigma
σ	&#963;	&sigma;		Greek small letter sigma
τ	&#964;	&tau;		Greek small letter tau
υ	&#965;	&upsilon;	Greek small letter upsilon
φ	&#966;	&phi;		Greek small letter phi
χ	&#967;	&chi;		Greek small letter chi
ψ	&#968;	&psi;		Greek small letter psi
ω	&#969;	&omega;		Greek small letter omega
ϑ	&#977;	&thetasym;	Greek small letter theta symbol
ϒ	&#978;	&upsih;		Greek upsilon with hook symbol
ϖ	&#982;	&piv;		Greek pi symbol
–	&#8211;	&ndash;		En dash
—	&#8212;	&mdash;		Em dash
‘	&#8216;	&lsquo;		Left single quotation mark
’	&#8217;	&rsquo;		Right single quotation mark
‚	&#8218;	&sbquo;		Single low-9 quotation mark
“	&#8220;	&ldquo;		Left double quotation mark
”	&#8221;	&rdquo;		Right double quotation mark
„	&#8222;	&bdquo;		Double low-9 quotation mark
†	&#8224;	&dagger;	Dagger
‡	&#8225;	&Dagger;	Double dagger
•	&#8226;	&bull;		Bullet
…	&#8230;	&hellip;	Horizontal ellipsis
‰	&#8240;	&permil;	Per thousand sign
‱	&#8241;			Per thousand sign
※	&#8251;			Komejirushi
‼	&#8252;			Double exclamation mark
‽	&#8253;			Exclamation question
‾	&#8254;	&oline;		Overline, a.k.a. spacing overscore
⁁	&#8257;			Caret Insertion Point
⁂	&#8258;			Asterism
⁇	&#8263;			Double question
⁈	&#8264;			Question Exclamation
⁉	&#8265;			Exclamation Question
⁑	&#8273;			Double asterisk
€	&#8364;	&euro;		Euro sign
™	&#8482;	&trade;		Trade mark sign
∀	&#8704;	&forall;	For all
❝	&#10077;		Heavy double turned comma quotation mark ornament
❞	&#10078;		Heavy double comma quotation mark ornament
∂	&#8706;	&part;		Partial differential
∃	&#8707;	&exist;		There exists
∅	&#8709;	&empty;		Empty set, null set, diameter
∇	&#8711;	&nabla;		Nabla, backward difference
∈	&#8712;	&isin;		Element of
∉	&#8713;	&notin;		Not an element of
∋	&#8715;	&ni;		Contains as member
∏	&#8719;	&prod;		n-ary product
∑	&#8721;	&sum;		n-ary sumation
−	&#8722;	&minus;		Minus sign
∓	&#8723;			Minus-or-plus sign
∔	&#8724;			Dot plus
∕	&#8725;			Division slash
∖	&#8726;			Set minus
∗	&#8727;	&lowast;	Asterisk operator
√	&#8730;	&radic;		Square root
∛	&#8731;			Cube Root
∜	&#8732;			Root
∝	&#8733;	&prop;		Proportional to
∞	&#8734;	&infin;		Infinity
∠	&#8736;	&ang;		Angle
∧	&#8743;	&and;		Logical AND, or wedge
∩	&#8745;	&cap;		Intersection, or cap
∪	&#8746;	&cup;		Union, or cup
∫	&#8747;	&int;		Integral
∬	&#8748;			Double integral
∭	&#8749;			Triple integral
∮	&#8750;			Line integral
∯	&#8751;			Double line integral
∰	&#8752;			Triple line integral
∴	&#8756;	&there4;	Therefore
∵	&#8757;			Because sign
∶	&#8758;			Ratio
∷	&#8759;			Proportion
∻	&#8763;			Homothetic preferences
∼	&#8764;	&sim;		Tilde operator, or varies with
∽	&#8765;			Approximation
≀	&#8768;			Wreath product
≅	&#8773;	&cong;		Approximately equal to
≈	&#8776;	&asymp;		Almost equal to, asymptotic to
≠	&#8800;	&ne;		Not equal to
≡	&#8801;	&equiv;		Identical to
≤	&#8804;	&le;		Less-than or equal to
≥	&#8805;	&ge;		Greater-than or equal to
⊂	&#8834;	&sub;		Subset of
⊃	&#8835;	&sup;		Superset of
⊄	&#8836;	&nsub;		Not a subset of
⊆	&#8838;	&sube;		Subset of or equal to
⊇	&#8839;	&supe;		Superset of or equal to
⊕	&#8853;	&oplus;		Circled plus, direct sum
⊖	&#8854;			Circled minus
⊗	&#8855;	&otimes;	Circled times, vector product
⊘	&#8856;			Circled divide
⊙	&#8857;			Circled dot
⊚	&#8858;			Circled circle
⊛	&#8859;			Circled asterisk
⊜	&#8860;			Circled equals
⊝	&#8861;			Circled minus
⊥	&#8869;	&perp;		Up tack, orthogonal to, perpendicular
⊦	&#8870;	&or;		Logical OR, or vee
⋅	&#8901;	&sdot;		Dot operator
⌈	&#8968;	&lceil;		Left ceiling, a.k.a. apl upstile
⌉	&#8969;	&rceil;		Right ceiling
⌊	&#8970;	&lfloor;	Left floor, apl downstile
⌋	&#8971;	&rfloor;	Right floor
▪	&#9642;			Black small square
◉	&#9673;			Fisheye
◊	&#9674;	&loz;		Lozenge
○	&#9675;			White circle
◎	&#9678;			Bullseye
☆	&#9734;			White 5 point star
¼	&#188;	&frac14;	Fraction one quarter
½	&#189;	&frac12;	Fraction one half
¾	&#190;	&frac34;	Fraction three quarters
⅕	&#8533;			Fraction one fifth
⅖	&#8534;			Fraction two fifths
⅗	&#8535;			Fraction three fifths
⅘	&#8536;			Fraction four fifths
⅙	&#8537;			Fraction one sixth
⅚	&#8538;			Fraction five sixths
⅛	&#8539;			Fraction one eighth
⅜	&#8540;			Fraction three eighths
⅝	&#8541;			Fraction five eighths
⅞	&#8542;			Fraction seven eighths
←	&#8592;	&larr;		Leftwards arrow
↑	&#8593;	&uarr;		Upwards arrow
→	&#8594;	&rarr;		Rightwards arrow
↓	&#8595;	&darr;		Downwards arrow
↔	&#8596;	&harr;		Left right arrow
↕	&#8597;			Up down arrow
↖	&#8598;			North west arrow
↗	&#8599;			North east arrow
↘	&#8600;			South east arrow
↙	&#8601;			South west arrow
↚	&#8602;			Leftwards arrow with stroke
↛	&#8603;			Rightwards arrow with stroke
↜	&#8604;			Leftwards wave arrow
↝	&#8605;			Rightwards wave arrow
↞	&#8606;			Leftwards two headed arrow
↟	&#8607;			Upwards two headed arrow
↠	&#8608;			Rightwards two headed arrow
↡	&#8609;			Downwards two headed arrow
↢	&#8610;			Leftwards arrow with tail
↣	&#8611;			Rightwards arrow with tail
↤	&#8612;			Leftwards arrow from bar
↥	&#8613;			Upwards arrow from bar
↦	&#8614;			Downwards arrow from bar
↨	&#8616;			Up down arrow with base
↩	&#8617;			Leftwards arrow with hook
↪	&#8618;			Rightwards arrow with hook
↫	&#8619;			Leftwards arrow with loop
↬	&#8620;			Rightwards arrow with loop
↭	&#8621;			Left right wave arrow
↮	&#8622;			Left right arrow with stroke
↯	&#8623;			Downwards zigzag arrow
↰	&#8624;			Upwards arrow with tip leftwards
↱	&#8625;			Upwards arrow with tip rightwards
↲	&#8626;			Downwards arrow with tip leftwards
↳	&#8627;			Downwards arrow with tip rightwards
↴	&#8628;			Rightwards arrow with corner downwards
↵	&#8629;	&crarr;		Downwards arrow with corner leftwards
↶	&#8630;			Anticlockwise top semicircle arrow
↷	&#8631;			Clockwise top semicircle arrow
↸	&#8632;			North west arrow to long bar
↹	&#8633;			Leftwards arrow to bar over rightwards arrow to bar
↺	&#8634;			Anticlockwise open circle arrow
↻	&#8635;			Clockwise open circle arrow
↼	&#8636;			Leftwards harpoon with barb upwards
↽	&#8637;			Leftwards harpoon with barb downwards
↾	&#8638;			Upwards harpoon with barb rightwards
↿	&#8639;			Upwards harpoon with barb leftwards
⇀	&#8640;			Rightwards harpoon with barb upwards
⇁	&#8641;			Rightwards harpoon with barb downwards
⇂	&#8642;			Downwards harpoon with barb rightwards
⇃	&#8643;			Downwards harpoon with barb leftwards
⇄	&#8644;			Rightwards arrow over leftwards arrow
⇅	&#8645;			Upwards arrow leftwards of downwards arrow
⇆	&#8646;			Leftwards arrow over rightwards arrow
⇇	&#8647;			Leftwards paired arrows
⇈	&#8648;			Upwards paired arrows
⇉	&#8649;			Rightwards paired arrows
⇊	&#8650;			Downwards paired arrows
⇋	&#8651;			Leftwards harpoon over rightwards harpoon
⇌	&#8652;			Rightwards harpoon over leftwards harpoon
⇍	&#8653;			Leftwards double arrow with stroke
⇎	&#8654;			Left right double arrow with stroke
⇏	&#8655;			Rightwards double arrow with stroke
⇐	&#8656;	&lArr;		Leftwards double arrow
⇑	&#8657;	&uArr;		Upwards double arrow
⇒	&#8658;	&rArr;		Rightwards double arrow
⇓	&#8659;	&dArr;		Downwards double arrow
⇔	&#8660;	&hArr;		Left right double arrow
⇕	&#8661;			Up down double arrow
⇖	&#8662;			North west double arrow
⇗	&#8663;			North east double arrow
⇘	&#8664;			South east double arrow
⇙	&#8665;			South west double arrow
⇚	&#8666;			Leftwards triple arrow
⇛	&#8667;			Rightwards triple arrow
⇜	&#8668;			Leftwards squiggle arrow
⇝	&#8669;			Rightwards squiggle arrow
⇞	&#8670;			Upwards arrow with double stroke
⇟	&#8671;			Downwards arrow with double stroke
⇠	&#8672;			Leftwards dashed arrow
⇡	&#8673;			Upwards dashed arrow
⇢	&#8674;			Rightwards dashed arrow
⇣	&#8675;			Downwards dashed arrow
⇤	&#8676;			Leftwards arrow to bar
⇥	&#8677;			Rightwards arrow to bar
⇦	&#8678;			Leftwards white arrow
⇧	&#8679;			Upwards white arrow
⇨	&#8680;			Rightwards white arrow
⇩	&#8681;			Downwards white arrow
➘	&#10136;		Heavy south east arrow
➙	&#10137;		Heavy rightwards arrow
➚	&#10138;		Heavy north east arrow
➛	&#10139;		Drafting point rightwards arrow
➜	&#10140;		Heavy round-tipped rightwards arrow
➝	&#10141;		Triangle-headed rightwards arrow
➞	&#10142;		Heavy triangle-headed rightwards arrow
➟	&#10143;		Dashed triangle-headed rightwards arrow
➠	&#10144;		Heavy dashed triangle-headed rightwards arrow
➡	&#10145;		Black rightwards arrow
➢	&#10146;		Three-d top-lighted rightwards arrowhead
➣	&#10147;		Three-d bottom-lighted rightwards arrowhead
➤	&#10148;		Black rightwards arrowhead
➥	&#10149;		Heavy black curved upwards and rightwards arrow
➧	&#10151;		Squat black rightwards arrow
➨	&#10152;		Heavy concave-pointed black rightwards arrow
➩	&#10153;		Right-shaded white rightwards arrow
➪	&#10154;		Left-shaded white rightwards arrow
➫	&#10155;		Back-tilted shadowed white rightwards arrow
➬	&#10156;		Front-tilted shadowed white rightwards arrow
➭	&#10157;		Heavy lower right-shadowed white rightwards arrow
➮	&#10158;		Heavy upper right-shadowed white rightwards arrow
➯	&#10159;		Notched lower right-shadowed white rightwards arrow
➱	&#10161;		Notched upper right-shadowed white rightwards arrow
➲	&#10162;		Circled heavy white rightwards arrow
➳	&#10163;		White-feathered rightwards arrow
➴	&#10164;		Black-feathered south east arrow
➵	&#10165;		Black-feathered rightwards arrow
➶	&#10166;		Black-feathered north east arrow
➷	&#10167;		Heavy black-feathered south east arrow
➸	&#10168;		Heavy black-feathered rightwards arrow
➹	&#10169;		Heavy black-feathered north east arrow
➺	&#10170;		Teardrop-barbed rightwards arrow
➻	&#10171;		Heavy teardrop-shanked rightwards arrow
➼	&#10172;		Wedge-tailed rightwards arrow
➽	&#10173;		Heavy wedge-tailed rightwards arrow
➾	&#10174;		Open-outlined rightwards arrow
⋆	&#8902;			5 point star
★	&#9733;			Black 5 point star
⚝	&#9885;			Outlined white star
⛤	&#9956;			
⛥	&#9957;			
⛦	&#9958;			
⛧	&#9959;			
✢	&#10018;		Four teardrop-spoked asterisk
✣	&#10019;		Four balloon-spoked asterisk
✤	&#10020;		Heavy four balloon-spoked asterisk
✥	&#10021;		Four club-spoked asterisk
✦	&#10022;		Black four pointed star
✧	&#10023;		White four pointed star
✨	&#10024;			
✩	&#10025;		Stress outlined white star
✪	&#10026;		Circled white star
✫	&#10027;		Open centre black star
✬	&#10028;		Black centre white star
✭	&#10029;		Outlined black star
✮	&#10030;		Heavy outlined black star
✯	&#10031;		Pinwheel star
✰	&#10032;		Shadowed white star
✱	&#10033;		Heavy asterisk
✲	&#10034;		Open centre asterisk
✳	&#10035;		Eight spoked asterisk
✴	&#10036;		Eight pointed black star
✵	&#10037;		Eight pointed pinwheel star
✶	&#10038;		Six pointed black star
✷	&#10039;		Heavy eight pointed rectilinear black star
✹	&#10041;		Twelve pointed black star
✺	&#10042;		Sixteen pointed asterisk
✻	&#10043;		Teardrop-spoked asterisk
✼	&#10044;		Open centre teardrop-spoked asterisk
✽	&#10045;		Heavy teardrop-spoked asterisk
✾	&#10046;		Six petalled black and white florette
❂	&#10050;		Circled open centre eight pointed star
❃	&#10051;		Heavy teardrop-spoked pinwheel asterisk
❅	&#10053;		Tight trifoliate snowflake
❆	&#10054;		Heavy chevron snowflake
❇	&#10055;		Sparkle
❈	&#10056;		Heavy sparkle
❉	&#10057;		Balloon-spoked asterisk
❊	&#10058;		Eight teardrop-spoked propeller asterisk
❋	&#10059;		Heavy eight teardrop-spoked propeller asterisk
❢	&#10082;		Heart Exclamation Mark
❣	&#10083;		Exclamation Heart
❤	&#10084;		Big Heart
❥	&#10085;		Rotated Heart
❦	&#10086;		Floral Heart
❧	&#10087;		Floral Heart Rotated
💓	&#128147;		Heart Pulse
💔	&#128148;		Broken Heart
💕	&#128149;		Heart Couple
💖	&#128150;		Heart Stars
💗	&#128151;		Hearts
💘	&#128152;		Heart with Arrow
💙	&#128153;		Blue Heart
💚	&#128154;		Green Heart
💛	&#128155;		Yellow Heart
💜	&#128156;		Purple Heart
💝	&#128157;		Heart with Ribbon
💞	&#128158;		Hearts Together
♥	♥			Black Heart
♡	&#9825;			Red Heart
♈	&#9800;			Aries
♉	&#9801;			Taurus
♊	&#9802;			Gemini
♋	&#9803;			Cancer
♌	&#9804;			Leo
♍	&#9805;			Virgo
♎	&#9806;			Libra
♏	&#9807;			Scorpio
♐	&#9808;			Sagittarius
♑	&#9809;			Capricorn
♒	&#9810;			Aquarius
♓	&#9811;			Pisces
♔	&#9812;			White chess king
♕	&#9813;			White chess queen
♖	&#9814;			White chess rook
♗	&#9815;			White chess bishop
♘	&#9816;			White chess knight
♙	&#9817;			White chess pawn
♚	&#9818;			Black chess king
♛	&#9819;			Black chess queen
♜	&#9820;			Black chess rook
♝	&#9821;			Black chess bishop
♞	&#9822;			Black chess knight
♟	&#9823;			Black chess pawn
♠	&#9824;	&spades;	Black Spade suit
♡	&#9825;			White Heart suit, valentine
♢	&#9826;			White Diamond suit
♣	&#9827;	&clubs;		Black Club suit, shamrock
♤	&#9828;			White Spade suit
♥	&#9829;	&hearts;	Black Heart suit, valentine
♦	&#9830;	&diams;		Black Diamond suit
♧	&#9831;			White Club suit, shamrock
⚀	&#9856;			Die 1
⚁	&#9857;			Die 2
⚂	&#9858;			Die 3
⚃	&#9859;			Die 4
⚄	&#9860;			Die 5
⚅	&#9861;			Die 6
⚽	&#9917;			
⚾	&#9918;			
⛷	&#9975;			
⛸	&#9976;			
⛹	&#9977;			
①	&#9312;			Circled digit one
②	&#9313;			Circled digit two
③	&#9314;			Circled digit three
④	&#9315;			Circled digit four
⑤	&#9316;			Circled digit five
⑥	&#9317;			Circled digit six
⑦	&#9318;			Circled digit seven
⑧	&#9319;			Circled digit eight
⑨	&#9320;			Circled digit nine
⑩	&#9321;			Circled number ten
⑪	&#9322;			Circled number eleven
⑫	&#9323;			Circled number twelve
⑬	&#9324;			Circled number thirteen
⑭	&#9325;			Circled number fourteen
⑮	&#9326;			Circled number fifteen
⑯	&#9327;			Circled number sixteen
⑰	&#9328;			Circled number seventeen
⑱	&#9329;			Circled number eighteen
⑲	&#9330;			Circled number nineteen
⑳	&#9331;			Circled number twenty
⑴	&#9332;			Parenthesized digit one
⑵	&#9333;			Parenthesized digit two
⑶	&#9334;			Parenthesized digit three
⑷	&#9335;			Parenthesized digit four
⑸	&#9336;			Parenthesized digit five
⑹	&#9337;			Parenthesized digit six
⑺	&#9338;			Parenthesized digit seven
⑻	&#9339;			Parenthesized digit eight
⑼	&#9340;			Parenthesized digit nine
⑽	&#9341;			Parenthesized number ten
⑾	&#9342;			Parenthesized number eleven
⑿	&#9343;			Parenthesized number twelve
⒀	&#9344;			Parenthesized number thirteen
⒁	&#9345;			Parenthesized number fourteen
⒂	&#9346;			Parenthesized number fifteen
⒃	&#9347;			Parenthesized number sixteen
⒄	&#9348;			Parenthesized number seventeen
⒅	&#9349;			Parenthesized number eighteen
⒆	&#9350;			Parenthesized number nineteen
⒇	&#9351;			Parenthesized number twenty
⒈	&#9352;			Digit one full stop
⒉	&#9353;			Digit two full stop
⒊	&#9354;			Digit three full stop
⒋	&#9355;			Digit four full stop
⒌	&#9356;			Digit five full stop
⒍	&#9357;			Digit six full stop
⒎	&#9358;			Digit seven full stop
⒏	&#9359;			Digit eight full stop
⒐	&#9360;			Digit nine full stop
⒑	&#9361;			Number ten full stop
⒒	&#9362;			Number eleven full stop
⒓	&#9363;			Number twelve full stop
⒔	&#9364;			Number thirteen full stop
⒕	&#9365;			Number fourteen full stop
⒖	&#9366;			Number fifteen full stop
⒗	&#9367;			Number sixteen full stop
⒘	&#9368;			Number seventeen full stop
⒙	&#9369;			Number eighteen full stop
⒚	&#9370;			Number nineteen full stop
⒛	&#9371;			Number twenty full stop
⓪	&#9450;			Circled digit zero
⓫	&#9451;			Dingbat negative circled number evelven
⓬	&#9452;			Dingbat negative circled number twelve
⓭	&#9453;			Dingbat negative circled number thirteen
⓮	&#9454;			Dingbat negative circled number fourteen
⓯	&#9455;			Dingbat negative circled number fifteen
⓰	&#9456;			Dingbat negative circled number sixteen
⓱	&#9457;			Dingbat negative circled number seventeen
⓲	&#9458;			Dingbat negative circled number eighteen
⓳	&#9459;			Dingbat negative circled number nineteen
⓴	&#9460;			Dingbat negative circled number twenty
❶	&#10102;		Dingbat negative circled digit one
❷	&#10103;		Dingbat negative circled digit two
❸	&#10104;		Dingbat negative circled digit three
❹	&#10105;		Dingbat negative circled digit four
❺	&#10106;		Dingbat negative circled digit five
❻	&#10107;		Dingbat negative circled digit six
❼	&#10108;		Dingbat negative circled digit seven
❽	&#10109;		Dingbat negative circled digit eight
❾	&#10110;		Dingbat negative circled digit nine
❿	&#10111;		Dingbat negative circled number ten
֍	&#1421;			Right facing Armenian eternity sign
֎	&#1422;			Left facing Armenian eternity sign
ॐ	&#2384;			Devanagari Om
☤	&#9764;			Caduceus
☥	&#9765;			Ankh
☦	&#9766;			Orthodox cross
☧	&#9767;			Chi Rho
☨	&#9768;			Cross of Lorraine
☩	&#9769;			Cross of Jerusalem
☪	&#9770;			Star and Crescent
☫	&#9771;			Farsi Symbol
☬	&#9772;			Adi Shakti
☭	&#9773;			Hammer and Sickle
☮	&#9774;			Peace Symbol
☯	&#9775;			Yin Yang
☸	&#9784;			Wheel of Dharma
✝	&#10013;		Latin cross
✞	&#10014;		Shadowed white Latin cross
✟	&#10015;		Outlined Latin Cross
✠	&#10016;		Maltese cross
✡	&#10017;		Star of David
♩	&#9833;			Crotchet / Quarter note
♪	&#9834;			Quaver / Eighth note
♫	&#9835;			Quaver
♬	&#9836;			Double Quaver
♭	&#9837;			Flat note
♮	&#9838;			Natural Note
♯	&#9839;			Sharp Note
🎹	&#127929;		Keyboard
🎼	&#127932;		Score
࠽	&#2109;			Degree fahrenheit sign
℃	&#8451;			Degrees Celsius
⌘	&#8984;			Place of interest sign
⌚	&#8986;			Watch
⌛	&#8987;			Egg timer
⌧	&#8999;			X in a rectangle box
⌨	&#9000;			Keyboard
⌬	&#9004;			Benzine ring
⍓	&#9043;			APL functional symbol quad up caret
■	&#9632;			Black square
□	&#9633;			White square
▯	&#9647;			White vertical rectangle
◆	&#9670;			Black diamond
●	&#9679;			Black circle
☀	&#9728;			Black sun with rays
☁	&#9729;			Cloud
☂	&#9730;			Umbrella
☃	&#9731;			Snowman
☄	&#9732;			Comet
☎	&#9742;			Black telephone
☏	&#9743;			White telephone
☑	&#9745;			Ballot box with check
☒	&#9746;			Ballot box with X
☘	&#9752;			Clover
☠	&#9760;			Skull and crossbones
☢	&#9762;			Radioactive sign
☣	&#9763;			Biohazard sign
☹	&#9785;			White frowning face
☺	&#9786;			White smiling face
☼	&#9788;			White sun with rays
☽	&#9789;			First quarter moon
☾	&#9790;			Last quarter moon
☿	&#9791;			Mercury
♀	&#9792;			Female sign
♁	&#9793;			Earth
♂	&#9794;			Male sign
♨	&#9832;			Hot springs
♲	&#9842;			Recycle
♻	&#9851;			Recycle
♼	&#9852;			Recycle
♽	&#9853;			Recycle
♿	&#9855;			Disability
⚒	&#9874;			Hammers
⚓	&#9875;			Anchor
⚔	&#9876;			Duelling Swords
⚕	&#9877;			Staff of aesculapius
⚖	&#9878;			Scales
⚘	&#9880;			Flower
⚙	&#9881;			Gear
⚚	&#9882;			Staff of hermes
⚛	&#9883;			Atomic
⚜	&#9884;			Fleur-de-lis
⚞	&#9886;			Three lines converging right
⚟	&#9887;			Three lines converging left
⚠	&#9888;			Caution
⚡	&#9889;			Electricity
⚢	&#9890;			
⚣	&#9891;			
⚤	&#9892;			
⚥	&#9893;			
⚦	&#9894;			
⚧	&#9895;			
⚨	&#9896;			
⚩	&#9897;			
⚰	&#9904;			
⚱	&#9905;			
⚲	&#9906;			
⚳	&#9907;			
⚴	&#9908;			
⚵	&#9909;			
⛄	&#9924;			
⛟	&#9951;			
⛱	&#9969;			
⛲	&#9970;			
⛳	&#9971;			
⛴	&#9972;			
⛵	&#9973;			
✀	&#9984;			
✁	&#9985;			Upper blade scissors
✂	&#9986;			Black scissors
✃	&#9987;			Lower blade scissors
✄	&#9988;			
✆	&#9990;			Telephone location sign
✈	&#9992;			Airplane
✉	&#9993;			Envelope
✊	&#9994;			
✋	&#9995;			
✌	&#9996;			Victory hand
✍	&#9997;			Writing hand
✎	&#9998;			Lower Right Pencil
✏	&#9999;			Pencil
✐	&#10000;		Upper Right Pencil
✓	&#10003;		Check mark
✔	&#10004;			
✕	&#10005;			
✖	&#10006;			
✗	&#10007;		Ballot X
✘	&#10008;			
✿	&#10047;		Black florette
❀	&#10048;		White florette
❁	&#10049;		Eight petalled outlined black florette
❄	&#10052;		Snowflake
❍	&#10061;		Shadowed white circle
❏	&#10063;		Lower right drop shadowed white square
❐	&#10064;		Upper right drop shadowed white square
❑	&#10065;		Lower right shadowed white square
❒	&#10066;		Upper right shadowed white square
❖	&#10070;		Black diamond minus white X
⧫	&#10731;		Black lozenge
⬧	&#11047;		Black medium lozenge
🔒	&#128274;		Padlock
₠	&#8352;			Euro-currency sign
₡	&#8353;			Cent sign
₤	&#8356;			Pound sterling
㍱	&#13169;		Hectopascal
㍲	&#13170;		Dalton (atomic mass)
㍳	&#13171;		Astronomical Unit
㍴	&#13172;		Bar (Pressure)
㍵	&#13173;			
㍶	&#13174;		Parsec
㎀	&#13184;		Pico Amps
㎁	&#13185;		Nano Amps
㎂	&#13186;		Micro Amps
㎃	&#13187;		Mega Amps
㎄	&#13188;		Kilo Amps
㎅	&#13189;		Kilobyte
㎆	&#13190;		Megabyte
㎇	&#13191;		Gigabyte
㎈	&#13192;		Calories
㎉	&#13193;		Kilocalories
㎊	&#13194;		Pico Farads
㎋	&#13195;		Nano Farads
㎌	&#13196;		Micro Farads
㎍	&#13197;		Micro Grams
㎎	&#13198;		Miligrams
㎏	&#13199;		Kilograms
㎐	&#13200;		Hertz
㎑	&#13201;		Kilohertz
㎒	&#13202;		Megahertz
㎓	&#13203;		Gigahertz
㎔	&#13204;		Terahertz
㎕	&#13205;		Micro litres
㎖	&#13206;		Mililitres
㎗	&#13207;		Decilitres
㎘	&#13208;		Kilolitres
㎙	&#13209;		Femtometre
㎚	&#13210;		Nanometre
㎛	&#13211;		Micrometre
㎜	&#13212;		Milimetre
㎝	&#13213;		Centimetre
㎞	&#13214;		Kilometre
㎟	&#13215;		Millimetre squared
㎠	&#13216;		Centimetre squared
㎡	&#13217;		Metre squared
㎢	&#13218;		Kilometre squared
㎣	&#13219;		Millimetre cubed
㎤	&#13220;		Centimetre cubed
㎥	&#13221;		Metre cubed
㎦	&#13222;		Kilometre cubed
㎧	&#13223;		Metres per second
㎨	&#13224;		Acceleration (metres per second per second)
㎩	&#13225;		Pascal
㎪	&#13226;		Kilopascal
㎫	&#13227;		Megapascal
㎬	&#13228;		Gigapascal
㎭	&#13229;		Radian
㎮	&#13230;		Radian per second
㎯	&#13231;		Radian per second per second
㎰	&#13232;		Petasecond
㎱	&#13233;		Nanosecond
㎲	&#13234;		Microsecond
㎳	&#13235;		Millisecond
㎴	&#13236;		Picovolt
㎵	&#13237;		Nanovolt
㎶	&#13238;		Microvolt
㎷	&#13239;		Milivolt
㎸	&#13240;		Kilovolt
㎹	&#13241;		Megavolt
㎺	&#13242;		Picowatt
㎻	&#13243;		Nanowatt
㎼	&#13244;		Microwatt
㎽	&#13245;		Milliwatt
㎾	&#13246;		Kilowatt
㎿	&#13247;		Megawatt
㏀	&#13248;		Kilo Ohm
㏁	&#13249;		Mega Ohm
㏂	&#13250;		AM
㏃	&#13251;		Becquerel
㏄	&#13252;		Cubic Centilitre
㏅	&#13253;		Candela
㏆	&#13254;		Content Kilogram
㏇	&#13255;			
㏈	&#13256;		Decibel
㏉	&#13257;		Gray
㏊	&#13258;		Hectare
㏋	&#13259;			
㏌	&#13260;			
㏍	&#13261;			
㏎	&#13262;			
㏏	&#13263;			
㏐	&#13264;			
㏑	&#13265;			
㏒	&#13266;			
㏓	&#13267;			
㏔	&#13268;			
㏕	&#13269;			
㏖	&#13270;		Mol
㏗	&#13271;		pH
㏘	&#13272;			
㏙	&#13273;		Parts Per Million
㏚	&#13274;			
㏛	&#13275;			
㏜	&#13276;			
㏝	&#13277;			
		&copy;		copyright
		&reg;		Registered trademark
		&curren;	Currency
		&cent;		Cent
&36;	&36;			Dollar
§	§			Section
☚	&#9754;			Left-pointing
☜	&#9756;			Left-pointing
☞	&#9758;			Right pointing
✍	&#9997;			Sign here
☹	&#9785;			Frowning face
☻	&#9787;			Black smiley face
☛	&#9755;			Right-pointing
☝	&#9757;			Upwards pointing
☟	&#9759;			Downwards pointing
✌	&#9996;			Victory sign
☺	&#9786;			Smiley face
₹	&#x20B9;		Indian Rupee (INR) sign
 ;	&#194 ;	&Acirc;		capital A, circumflex accent
 	&#8194;	&ensp;		en space
 	&#8195;	&emsp;		em space
 	&#8201;	&thinsp;	thin space
‌	&#8204;	&zwnj;		zero width non-joiner
‍	&#8205;	&zwj;		zero width joiner
‎	&#8206;	&lrm;		left-to-right mark
‏	&#8207;	&rlm;		right-to-left mark
‹	&#8249;	&lsaquo;	single left-pointing angle quotation mark
›	&#8250;	&rsaquo;	single right-pointing angle quotation mark
				bullet is NOT the same as bullet operator u+2219
′	&#8242;	&prime;		prime, a.k.a. minutes, a.k.a. feet
″	&#8243;	&Prime;		double prime, a.k.a. seconds, a.k.a. inches
⁄	&#8260;	&frasl;		fraction slash
℘	&#8472;	&weierp;	script capital P, a.k.a. power set, a.k.a. Weierstrass p
ℑ	&#8465;	&image;		blackletter capital I, a.k.a. imaginary part
ℜ	&#8476;	&real;		blackletter capital R, a.k.a. real part symbol
ℵ	&#8501;	&alefsym;	alef symbol
				can be used for is implied by
◄	&#9668;			black left pointing triangle
►	&#9658;			black right pointing triangle
▲	&#9650;			black up pointing triangle
▼	&#9660;			black down pointing triangle
〈	&#9001;	&lang;		left-pointing angle bracket
〉	&#9002;	&rang;		right-pointing angle bracket

						
Here is an image of a Broken Heart:

Pop Close Cross with Broken Heart

Here are some random images of various alternative Close Cross Pop Boxes:

Pop Close Cross with Star

Pop Close Cross with alternative Cross 1

Pop Close Cross with alternative Cross 2

Pop Close Cross with alternative Cross 3

CSS Styles()

The CSS Styles() Function Parameter is the most powerful feature of Pop. It allows a massive string of HTML Tags to be passed to set any number of Settings for Pop Boxes. It has a defined Format which must be strictly adhered to. This feature gives you so much flexibility over what you want to design that would not be possible without writing lots of Code or storing lots of Settings in variables

The Parameter must be set first, then the Element (or Pop Box) Name, then the Property / Value pair. A Colon ':' is used to separate a Property / Value pair, with a Comma ',' separating each set of Property / Value pairs. Any pair must also be wrapped up tightly using a set of Braces '{', '}' and apostrophe's. Here is the Code to set the Font Type, Family, Top and Left position of a Message Pop Box:


Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'}"
						

What happens when you want to set more than one Pop Box? Well you simply combine the Property / Value pairs using the Pipe '|' character like this - this Code also sets an Icon Pop Box Left and Top position:


Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'} | 'icon-box', {'left':'245px','top':'20px'}"
						

Or like this to view in a nice line-by-line basis - much neater and clearer:


Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'35px','left':'20px'} | " _
      & "'icon-box', 	{'left':'245px','top':'20px'}"
						

Any errors will simply break the Code giving a JavaScript error in the WebBrowser Control - you may need to Reset the VBA in the VBA Editor, to stop the Code completely

All valid Tags can be used to Style the Pop Boxes but some things may need doing via the CSS PsuedoStyles() Parameter

Here is a list of some of the most common things you can change - Please Note: this list is not exhaustive and some features may not be available to use in the IE7 WebBrowser Control:

The HTML style attribute has the following syntax which is used to pass in Pop CSS Styles() using JavaScript:
<tagname style="property:value;">


font-family				family-name	Arial, Tahoma	generic-family	serif, sans-serif
font-size				(pt), (px), (percent)		pt is Point, i.e. 12pt. px is Pixel, i.e. 20px.
font-size-adjust			(number), none, inherit	
fontetch				normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit	
font-style				normal, italic, oblique	
font-variant				normal, small-caps	
font-weight				normal, bold, bolder, lighter, (number), xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller	Number can be 100, 200, 300, 400, 500, 600, 700, 800, or 900.
font					Any of the above values separated by spaces.	{font: tahoma 12pt oblique bold}
letter-spacing				normal, 1em	1em, 2em, and so on.
text-align				left, right, center, justify	
text-decoration				none, underline, overline, line-through, blink	
text-shadow				none, color length length length, inherit	
text-transform				none, capitalize, uppercase, lowercase	
text-indent				(length), (percent)	Length is in pixels.
word-spacing				normal, 1em	1em, 2em, and so on.
background-attachment			scroll, fixed	
background-color			(color), transparent	Color is in hex code.
background-image			none, (location)	
background-position			(percent), (length), top, center, bottom, left, center, right	
background-repeat			repeat, repeat-x, repeat-y, no-repeat	
background				Any of the above background values separated by spaces.	{background: URL(back.gif) repeat fixed}
color					(color)	Color is in hex code. This refers to the foreground color.
margin-bottom				(length), (percent), auto	Length is in pixels.
margin-left				(length), (percent), auto	Length is in pixels.
margin-right				(length), (percent), auto	Length is in pixels.
margin-top				(length), (percent), auto	Length is in pixels.
margin					Any of the above margin values in top, right, bottom, left order separated by spaces.	{margin: 5px 2px 5px 3px}
					When only one value is present, all margins are affected.
padding-bottom				(length), (percent)	Length is in pixels.
padding-left				(length), (percent)	Length is in pixels.
padding-right				(length), (percent)	Length is in pixels.
padding-top				(length), (percent)	Length is in pixels.
padding					Any of the above padding values in top, right, bottom, left order separated by spaces.	{padding: 5em 6em 3em 6em}
					When only one value is present, all sides are affected.
border-bottom-width			medium, thin, thick, (length)	Length is in pixels.
border-bottom				Any of the border-top-bottom, border-color and border-style values.	{border-bottom: thin inset blue}
border-color				(color)	Color is in hex code.
border-left-width			medium, thin, thick, (length)	Length is in pixels.
border-left				Any of the border-top-left, border-color and border-style values.	{border-left: thick inset green}
border-right-width			medium, thin, thick, (length)	Length is in pixels.
border-right				Any of the border-right-width, border-color and border-style values.	{border-right: thin inset blue}
border-style				none, dotted, dashed, solid, double, groove, ridge, inset, outset	
border-top-width			medium, thin, thick, (length)	Length is in pixels.
border-top				Any of the border-top-width, border-color and border-style values.	{border-top: thin inset red}
border					Any of the border values. Applies to all borders.	{border: medium blue}
height					auto, (length), (percent)	Length is in pixels.
width					auto, (length), (percent)	Length is in pixels.
list-style-type				disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroh, none	
list-style-image			none, (url)	
list-style-position			outside, inside	
list-style				Any of the above list-style values separated by spaces.	{list-style: disc inside}
white-space				normal, pre, nowrap	
clip					auto, (shape)	Currently, the only valid shape is "rect(top,right,bottom,left)".
cursor					auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help	
outline-width				medium, thin, thick, (length), inherit	
outline-style				none, dotted, dashed, solid, double, groove, ridge, inset, outset	
outline-color				(color), invert, inherit	
outline					Any of the above outline values separated by spaces.	{outline: dotted thick}
overflow				visible, hidden, scroll, auto	
visibility				inherit, visible, hidden	
content					(string), (uri), (counter), attr(X), open-quote, close-quote, no-open-quote, no-close-quote, inherit	Used with the :before, :after pseudo-elements.
counter-reset				(identifier) (integer), none , inherit	Used with the counter() and counters() functions of the content property.
counter-increment			(identifier) (integer), none , inherit	Used with the counter() and counters() functions of the content property.
marker-offset				(length), auto, inherit	
quotes					(string)(string) or more, inherit	
bottom					auto, inherit, (length), (percent)	Length is in pixels.
clear					none, left, right, both, inherit	
direction				ltr, rtl, inherit	ltr - Left-to-Right
					rtl - Right-to-Left
display					inline, block, list-item, run-in, compact, marker, table, inline-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, table-caption, none, inherit	
float					none, left, right, inherit	
height					auto, inherit, (length), (percent)	Length is in pixels.
line-height				normal, (length), (percent)	Length is in pixels.
left					auto, inherit, (length), (percent)	Length is in pixels.
max-height				none, inherit, (length), (percent)	Length is in pixels.
max-width				none, inherit, (length), (percent)	Length is in pixels.
min-height				inherit, (length), (percent)	Length is in pixels.
min-width				inherit, (length), (percent)	Length is in pixels.
position				static, absolute, relative, fixed, inherit	
right					auto, inherit, (length), (percent)	Length is in pixels.
top					auto, inherit, (length), (percent)	Length is in pixels.
unicode-bidi				normal, embed, bidi-override, inherit	Length is in pixels.
vertical-align				baseline, sub, super, top, text-top, middle, bottom, text-bottom, (percent)	
z-index					auto, inherit, (integer)	
border-collapse				collapse, separate, inherit	
border-spacing				(length)(length), inherit	
caption-side				top, bottom, left, right, inherit	
empty-cells				show, hide, inherit	
speak-header				once, always, inherit	
table-layout				auto, fixed, inherit	
						

CSS PsuedoStyles()

Okay, so we have the powerful CSS Styles() Function, but what about any shortfalls that the IE7 WebBrowser Control cannot cope with? Well these are all covered of by the PsuedoStyles() Function

These include things like the Mouse Hover events for a Link Pop Box or both of the Button Pop Boxes, so Background Colours, Foreground Colours, Tooltips etc.

The Psudeo Styles are switched on using the PsuedoStyles() Parameter, passing a pipe and comma-delimited list of Named Arguements that can be interpreted by the VBA Code to make the neccessary adjustments to the HTML/Javascript Markup. The Named Arguement must come first ie. 'ok-rollover-background' and then the value for the Named Arguement ie 'none' meaning no Background/Colour. The value must be an appropriate HTML TagName value as per the Table list below. Here is the format for a Psudeo Styling of the 'OK' Button (you can see this covers off, the hover or Mouse over effects for the Background, Font Colour, Button Text and Button Tooltip):


PsuedoStyles:="ok-rollover-background|#DAE3E8,ok-rollout-background|#D0D9E0,ok-rollover-colour|#3E585F,ok-text|Okay,ok-title|Close the dialog,"

						
Here is a full Table list of the PsuedoStyles():

ok-rollover-background		#DAE3E8 		(Colour Hex)		OK Button

ok-rollout-background		#D0D9E0 		(Colour Hex)		OK Button

ok-rollover-colour		#3E585F 		(Colour Hex)		OK Button

ok-rollout-colour		#3E585F 		(Colour Hex)		OK Button

ok-text				Okay 			(Text/String)		OK Button

ok-title			Ok	 		(Text/String)		OK Button

cancel-title			Close the dialog 	(Text/String)		Cancel Button

cancel-rollover-background	#DAE3E8 		(Colour Hex)		Cancel Button

cancel-rollout-background	#D0D9E0 		(Colour Hex)		Cancel Button

cancel-rollover-colour		#3E585F 		(Colour Hex)		Cancel Button

cancel-rollout-colour		#3E585F 		(Colour Hex)		Cancel Button

cancel-text			Okay 			(Text/String)		Cancel Button

cancel-title			Close the dialog 	(Text/String)		Cancel Button

link-tooltip			visit kubiszyn.co.uk 	(Text/String)		Link

link-rollover-colour		Red 			(Colour Hex)		Link

link-rollout-colour		Blue 			(Colour Hex)		Link

close-tooltip			Close the dialog 	(Text/String)		Close Cross Button

close-rollover-background	#DAE3E8 		(Colour Hex)		Close Cross Button

close-rollout-background		#D0D9E0 		(Colour Hex)		Close Cross Button

close-rollover-colour		#3E585F 		(Colour Hex)		Close Cross Button

close-rollout-colour		#3E585F 		(Colour Hex)		Close Cross Button

						

Z-Index

All Pop Boxes have a 'z-index' which defines the order (or layer) that they are placed in (if they are displayed on the Canvas) - the higher the number, the greater the priority in the 'z-index' layers. You can swap a Pop Boxes 'z-index' around to display a Box in front of another ie. to display a TitleText over an Icon, swap their 'z-index' around by passing the index into the CSS Styles() Function like this (by default the Icon has a 'z-index' of '8' and the TitleText has a 'z-index' of '6'):


Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'85px','left':'20px'} | " _
& "'icon-box', {'left':'255px','top':'25px','z-index':'6'} | " _
& "'title-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'25px','left':'20px','z-index':'8'} | " _
& "'close-box', {'left':'370px','top':'10px'} | " _
& "'canvas-box',  {'border':'1px solid #000000'}"

						

Here are all of the default Pop Box 'z-index' values (a value of '-1' will ensure it is the lowest level within the layers):



canvas-object				z-index: 0
frame1-object				z-index: 1
frame2-object				z-index: 2

' gap for any future dev...

logo-image				z-index: 5
title-text				z-index: 6
strapline-text				z-index: 7
icon-image				z-index: 8
message-text				z-index: 9
picture-image				z-index: 10
progress-title-text			z-index: 11
progress-percentage-text		z-index: 12 
progress-object				z-index: 13
link-hover				z-index: 14
close-text				z-index: 15
ok-text					z-index: 16
cancel-text				z-index: 17


						

'Skinning' a Pop Box




						

Examples with Code

Here are my favourite Pop Boxes with Code and an Excel Screen Shot

Let's start with a Pop Box that you can use to run a task - the task will be a dummy task that pretends to be 'Formatting Master data' whilst writing coloured block data to a Worksheet, but you can use this Pop Box whilst running a Macro. I have chosen an example that features a 'Ring' Preloader, a Title with a Percentage of task, a Message descibing the task and the option to Abort the task at any time. Upon an Abort, the Dialog will alter its Message and then perform a slight pause before closing

The 'Ring' Preloader is styled in a 'Lego' Colour Scheme. The Dialog is minimal, but looks nice alongside a White Lightbox. The Percentage gives the Dialog a sense of how long the task will take and sits nicely within the frame of the Dialog. Here is the Code together with the dummy task Code (you don't have to specify the 'font-family' because 'Verdana' is the default, but doing so, allows you to easily tweak it if required so I left it in this example):


Sub Example_Preloader_Ring_Macro()

    Pop.Init ScalePercentage:="0%", _
             Width:=410, _
             Height:=185, _
             Icon:=ldrRing, _
             ExitByLightbox:=False, _
             Styles:="'title-box',      {'font-family':'Verdana','font-size':'16px','color':'#3E585F','top':'5px','left':'20px','width':'240px'} | " _
                     & "'message-box',  {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'65px','left':'20px'} | " _
                     & "'icon-box',     {'left':'255px','top':'25px'} | " _
                     & "'canvas-box',   {'border':'1px solid #000000'}"


    Pop.Box Canvas:=True, _
            Icon:=True, _
            TitleText:="Running Macro ", _
            MessageText:="Formatting Master data<br />Please wait...<br /><br /><i>- Press {Esc} to quit this process</i>", _
            DisableCTRLBreak:=True, _
            Callback:="Task7"

End Sub

Private Sub Task7()
    On Error Resume Next

    Worksheets.Add
    Columns("A:E").ColumnWidth = 5

    Dim i
    Dim iVal
    Dim rngCell As Range
    While i < 100
        DoEvents
        Randomize
        i = i + Rnd(100) - 0.1
        'Debug.Print i
        RandomEvent
        If i Mod 3 = 0 Or i Mod 5 = 0 Or i Mod 7 = 0 Then GoTo skip
        iVal = Format(i / 100, "0%")
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro " & iVal
        'Debug.Print iVal
        If Pop.CallbackExit Then i = 100

        ' // borrowed from Ejaz Ahmed's Class Progressbar as I liked the technique
        '    modified to stay within a Blue/Pink spectrum of Colours I like ;)
        For Each rngCell In Range("A2:E6").Cells
            On Error Resume Next
            rngCell.Interior.Color = RGB(255 * Rnd(i), 81, 181)
            On Error GoTo 0
        Next rngCell

skip:
    Wend

    ' lets remove the Worksheet we just created
    Application.DisplayAlerts = False
    ActiveSheet.Delete
    Application.DisplayAlerts = True

    ' check the Pop.Aborted() Function to see if the User pressed the {Esc} Key to abort the process
    ' MsgBox Pop.Aborted
    Debug.Print Pop.Aborted

    If Pop.Aborted Then
        Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data<br />Please wait...<br /><br /><i>- Process aborted...</i>"
        Pop.Pause 3000
    Else
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
        Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data<br />Complete..."
        Pop.Pause 3000
    End If

End Sub


Private Sub RandomEvent()
    On Error Resume Next

    Dim MyTimer As Double
    DoEvents
    MyTimer = Timer
    Do
        Do
            DoEvents
            Dim i
            Randomize
            For i = 1 To Rnd(10) * 1000: Next i
        Loop While Timer - MyTimer < 0.07
        Randomize
        For i = 1 To Rnd(10) * 100: Next i
    Loop While Timer - MyTimer < Rnd(0.1)
End Sub

						

And here is the resulting Screen Shot of Excel running the task:

Pop Ring Example Task

The next Pop Box is my favourite Progressbar. I styled this like an NProgress.js bar, minimal, in Green. It has a Title with the Percentage written next to the Title. It also has a Message which allows an Abort using the {Esc} Key and updates accordingly

The Progressbar itself has a Green border and a Green internal bar used to display the progress of the task. Here is the Code, again with the dummy task Code:


Sub Example_Progressbar_Nanobar10()

    Pop.Init ScalePercentage:="0%", _
             Width:=360, _
             Height:=130, _
             ExitByLightbox:=False, _
             Styles:="'title-box',                  {'font-family':'Verdana','font-size':'16px','color':'#3E585F','top':'5px','left':'20px','width':'240px'} | " _
                     & "'canvas-box',               {'border':'1px solid #3E585F'} |" _
                     & "'progress-title-box',       {'left':'20px','top':'35px','width':'340px','font-size':'14px','color':'#666666'} |" _
                     & "'progress-box',             {'left':'24px','top':'76px','height':'30px','width':'310px','background':'#FFF','border':'3px solid #22DD99'} |" _
                     & "'progressbar-box',          {'width':'0%','background-color':'#22DD99','border':'3px solid #FFF'} |" _

                     Pop.Box Canvas:=True, _
             Progressbar:=True, _
             TitleText:="Running Macro ", _
             ProgressbarTitleText:="<i>Press {Esc} to cancel the process</i>", _
             DisableCTRLBreak:=True, _
             Callback:="Task10"

End Sub

Private Sub Task10()
    On Error Resume Next

    Worksheets.Add
    Columns("A:E").ColumnWidth = 5

    Dim i
    Dim iVal
    Dim rngCell As Range
    While i < 100
        DoEvents
        Randomize
        i = i + Rnd(100) - 0.1
        RandomEvent
        If i Mod 3 = 0 Or i Mod 5 = 0 Or i Mod 7 = 0 Then GoTo skip
        iVal = Format(i / 100, "0%")
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro " & iVal
        Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:=iVal
        If Pop.CallbackExit Then i = 100

        ' // borrowed from Ejaz Ahmed's Class Progressbar as I liked the technique
        '    modified to stay within a Blue/Pink spectrum of Colours I like ;)
        For Each rngCell In Range("A2:E6").Cells
            On Error Resume Next
            rngCell.Interior.Color = RGB(255 * Rnd(i), 81, 181)
            On Error GoTo 0
        Next rngCell

skip:
    Wend

    ' lets remove the Worksheet we just created
    Application.DisplayAlerts = False
    ActiveSheet.Delete
    Application.DisplayAlerts = True

    If Pop.Aborted Then
        Pop.CallbackUpdate DialogElement:="progress-title-box", UpdateValue:="<i>Process aborted...</i>"
        Pop.Pause 3000
    Else
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
        Pop.CallbackUpdate DialogElement:="progress-title-box", UpdateValue:="<i>Process Complete</i>"
        Pop.CallbackUpdate DialogElement:="progressbar-box", UpdateValue:="100%"
        Pop.Pause 3000
    End If

End Sub


Private Sub RandomEvent()
    On Error Resume Next

    Dim MyTimer As Double
    DoEvents
    MyTimer = Timer
    Do
        Do
            DoEvents
            Dim i
            Randomize
            For i = 1 To Rnd(10) * 1000: Next i
        Loop While Timer - MyTimer < 0.07
        Randomize
        For i = 1 To Rnd(10) * 100: Next i
    Loop While Timer - MyTimer < Rnd(0.1)
End Sub

						

And here is the resulting Screen Shot of Excel running the task:

Pop NProgress.js Progressbar Example Task

Base64 Images, Logos, Icons & Pictures

Pop only uses embedded Base64 Encoded Images that are dynamically extracted from the 'shtPop' Worksheet in the 'Pop.xlsm' Workbook. You can Delete and then Load in any number of Images. You must first Base64 encode the Image String. For Images stored online, you can do this here (Motobit). For locally stored Images, ie. PC, Network Drives, you can do this here (Motobit) - the Images must not have Carriage Returns otherwise they will not work. The type of Image must be added to the 'data:image/png;base64' part. Here are 2 Images that have been Base64 Encoded using another link (Base64Image)


http://www.kubiszyn.co.uk/img/circular-check-button.png

http://www.kubiszyn.co.uk/img/circular-check-button.png


data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABLVJREFUeNrsXdFxozAQxZn793UQd2A6gA5IB6QDl+B0kOuAXAW4A+jAvgpwKrCvAg5ulhvHJ4kVSGJl7c5o8CQGSW+Xt5K8WkURC0vIsqLewLZtn7vLpitxV75DiSVfP3XlCqX/fF6tVp+sADzY6+6SQonhakJqUEh/rTul/GYFfAX9FcB+cVTtAZTxQUkZroHPulK2y0vfhiwk4POuNC096duUPywFQed+gBPVlTOU+o7Xb2XwF4OT3kCZUtdbR00/H8XikwkW39PCrr/XUP27CXTXmKh/Ueeq0elLVwoXXAy+p4A6scaw9tHBXrC8u0QHwUCw/ujihaOGThWIDlWUOgQGUyHaXZB9GwD8I8WRhuER2pGcEroGbRGUs/eIQvcIStr6Av6RTGP1+3UkrQQE+O8PMIx+H1FCQhH8C2Wun+gbLmTeBAT42+jBhEyfYbQTFPgaSli7AP8YIvhIJdgdoiomWUGAj1RCYXO2GDz4SCVkNqhHVlkeBSowOrLvDxSrmu9R4KKYJ5SmKkhkDidiGTCSDUwSEw+XLU5tGfov/kC4+GiL4/YM+39Y7Y37SInjbRhuLbZoTFt/zlA7wEyizYphHsWtmv0WKCZdGUPsADvJuL8JFNA1DMW3M9mj1KmQuV+83FAg75P5gjXm5t0iS63+rPVskUZ8wRjxk+D+VPC3Q0hRxAByHYnDKEdDKwGrg+BfL1PpJ2PL12MChTNea9/E4E9bdscY8xOGfph2/m55Sjtq+aX52MMYxd8rQLT3qmbwJ4Evwy7WfWUSpp3Jz07QlN7vRgyN/12Emkie/SyioI3g/jPTzmwRYbgRKSAORQEOwZdhGIsUIGrMicGfLSfVZG5MAVcGf7ZcsQqIeahpHHyZxKq1oIebAywMvhLDp+jBhZjlh6UA6uD38s0REENCjl6cJMjwAfz7Blc24n8EP05YD+altIFEEi9UiSjI1pj/9c4K+8+1LRA8sfyTSAG2xvyyX5WMK4Eo+Mr51ZgCUgMN+FBMRowpgbDlx6jJmWTptDEFjk1OprxpUBKikoi+aHU52hZI1Hdsji1HY76cUFWCB+AnWkYtGYruKA4RfdirLImxqlQz4ZMlR/xPwBGmcxyzR5OsVGttyGVYylQL9mmXvnaMlevALF0wPQM/mxQfKomMLiw2FAWqb/kpJJvaS8yNuevgXAS4iU8pEmZFmC8Vno7MuuXFLv1Z4ekKGmocNFxHCWRTJMzaoDHiQDIiSqAMvhnsltyk53NCKCOb9EZ4LF9QCdTBN4uZ0Y3H05XQ+JIWxzhenKpAC6u9FcbgZB3oN7W1whacrgaFkb10NYp5ASdsihwkbLqZHXPKMryPNL90w0n7tOYqma1KOW1ltFDayhsq4sStSyVuRfgDTl3MazWB9JnT1xMwOD7AwY9TNPgIEwJK4EN8HDSaj7EiogQ+yI1Ih/goQwJvA+XDPHVOdvU3YSEfZ6sW1wc6v0XTD1nuSx+9PURV13ffSeHKBzobGGksIU0b0m8bwMUlAeDLoHNi34xGSseg5xSc64qaMoDLU+Dx1NCja/Af/bWmlAV45cEb8gzONAYHOzhZkQxO+gqfzx3YnxELCwtR+SPAAEi/fLep65neAAAAAElFTkSuQmCC

Warning Image from 'Msg'

data:image/gif;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAARgAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABAMDAwMDBAMDBAYEAwQGBwUEBAUHCAYGBwYGCAoICQkJCQgKCgwMDAwMCgwMDQ0MDBERERERFBQUFBQUFBQUFAEEBQUIBwgPCgoPFA4ODhQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAlgCWAwERAAIRAQMRAf/EAJsAAAIDAQEBAAAAAAAAAAAAAAACAQQFAwYIAQEAAgMBAQAAAAAAAAAAAAAAAQQDBQYCBxAAAgECBAQCCQQCAwAAAAAAAAECEQMhMUEEUXESBWGxkcHRIjJCchMzgeFiI6HxUtI0EQEAAgECAgYHBgYDAAAAAAAAAQIDEQQhMVFxsRIzBUFhgaEiMhPB0eFSIxTwkUJiotLxckP/2gAMAwEAAhEDEQA/APv4AAAAAAAAAAAFnchbXVckorxMeTJWka2nR6iszyU7nc7UcLcXPxyRqsnmuOPliZ9yxXbzPNxfdLvywiudX7ClbzbJ6Ihkjbx0hd0u/NCL5VXtJr5tf01gnbx0u9vuVmWFxOD45ouYvNcdvmia+9itt7RyW4ThcXVCSlHijbUvW8a1nWFeYmOZj2gAAAAAAAAAAAAAAFHc9wjCsLHvS1lovaaXdeZRX4cfGen0LWPBrxlmzuTuS6pycpcWc9fJa862nWV2KxHIRhOfwqp4iJkmYg621zwR6+nLz9SA9vcXBiccn1Ic5QlH4lQxzEw9xMSm3duWpdVuTi/A94818c61nRFqxbm09t3CF1qF2kLmj0Z0u08yrk+G/C3ulRyYJrxjkum4VgAAAAAAAAAADaSbbolmyJmIjWRlbveu7W3adLer1f7HMb3fzk+Gny9v4L+LD3eM81JJydEqs1ERqszK1a2yzli+GhZpiYLZOhZVtLP0It1xdLDNjdK4GXux0POo6VwE0joNSStpriuDMFsXQ9RZVu7bWGD4FK+LRnrk6VVpp0eDK8rDQ2W/caWr7rHKM3pzN5sfMe78GSeHonoVMuHXjDUOmUAAAAAAAAABlb3d/dbtW3/Ws3/yfsOX3+9+pPcr8vb+C/hxd3jPNTjFzfTHM1MRqszOi7ZsqKwz1kXMeJVtfV3SSVEXYjRiSSAAIABDSeZ5tWJ5mqtfsKfhLRmvy4mel9FGScW4tUaKcxotROrQ2G96WrF1+7lCT08De+Xb7u/p3nh6J+xTzYteMNQ6ZRAAAAAABn9w3VK2Lbxfxv1Gh8x3en6dfb9y3gx/1SzUnJpLFs56OK7M6L1myoqmurLuLGq3tqsZYIuxGjECQABAAACCANJqjPMxExoKt+x1r+SyfE1+XEz0vootNOjzRSlaX4b6UtnctuVL0UlGWrTaXpN3TzC07e1Zn4ojhPTGvaqzhjvxPoax1TXgAAAK+73C29qq/JLCK9ZR3m5+jThznkzYsfen1MVtttvFvNnHTMzOstkt7ez0qr+J/wCEWsWNXvZaSSVEbCIiIYEkgACBWtbi9dj1KzRfV+xsv2X93u/Fi755XL8U39nL+X7D9l/d7vxO+6msZQAECGqqh5tXWNEqe5s4OaXvLPxRrM2PRZx39CkVFh6c+jtIAACJSUYuUnSKVWzza0ViZnlCYjVh7i+791zeWUVwRxe5zzmvNp9jaY6d2NE7e31PreSy5mLHXXii9tOC/FUXibSle7CrMpPaAQFc0vExzkiE6Fdx6IxTllPddO3pfYjyOuVFi8l9tgUDidV0DVIq+I709KNE9UuJP1LR6TRDdcyLXm3M0VXYSvxw9yWNPFKpVmnxepYi/wALdPoDVAAAzu5bjLbxfjP1I5/zTc/+ce37lzb0/qlnwi5yUVqc/EayuTOkNG1BRSpksjZ4qacVO06uhYeCuaWWLMVskQmIc228yva0y96IPAAO/b/wpPBrNHaRMTGsKSxe/GyRQOIXgQACCAEAA1DulEAc712Nm1K5LTJcWYM+aMVJtPoe6V706MKUnOTnJ1lJ1bOHvebTMzzltYjSNFrbW6Krzl5FjDTVgyWWsEvA2PCIVySnXBZFa+TXk9xBDCkABAAl22D+P6peZ1+38OvVHYp25y77h/1sbjwrdU9hXnCkccuACCAEAACBqHdqIAyu5X+u4rMX7sM/qfsOX803Hev3I5V7V/b00jVUtQ65paLFmopXWVi06Q0I0iqvNmyrpWNVOeJW28zFa02eohB4AQAAISAOuw+f6peZ2G38KvVHYp25ysbn8bG48K3VPYV5wonGrgACAAQ2QIriSNY7pRc791WbUrj0WHPQwbjLGLHNuh7pXvTowHJybk3VvFs4W0zM6y20Rot7eHRCrzliyxjjSFe86y7N1MszqxoPIAAJBAAAgddh8/1S8zsdv4VeqOxTtzlY3P42Nx4VuqewrzhROMXAAEBWwIbJC1xA2TulFmd0vVcbKyXvS56HOebZuMY465XttX0qNqHXNLTN8jQ1jWVq06QvFtUAAEggAAQACCB22Hz/AFS8zstv4VeqOxTtzlY3P42Nx4VuqewrzhROMXEVICtkhWwFbJEVA3G6KryO4mdFF56/cd27O4/meHLQ4PPl+pkm3TLb0r3YiHfaxpFzeuXJE444aseSeOjuZmIEAACAAQQAAIHXY4SnF59TfpxOw2lotirMdHZwU7xpMrO5/Gz3uPCt1T2FecM9s4tcK2SFciQrYCtkiKga+9ufb202s5LpX6nU7/J3MNp6eH81fDXW0MLPA4ltGjGPTFR4IuxGkKkzrKSUAgAEEAACAABAfZ/nuc15I6zYeBX29squT5ljeOlsnfTMYbafxxRT5me5HJrZWyQrYCtkhWwhFSRo92nSFuHFuT/T/Zt/OL6VrX16/wAfzRto4zLPsrquxXjX0HOU4yuXngvFtVAEEAACAAAEVICtkjps7kVenV6ryR1mw8Cvt7ZVcnzO29uQlboniN/4FvZ2wjH8zPbOUWytkhWwhDZIVsBakjQ7rL+6EeEa+lsuecW/UrHq+1720fDKttcbnJM0+LmzZOS2WVcABAAACKkCGyQrkAjkSFbAVskQ2EFbJCtgK2SFbAioGj3X/wBEX/BebLPnHjR/1+2WTbfL7XDafkfL1o1WLmy5eS2WFcAAEVIENkhWwFciQrYCtkhIzU1WNWuTL37HN+X3x97H9SENtY0dOTH7HN+X3x9536lbKT2VskK2ArZIhsCKgbHd4Y2rnOL8zYec041t1wnazzhR28um6q64ek5/HOkrV41heLaqKkBWwFbJCuRIVsBWyQrYQVyJGpsLUHZVVodupO921b+28APPORxK6VskQ2ArZIhsBagek7moPavrdHVOHPh6DfeaxWcHGeOvDr/4Y9vr3+DEVaqmehxjZtGLk4rqVJaouxyUpQ6npCHUBHUkK6gK6khXUIK6khXUDT2Vy/GylG05KmacfW0dh9S35Z/x/wBlTT1u127ueh1sSXjWH/YfUt+Wf8f9jT1sB1ORWyuoEOpIV1AjEkRiEP/Z
						

The Subroutine to Load in your Icons and Preloaders as Base64 encoded data into the 'shtPop' Worksheet can be found in the 'Pop' Code Module. It is called 'InstallIcons' and will allow you to Browse and locate all of your Base64 Images/Preloader Files which must be '.TXT' Files. The Name of the Icon or Preloader is derived from the Filename of your Base64 Encoded Text File ie. 'icoSpanner.txt'

Make a backup of 'Pop'. Ensure that you have saved your Base64 data correctly in Text Files with the Name of the File being the Name of the Icon or Preloader that you want to use ie. 'icoSpanner' for a Spanner Icon Image. Scroll down to the InstallIcons() Subroutine and run this Code - Browse and select your Files to install them. Now you would add the Named Argument including the Name of the Icon like this: 'Icon:=icoSpanner' or Picture:=icoSpanner' etc.

Font Stacking

Pop uses Font Stacking to ensure IE7 Browser fallback for Fonts on your PC. The default Font used is a Google Font called 'Verdana'. If this fails to load, then the following CSS 'font-family' is adhered to in order of inclusion - if all of these Fonts fail then the default 'serif' Font on your system is used. Any Fonts rendered within the IE7 WebBrowser Control will never look 100% perfect, but you can tweak Font Sizes and Colours to achieve decent looking Dialog Text - alternatively, you can use a Google Font


font-family: Verdana, Garamond, 'Adobe Garamond Pro', 'Hoefler Text', Georgia, 'Calibri', serif;
						

Google Fonts

Pop can load Google Fonts in the HTML Markup used by the WebBrowser control - by default this is switched off. You can turn this on by uncommenting the Google Fonts at the very top of the HTML Markup in the 'Pop' Code Module in the Pop.Init() Subroutine by adding/removing Font Names separated by a 'Pipe' or '|' character - for Spaces use the 'Plus' '+' character. Call the new Font by replacing the 'FontName' in the 'font-family' in the CSS Styles() Parameter through the Pop.Init() Subroutine with the new Google FontName

Uncomment this line (you may or may not have to do this - depends if I leave uncommented):
v = v & "< link href=""https://fonts.googleapis.com/css?family=Indie+Flower:400"" rel=""stylesheet"" lazyload>" & Chr$(13)

Use the following in the URL Link:
https://fonts.googleapis.com/css?family=Indie+Flower:400

Or use the following in the URL Link (may have impact on load times for Pop.Box in some environments):
https://fonts.googleapis.com/css?family=Quicksand|Indie+Flower|Raleway
						
Pop with an Indie Flower Google Font:

Pop with Indie Flower Google Font

You should remember that using these Fonts may induce a definite 'Lag' on loading the Pop.Box in some environments as it downloads the Font(s). To avoid this as much as you can you should just pull the weight that you want ie. '?family=Indie+Flower:400' - this will save download time

Here is the link to Google Fonts - you can choose any Font shown here. Click the little red cross and then the 'Family Selected' Popup will give you the 'Embed Font' and the 'Specify in CSS' Font Name

Colours, HTML, Long, RGB

Pop uses Colours in a variety of ways. For consistency, any Parameters use 'Long' Colour Codes whilst any HTML Markup Styles use 'HTML' Colour Codes. You can pass an 'RGB' Colour Code into a Long Parameter. To get a Long Colour Code from an RGB Colour Code you can do either of the following below - I recomend installing 'Instant Eyedropper' by Konstantin Yagola on your PC if you intend to pull Colours from a variety of sources and switch them between 'HTML', 'Long' or 'RGB'

1. RGB to Long - in the immediate Window simply add the following to see the Long value '16777215':

? RGB(255, 255,255)

2. Add this Subroutine to any Code Module and run to view the Long Colour Code:

Private Sub PrintLongRGB()
 ' enter your RGB Colour Code & press F5
 ' use View->Immediate Window to see the Long equivalent
 Dim col As Long
 col = RGB(255, 185, 1)
 Debug.Print col
End Sub

3. pass an RGB into a Long Parameter - this will set the Lightbox to Black

LightboxColour := RGB(0,0,0)
						
Pop exposes a Global Enum called 'Colours' that you can use to select a stored 'Long' Colour. To choose a predefined Pop Colours Code use the Global Variable as per below in the Parameters of Pop.Initialise() or Pop.Box():

LightboxColour:=Colours.Cinder
						

Creating an Awesome Dialog

Pop can create truly awesome Dialog Boxes if you take the time to design something beautiful given all of the CSS Styles() and CSS PsuedoStyles() Functions. Here is the Code for a really awesome Dialog:


' Example of an Awesome Dialog
Sub Example_Picture_Message()

    Pop.Init ScalePercentage:="0%", _
             Width:=436, _
             Height:=240, _
             Picture:=icoPicture, _
             Styles:="'title-box',        {'font-family':'Verdana','color':'#3E585F','top':'40px','left':'240px','width':'120px'} | " _
                     & "'picture-box',    {'left':'0px','top':'0px','width':'210px','height':'240px','border':'none','text-align':'center'} | " _
                     & "'message-box',    {'font-family':'Verdana','color':'#83A2AA','top':'80px','left':'240px','width':'180px'} | " _
                     & "'close-box',      {'left':'396px','top':'10px','color':'#47364F'} | " _
                     & "'canvas-box',     {'border':'1px solid #188777'} | " _
                     & "'frame1-box',     {'left':'0px','top':'0px','width':'210px','height':'240px','background':'#188777','border':'none'} |" _
                     & "'frame2-box',     {'left':'210px','top':'2px','width':'224px','height':'236px','background':'#FFF','border':'none'} |" _
                     & "'ok-box',         {'left':'240px','top':'150px', 'height':'40px','font-size':'14px','background':'#FB2A4F'} |" _
                     & "'picture-psuedo', {'vertical-align':'middle'}", _
             PsuedoStyles:="ok-rollover-background|#188777,ok-rollout-background|#FB2A4F,ok-rollover-colour|#FFF,ok-text|Delete,ok-title|Click to Delete the user profile,close-rollover-colour|#188777,close-rollout-colour|#47364F"

    Pop.Box Canvas:=True, _
            TitleText:="Lorem Ipsum", _
            MessageText:="Dolor sit amet, consectetur adipiscing elit. Vestibulum", _
            Picture:=True, _
            Frame1:=True, _
            Frame2:=True, _
            OKButton:=True, _
            CloseButton:=True

End Sub

						
Pop Box Dialog - I have split the Pop Box using a Frame and an Icon. I have also changed the Close Cross Colours and the Font Colours:

An Awesome Pop Box Dialog

Pop Box Dialog pressing the Button - if you want the Button Colours the other way around, it is a simple change to the CSS Style() and PsuedoStyle():



Pop Box Dialog pressing the Close Button:



Pop Box Dialog with Justify Text and different Button Colours:



Q & A

Q. I have an Image that is just '1px' in size and I want to use it as an Icon, Picture or Logo - can it be done?
A. Yes you can do this by using the CSS Styles() Function. Simply add your Image to one of the Pop Boxes ie. 'Icon:=icoSuccessTitle' and then use the following Code (the 'icon-img' is the part of the Code that does the work of resizing the Image no matter what the Dialog or Icon Scaling is set to). A word of caution! You will not be able to Scale any '1px' Width Images for the Height - it must be a fixed Height, so if you do Scale the Dialog then you will have to adjust the Height afterwards whenever you do a new Scaling Percentage (not that much of a problem really...):


Styles:="'icon-box', {'left':'245px','top':'24px'} | " _
      & "'icon-img', {'width':'100px','height':'20px'} 

						

Q. Can Pop Box emulate the 'Msg' Dialog Boxes?
A. Of course, with a little work you can get a Success Dialog like the one below but better as it has a Rollover Close Button that you can change the Colour of and it boasts a Title on Hover. For this example I used 2 Images as Logo and Icon, the Titlebar being made from a '1px' Base64 encoded Image. I also rendered a 'TitleText' and a 'MessageText' - the CSS Styles() Function is a very powerful feature of Pop Box:


Pop as a Msg Success Dialog

And here is the Code to do it:


Pop.Init ScalePercentage:="0%", _
         Width:=410, _
         Height:=185, _
         Logo:=icoMsgSuccessTitle, _
         Icon:=icoMsgSuccess, _
         Styles:="'message-box', {'font-family':'Verdana','font-size':'14px','color':'#666666','top':'40px','left':'10px'} | " _
               & "'title-box', {'left':'4px','top':'0px','padding':'0px','width':'240px','height':'24px','color':'#3c7f51'} | " _
               & "'logo-box', {'left':'0px','top':'0px','horizontal-align':'left','padding':'0px','width':'410px','height':'30px'} | " _
               & "'logo-img', {'width':'100%','height':'24px','border':'1px solid #60a174','border-bottom':'none'} | " _
               & "'logo-psuedo', {'vertical-align':'top'} | " _
               & "'icon-box', {'left':'251px','top':'24px','horizontal-align':'right','padding':'0px','width':'165px','height':'160px','background':'none'} | " _
               & "'icon-psuedo', {'vertical-align':'bottom'} | " _
               & "'close-box', {'left':'380px','top':'0px','background':'none','color':'#FFF'} | " _
               & "'canvas-box',  {'border':'1px solid #60a174'}", _
         PsuedoStyles:="close-rollover-background|none,close-rollout-background|none,close-rollover-colour|#3c7f51,close-rollout-colour|#FFF"
         
Pop.Box Canvas:=True, _
        TitleText:="Success", _
        Logo:=True, _
        Icon:=True, _
        CloseButton:=True, _
        MessageText:="Your request was processed"

						

Q. Do you have a link to convert RGB values to HEX (HTML) or visa-versa?
A. Yes go here for RGB to HEX or here for HEX to RGB

Q. Can you make the Lightbox Invisible and still use it to detect a Click and/or prevent a Pop Box from being dismissed?
A. Yes just Call the Public 'Pop.LightBoxInVisibility' - you can pass 'True' or 'False' (the default is 'True'). Now you will not see a Lightbox and it will still detect a Click or you can use 'ExitByLightbox:=False' to prevent a User dismissing a Pop Box by a Click. There are a couple of Examples in the Download when you Purchase Pop

Q. Okay, so then can you make the Lightbox Invisible and allow a User to still click on the Worksheet?
A. Of course, just set the 'LightboxOpacity' Parameter in the Pop.Init() Subroutine like this 'LightboxOpacity:=0'

Q. I have a slight lag when displaying a Pop Box with a large embedded Image/Preloader the first time the Pop Routines are called - is there a workaround for this?
A. There sure is, normally there is no wait time, but for very large amounts of embedded data and also running the Pop Box for the first time will have an overhead as the data is written to the WebBrowser Control and then processed by IE/Excel. To avoid this you can add the following Code to the 'ThisWorkbook' Code Module - running a Pop Box routine for the first time should then be instant:


Private Sub Workbook_Open()
    Pop.Init "0%", Startup:=True
    Pop.Box Canvas:=False, Startup:=True
End Sub

						

Dialog Screen Shots

Pop Box with an Indie Flower Google Font downloaded on the fly:

Pop with Indie Flower Google Font

Pop Box with Camera Icon, demonstrating CSS PsuedoStyles() for Button Text & Title:

Pop with Camera Icon demonstrating Psuedo Styles for Buttons

Pop Box with Search Icon (Find & Replace), demonstrating CSS PsuedoStyles() for Button Text & Title:

Pop with Search Icon demonstrating Psuedo Styles for Buttons

Pop Box with Camera Icon with Rounded Corners for the Dialog Box:

Pop with Camera Icon demonstrating Rounded Corners for the Dialog

Pop Box with Camera Icon with a thick Border around the Dialog Box (leaving the Close Cross in situ gives a chunky kind of look & feel):

Pop with Camera Icon demonstrating a Thick Border

Pop Box with Success Thumb Up - please Note: this Thumb Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop with Thumb Icon

Pop Box with Upload / Cloud - please Note: this Upload / Cloud Icon is not included with Pop, but can be purchsed for $2 at www.iconfinder.com

Pop with Upload Cloud Icon

Pop Box as a 'Msg' Success Dialog - this is the power of Pop Box, with a little work it can even emulate 'Msg' (formerly Notify) as a Success Dialog with Rollover Close Button:

Pop as a Msg Success Dialog

Pop Box Success Groove Icon:

Pop Box Success Groove Icon

Pop Box Error Groove Icon:

Pop Box Error Groove Icon

Pop Box Warning Groove Icon:

Pop Box Warning Groove Icon

Pop Box Help Groove Icon:

Pop Box Help Groove Icon

Pop Box Success Emulate:

Pop Box Success Emulate

Pop Box Error Emulate:

Pop Box Error Emulate

Pop Box Warning Emulate:

Pop Box Warning Emulate

Pop Box Help Emulate:

Pop Box Help Emulate

Pop Box Success Outset 3D Button:

Pop Box Success Outset 3D Button

An Awesome Pop Box with Justify Text:



Pop Box Dialog downloading data from Access:



Pop Box Dialog downloading data from Access featuring an Orange Cubes Preloader:

Pop Cubes Preloader

Pop Box Popup Window Dialog:

Popup Window

Pop Box Standard Progressbar:

Pop Box Standard Progressbar

Pop Box NProgress.JS Emulation Progressbar:

Pop Box NProgress.JS Emulation

Pop Box with a 'Thin', 'Outset' Border:

Pop Box Error Dialog Button with Thin, Outset Border

Lightbox Screen Shots

Pop Box with Dialog in a White Lightbox:

Popup Window with Light White Lightbox

Pop Box with Dialog in a Black Lightbox:

Popup Window with Dark Black Lightbox

Pop Box with Dialog in a Beige Lightbox, Blue Buttons, a Greater Lightbox Opacity and a Blue Border:

Popup Window with Beige Lightbox and Blue Buttons Blue Border

Dialog Videos

Preloader - Cogs:



Preloader - Ring:



Preloader - Harmony:



Preloader - Rolling:



Preloader - Cloud:



Preloader - Cubes:



Fullscreen Videos

Pop Progressbar, jerky emulation, writing block data to a Worksheet:



Pop Progressbar, writing block data to a Worksheet:



Pop Progressbar, jerky emulation in a 'Msg' Help Style, writing block data to a Worksheet (allowing user cancel):



Progressbar Screen Shots

Pop Box Standard Progressbar:

Pop Box Standard Progressbar

Pop Box Standard Progressbar with Border Aborted:

Pop Box Standard Progressbar Aborted

Pop Box Standard Progressbar with Border, Shorter Width:

Pop Box Standard Progressbar Shorter WIdth

Pop Box NProgress.JS Emulation Progressbar:

Pop Box NProgress.JS Emulation

Pop Box NProgress.JS Emulation, Shorter Progressbar:

Pop Box Shorter NProgress.JS Emulation

Pop Box Nanoscopic Progressbar:

Pop Box Nanoscopic Progressbar

Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title:

Pop Box NProgress.JS smaller Nanoscopic Progressbar with Percentage in Title

Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title - Aborted:

Pop Box NProgress.JS smaller Nanoscopic Progressbar with Percentage in Title - Aborted

Pop Box NProgress.JS Emulation Progressbar, smaller with Percentage in Title - Complete:

Pop Box NProgress.JS smaller Nanoscopic Progressbar with Percentage in Title - Complete

Compressing Files

You can Compress your finished Files prior to distribution using VBA DecompilerMore a great little free tool

Support

Support is only given to Purchased Software. You should only contact me on the Support Email address supplied by FastSpring - please provide proof of purchase ie. Email address or Order Reference

Please Note: I Cannot undertake any bespoke modifications to this Software! Under the Terms of the License you are free to do this yourself or engage someone that can do this work on your behalf

Known / Fixed Bugs

02.04.2018 - 'True is Undefined' JavaScript Error An error has been reported in the JavaScript when using Windows 10 and the German Version of Excel 2013 & Excel 2016

  • - this was fixed 10.06.2018
by replacing LCase() with Int() in the Code: Call frmPop.Markup.Document.parentWindow.execScript() - thanks to Ine Heinrich & Hasan Cansü for their respective fixes

28.02.2018 - Scaling Bug on Cancel Button There was a bug when scaling 'DOWN' the 'Cancel' Button (large amounts ie. '-20%') where it appears to display the Font slightly bigger than the Font on the 'OK' Button
  • - this was fixed 02.03.2018
by removing a stray letter 'e' from the Javascript ie 'CancelFont.style.fontSizee' which should be 'CancelFont.style.fontSize'

03.03.2018 - Scaling Bug on Frame2 There is a bug when scaling 'DOWN' the 'Frame2' Pop Box where the Height is increased for 1px lines. Resizing for positive % is okay

04.03.2018 - Center Bug on Progressbar Percentage Box There is a bug when trying to align the Text Vertically within the Progressbar Percentage Box - use absolute positioning/Width/Height for now (horizontal alignment works fine)

04.03.2018 - Placeholder Progressbar Bug There is a bug where the Progressbar Placeholder (chasing ants Border) is always visible whenever turning on Placeholders (this does not affect anything but is annoying)

04.03.2018 - Fadeout Bug There is a bug where when running 2 Tasks and using the Fadeout Parameters with the Callback Function, the Code fades the Pop Box Dialog a little too early - do not use Fadeout with a Callback Function until this is fixed

Changelog

10.06.2018 (Version 1.2) Fixed 'True is Undefined' JavaScript Error. An error had been reported in the JavaScript when using Windows 10 and the German Version of Excel 2013 & Excel 2016

02.04.2018 (Version 1.1) Removed erroneous Defined Names in the 'Pop.xlsm' File

12.03.2018 (Version 1) Release