Introduction

Introducing Zingy or zing·ing [ zing-ee ] for Excel

Animated HTML Dialog & Lightbox with easing for Excel (32bit or 64bit, Version 16) · Build Beautiful, Modern Animated UserForms for Excel

Zingy is an extremely powerful, versatile, HTML-driven, JavaScript Animated Dialog for Excel built upon my Avante-garde Software with a number of significant enhancements including 7 Classes that drive the Interface and lots of new Skins, Icons and awesome Animations. All main parts of the Dialog can be set to be Draggable, for example you can grab it by the Titlebar or the Footer and drag the Dialog around the Screen after its initial Animation (you can even create Multiple, draggable Dialogs ontop of each other). A new Properties Class allows you to tweak a whole raft of the HTML settings adding total flexibility and styling customisation. Zingy also uses modern Google Fonts and the 'Rajdhani' Font is its default 'FontFamily' but this can also be changed and you can have different Dialogs using different Font Families and Font Weights if you want. You can choose to set the Colour and the main parts of the Dialog will be rendered in that Colour ie. the Icon, Rollover Close Cross and Buttons Background. The same Colour is also used by the High/Low Span Tags to highlight and lowlight Text. Even the 3D Button Borders and Border Radius can be altered. Zingy can be Skinned using Base64 encoded images with 62 different skins, 53 Icons, PNG images and Preloaders to choose from and animated via JavaScript using 38 different animations. Zingy uses my latest 'Easing' Lightbox to render your Dialogs if required or to simply use as a Lightbox overlay. You can also use Zingy to present Checkboxes, Radiobuttons, Drop-down Combos, Listboxes, Edit Boxes, Password Boxes and collect the data chosen or entered; a classic example of this is demonstrated through a Login Zingy Dialog · check out all of the Screen Shots including the Makeovers, Lightbox with easing and Awesome images from the Menubar on the left-hand side. New for Zingy 1.2 - use Preloaders

You are purchasing Zingy v1.5 which includes the relevant Classes required to drive the Software, embedded Skins, Icons & Animations, together with the easing Lightbox

   

 

If you love Zingy, you may also like any of the following Software · all of the Skins, Icons and Animations used in Zingy, are backward-compatible with Avente-garde and Wild Oliva

Avante-garde ·  Wild Oliva ·  Zombie

Prerequisites

• Microsoft Excel 2016 Version 16 (32bit or 64bit) · designed for Office 365 Windows 11
• Moderate to Strong Excel & VBA skills
• Windows PC · NOT a Mac!
• No support is provided for customization of this Software

Features

• My Favourite Embedded Skins (62), SVG Icons, PNG images and Preloaders (53) & Animations (38) · check out some of the New Animations in Version 1.1
• Combine some of the Dark Skins with my Wet Chalk range of Colours to create some stunningly beautiful Dialog Boxes for Excel
• Use my easing White or Black Lightbox to overlay your Dialogs - you have a choice of around 36 different easing functions
• Super-fast and Silky-slick Hand-picked Animations
• Lightweight Google Fonts, the default 'Rajdhani' Font used in the 'FontFamily' Parameter, includes Weights '300;400;500;600;700' as standard for you to choose
• A Properties Class which is a very flexible Interface for the Dialog Class allowing for a lot of Bespoke Customisation
• Capture 5 Different Methods of Return Value from the Animated Dialog. Use as a Modeless Dialog and still respond to return values
• Change the Width and Height of your Zingy Dialogs
• White & Black Easing Lightbox Overlay
• Specific Elements of the Dialog are Draggable, for example you can grab the Titlebar and drag the Dialog around (even with multiple Dialogs). Options are: Titlebar, Textbox (Content Area for Icon and Text), Titlebar and Textbox or Modal (entire Dialog)
• Create Multiple Zingy Dialogs ontop of each other
• Use an alternative subtle method for the Mouse hover on the Close Cross using Opacity and no background Colour
• Use Themes, like Default, Dark or Navy; Zingy Themes allow you to maintain specific Colours throughout the Dialog and can be edited or added to create bespoke Themes. You can also combine these with Property Colours like Banana or Blue Wet Chalk and Skins like Carbon or Grey Squares to create stunning looking Dialog Interfaces
• Rollover, interactive Close Cross and Buttons with Tooltips
• Remove the 3D Border on a Button Rollover or Mouseover if required
• Use the <span> tags to Highlight parts of your Titlebar or Textbox Text or use the Overrides in the Properties Class to set your own Highlighting Colours. You can also combine both of these methods using your own 'Inline' Styles
• Use 3D Line tags like '<hr id=line>' to create 3D lines in the Zingy Text area
• Over 70 Colours as pre-defined TColours Enum like DistressedBlue, MuddySquishy etc.
• Create and present Ordered and Unordered lists of data to user
• Use Checkboxes to capture user selections and then display the results
• Use Radiobuttons to allow a user to make a single selection from many options
• Use a Listbox to allow users to select one or more options
• Use Inputs for example in a Logon/Login Dialog for a Username and a Password
• Use a Dropdown Combo Box to allow a user to pick a single option from a drop-down list
• Over 100 Examples of Zingy Dialogs with various Skins, Animations, Icons and Colour Themes
• If you want to see how I created Zingy, then you can view the complete Markup HTML File
• Encode and use any PNG as an Icon
• New for Version 1.2: use Animated GIF's like Preloaders. The GIF must be Base64 encoded similar to the Skins
• New for Version 1.4: use alternative Closs Cross Symbols like Hearts and / or Thin Close Crosses
• - reposition the Close Cross and give it a bespoke Tooltip or remove the Tooltip altogether
• - remove the Icon using 'NoIcon' and then write any Markup as the Text, for example, I demonstrate how to pull a Zombie image directly from kubiszyn.co.uk
• - remove the Footer of the Zingy Dialog
• - timeout to run after the 'AnimationIn' has ended. You can set any time in Milliseconds ie. 3 * 1000 for 3 seconds. The Dialog will Timeout regardless of whether or not the Dialog is being dragged and begin its 'AnimationOut'
• New for Version 1.5: ten new Skins and an example (164) demonstrating data gathering - picking up values from Cells and then editing them in Input Boxes on a Zingy Dialog and then writing them back out again
• - automatically set each Checkbox as either On or Off using TRUE and FALSE

 

Fonts

The Font used throughout this Software in Excel is called 'Rajdhani', in a variety of weights from 300 up to 700. Zingy uses Google Fonts and you can use any Font that is available from Google - I demonstrate 'Raleway', 'Indie Flower' and 'Poppins' Fonts for Examples 90 through to 91. Check out Google Fonts here. Zingy Fonts are automatically downloaded on-the-fly so they will work no matter where the Workbook is stored as long as there is an internet connection, which is like, almost everywhere these days!

Credits

The image embedded into Excel for the Zingy Workbook is Abstract Geometric Pattern Background Vector by Leon Hossain purchased under a Vecteezy Pro license. You can view and purchase the file here

For some of the Seamless Background Patterns used for the Maekover Zingy Dialogs, I used images that are free on Unsplash. These images were by: Kelly Sikkema ·  Patrick Hendry ·  Jon Tyson ·  Koushik Chowdavarapu ·  Sydney Rae ·  Visax 
 

The Zingy Skins are Base64 encoded patterns that can be downloaded from Subtlepatterns.com
Icons were downloaded from FontAwesome · (Free License)
The Zingy File is Compressed and Cleaned using VBADecompiler.exe by Orlando
Code Inspections are maintained using Rubberduck
Base64 Image Files can be encoded using base64image.org
Animations using the Animation Library called Animate by Daniel Eden · Github · Animate.CSS
Additional, awesome Animations like the 'SlideOutBlurredRight' from Code Generated by Animista 
 
If you want to create and name more Colours, then Colour Name Finder can be used on colors.artyclick.com
If you want to create a new Seamless Pattern from your own images then you can use www.laurentvw.com

The Zingy Preloaders used in Version 1.2 were created using loading.io

Some additional Icons were created from Icons with Free Licenses (Icon resources that may or may not have been used in Zingy):
The KeyPass Icon is from a set of Icons by CheckoutDeliveryIcons_EpicPxls
The Email Icon is from a set of 'bikini60s' Icons by Sebastiano Guerriero
Additional Email and Paper Icons are from two sets of 'Flat' Icons by Pierre Borodin (set 1) and Pierre Borodin (set 2)
Batman and Superman images can be found on freebiesbug.com by Pasquale Vitiello - you can find more examples of his work here
The Zombie image used in version 1.4 is from www.uihere.com by Zilena De Souza

 

   

 

Installation

Please note: Zingy.xlsm comes with everything embedded and therefore has a fairly large filesize (the Skins bloat the .xlsm file despite compression)
You will most likely want to have 1 or 2 Skins for your final Zingy. You can build an extremely small, efficient Zingy yourself with any or all of the Animations and Icons whilst still keeping the embedded contents to a minimum by Reading this Section

Right-click and extract the contents of the File Zingy.zip. A small Minimal Zingy File called 'Minimal Zingy Single Skin.xlsm' is an example of a fully-featured Zingy Dialog but with just 1 Skin at 124 KB (Cleaned, will expand slightly when used and resaved). All of the Animations, Skins and Icons are stored in the 'Skins, Icons & Animations' Folder. These are encoded Files. Please see the Usage Section for more information. Open Zingy.xlsm and test out all of the Examples (there are over 100 Examples to choose from)

To use Zingy in your own Projects open a backup of Zingy.xlsm and your own Macro-enabled Project. Then open the VBE (Visual Basic Editor) and drag the Dialog, Easing, Effect, HTMLEvents, Properties, SystemMetric and SystemTiming Classes into your Project. Zingy builds its own UserForms therefore there are no UserForms to add, however you must 'MOVE' the hidden Sheet called 'Sheet999' into your own Project as it contains all of the Embedded Animations, Skins and Icons. Once that has been done, you can add and configure any of the Example Code Subroutines in any of the 'Examples' Code Modules to use the Zingy interface

Take some time to examine how Zingy works and read the 'Usage' Section in this online documentation before you begin to create your own Skins and Icons! or before turning to Support. Please see the Usage Section for more information

 

Usage

How to use Zingy

The Examples
On the 'Examples' Sheet you will find all of the Zingy examples in a number of different sections. Each Example has one Hyperlink to go directly to the Examples Code and another to run the demonstration and display the Zingy Dialog



To display a Zingy Dialog you would typically use Code like this (here I use full Named Arguments for all of the Parameters so that you can use the Intellisense for the Enumerations):

Public Sub DefaultThemeSkinless()
   
   ' Zingy Properties.  even if you do not set any paramaters you need to include this declaration
   Set Self = New Properties
   Self.ButtonFontWeight = 500
   Self.ButtonBorderRadius = 0
   Self.ButtonBackground = "#1B2E3D"
   Self.ButtonTop3DBorderColour = "#2F516B"
   Self.RemoveBorderOnButtonRollover = True
   
   ' Zingy Dialog
   Dim Zingy As Dialog
   Set Zingy = New Dialog
   With Zingy
      .Animate Title:="This is a Skinless Zingy Dialog", _
               Message:="You can drag this Dialog <i>around the screen</i> by all of the different parts of the dialog with the exception of the interactive buttons", _
               Colour:=ZingyYellow, _
               Theme:=Default, _
               Icon:=Info, _
               IconSize:=60, _
               AnimationIn:=Bounce, _
               AnimationOut:=Roadrunner, _
               SpeedIn:=Allegretto, _
               SpeedOut:=Allegrissimo, _
               Skin:=Skinless, _
               ButtonText:="Okay|Cancel", _
               AllowModalClick:=False, _
               DialogHeight:=200
      .Kill
   End With

End Sub

The Dialog above is a Skinless Zingy Dialog using the default Theme which is Navy coloured. Zingy uses a Properties Class to add bespoke customisation to lots of HTML elements and Zingy properties like the Button Font Weight or the option to remove the Border of the Button when the Mouse is rolled over the Button. Zingy requires a declaration in one of your Code Modules to declare the Class like this:

   Public Self As New Properties

Zingy also requires the following line of Code in every Subroutine you write in order to work regardless of whether you actually use any of the Properties in the Properties Class or not:

   Set Self = New Properties

Here is a full list of the available Properties to tweak your Zingy Dialog (where it states NoColour you can use any of the TColour Enumerations):

   Self.BorderColour = "#121212"
   Self.BorderThickness = 1
   Self.HeaderColour = "#1B2E3D"
   Self.HeaderBorderBottomThickness = 1
   Self.FooterColour = "#28445A"
   Self.FooterBorderTopThickness = 1
   Self.TitleFontWeight = 600
   Self.TitleFontSize = 15
   Self.TextboxFontWeight = 400
   Self.TextboxFontSize = 15
   Self.ButtonFontWeight = 400
   Self.ButtonFontSize = 15
   Self.ButtonBorderRadius = 4
   Self.ButtonMargin = 70
   Self.ButtonTopOffset = -32
   Self.ButtonTop3DBorderColour = "#363636"
   Self.ButtonBottom3DBorderColour = "#121212"
   Self.RemoveBorderOnButtonRollover = False
   Self.RemoveButtonTooltips = False
   Self.ButtonBackground = "#2C2C2C"
   Self.ButtonRolloverFontColour = "#eeeeee"
   Self.Draggable = Modal
   Self.CloseCrossRolloverFontColour = "#FEFEFE"
   Self.CloseCrossOpacity = SolidBackground
   Self.IconColour = NoColour
   Self.CloseCrossBackgroundColour = NoColour
   Self.CloseCrossBackgroundBorderRadius = 0
   Self.CloseCrossRolloverBackgroundColour = NoColour
   Self.ButtonColour = NoColour
   Self.TitleHighlightColour = NoColour
   Self.TextboxHighlightColour = NoColour
   Self.ListOfItems = vbNullString
   Self.ListOfItemsLeftMargin = 35
   Self.GetInput = vbNullString

The Main Zingy Parameters
Zingy has a lot of its own Parameters in the '.Animate()' Function. Here are all of the Parameters that you can pass or adjust in normal use. The Title and Message String are pretty self-explanatory but I will discuss the important ones as we go. To destroy a Zingy Dialog simply use the .Kill() Subroutine:

   ' Zingy Dialog
   Dim Zingy As Dialog
   Set Zingy = New Dialog
   With Zingy
      .Animate Title:="This is a Skinless Zingy Dialog", _
               Message:="You can drag this Dialog around the screen by all of the different parts of the dialog with the exception of the interactive buttons", _
               Colour:=ZingyYellow, _
               Theme:=Default, _
               Icon:=Info, _
               IconSize:=60, _
               IconPosition:=FloatLeft, _
               AnimationIn:=Bounce, _
               AnimationOut:=Roadrunner, _
               SpeedIn:=Allegretto, _
               SpeedOut:=Allegrissimo, _
               Skin:=Skinless, _
               ButtonText:="Okay|Cancel", _
               AllowEscapeKey:=True, _
               AllowModalClick:=False, _
               RoundCorner:=2, _
               BoxShadow:=True, _
               DialogWidth:=400, _
               DialogHeight:=200
      .Kill Delay:=0.02
   End With

The Zingy TColours
Zingy uses a combination of pre-defined TColours like 'Banana' which are Enumerations using Long Colour Codes and HTML Colour Codes like '#AAAAAA' and in the following context:

' when passing as a TColour just use the actual Colour Name
Colour:=Banana

And here is a full list of the Zingy TColours Names together with their Long Colour Codes (No Colour := 0 is actually Black but is used as an identifyer for the Class Initialisation and should therefore be ignored):

Public Enum TColour
   NoColour = 0
   ZingyBlue = 5915688                                                    
   ZingyDarkNavy = 2629138                                                
   ZingyNavyBlack = 1709068                                               
   ZingyNavy = 4009499                                                    
   ZingyYellow = 1422074                                                  
   ZingyRed = 2378211                                                     
   BurntRed = 4734845
   GeoOrange = 7113449                                                    
   GeoGreen = 12443331                                                    
   GeoLightBlue = 10853959                                                
   GeoBlue = 9207888                                                      
   GeoRed = 6706136                                                       
   GeoCream = 11590901                                                    
   Mint = 12759443
   Cobalt = 10247168
   Brown = 2894892                                                        
   Brownish = 7506590
   Blackish = 591360
   Bluish = 10919566
   Orangish = 5929180
   Rusty = 993631
   MuddySquishy = 3820108
   Mud = 3033954
   Muddy = 1850727
   MuddyRed = 333918
   BurntCaramel = 6660805
   BurntYellow = 2720660
   BurntGreen = 6527590
   BurntPink = 8679061
   Turquoise = 10128434
   Purple = 14978219
   Sun = 36799
   Gold = 623555
   Leaf = 3506772
   Banana = 6660805
   Grey = 5655622
   LightGrey = 14277081
   ExcelDarkGreen = 4616993
   PictonBlue = 13998939                                                  
   Rhino = 5391420                                                        
   Scooter = 10128434                                                     
   Eclipse = 3684411                                                      
   YellowWetChalk = 11126221                                              
   BlueWetChalk = 11511702                                                
   PinkWetChalk = 10720673                                                
   RedWetChalk = 7105151                                                  
   NeonLime = 4259755                                                     
   NeonOrange = 3718889                                                   
   DirtyNeonOrange = 2782924                                              
   DistressedBlue = 8552310
   DistressedGreen = 1840392
   DarkGreen = 2828288
   DeepGreen = 591362
   ChalkSolidzFormica = 8816528
   CoffeeBean = 3947585
   DarkChalkboardBrown = 2500389
   ParquetChalkboardIvory = 12504007
   ParquetChalkboardBrown = 3750456
   PantoneMauveShadows = 10786998
   PantoneDeuvilleMauve = 9736879
   PantoneAlmostMauveChalk = 14343399
   PantoneMauveChalk1 = 13619429
   PantoneMauveChalk2 = 14212044
   PantoneShadowGray = 10528186
   AnnieSloanChalkParisGrey = 11911358
   AnnieSloanChalkEnglishYellow = 3721441
   ChalkGreen = 9279377
   HollywoodNailsSupplyWhiteChalk = 13424342
   FrenchicBlue = 12756877
   FrenchicMermaid = 10399098
   FrenchicSmokeSignal = 10463921
   PastelYellow = 11328483                                                
   PastelLightGreen = 14212053                                            
   PastelGreen = 13292744                                                 
   PastelPink = 14079201                                                  
   PastelBlue = 14469318                                                  
   PurpleRain = 6568276                                                   
   PurpleRaining = 3680823                                                
   VBACarbon = 4735548                                                    
End Enum

The Zingy TThemes
Zingy uses a combination of pre-defined Themes like 'Dark'. These are Enumerations again, however this time each TTheme has its own internal members which are hard-coded as Array Elements. The possible TThemes are as follows (the Default TTheme should be used with the 'Skinless' Skin):

Public Enum TTheme
   Default = 1
   Dark = 2
   Navy = 3
   Green = 4
End Enum

To edit any of these TThemes go into the Code and adjust the following segments of each TTheme (there are 5 parts to each TTheme but you can always add more if you like). To add and edit TThemes you will need to copy a set of Theme parameters and add this to the declaration below - you can only add a set amount I believe it is limited to 255 characters; I may be wrong. Make sure that you also add a new Enumeration TTheme name and its number ie. MyTheme = 5 in the Public TTheme Enum above:

'               Themes (1=Default), 1. Theme enumeration, 2. background-color (Background), 3. color (Font used for the Modal), 4. border lines (Top/Bottom), 5. Button (Font)
Dim Themes() As Variant: Themes = [{1,"#28445A","#F2F2F2","#1B2E3D","#F2F2F2"; 2,"#2C2C2C","#aaaaaa","#121212","#aaaaaa"; 3,"#1B2E3D","#aaaaaa","#121212","#aaaaaa"; 4,"#08151C","#aaaaaa","#121212","#aaaaaa"}]

The Zingy TIcons
Zingy uses Icon Names as Enumumerations like 'Info' and 'TiredFace'. All of the Icons are encoded SVG Text Files that are then loaded or embedded into the hidden 'Sheet999' Sheet. The possible TIcons available are (you can always add more or edit these ones if you like, it's easy to do):

' Embedded  Font Awesome Icons
Public Enum TIcon
   ' 400 ->
   Question = 400
   Info = 401
   Quote = 402
   Tick = 403
   Cross = 404
   Cogs = 405
   Bell = 406
   Bug = 407
   Exclamation = 408
   Key = 409
   CloudDownload = 410
   Copy = 411
   Edit = 412
   Eraser = 413
   Plug = 414
   FilePDF = 415
   IDCard = 416
   AltTrash = 417
   AltComment = 418
   Comment = 419
   Comments = 420
   Folder = 421
   FolderOpen = 422
   Copies = 423
   Sticky = 424
   TiredFace = 425
   WindowClose = 426
   ShareSquare = 427
   List = 428
   Image = 429
   Hourglass = 430
   Clipboard = 431
   Clock = 432
   BarChart = 433
   Fork = 434
   Coffee = 435
   Copyright = 436
   Dog = 437
   Email = 438
   ExclamationTriangle = 439
   Ghost = 440
   Smiley = 441
   SmileyCrying = 442
   SmileyWink = 443
End Enum          

The Zingy Icon Size and Positioning
The IconSize is a number ie. 60 or 48 etc. which is self-explanatory and the IconPosition is one of two possible Enumerations for Left or Right positioning:

Public Enum TIconPosition
   FloatLeft = 1
   FloatRight = 2
End Enum

The Zingy TAnimationIn and TAnimationOut Animations
Zingy uses TAnimationIn and TAnimationOut Names as Enumerations like 'Jello' and 'Roadrunner' for all of its Animations in and out of the Excel Window. All of the Animations are encoded Text Files that are then loaded or embedded into the hidden 'Sheet999' Sheet. You can add more if you like. Here are all of the avaialble TAnimationIn Enumerations:

Public Enum TAnimationIn
   ' 200 - 299
   WileECoyote = 200
   Rubberband = 201
   Jello = 202
   TaDa = 203
   JackInTheBox = 204
   RollInLeft = 205
   Wobble = 206
   BounceInLeft = 207
   SlideInBlurredTop = 208
   Vibrate = 209
   ThumpingHeartbeat = 210
   Bounce = 211
   EllipticSlideTop = 212
   EllipticSlideBottom = 213
   Swing = 214
   HeadShake = 215
   Shake = 216
   BounceInDown = 217
   BounceIn = 218
   HeartBeatPulse = 219
   BackInLeft = 220
   LightSpeedIn = 221
End Enum

And here are all of the available AnimationOut Enumerations:

Public Enum TAnimationOut
   ' 300 - 399
   Roadrunner = 300
   BounceOutRight = 301
   BounceDown = 302
   RollRightBlurred = 303
   FadeDown = 304 ' no longer can be used with Zingy as the Height of the HTML Window needs to be reduced to allow the UserForm to be dragged up to the top of the Screen
   BounceOutLeft = 305
   SkewOut = 306
   BounceOut = 307
   ZoomOutRight = 308
   BackOutRight = 309
   SwirlOut = 310
   SlideOutBlurredRight = 311
   PuffOut = 312
End Enum

The Zingy TSpeeds
Zingy uses TSpeed Enumerations like 'Larghissimo' (slowest) and 'Prestissimo' (fastest) for all of its Animation speeds both in and out. Here are all of the avaialble TSpeed Enumerations:

Public Enum TSpeed
   Larghissimo = 1
   Grave = 2
   Lento = 3
   Largo = 4
   Larghetto = 5
   Adagio = 6
   Adagietto = 7
   Andante = 8
   Andantino = 9
   MarciaModerato = 10
   AndanteModerato = 11
   Moderato = 12
   Allegretto = 13
   AllegroModerato = 14
   Allegro = 15
   Vivace = 16
   Vivacissimo = 17
   Allegrissimo = 18
   Presto = 19
   Prestissimo = 20
End Enum

The TSpeeds correlate to a Speeds() Array to help the Code to add the milliseconds ie. 'Grave := 2300 milliseconds'. Here is the Speeds() Array where X = the SpeedIn or SpeedOut (TSpeed) Enumeration Long values (this is also a pretty cool way of storing constant information in Variant Arrays to pull back at any time via Code ie. Speeds(0)(1, 1) will give you 'Larghissimo' and Speeds(0)(1, 2) will give you '2400', also Speeds(1)(1, 1) will give you 'AndanteModerato' and Speeds(1)(1,2) will give you '1400' nice...). If you like, you are having an Array of Arrays if you see what I mean ;)

'        Speeds (0)(X, 1) = speed name, (0)(X, 2) = speed (milliseconds)
Speeds = Array([{"Larghissimo",2400;"Grave",2300;"Lento",2200;"Largo",2100;"Larghetto",2000;"Adagio",1900;"Adagietto",1800;"Andante",1700;"Andantino",1600;"MarciaModerato",1500}], _
               [{"AndanteModerato",1400;"Moderato",1300;"Allegretto",1200;"AllegroModerato",1100;"Allegro",1000;"Vivace",900;"Vivacissimo",800;"Allegrissimo",700;"Presto",600;"Prestissimo",500}])

The Zingy TSkins
Zingy uses TSkin Names as Enumerations like 'WildOliva' and 'Carbon' for all of its Skins. All of the Skins are Base64 encoded Patterns (*.PNG) Files that are then saved as Text Files, which are subsequently loaded or embedded into the hidden 'Sheet999' Sheet. You can add more if you like as this is fairly easy - the only consideration here is that, if they are not small Patterns or are very complex then the Excel File will begin to inflate in size due to all of the data. Here are all of the avaialble TSkin Enumerations (a handful are transparent images which also means that you can overlay them ontop of different header and Footer Colours which gives a nice look - see Examples 104 and 105):

Public Enum TSkin
   ' 100 - 199
   Skinless = -1
   WildOliva = 100
   WildOlivaLight = 101
   BindingDark = 102
   Carbon = 103
   GreySquares = 104
   DarkMosiac = 105
   BrightSquares = 106
   FolkPattern = 107
   GPlay = 108
   Hixs = 109
   Inflicted = 110
   Linen = 111
   DarkSquares = 112
   Tex2Res4 = 113
   Woven = 114
   Zwartevilt = 115
   TwinkleTwinkle = 116
   BlackLozenge = 117
   BlackOrchid = 118
   Cloth = 119
   DebutDark = 120
   GreyWashedWall = 121
   StresedLinen = 122
   Tweed = 123
   BlackMamba = 124
   TactileNoise = 125
   DarkStripes = 126
   Asfalt = 127
   DarkEmbroidery = 128
   Moulin = 129
   OfficeBuilding = 130
   SimpleDashed = 131
   SlashIt = 132
   VintageWallpaper = 133 ' large-ish
   Txture = 134
   SpirationDark = 135
   PinstripedSuit = 136
   IronGrip = 137
   MusePattern2 = 138
   MusePattern12 = 139
   MusePattern11 = 140
   WhiteBlueBrownTextile = 141
   TextilePattern1 = 142
   AbstractPainting = 143
   BrownWhiteYellowFloral = 144
   Distressed = 145 ' large
   GreenGrunge = 146 ' large
   Triangles = 147
   SmoothWall = 148 ' transparent, change Header & Footer Colours
   LightWool = 149 ' transparent, change Header & Footer Colours
   ColouredTriangles = 150 ' transparent, change Header & Footer Colours
   Arrows = 151 ' transparent, change Header & Footer Colours
End Enum

Other Zingy Parameters
The ButtonText parameter allows you to pass one or two Strings (Okay and Cancel Buttons) as part of a pipe '|' delimited list or a single String (Okay Button). You would do somethng like this (the Text you pass also becomes the Tooltips for the Buttons):

   ButtonText:="Okay|Cancel"

The AllowEscapeKey parameter allows the Dialog to be dismissed via the Escape {ESC} Key if set to True or not if set to False:

   AllowEscapeKey:=True

The AllowModalClick parameter allows you to dismiss the Dialog by a click on the Body, however the Zingy Property called 'Draggable' must be set to 'Titlebar' like this (see Example 19 and you can then click the Text are or Footer of the Dialog to dismiss the Dialog):

   Self.Draggable = Titlebar

The RoundCorner parameter will allow you to round the corners of the Zingy Dialog by a Long value, in pixels, like this (small numbers are better than large numbers):

   RoundCorner:=2

The BoxShadow is a pre-defined piece of Markup that gives the Zingy Dialog a nice 3D Shadow - you can edit it in the Dialog Class if you like and it is turned on by setting BoxShadow to True like this:

   BoxShadow:=True

The DialogWidth and DialogHeight alow you to set different sizes for your Zingy Dialog's width and height. You can set these like this:

   DialogWidth:=400
   DialogHeight:=200

Create a Minimal Zingy File

Create a Minimal Stripped down version of Zingy

Zingy has already been cleaned / compressed but remains quite a large file due to the number of embedded Skins. However, if you only need say 4 Icons, a couple of Skins and a set number of Animations then you can very easily create a minimal version of Zingy by embedding specific resources into the hidden 'Sheet999' Sheet. Follow the steps below to do this:

          
1. Make a Copy of the original Zingy.xlsm file
2. Open another Excel instance and then Save it as your new Project Name ie. MyProject.xlsm (or .xlsb)
3. With both Zingly.xlsm and MyProject.xlsm open, go into the VBE Editor (Press ALT+F11) - you need to see the Code Modules and Project Explorer
   - click on the Sheet999 Code Module.  On the Properties Window left side at the bottom you will see the Visible Property and '2 - xlSheetVeryHidden'.  Change this to '-1 - xlSheetVisible'
   - now Click on Sheet 'Sheet999' in the Zingy.xlsm file and then right-click 'Move or Copy...' and select, To book: MyProject.xlsm and DO NOT click create a Copy - you MUST move this Sheet
   - go back into the VBE Editor and drag the Dialog, Easing, Effect, HTMLEvents, Properties, SystemMetric, SystemTiming and Wrapper Classes into your MyProject.xlsm file
   - also drag in the 'Embed' Code Module and the 'Examples1' Code Module into your MyProject.xlsm file 
4. In MyProject.xlsm, add a Reference to the Microsoft HTML Object Library for the HTML Events Class, goto Tools->References on the File Menu at the top of the VBE Editor
5. Close Zingy.xlsm.  In the MyProject.xlsm file go back into the VBE Code Editor and click into the 'mdEmbed' Code Module
6. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
7. Create a new Folder on your Laptop or PC and add just the Skins, Animations and Icons required for your new minimal Zingy 
8. Run the EmbedResources() Macro in the 'Embed' Code Module and Select the Skins, Animations and Icons in your new Folder - these will be embedded into 'Sheet999'
9. Do a Debug->Compile VBAProject to identify an issues.  If there are any issues it may be the Enumeration Names need commenting out if you reference Names that no longer exist
   - Scroll to the top of the Zingy Class Code Module and comment out any Icon, Skin, Animation Names that you have Not embedded into 'Sheet999'
   - Please Note: this is ONLY an issue if you have examples of mine where they reference Names of Enumerations NOT added by your new Skins, Icons and Animations selected in your Folder in Steps 7 & 8
10. Lastly, hide the 'Sheet999' again by doing the opposite of the above setting it back to '2 - xlSheetVeryHidden'

Otherwise, that's it, you are good to go with your small file and bespoke Skins, Animations and Icons...

Additional Notes

Important! When creating a minimal Zingy you MUST add a Reference to the Microsoft HTML Object Library for the HTML Events Class and also remember to add a 'Public Self As New Properties' declaration in ONE Code Module for the Zingy Properties Class if you do not copy in my 'Examples1' Code Module! That's it...

Create a New Skin

Creating a New Skin as a Base64 Encoded .TXT File for Zingy

Creating a New Skin .TXT file to embed into the hidden 'Sheet999' Sheet is fairly straight-forward. Zingy has 52 available Base64 Encoded & Embedded Skins numbered 100 through to 151. They are in the Folder included with the Zip File download following purchase. The files are all Base64 encoded and follow a specific format. If you want to add a different Skin then follow these steps:

          
1. Make a Copy of a the last Skin .TXT File, '151 Arrows.txt' and increment the numeric counter, call it: '152 My New Skin.txt' - the 152 will be the next Skin Enumeration that we will add to the Zingy Dialog Class
2. Go into the Zingy Dialog Class Code Module and at the top where you see the 'Public Enum TSkin' declaration, add the additional line of code 'MyNewSkin = 152' where NewSkin is the Name that you want to call your Skin.  Now you will be able to reference this Name via the Skin parameter in the '.Animate()' Function
3. Okay, now go and find a pattern for your new Skin - I use Subtlepatterns.com 
4. Download the pattern, pick the smallest size and then Base64 encode this pattern - I use base64image.org
5. Okay now open the '152. My New Skin.txt' File in a Text Editor and replace anything after: '...data:image/gif;base64,' up until the closing Bracket ')' with the Base64 encoded Contents from the Website above.  Save the File and exit the Text Editor
6. Open Zingy in the Code Editor and click into the 'mdEmbed' Code Module
7. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
8. Run the EmbedResources() and Select all of the Icons, Skins (including your new one) and Animations to embed these into 'Sheet999'
9. Copy one of the Examples and change the Skin Name from whatever it currently is to your new Skin Name (the one that you added for the extra line of code ie. MyNewSkin or 'Skin:=MyNewSkin').  In my example I called mine 'MyNewSkin' so I changed mine to MyNewSkin or 'Skin:=MyNewSkin'
10. Run the Example to view your new Skin in action

That's it, now pat yourself on the back, nice job ;)

Create a New Icon

Creating a New SVG Icon as an Encoded .TXT File for Zingy

Creating a New SVG Icon .TXT file to embed into the hidden 'Sheet999' Sheet is fairly straight-forward. Zingy has 44 available Encoded SVG Icons numbered from 400 through to 443 that can have both their Colour and Size changed on-the-fly. The Icons are part of the FontAwesome collection of free Icons (not the newer Thin ones that you require an account for). They are in the Folder included with the Zip File download following purchase numbers 100 through to 151. The files are all encoded and follow a specific format. If you want to add a different SVG Icon then follow these steps:

          
1. Make a Copy of a the last Icon .TXT File, '443 Smiley Wink.txt' and increment the numeric counter, call it: '444 My New Icon.txt' - the 444 will be the next Icon Enumeration that we will add to the Zingy Dialog Class
2. Go into the Zingy Dialog Class Code Module and at the top where you see the 'Public Enum TIcon' declaration, add the additional line of code 'NewIcon = 444' where MyNewIcon is the Name that you want to call your Icon
3. Okay, now go and find yourself an Icon  
4. Download the Icon - I use a Regular SVG downloaded in a full pack from FontAwesome
5. Okay now open the '444 My New Icon.txt' File in a Text Editor.  Open the downloaded Regular Font Awesome Icon in the same Text Editor as a separate file
6. Replace anything in the '444 My New Icon.txt' File after '...<svg viewBox='0 0 512 512' width='64px' height='64px' fill='Black'><path d='' with the contents from between the 2 quotes for the 'path d=' in the Regular download SVG Font Awesome Icon File
   - in other words you are substituting anything for the 'path d=' in the Copy of the Icon .TXT File with the weird looking symbols in the New Icon File
7. Update the ViewBox size if this is different as well so replace viewBox='0 0 512 512' with viewBox='60 30 312 247' for example   
8. Open Zingy in the Code Editor and click into the 'mdEmbed' Code Module
8. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
9. Run the EmbedResources() and Select all of the Icons (including your new one), Skins and Animations to embed these into 'Sheet999'
9. Copy one of the Examples and change the Icon Name from whatever it currently is to your new Icon Name (the one that you added for the extra line of code ie. MyNewIcon or 'Icon:=MyNewIcon').  In my example I called mine 'MyNewIcon' so I changed mine to MyNewIcon or 'Icon:=MyNewIcon'
10. Run the Example to view your new Icon

That's it, you should be good to go with your new Icon!

Create a New Animation

Creating a New CSS Animation as an Encoded .TXT File for Zingy

Creating a New CSS Animation .TXT file to embed into the hidden 'Sheet999' Sheet is a little more complex than creating a Skin or Icon, so this process isn't for the faint-hearted or beginner. Zingy has 35 available Encoded CSS Animations created from a couple of resources and numbered from 200 through to 299 for the Animations In and numbered from 300 through to 399 for the Animations Out. CSS Animations were created from a Library called Animate by Daniel Eden · Github · Animate.CSS
Additional Generated Animations and the source used to demonstrate how to create a New Animation is from Animista
The files are all encoded and follow a specific format. If you want to add a different CSS Animation then follow these steps:

          
1. Make a Copy of a the last Animation In or Animation Out .TXT File - for this example we will create an Animation In File, '221 Light Speed In.txt' and increment the numeric counter, call it: '222 My New Animation.txt' - the 222 will be the next Animation In Enumeration that we will add to the Zingy Dialog Class (if you pick an Animation Out then you will add this to the Animation Out Enumeration)
2. Go into the Zingy Dialog Class Code Module and at the top where you see the 'Public Enum TAnimationIn' declaration, add the additional line of code 'MyNewAnimation = 222' where MyNewAnimation is the Name that you want to call your Animation In (this Name doesn't have to match the Text File Name as the Code uses the number)
3. Okay, now go and find yourself an Animation In - I will use Animista.  Press Start on their Website  


4. Choose an Animation.  Tick the 'Minify' Button (Top Left) and then press the little Code Brackets Icon (Top Right) to Generate the Code for the Animation.  Open a Text Editor and Copy the KeyFrames from the Website and Paste it into your Text Editor
5. Delete the initial @-Webkit part of the Text, for example in the following fragment for the first 'Scale-Up, scale-up-center' Animation:

@-webkit-keyframes scale-up-center{0%{-webkit-transform:scale(.5);transform:scale(.5)}100%{-webkit-transform:scale(1);transform:scale(1)}} <-- delete this up until this --> @keyframes

6. Now also delete anything that includes -webkit as IE does not recognise this nor require it for the Animation to work and doing this to the same example I get the following (I added semi-colons at the end of each part of CSS but you don't have to):

@keyframes scale-up-center { 0% { transform:scale(.5); } 100% { transform:scale(1); }}

7. Now I like to change the Name to something like scaleUpCenter, so I adjust the CSS like this:

@keyframes scaleUpCenter { 0% { transform:scale(.5); } 100% { transform:scale(1); }}

8. Now go back and copy the Class Text with your Mouse and Paste it after the CSS.  Again remove any -webkit parts and lastly change the Class Name to the same as the Name 'scaleUpCenter' like this (even though early IE does not recognise Cubic Bezier, leave this in the CSS):

@keyframes scale-up-center { 0% { transform:scale(.5); } 100% { transform:scale(1); }} .scaleUpCenter{ animation:scaleUpCenter .4s cubic-bezier(.39,.575,.565,1.000) both; }

9. Okay now open the '222 My New Animation.txt' File in a Text Editor and replace the Text with the CSS you just created
10. Open Zingy in the Code Editor and click into the 'Dialog' Class Code Module and add the Enum to the bottom of the Animation In Enumerations 'Public Enum TAnimationIn' like this: 'MyNewAnimation = 222'
11. Scroll further down the Code until you find the Array declarations for the Animation In Animations 'Dim AnimationsIn() As Variant'.  For the Animation In, in the second Array part add the next number and the Name of your CSS Class Animation like this (the number will allow the Code to choose the right Class using the Long Enumeration using some fancy Math):   

AnimationsIn = [{1,"swing";2,"headShake";3,"shake";4,"bounceInDown";5,"bounceIn";6,"heartbeatpulse";7,"backInLeft";8,"lightSpeedInLeft";9,"scaleUpCenter"}]

12. Open Zingy in the Code Editor and click into the 'mdEmbed' Code Module
8. Run the DeleteIconCustomProperties() Macro to remove all of the embedded Icons, Skins and Animations
9. Run the EmbedResources() and Select all of the Icons (including your new one), Skins and Animations to embed these into 'Sheet999'
9. Copy one of the Examples and change the Animation In Name from whatever it currently is to your new Animation Name (the one that you added for the extra line of code ie. MyNewAnimation or 'AnimationIn:=MyNewAnimation').  In my example I called mine 'MyNewAnimation' so I changed mine to MyNewAnimation or 'AnimationIn:=MyNewAnimation'
10. Run the Example to view your new Animation In; to use an Animation Out the process is similar, just choose a Text File from 300 onwards and rememebr to add the Class to the AnimationsOut() Array

See, it wasn't so bad, you should now be able to create and add more Animations for your Zingy Dialog

Create a New Preloader

Creating a New Animated GIF Preloader as an Encoded .TXT File for Zingy

Creating a New Preloader .TXT file to embed into the hidden 'Sheet999' Sheet is fairly straightforward. First of all you need to create your Preloader. There are many sites out there that allow you do this. I like using loading.io

Login to this site using Facebook or Google, or create yourself a new account, it's free. Next choose a free Preloader. Change/edit the Colours, Size and Speed of your Preloader. I chose a Size of '128px', you can alter this via the Code in Zingy so if you need larger sizes go for something like '200px'. Now you MUST set the background Colour to the one you want to use with Zingy as the Animations get corrupted by the Transparency used to alter the UserForm. I chose '#2C2C2C' the background Colour of the Dark Theme. Here is my Preloader ready for downloading:



Press the 'GIF' button and download your Preloader. Follow the steps below:

          
1. Make a Copy of a the last Icon .TXT File - for this example we will recreate an existing Preloader Icon File, '444 Preloader Cogs.txt' (you need to increment the numeric counter if it is a New Preloader, the name is just for reference)

2. Base64 Encode the Preloader File that you just downloaded using base64image.org.  Drag the file into the Box on this site and then Copy all of the Base64 Text     

3. Open the Preloader Icon File, '444 Preloader Cogs.txt' in any Text Editor.  Clear any data from after the Text 'data:image/gif;base64,' until the end.  Paste the data you have in the Clipboard after the comma.  Save and Close the File

4. Go into the Zingy Dialog Class Code Module and at the top where you see the 'Public Enum TIcon' declaration, add the additional line of code 'Preloader = 444' or 'My New Preloader = 487' if you created a new File called '487 My New Preloader.txt' 

5. Run the EmbedResources() in the 'Embed' Code Module and Select all of the Icons (including your new one), Skins and Animations to embed these into 'Sheet999'

6. Copy one of the Examples and change the Icon Name from whatever it currently is to your new Preloader Icon Name ie. PreloaderCogs - the one that you added for the extra line of code above 'Preloader = 444' or 'My New Preloader = 487'

8. Run the Example to view your new Preloader Animation

9. Remember to add the 'Self.PreloaderOrPNG = True' declaration to any Code Routine

That's it, you should now be able to create and add more Animated GIF Preloader for your Zingy Dialog

Here is one I created for you! Why not create your own to match a specific set of Zingy Colours

Themes

How to use the Themes with Zingy

Themes (TThemes) are including with Zingy to allow you to fine tune some of the Zingy characteristics. You pass a TTheme into the Theme Parameter like this:

Theme:=Slate

Avaialable Themes are as follows:

Public Enum TTheme
   Default = 1
   Dark = 2
   Navy = 3
   Green = 4
   Slate = 5
End Enum

A Theme will adjust the following elements of Zingy (the first number is simply the Theme Enumeration Long Value):

1. Theme enumeration ie. 1 = Default
2. Background-color (Background Colour of the main Text area of Zingy)
3. Colour (Font Colour used for the Modal)
4. Section divider lines Colour (Top/Bottom)
5. Button (Font Colour)

Themes have limitations in that a maximum of 5 can be used with Zingy without further Code modification, however you can edit these and change their defaults should you wish. To edit a Theme go into the VBE Code Editor and scroll down until you find the Themes Code. Each Theme is stored within a Themes Array with a semi-colon dividing them up like this:

Themes = [{1,"#28445A","#F2F2F2","#1B2E3D","#F2F2F2"; 2,"#2C2C2C","#aaaaaa","#121212","#aaaaaa"; 3,"#1B2E3D","#aaaaaa","#121212","#aaaaaa"; 4,"#172A23","#aaaaaa","#06160D","#aaaaaa"; 5,"#3C4248","#aaaaaa","#060402","#aaaaaa"}]

Themes are at their best when you combine some other Zingy Properties like the Header and Footer Colours together with the Button Background Colours, so add additional 'Self.' declarations to your Code Subroutines like this to Style these elements:

Self.HeaderColour = "#101E19"
Self.ButtonBackground = "#101E19"
Self.FooterColour = "#101E19"

' and maybe the Rollover Font Colours
Self.ButtonRolloverFontColour = "#2C2C2C"
Self.CloseCrossRolloverFontColour = "#2C2C2C"

Once you have got the hang of using Themes, you can do some interesting things with them, for example use them alongside element Styling with Transparent Skins to create some different Zingy Dialogs like these Green Theme featured SmoothWall/ColouredTriangles Skin examples (see how the Styled darker Green shows through the Skin Transparency):

Screeen Shots of the Zingy Dialog

The Zingy Dialog using the default Theme and a Skinless Body with its 'Rajdhani' Font. You can choose whether to drag the Zingy Dialog by its Titlebar, its Titlebar and Textbox or by all of the parts that make up the Zingy Dialog including the Footer area where the Buttons reside

Using an Alternative Icon - choose from over 30 embedded SVG Icons with the capability of changing both the Colour and Size of the Icons

Using an Alternative Colour - choose from over 30 TColours or make up your own. You can change the Colour of many parts of this Dialog using the TColour Parameter in the Animate() function. Here we change the Icon and interactive Close Cross and Button Colours. Other Colours like the Close Cross Font Colour for example can be changed using different methods via the Zingy Properties Class

Here we change the Colour to Light Grey but then we also change the Colours for the interactive close cross and buttons to Banana. The observant people may have also noticed that as the Mouse 'Rolls' over the Button the 3D Button Border is removed - this is optional as well and you can choose to highlight or lowlight your Buttons with or without a 3D Border

By default the Buttons display a HTML 'Title' Tooltip, however you can remove the Tootips for the Buttons by setting the 'RemoveButtonTooltips' member of the Properties Class to True

You can use <span> tags to highlight the Text in the Titlebar. By default this setting uses the TColour Parameter but you can use any Colour with an additional 'Inline' Style

You can use a more condensed highlight tag for the Titlebar Text and you can also use <span> tags to highlight the Text in the Textbox area next to the Icon. Again, by default this setting uses the TColour Parameter but you can use any Colour with an additional 'Inline' Style

The amount of different styling you can add to Zingy is incredible. You can override highlight tags using the Properties Class and use 'Inline Styles' as well and don't foget you can easily expand on these styles yourself in the HTML/CSS Markup

You can use Skins with Zingy to add Base64 encoded images to the Header and Footer. This is a Dark Embroidery Skin

This is a Txture Skin

Something beautiful · This is a Iron Grip Skin with a Dark Theme, Quote Icon and Wet Yellow Chalk Colours

Something sleek · This is a Carbon Skin with a Dark Theme, Quote Icon and Wet Yellow Chalk Colours

Something different · This is a Muse 11 Skin together with a Navy Theme, Key Icon and Burnt Green Colours

Mixing it up a little · This is a Muse 11 Skin together with a Dark Theme, Quote Icon and GeoOrange Colours, as it pops up to the user and then as I hover over the Cancel Button

 

Something different again · This is a Muse 2 Skin together with a Navy Theme, Edit Icon and Burnt Caramel Colours - here we swap the Icon around the the right-hand side

Buttons · Here is a Zingy Dialog with a Single Button

Buttons · Here is a Zingy Dialog with Two Buttons

Return Values · Here we present a Zingy Dialog ready to capture user interaction. Then we present back to the user a new Zingy Dialog informing them of their interaction

 

Beautiful Chalky Colours · This is a Chalk Solidz Formica Colour

Beautiful Chalky Colours · This is a Frenchic Blue Colour

Beautiful Chalky Colours · This is a Frenchic Mermaid Colour

Beautiful Chalky Colours · This is a Frenchic Smoke Signal Colour

Beautiful Chalky Colours · This is a Frenchic Smoke Signal Colour being Rolled over

Beautiful Chalky Colours · This is a HollywoodNails Supply White Chalk Colour

Beautiful Chalky Colours · This is a Pantone Almost Mauve Colour

Beautiful Chalky Colours · This is a Pantone Almost Mauve Colour being Rolled over - we change the Font to a Darker Colour so that the Text is more clearly defined

Beautiful Chalky Colours · This is a Pantone Deuville Mauve Colour

Beautiful Chalky Colours · This is a Pantone Mauve Chalk1 Colour

Beautiful Chalky Colours · This is a Pantone Mauve Chalk2 Colour

Beautiful Chalky Colours · This is a Mauve Shadows Colour

Beautiful Chalky Colours · This is a Pantone Shadow Gray Colour

Beautiful Chalky Colours · This is a Parquet Chalkboard Brown Colour

Beautiful Chalky Colours · This is a Parquet Chalkboard Ivory Colour

Makeover Screen Shots · Create Beautiful Animated Dialogs by giving your Zingy a Makeover

Makeover Zingy Dialog · This Dialog features a White Blue Brown Textile Skin and a Bluish Colour scheme. We will change the Rollover Font Colours to make it easier to see the Text

And, here we show the user 'Rolling' over the Button with the Mouse

Makeover Zingy Dialog · This Dialog features a Textile Pattern 1 Skin and a Orangish Colour scheme. We will change the Rollover Font Colours to make it easier to see the Text

And, here we show the user 'Rolling' over the Close Cross with the Mouse

Makeover Zingy Dialog · This Dialog features a Abstract Painting 1 Skin and a MuddySquishy Colour scheme. We will change the Rollover Font Colours to make it easier to see the Text

And, here we show the user 'Rolling' over the Button with the Mouse

Makeover Zingy Dialog · This Dialog features a Brown White Yellow Floral Skin and a Gold Colour scheme

Makeover Zingy Dialog · This Dialog features a Distressed Skin and a Distressed Blue Colour scheme

Makeover Zingy Dialog · This Dialog features a Green Grunge Skin and a Distressed Green Colour scheme

Lightbox Screen Shots · Create Beautiful Animated Dialogs by displaying your Zingy ontop of a Lightbox

Lightbox Zingy Dialog · This Dialog features a Grey Squares Skin and BurntRed Colour scheme with a Plug Icon on a White Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Binding Dark Skin and Banana Colour scheme with a Bug Icon on a Black Lightbox that fits to the Excel Window. I increased the Height of the Dialog slightly so as to get more content into the Text area

Lightbox Zingy Dialog · This Dialog features a Binding Dark Skin and Banana Colour scheme with a Bug Icon on a very Dark Black Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Dark Mosaic Skin and Burnt Pink Colour scheme with a Bug Icon on a Dark Black Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Tweed Skin and Blue Wet Chalk Colour scheme with a Tired Face Icon on a White Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Debut Dark Skin and Pink Wet Chalk Colour scheme with a Image Icon on a Dark Black Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Green Grunge Skin and Bespoke Green Colour scheme with a Quote Icon on a Dark Black Lightbox that fits to the Excel Window

Lightbox Zingy Dialog · This Dialog features a Brown White Yellow Floral Skin and Gold Colour scheme with a Quote Icon on a Dark Black Lightbox that fits to the Excel Window

Awesome Zingy Dialog Screen Shots · Create Stunning Professional Looking Animated Dialogs for Excel

Awesome Zingy Dialogs · This Dialog features a Muse 12 Skin and a Frenchic Mermaid Colour scheme with a Thick Border of 6px. This Dialog is a really Professional Dialog that can be easily incorpurated into your Projects

Awesome Zingy Dialogs · This Dialog features a Wild Oliva Skin and a Frenchic Smoke Signal Colour scheme with a Thick Border of 6px

Awesome Zingy Dialogs · This Dialog features a Wild Oliva Skin and a Frenchic Blue Colour scheme with a Thick Border of 6px and the Header and Footer Borders also at 6px

Awesome Zingy Dialogs · This Dialog features a White Brown Blue Textile Skin and a Bluish Colour scheme with a Thick Border of 6px and the Header and Footer Borders also at 6px

Awesome Zingy Dialogs · This Dialog features a Tex2Res4 Skin and a Pantone Mauve Shadows Colour scheme with a Thick Border of 6px and the Header and Footer Borders also at 6px

Awesome Zingy Dialogs · This Dialog features an Unordered List of Pancake Ingredients

Awesome Zingy Dialogs · This Dialog features an Ordered List of Pancake Ingredients with the Left Margin Adjusted

Awesome Zingy Dialogs · This Dialog features Checkboxes that can be selected by the user

 

Awesome Zingy Dialogs · This Dialog features more Checkboxes that can be selected by the user

 

Awesome Zingy Dialogs · This Dialog features more Checkboxes that can be selected by the user. This time if the user presses Okay but makes no selections then we don't present any info back and we also replace the "I want to " in the Checkbox Items to then present back a consolidated. amended list of chosen selections to the user

 

Awesome Zingy Dialogs · This Dialog features Radiobuttons that can be selected by the user

 

Awesome Zingy Dialogs · This Dialog features a Dropdown Combo that can have one option selected by the user

 

Awesome Zingy Dialogs · This Dialog features a Listbox or Selection Area where users can select one or more options

 

Awesome Zingy Dialogs · This Dialog features a Login area for a Username and a Password. In order to prgress both must be entered or the Dialog can be cancelled

 

My Latest Zingy Dialog Screen Shots · Create Stunning Animated Dialogs for Excel

Latest Zingy Dialogs · This Dialog features a Smooth Wall Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Navy Theme

Latest Zingy Dialogs · This Dialog features a Smooth Wall Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a new Fork Icon

Latest Zingy Dialogs · This Dialog features a Light Wool Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a new Fork Icon

Latest Zingy Dialogs · This Dialog features a Coloured Triangles Skin and a Blue Wet Chalk Colour scheme on a Dark Theme with a new Coffee Icon

Latest Zingy Dialogs · This Dialog features a Arrows Skin and a Yellow Wet Chalk Colour scheme on a Dark Theme with a new Ghost Icon

Latest Zingy Dialogs · This Dialog features a Smooth Wall Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Navy Theme with a new Smiley Wink Icon

Latest Zingy Dialogs · This Dialog features a Iron Grip Skin and a Banana Colour scheme on a Dark Theme with a Batman PNG Icon. It also demonstrates an Icon / Text area divider line

Latest Zingy Dialogs · This Dialog features a Carbon Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a repositioned Facebook Preloader

Latest Zingy Dialogs · This Dialog features a Smooth Wall Skin and a Annie Sloan Chalk Paris Grey Colour scheme on a Navy Theme with a Circle Preloader. This Dialog has a Box Shadow around the Modal and looks best on a White background

Latest Zingy Dialogs · This Dialog features a Carbon Skin and a Leaf Colour scheme on a Dark Theme without an Icon

Latest Zingy Dialogs · This Dialog uses inline HTML to pull a Zombie image from kubiszyn.co.uk

Latest Zingy Dialogs · This Dialog uses inline HTML to pull a Zombie image from kubiszyn.co.uk and also changes the Close Cross Style and positioning

Latest Zingy Dialogs · This Dialog uses inline HTML to pull a Zombie image from kubiszyn.co.uk and also changes the Close Cross Style and positioning - this is a Screen Shot of when the Mouse is hovered over the Close Cross

Latest Zingy Dialogs · This Dialog uses a repositioned Close Cross at the left of the Zingy Dialog

Latest Zingy Dialogs · This Dialog uses an alternative Heart Close Cross

Latest Zingy Dialogs · This Dialog uses an alternative Heart Close Cross

Latest Zingy Dialogs · This Dialog uses an alternative Padlock Close Cross

Latest Zingy Dialogs · This Dialog uses an alternative Thin Close Cross

Latest Zingy Dialogs · This Dialog uses a bespoke Close Cross Tooltip

Latest Zingy Dialogs · This Dialog demonstrates how you can remove the Footer area of the Zingy Dialog

Latest Zingy Dialogs · This Dialog demonstrates how you can remove the Footer area of the Zingy Dialog using the Zombie example from earlier

Latest Zingy Dialogs · A new VerticalCloth skin

Latest Zingy Dialogs · A new PXByGreg skin

Latest Zingy Dialogs · A new NavyBlue skin

Latest Zingy Dialogs · A new DarkDenim3 skin

Latest Zingy Dialogs · A new DarkFishSkin skin

Latest Zingy Dialogs · A new CrissXCross skin

Latest Zingy Dialogs · A new ClassyFabric skin

Latest Zingy Dialogs · A new Buried skin

Latest Zingy Dialogs · A new BrokenNoise skin

Latest Zingy Dialogs · A new AlwaysGrey skin

Latest Zingy Dialogs · A Data Gathering Dialog example

Latest Zingy Dialogs · A Multiple Checkbox Read & Write Settings Dialog example. Pull in editable Checkbox Titles from Cells in a Sheet and then update the chosen Checkboxes and their respective Values

Latest Zingy Dialogs · A Multiple Radiobutton Read & Write Settings Dialog example. Pull in editable Radiobutton Titles from Cells in a Sheet and then update the chosen Radiobuttons and their respective Values

Latest Zingy Dialogs · A Dropdown Read & Write Settings Dialog example. Pull in editable Dropdown options from Cells in a Sheet and then update Cells with the chosen selection

Latest Zingy Dialogs · A Listbox Read & Write Settings Dialog example. Pull in editable Listbox options from Cells in a Sheet and then update Cells with the chosen selections

Latest Zingy Dialogs · A Preselected Radiobutton Dialog example. Set a specific Radiobutton when presenting the Zingy Dialog and a list of Radiobuttons

Latest Zingy Dialogs · My Green Theme featured SmoothWall Skin example Zingy

Latest Zingy Dialogs · My Green Theme featured ColouredTriangles Skin example Zingy

My Zingy Dialog Preloader Screen Shots · Create Stunning Animated Dialogs for Excel

Please note: Using large or complex Preloader Images can bloat your Zingy.xlsm file despite compression
You can choose to use just 1 Base64 embedded Preloader or any amount of Preloaders that by minifying Zingy or your own Project by Reading this Section

Zingy Preloader Dialogs · This Dialog features a Wild Oliva Skin, a Pantone Mauve Chalk 2 Colour scheme on a Dark Theme with a Cogs Preloader (Floated Left & Right)

   

Zingy Preloader Dialogs · This Dialog features a Carbon Skin, a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a Rolling Preloader

Zingy Preloader Dialogs · This Dialog features a Carbon Skin, a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a Facebook Preloader

Zingy Preloader Dialogs · This Dialog features a Smooth Wall Skin, a Annie Sloan Chalk Paris Grey Colour scheme on a Dark Theme with a Circle Preloader

Bespoke PNG Screen Shots · Create Stunning Dialogs for Excel

Please note: Using large or complex PNG's can bloat your Zingy.xlsm file despite compression
You can choose to use just 1 PNG Base64 embedded Icon or any amount of Icons that are bespoke PNG's by minifying Zingy or your own Project by Reading this Section

Bespoke PNG Zingy Dialogs · This Dialog features a Carbon Skin, a GeoRed Colour scheme on a Dark Theme with a bespoke PNG Email Icon

Bespoke PNG Zingy Dialogs · This Dialog features a Carbon Skin, a Bright Green Colour scheme on a Navy Theme with a bespoke PNG Paper Icon

Bespoke PNG Zingy Dialogs · This Dialog features a DebutDark Skin, a Banana Colour scheme on a Dark Theme with a bespoke PNG Batman Icon

Bespoke PNG Zingy Dialogs · This Dialog features a DebutDark Skin, a Banana Colour scheme on a Dark Theme with a bespoke PNG Superman Icon

FAQ

* There are currently no FAQ for Zingy

---

Zingy Videos

This is a video of the Examples 1 through to 53 in the Zingy Download File including Skinless Zingy, capturing the return values, Zingy Makeovers, using the Zingy Lightbox, Crazy Animation Speeds and the Zingy Chalk Colour Dialogs. Music is 'Streets Of Punjab - Hanu Dixit'. View this video on YouTube

This is a video of the Examples 54 through to 89 in the Zingy Download File including different Animations, creating a Wrapper and making some lovely Zingy Dialogs. Music is 'The Bazaar Canon - Hanu Dixit'. View this video on YouTube

This is a video of the Examples 90 through to 113 in the Zingy Download File including swapping Fonts, Lists, Checkbox, Radiobutton and Input Dialogs. Music is 'The Charmer's Call - Hanu Dixit'. View this video on YouTube

Shorts

This is a Short video of the Zingy Software demonstrating 4 different Examples of various Skins and Animations. Music is 'Streets Of Punjab - Hanu Dixit'
View this Sort video on YouTube

This is a Short video of the Zingy Software demonstrating 13 different Examples of Colours using the 'MusePattern12' Skin with a Dark Theme. Music is 'Realization - Hanu Dixit'
View this Sort video on YouTube

This is a Short video of the Zingy Software demonstrating different Makeover Examples with colourful Images. Music is 'Temple Of Freedom - Hanu Dixit'
View this Sort video on YouTube

This is a Short video of the Zingy Software demonstrating some brand new Animations. Music is 'Hallow's Beach - Quincas Moreira'
View this Sort video on YouTube

This is a Short video of the Zingy Software demonstrating some brand new Preloader Icon Animations. Music is 'Streets Of Punjab - Hanu Dixit'
View this Sort video on YouTube

Support

Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support for my Software

• 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

• Make sure your question is a valid Software Issue and not a customization request
• Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
• 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
Remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary. 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

Future Builds

* No ideas as yet!

Bug Fixes

A bug exists on some users systems whereby as you drag the Zingy Dialog the outline of the Transparent UserForm is shown as you drag. This is a rare and rather strange bug that still allows you to use Zingy, only impacting the drag if used

Reported: 13.05.2023
Status: Open

---

Fonts

Fonts

The Font used throughout this Software in Excel is called 'Rajdhani', in a variety of weights from 300 up to 700. Zingy uses Google Fonts and you can use any Font that is available from Google - I demonstrate 'Raleway', 'Indie Flower' and 'Poppins' Fonts for Examples 90 through to 91. Check out Google Fonts here. Zingy Fonts are automatically downloaded on-the-fly so they will work no matter where the Workbook is stored as long as there is an internet connection, which is like, almost everywhere these days!

Credits

Credits

The image embedded into Excel for the Zingy Workbook is Abstract Geometric Pattern Background Vector by Leon Hossain purchased under a Vecteezy Pro license. You can view and purchase the file here

For some of the Seamless Background Patterns used for the Maekover Zingy Dialogs, I used images that are free on Unsplash. These images were by:
Kelly Sikkema ·  Patrick Hendry ·  Jon Tyson ·  Koushik Chowdavarapu ·  Sydney Rae ·  Visax

The Zingy Skins are Base64 encoded patterns that can be downloaded from Subtlepatterns.com
Icons were downloaded from FontAwesome · (Free License)
The Zingy File is Compressed and Cleaned using VBADecompiler.exe by Orlando
Code Inspections are maintained using Rubberduck
Base64 Image Files can be encoded using base64image.org
Animations using the Animation Library called Animate by Daniel Eden · Github · Animate.CSS
Additional Generated Animations from Animista
If you want to create and name more Colours, then Colour Name Finder can be used on colors.artyclick.com
If you want to create a new Seamless Pattern from your own images then you can use www.laurentvw.com

The Zingy Preloaders used in Version 1.2 were created using loading.io

Some additional Icons were created from Icons with Free Licenses:
The KeyPass Icon is from a set of Icons by CheckoutDeliveryIcons_EpicPxls
The Email Icon is from a set of 'bikini60s' Icons by Sebastiano Guerriero
Additional Email and Paper Icons are from two sets of 'Flat' Icons by Pierre Borodin (set 1) and Pierre Borodin (set 2)
Batman and Superman images can be found on freebiesbug.com by Pasquale Vitiello - you can find more examples of his work here
The Zombie image used in version 1.4 is from www.uihere.com by Zilena De Souza

Zingy HTML

HTML Markup

I created Zingy from Avante-garde tried and tested Markup. Obviously a lot changes occur as you integrate the Markup and JavaScript with the VBA Code
If you want to see how I did it, then you can view the complete Markup HTML File

You will see how I trap the Animation In, finish and the Return Values with JavaScript Popups to indicate various integer results - this was all the testing I went through in order to build a VBA/CSS/JavaScript/HTML Dialog and it took some considerable time and dedication. I hope you appreciate all of the hard work!

Here is the Markup (Highlight with the Mouse and then Use CTRL+C to Copy the data):

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<head>
<title>Zingy</title>
<style>
body                         {font-family: 'Abel', sans-serif; font-weight: 400; font-size: 14px; color: #f0f0f0;}
.modal                       {position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background:#fff; box-sizing:border-box;}
.modal-content               {width: 400px; height: 210px; background-color: #5D6367; margin:0; padding: 0px; border: 1px solid #5D6367; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 2px;
/* we can style the Modal Content background which will be the Footer only, if required */
background-image: url("https://www.kubiszyn.co.uk/images/dark_geometric.png");
background-repeat: repeat; 
    }
.modal:target                {width:400px;}    
.titlebox                    {width:100%; height: 40px; margin: 0px; background: #4D5459; border-bottom: 1px solid #f0f0f0; border-radius: 2px 2px 0px 0px;
/* we can style the Title if required */
background-image: url("https://www.kubiszyn.co.uk/images/dark_geometric.png");
background-repeat: repeat; 
    }  
.title                       {display: inline-block; margin-top: 4px; margin-left: 12px; padding: 2px; font-size: 20px;}    
.closecross                  {transition: 0.3s; float: right; margin-top: 4px; margin-right: 12px; padding: 2px; font-size: 20px;}
.closecross:hover,
.closecross:focus            {background: #7d3f48; color: #ffffff; text-decoration: none; cursor: pointer;}
.contentbox                  {width:100%; display: flex;} 
.icon                        {margin-top: 1px; margin-right: 12px; background-color: #70757A; padding: 24px; 
                             background-image: url("https://www.kubiszyn.co.uk/images/bell.svg");
                             background-repeat: no-repeat;
                             }  
/* to increase / decrease the height of the Modal, make this adjustment in VBA - the height here needs to be 105px less than the height of the Modal to keep everything spaced out nicely */    
.textbox                     {display:flex; width:100%; height:100px; margin-top: 1px; background-color: #70757A; color: #f0f0f0; font-size: 18px; padding: 18px 8px 8px 18px; border-bottom: 1px solid #f0f0f0; overflow-x:hidden;}    
.okaybutton, 
.cancelbutton                {color: #aaaaaa; float: left; padding: 0px 8px 2px 8px; display: inline-block; margin-top: 8px; margin-left: 12px; font-size: 18px; background: #2C2C2C; border-top: 1px solid #363636; border-left: 1px solid #363636; border-right: 1px solid #121212; border-bottom: 1px solid #121212; border-radius: 4px; }
.cancelbutton                {margin-left: 10px;}        
.okaybutton:hover, 
.okaybutton:focus, 
.cancelbutton:hover, 
.cancelbutton:focus          {color: #eeeeee; background: #7d3f48; text-decoration: none; cursor: pointer;}    
/* Animations In and Out will be replaced using VBA.  Speeds are Basic Tempo Marking from slowest to fastest.  legacy Carbon / Wild Oliva speeds are shown next to the Basic Tempo Markings */
.animated                    {animation-duration: 1s; animation-fill-mode: both;}
.animated.Larghissimo        {animation-duration: 2400ms;}    /* sloth-like */
.animated.Grave              {animation-duration: 2300ms;}
.animated.Lento              {animation-duration: 2200ms;}
.animated.Largo              {animation-duration: 2100ms;}
.animated.Larghetto          {animation-duration: 2000ms;}
.animated.Adagio             {animation-duration: 1900ms;} 
.animated.Adagietto          {animation-duration: 1800ms;}
.animated.Andante            {animation-duration: 1700ms;}
.animated.Andantino          {animation-duration: 1600ms;} 
.animated.MarciaModerato     {animation-duration: 1500ms;}  /* snail */
.animated.AndanteModerato    {animation-duration: 1400ms;}
.animated.Moderato           {animation-duration: 1300ms;}
.animated.Allegretto         {animation-duration: 1200ms;}  /* beepbeep! */
.animated.AllegroModerato    {animation-duration: 1100ms;} 
.animated.Allegro            {animation-duration: 1000ms;}
.animated.Vivace             {animation-duration: 900ms;}
.animated.Vivacissimo        {animation-duration: 800ms;} /*zippy */
.animated.Allegrissimo       {animation-duration: 700ms;} /* meepmeep! */
.animated.Presto             {animation-duration: 600ms;}
.animated.Prestissimo        {animation-duration: 500ms;}
@keyframes roadRunnerIn { 0% { transform:translateX(-1500px) skewX(30deg) scaleX(1.3); } 70% { transform:translateX(0%) skewX(0deg) scaleX(.9); } 100% { transform:translateX(0%) skewX(0deg) scaleX(.9);}} .roadRunnerIn {animation: roadRunnerIn forwards;}
@keyframes roadRunnerOut { 0% { transform:translateX(0px) skewX(0deg) scaleX(1); } 30% { transform:translateX(0%) skewX(-5deg) scaleX(.9); } 100% { transform:translateX(1500px) skewX(30deg) scaleX(1.3);}} .roadRunnerOut {animation: roadRunnerOut forwards;}
</style>
</head>
<body onload="animatein();">
<input type="hidden" value="0" id="ready">    
<input type="hidden" value="0" id="exitready">    
<input type="hidden" value="0" id="return-type">    
<input type="hidden" value="0" id="exit">    
<div class="modal" name="modal" id="modal" onselectstart="return false;" ondragstart="return false;">
 <div class="modal-content" name="modal-content" id="modal-content">
  <div class="titlebox">    
   <span class="title" name="title" id="title">Avant-garde</span>
   <span class="closecross" name="closecross" id="closecross" title="Close">×</span>    
  </div>
  <div class="contentbox">
   <span class="textbox" name="textbox" id="textbox">
   <span class="icon" name="icon" id="icon"></span>
    Message 
      </span>   
  </div>    
<span class="okaybutton" name="okaybutton" id="okaybutton" title="Okay, Understood">Okay, Understood</span>
<span class="cancelbutton" name="cancelbutton" id="cancelbutton" title="Cancel">Cancel</span>    
 </div>
</div>
<script>
var modal                    = document.getElementById("modal");
var closecrossbtn            = document.getElementById("closecross");
var okaybtn                  = document.getElementById("okaybutton");
var cancelbtn                = document.getElementById("cancelbutton");
// Handle all of the Button Clicks 
closecrossbtn.onclick        = function()       {if(document.getElementById("ready").value > 0) {document.getElementById("return-type").value = 2; alert('2'); animateout(); return eventCancel(false);} }
okaybtn.onclick              = function()       {if(document.getElementById("ready").value > 0) {document.getElementById("return-type").value = 3; alert('3'); animateout(); return eventCancel(false);} }
cancelbtn.onclick            = function()       {if(document.getElementById("ready").value > 0) {document.getElementById("return-type").value = 4; alert('4'); animateout(); return eventCancel(false);} }
modal.onclick                = function()       {if(document.getElementById("ready").value > 0) {document.getElementById("return-type").value = 5; alert('5'); animateout(); return eventCancel(false);} }    
// here is where we will toggle any Classnames for the Animation In and its respective speed.  the Timeout function needs to match the Animation In speed and will then allow a Button or Mouse click
function animatein()                            {var d = document.getElementById('modal'); d.className += " animated roadRunnerIn MarciaModerato"; setTimeout(animationinended, 1500);}    
function animationinended()                     {document.getElementById("ready").value = 6; alert('animation in ended');}
function animateout()                           {var d = document.getElementById('modal'); d.className += " animated roadRunnerOut MarciaModerato"; setTimeout(animationoutended, 1500);}
function animationoutended()                    {document.getElementById("exitready").value = 6; alert('animation out ended')}
function finish()                               {document.getElementById('exit').value=1;}
document.oncontextmenu=function() {return false;}
document.onkeydown = function() {
  switch (event.keyCode){
        case 116 : // F5, Refresh()
            event.returnValue = false;
            event.keyCode = 0;
            return false;
        case 27 : // Escape {ESC} Key
                if(document.getElementById("ready").value > 0) {document.getElementById("return-type").value = 1; alert('1'); animateout(); return eventCancel(false);}
                event.returnValue = false;
                event.keyCode = 0;
                return false;
    }
}
// Prevent any kind of bubbling up for events after usage.  this ensures only the correct return value will be set by the Button or Mouse Click actions
eventCancel = function (e)
{
    if (!e)
        if (window.event) e = window.event;
        else return;
    if (e.cancelBubble != null) e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
    if (window.event) e.returnValue = false;
    if (e.cancel != null) e.cancel = true;
}
</script>
</body>
<link href="https://fonts.googleapis.com/css?family=Abel:wght@400" rel="stylesheet" lazyload>
</html>

Changelog

Read more information on the status of each release below. The latest Version including a description of any changes is shown first

10.05.2023 - (Version 1.5)

Added another 10 new Skins
Added an example to demonstrate data gathering, picking up values from Cells and then editing them in Input Boxes on a Zingy Dialog and then writing them back out again - see example 164
Added a 'Self.GetInputStatus' to accompany the 'Self.GetInput' so that you can also pass a pipe-delimited String of Checked/Not Checked values in the form of TRUE/FALSE to automatically set each Checkbox as either On or Off - see example 165
Added a Radiobutton preselected example demonstrating how to select one of the Radiobuttons when presenting them to the end user; this is similar to the Checkbox example using the 'Self.GetInputStatus' to hold the True or selected Radiobutton - see example 166
Added a Multiple Radiobuttons Read & Write example demonstrating how to maintain a list of Radiobutton Titles, pull them into the Code and display them on a Zingy Dialog as Radiobuttons. Once the user has updated their choice, the Code then writes the chosen Radiobutton Value as TRUE. Using a Formula you can identify the chosen Radiobutton ID, Title and Value - see example 167
Added a Read & Write Dropdown example demonstrating how to maintain a list of choices, pull them into the Code and display them on a Zingy Dialog as a Dropdown Combo. Once the user has updated their choice, the Code then writes the chosen Dropdown Value out. Using a Formula you can identify the chosen Index - see example 168
Added a Read & Write Listbox example demonstrating how to maintain a list of choices, pull them into the Code and display them on a Zingy Dialog as a Listbox or Selection Area. Once the user has updated their choices, the Code then writes the chosen Lisbox Values out. Using a Formula you can identify the chosen Indexes - see example 169
Sorted out the Themes as they were not completed correctly since the release of version 1

---

08.05.2023 - (Version 1.4)

Added extra Properties to control the Top and Left Margin for the Icon and the Text area with additional Examples of usage
Added a Large Batman PNG example using Icon repositioning and a second example using a new 'DividerStyle' Property which if set, is added to the Icon and must be styled inline by the user. This allows you to create a 'groove' or 'inset' Border spaced from the Icon which will act as a kind of psuedo Vertical Divider line for the Textbox area and any subsequent Text when using 'FloatLeft' for the IconPosition (default)
Added a single TIcon Enumeration 'NoIcon' to prevent an Icon from being displayed should you just want a Text area only when using 'FloatLeft' for the IconPosition (default)
Added an example of using inline HTML Markup to pull a Zombie image from kubiszyn.co.uk and position it in the Dialog
Overhauled the Close Cross positioning, Font Size and Styles of Cross to allow some degree of movement Top and Right, but also to allow a totally different Style of symbol to be used for the Close Cross. Made some examples of usage to demonstrate some of the nicer symbols and effects when resizing and / or moving the Close Cross
Added the ability to set and / or turn off the Close Cross Tooltip
Added the ability to remove the Footer of the Zingy Dialog
Added the abilty to use a Timeout to run after the 'AnimationIn' has ended. You can set any time in Milliseconds ie. 3 * 1000 for 3 seconds. The Dialog will Timeout regardless of whether or not the Dialog is being dragged

---

07.05.2023 - (Version 1.3)

Added the ability to Use PNG's for the Icon Parameter. The PNG must be Base64 encoded similar to the Skins
Added new examples of various embedded PNG's at different Widths and Heights ie. Email, Paper, Batman and Superman. Also demonstrate the use of Transparent images, allowing the image to sit on any Zingy Textbox area background Colour
Added additional Animations: TiltInLeft, SLideOutRight, SlideOutEllipticLeft from Animista

---

06.05.2023 - (Version 1.2)

Added the ability to Use Animated GIF's for the Icon Parameter. The GIF must be Base64 encoded similar to the Skins

---

02.05.2023 - (Version 1.1)

The 'AllowModalClick As Boolean = True' has been changed to 'AllowModalClick As Boolean = False' by default, in the Animate() function

A fix has been put in situ for the issue where when presenting Zingy Dialogs one after another, the HTMLEvents do not fire to allow the Zingy Dialog parts to remain Draggable
- by moving the Code that gets dynamically created from the UserForm_Activate() Event to a standalone event and then calling it from the Animate(), just after displaying the Dialog, this fixes the issue

Changed the Name of the SkewOut Animation to LightSpeedOut
Added some brand new Animations: BackInLeft, BackOutRight, LightSpeedIn (Animate by Daniel Eden) and SwirlOut, SlideOutBlurredRight (Animista)

---

01.05.2023 - (Version 1)

General release of Zingy

---