Geek Documentation Logo

Pop

Version 1.4

#back

CSS Styles() #back to top

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() #back to top

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 #back to top

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 #back to top

Examples with Code #back to top

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
Please wait...

- Press {Esc} to quit this process", _ 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
Please wait...

- Process aborted..." Pop.Pause 3000 Else Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%" Pop.CallbackUpdate DialogElement:="message", UpdateValue:="Formatting Master data
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 Examples Ring 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:="Press {Esc} to cancel the process", _
             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:="Process aborted..."
        Pop.Pause 3000
    Else
        Pop.CallbackUpdate DialogElement:="title", UpdateValue:="Running Macro 100%"
        Pop.CallbackUpdate DialogElement:="progress-title-box", UpdateValue:="Process Complete"
        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 Examples Progressbar

Base64 Images, Logos, Icons & Pictures #back to top

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)

https://www.kubiszyn.co.uk/documentation/images/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

https://www.kubiszyn.co.uk/documentation/images/exclamation.gif

data:image/gif;base64,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
                        

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 #back to top

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 #back to top

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 Indie Font Example

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

Google Fonts Image

Colours, HTML, Long, RGB #back to top

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 #back to top

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:

Pop Picture 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 Picture Dialog Button Hover

Pop Box Dialog pressing the Close Button:

Pop Picture Dialog Close Hover

Pop Box Dialog with Justify Text and different Button Colours:

Pop Awesome Dialog Justify Text Alt Colours

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?

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'}
                            



Can Pop Box emulate the 'Msg' Dialog Boxes?

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 Success Msg Emulate

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"
                            



Do you have a link to convert RGB values to HEX (HTML) or visa-versa?




Can you make the Lightbox Invisible and still use it to detect a Click and/or prevent a Pop Box from being dismissed?

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




Okay, so then can you make the Lightbox Invisible and allow a User to still click on the Worksheet?

Of course, just set the 'LightboxOpacity' Parameter in the Pop.Init() Subroutine like this 'LightboxOpacity:=0'




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?

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 #back to top

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

Pop Indie Font Example

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

Pop Icon Camera Button Psuedo Styles

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

Pop Icon Find Replace Search

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

Pop Icon Camera Rounded Corners

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 Icon Spanner 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 Icon Thumb

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 Icon Upload

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 Success Msg Emulate

Pop Box Success Groove Icon:

Pop Success Groove Button

Pop Box Error Groove Icon:

Pop Error Groove Button

Pop Box Warning Groove Icon:

Pop Warning Groove Button

Pop Box Help Groove Icon:

Pop Help Groove Button

Pop Box Success Emulate:

Pop Success Emulate

Pop Box Error Emulate:

Pop Error Emulate

Pop Box Warning Emulate:

Pop Warning Emulate

Pop Box Help Emulate:

Pop Help Emulate

Pop Box Success Outset 3D Button:

Pop Success Outset Button

An Awesome Pop Box with Justify Text:

Pop Awesome Dialog Justify Text Alt Colours

Pop Box Dialog downloading data from Access:

Pop Downloading Data

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

Pop Cubes Preloader

Pop Box Popup Window Dialog:

Pop Popup Window

Pop Box Standard Progressbar:

Pop Progressbar Standard

Pop Box NProgress.JS Emulation Progressbar:

Pop Progressbar NProgress

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

Pop Error Thin Outset




Lightbox Screen Shots #back to top

Pop Box with Dialog in a White Lightbox:

Pop Lightbox PopUp Window Light

Pop Box with Dialog in a Black Lightbox:

Pop Lightbox PopUp Window Dark

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

Pop Lightbox Popup Window Blue Buttons




Dialog Videos #back to top

Preloader - Cogs:



Preloader - Ring:



Preloader - Harmony:



Preloader - Rolling:



Preloader - Cloud:



Preloader - Cubes:








Fullscreen Videos #back to top

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 #back to top

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 #back to top

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

Known/Fixed Bugs #back to top

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

Support #back to top

Please remember you have purchased very affordable Software and you have not paid for a full-time Software design agency - I am but one man. Occasionally I may help with small tweaks, but these requests will be put on a much lower priority due to their nature. You have not PAID for Support, Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support (limited) for my Software includes:

* Responding to questions or problems regarding the Software and its features
* Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include:

* Customization and installation services
* Support for third party software or ANY kind of development whatsoever

Before seeking support, please...

* Make sure your question is a valid Software Issue and not a customization request
* Make sure you have read through the documentation and any related video guides before asking support on how to accomplish a task
* Make sure to double check the Software FAQs or online documentation
* Ensure that you access to the VBOM is allowed and that Macros can run in Excel
* Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
Contact Kubiszyn.co.uk via our Facebook Page - remember to be patient, if there has been an issue with your download, I will always respond within 48 hours and will Email you the File directly if neccessary or via Messanger. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Version History (Changelog) #back to top

You can find the version history in the Code Module for any Macro-enabled Software or read more information below. The latest Version is always shown first


Changelog

14.11.2018 (Version 1.4) Code tidy, minor adjustments for Office 365 64bit Excel.  RandomEvent() - there is an issue using this with Office 365 Excel 64bit, therefore I have commented out any use of this Subroutine

---

04.07.2018 (Version 1.3) Fixed OK RolloutColour for Psuedo Style - adjusted Code shown below:

v = v & "function OKRollout() { document.getElementById('ok-box').style.background = '" & IIf(PsuedoStyle.OKRolloutBackground <> "", PsuedoStyle.OKRolloutBackground, "#3FC59D") & "'; document.getElementById('ok-box').style.color ='" & IIf(PsuedoStyle.OKRolloutColour <> "", PsuedoStyle.OKRolloutColour, "#FFF") & "' }" & Chr$(13)

---

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