SHARE
TWEET

The Glowing Div - Pleasant Attention-Getter

Phr0zen_Penguin Aug 29th, 2014 204 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <!--------------------------------------------------------------------------------------------------
  4.  --------------------------------------------------------------------------------------------------
  5.  [glow_div.html]
  6.         A clever, relevent, but unannoying, way of attracting someone's attention to something important
  7.         on a web site.
  8.  
  9.                 (c) Damion 'Phr0z3n.dev' Tapper, 2014.
  10.                 Email: Phr0z3n.Dev@Gmail.com
  11.  --------------------------------------------------------------------------------------------------
  12.  --------------------------------------------------------------------------------------------------->
  13.  
  14. <html>
  15.         <head>
  16.  
  17.                 <title>
  18.                         Phr0z3n.Dev's Glowing Div
  19.                 </title>
  20.  
  21.                 <style type="text/CSS">
  22.                         body{
  23.                                 font-family: helvetica;
  24.                                 font-size: 11pt;
  25.                         }
  26.  
  27.                         ._center{
  28.                                 position: relative;
  29.                                 top: 0px;
  30.                                 left: 50%;
  31.                         }
  32.  
  33.                         #headerText{
  34.                                 text-align: center;
  35.                         }
  36.  
  37.                         /***************************************************************************************
  38.                          * div styling: mainly for aesthetics and presentation.
  39.                          ****************************************************************************************/
  40.                         #glowDiv{
  41.                                 width: 400px;
  42.                                 height: 200px;
  43.  
  44.                                 margin-left: auto;
  45.                                 margin-right: auto;
  46.  
  47.                                 font-family: verdana;
  48.                                 font-size: 18pt;
  49.                                 font-weight: bold;
  50.                                 text-align: center;
  51.  
  52.                                 padding: 4px;
  53.                                 border-radius: 30px;
  54.                                 cursor: pointer;
  55.  
  56.                                 border: 4px double;
  57.                         }
  58.                         #glowDivText{
  59.                                 line-height: 1.5em;
  60.                                 margin: 0 auto;
  61.                                 position: relative;
  62.                                 top: 50%;
  63.                                 transform: translate(0, -50%);
  64.                         }
  65.  
  66.                 </style>
  67.  
  68.  
  69.                 <!------------------------------------------------------------------------------------------
  70.                                                                                                 GLOW SCRIPT
  71.                   ------------------------------------------------------------------------------------------->
  72.                 <script type="text/JavaScript">
  73.  
  74.                         /**
  75.                          * Glow vars:
  76.                          * these are made global because they will be manupulated by more than one inter-entities,
  77.                          * plus their initial/accumulated values need to be retained upon relative recursive function
  78.                          * calls.
  79.                          *
  80.                          * NOTE: The implementation of pointers in JavaScript would make these operations more
  81.                          * interesting, and render global variables practically unneeded.
  82.                          **/
  83.                         var glowOffset = 0;             /* Used to trigger the glow effect on and off like a switch.    */
  84.                         var timeoutID = null;   /* Required to manipulate the timeout operation externally.             */
  85.                         var glowIncA = 0;               /* This will be used as a color value in the glow effect.               */
  86.                         var glowIncB = 255;             /* Likewise.                                                                                                    */
  87.                         var glowIncOffset = 1;  /* This will be used to manipulate the glow process.                    */
  88.  
  89.                         /**
  90.                          * Consider this function the switch of the glow operation, being that no buttons will be
  91.                          * implemented to start/stop the process.  Instead, the element's 'OnClick' event will do
  92.                          * the job.
  93.                          **/
  94.                         function startStopDivGlow()
  95.                         {
  96.                                 if(glowOffset == 1)
  97.                                 {
  98.                                         /**
  99.                                          * A bit of header text instruction to give a user a clue.
  100.                                          * Not fundamental but relevant.
  101.                                          **/
  102.                                         headerText.innerHTML = "Click the div below and watch it glow...";
  103.  
  104.                                         stopDivGlow();
  105.  
  106.                                         glowOffset = 0;
  107.                                 }
  108.                                 else
  109.                                 {
  110.                                         headerText.innerHTML = "...click it again to make it stop.";
  111.  
  112.                                         startDivGlow();
  113.  
  114.                                         glowOffset = 1;
  115.                                 }
  116.                         }
  117.  
  118.                         /**
  119.                          * This is the coding logic that adds the cleverness to the code.  Consider it the engine
  120.                          * of the glow process.
  121.                          **/
  122.                         function startDivGlow()
  123.                         {
  124.                                 /**
  125.                                  * Upon initialization, the div's style attribute is changed to add the initial glow
  126.                                  * color.
  127.                                  *
  128.                                  * Notice how the 'glowIncA' and 'glowIncB' variables are fed as color values to the
  129.                                  * CSS rgb color function.  This is the fundamental concept that facilitates the glow
  130.                                  * process.
  131.                                  **/
  132.                                 glowDiv.setAttribute("style", "background-color: rgb(0, 0, " + glowIncA +"); color: rgb(0, " + glowIncB + ", " + glowIncB + "); border: 4px dashed rgb(0 , " + glowIncB + ", " + glowIncB + ");");
  133.  
  134.                                         /**
  135.                                          * An offset is manipulated to trigger logic that will decided how the variables
  136.                                          * that are used as color values will increment.
  137.                                          *
  138.                                          * If the offset is 0, the 'A' variable will increment down (from 255: the max value
  139.                                          * of any of the rgb color values possible), and the 'B' variable will increment up
  140.                                          * (from 0).
  141.                                          **/
  142.                                         if(glowIncOffset == 0)
  143.                                         {
  144.                                                 glowIncA--;
  145.                                                 glowIncB++;
  146.                                         }
  147.  
  148.                                         /**
  149.                                          * If the offset is 1, the opposite will happen to both variables.
  150.                                          **/
  151.                                         if(glowIncOffset == 1)
  152.                                         {
  153.                                                 glowIncA++;
  154.                                                 glowIncB--;
  155.                                         }
  156.  
  157.                                         /**
  158.                                          * When the 'A' variable reaches its max value (255) (or the 'B' variable reaches
  159.                                          * its min value (0)), the offset will be changed to 0, this in turn, will determine
  160.                                          * (as we have seen earlier), how the 'A' and 'B' variables are incremented/decremented.
  161.                                          **/
  162.                                         if(glowIncA == 255)
  163.                                         {
  164.                                                 glowIncOffset = 0;
  165.  
  166.                                                 /**
  167.                                                  * This bit of code is optional but is used to reinitialize the timeout process
  168.                                                  * every full color cycle.
  169.                                                  **/
  170.                                                 clearTimeout(timeoutID);
  171.                                         }
  172.  
  173.                                         /**
  174.                                          * The action is the opposite whenever either variable reaches the opposite extreme
  175.                                          * state.
  176.                                          **/
  177.                                         if(glowIncA == 0)
  178.                                         {
  179.                                                 glowIncOffset = 1;
  180.  
  181.                                                 clearTimeout(timeoutID);
  182.                                         }
  183.  
  184.                                         /**
  185.                                          * NOTE:
  186.                                          * One must make careful note of how the operations in logic triggered, involving
  187.                                          * both the 'A' and 'B' variables in one scenario, and the offset in the other,
  188.                                          * following the satisfaction of conditions, involving the said subjects, are
  189.                                          * mutually interdependent on each other.
  190.                                          **/
  191.  
  192.                                 /**
  193.                                  * This line of code is responsible for the looping process that constitutes the
  194.                                  * continuous glowing of the object.
  195.                                  *
  196.                                  * Careful note should be made of two particular entities here:
  197.                                  * 1. the timeout interval.  If it should increase, the glow process would be slowed down.
  198.                                  * 2. the function being called inside of itself (a kind of recursion), only that it
  199.                                  * doesn't appear as a normal call.  It appears as a kind of function pointer type of call.
  200.                                  **/
  201.                                 timeoutID = setTimeout(startDivGlow, 1);
  202.                         }
  203.  
  204.                         /**
  205.                          * This function stops the glow process upon request.
  206.                          **/
  207.                         function stopDivGlow()
  208.                         {
  209.                                 clearTimeout(timeoutID);
  210.  
  211.                                 timeoutID = null;
  212.                         }
  213.  
  214.                 </script>
  215.  
  216.         </head>
  217.         <body>
  218.  
  219.                 <p id="headerText">
  220.                 Click the div below and watch it glow...
  221.                 </p><br />
  222.  
  223.                 <div id="glowDiv" OnClick="JavaScript: startStopDivGlow();">
  224.                         <p id="glowDivText">Phr0z3n.Dev@Gmail.com</p>
  225.                 </div>
  226.  
  227.         </body>
  228. </html>
RAW Paste Data
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top