Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <!--------------------------------------------------------------------------------------------------
- --------------------------------------------------------------------------------------------------
- [glow_div.html]
- A clever, relevent, but unannoying, way of attracting someone's attention to something important
- on a web site.
- (c) Damion 'Phr0z3n.dev' Tapper, 2014.
- Email: Phr0z3n.Dev@Gmail.com
- --------------------------------------------------------------------------------------------------
- --------------------------------------------------------------------------------------------------->
- <html>
- <head>
- <title>
- Phr0z3n.Dev's Glowing Div
- </title>
- <style type="text/CSS">
- body{
- font-family: helvetica;
- font-size: 11pt;
- }
- ._center{
- position: relative;
- top: 0px;
- left: 50%;
- }
- #headerText{
- text-align: center;
- }
- /***************************************************************************************
- * div styling: mainly for aesthetics and presentation.
- ****************************************************************************************/
- #glowDiv{
- width: 400px;
- height: 200px;
- margin-left: auto;
- margin-right: auto;
- font-family: verdana;
- font-size: 18pt;
- font-weight: bold;
- text-align: center;
- padding: 4px;
- border-radius: 30px;
- cursor: pointer;
- border: 4px double;
- }
- #glowDivText{
- line-height: 1.5em;
- margin: 0 auto;
- position: relative;
- top: 50%;
- transform: translate(0, -50%);
- }
- </style>
- <!------------------------------------------------------------------------------------------
- GLOW SCRIPT
- ------------------------------------------------------------------------------------------->
- <script type="text/JavaScript">
- /**
- * Glow vars:
- * these are made global because they will be manupulated by more than one inter-entities,
- * plus their initial/accumulated values need to be retained upon relative recursive function
- * calls.
- *
- * NOTE: The implementation of pointers in JavaScript would make these operations more
- * interesting, and render global variables practically unneeded.
- **/
- var glowOffset = 0; /* Used to trigger the glow effect on and off like a switch. */
- var timeoutID = null; /* Required to manipulate the timeout operation externally. */
- var glowIncA = 0; /* This will be used as a color value in the glow effect. */
- var glowIncB = 255; /* Likewise. */
- var glowIncOffset = 1; /* This will be used to manipulate the glow process. */
- /**
- * Consider this function the switch of the glow operation, being that no buttons will be
- * implemented to start/stop the process. Instead, the element's 'OnClick' event will do
- * the job.
- **/
- function startStopDivGlow()
- {
- if(glowOffset == 1)
- {
- /**
- * A bit of header text instruction to give a user a clue.
- * Not fundamental but relevant.
- **/
- headerText.innerHTML = "Click the div below and watch it glow...";
- stopDivGlow();
- glowOffset = 0;
- }
- else
- {
- headerText.innerHTML = "...click it again to make it stop.";
- startDivGlow();
- glowOffset = 1;
- }
- }
- /**
- * This is the coding logic that adds the cleverness to the code. Consider it the engine
- * of the glow process.
- **/
- function startDivGlow()
- {
- /**
- * Upon initialization, the div's style attribute is changed to add the initial glow
- * color.
- *
- * Notice how the 'glowIncA' and 'glowIncB' variables are fed as color values to the
- * CSS rgb color function. This is the fundamental concept that facilitates the glow
- * process.
- **/
- glowDiv.setAttribute("style", "background-color: rgb(0, 0, " + glowIncA +"); color: rgb(0, " + glowIncB + ", " + glowIncB + "); border: 4px dashed rgb(0 , " + glowIncB + ", " + glowIncB + ");");
- /**
- * An offset is manipulated to trigger logic that will decided how the variables
- * that are used as color values will increment.
- *
- * If the offset is 0, the 'A' variable will increment down (from 255: the max value
- * of any of the rgb color values possible), and the 'B' variable will increment up
- * (from 0).
- **/
- if(glowIncOffset == 0)
- {
- glowIncA--;
- glowIncB++;
- }
- /**
- * If the offset is 1, the opposite will happen to both variables.
- **/
- if(glowIncOffset == 1)
- {
- glowIncA++;
- glowIncB--;
- }
- /**
- * When the 'A' variable reaches its max value (255) (or the 'B' variable reaches
- * its min value (0)), the offset will be changed to 0, this in turn, will determine
- * (as we have seen earlier), how the 'A' and 'B' variables are incremented/decremented.
- **/
- if(glowIncA == 255)
- {
- glowIncOffset = 0;
- /**
- * This bit of code is optional but is used to reinitialize the timeout process
- * every full color cycle.
- **/
- clearTimeout(timeoutID);
- }
- /**
- * The action is the opposite whenever either variable reaches the opposite extreme
- * state.
- **/
- if(glowIncA == 0)
- {
- glowIncOffset = 1;
- clearTimeout(timeoutID);
- }
- /**
- * NOTE:
- * One must make careful note of how the operations in logic triggered, involving
- * both the 'A' and 'B' variables in one scenario, and the offset in the other,
- * following the satisfaction of conditions, involving the said subjects, are
- * mutually interdependent on each other.
- **/
- /**
- * This line of code is responsible for the looping process that constitutes the
- * continuous glowing of the object.
- *
- * Careful note should be made of two particular entities here:
- * 1. the timeout interval. If it should increase, the glow process would be slowed down.
- * 2. the function being called inside of itself (a kind of recursion), only that it
- * doesn't appear as a normal call. It appears as a kind of function pointer type of call.
- **/
- timeoutID = setTimeout(startDivGlow, 1);
- }
- /**
- * This function stops the glow process upon request.
- **/
- function stopDivGlow()
- {
- clearTimeout(timeoutID);
- timeoutID = null;
- }
- </script>
- </head>
- <body>
- <p id="headerText">
- Click the div below and watch it glow...
- </p><br />
- <div id="glowDiv" OnClick="JavaScript: startStopDivGlow();">
- <p id="glowDivText">Phr0z3n.Dev@Gmail.com</p>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement