API tools faq
paste
Advertisement
Phr0zen_Penguin

The Glowing Div - Pleasant Attention-Getter

Phr0zen_Penguin
Aug 29th, 2014
309
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.71 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!