Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

pixweb
If you have working knowledge of CSS and basic JavaScript, you can make an Evergage message fade into the page.


Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleThis Article Explains

This article describes how to make an Evergage message fade into the page.



Panel
borderColor#ccc
titleColor#404040
borderWidth1
titleBGColor#f4f5f7
titleSections in this Article

Table of Contents
maxLevel2


Create a Message with a Transparent Background

  1. Log into the Evergage Visual Editor
  2. Create a new campaign
  3. Create a new popup message
  4. Select Background > Transparent

 

Wrap Message Contents in a DIV

Once that step is done, the message's background will be transparent but its contents will still be visible when you render it on the page. To get around this, we need to go into the HTML source of the message and wrap all the contents with a div.

  1. At the bottom right of the Visual Editor window, select Message Source Code
  2. Confirm HTML/CSS is selected

  3. Add div id="eg-wrapper" around the message div as shown in the image at the right

    Note
    titleNOTE
    Add an ID to the wrapping DIV to make it possible to apply style changes and jQuery effects


Add CSS Styles

Adding these changes to your message will make it transparent when it first renders on the page.

  1. Still on the Message Source Code tab, confirm HTML/CSS is selected
  2. At the right in the CSS area, add the following styles:
    1. height: 100%;
    2. width: 100%
    3. opacity: 0;
    4. background-color: #29a0d6 (can be any hex color value)

 


Add jQuery fadeTo Function


Now, you will use a jQuery fadeTo function to make the message fade in. For more information regarding this function, refer to this this article outside of the Knowlegebase.

Note
titleNOTE
Evergage loads its own version of jQuery, called by 'ajq' instead of the standard '$


  1. Still on Message Source Code, select JavaScript
  2. Add the following line, where 'slow' indicates the speed of the fade effect (can be changed to 'fast') and 1 indicates the final opacity value of the message (can be changed to any value between 0 and 1, where 0 is invisible and 1 is opaque)

    Code Block
    languagejs
    ajq('#eg-wrapper').fadeTo('slow', 1);


  3. Click APPLY
  4. Click SAVE to save your campaign

Hidestuff