When deploying applications using content management systems, application owners are typically limited to the functionality of the CMS application in use or third party add-on's available. Unfortunately, these components alone may not deliver the application requirements. Leaving the application owner to dedicate resources to develop a solution that usually ends up taking longer than it should, or not working at all. This article addresses some hypothetical production use cases, where the application does not provide the administrators an easy method to add a timer to the website.
This solution builds upon the previous articles (Embedded Google Maps - Augmenting Web Applications with Traffic Manager and Embedded Twitter Timeline - Augmenting Web Applications with Traffic Manager). "Using" a solution from Owen Garrett (See Instrument web content with Traffic Manager),This example will use a simple CSS overlay to display the added information.
Basic Rule
As a starting point to understand the minimum requirements, and to customize for your own use. I.E. Most people want to use "text-align:center". Values may need to be added to the $style or $html for your application, see examples.
|
1
2
3
4
5
6
7
8
9
10
11
|
if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break; $timer = ( "366" - ( sys.gmtime.format( "%j" ) ) ); $html = '<div class="Countdown">'.$timer.' DAYS UNTIL THE END OF THE YEAR</div>'; $style = '<style type="text/css">.Countdown{z-index:100;background:white}</style>'; $body = http.getResponseBody(); $body = string.regexsub( $body, "(<body[^>]*>)" , $style."$1\n".$html."\n", "i" ); http.setResponseBody( $body ); |
Example 1 - Simple Day Countdown Timer
This example covers a common use case popular with retailers, a countdown for the holiday shopping season. This example also adds font formatting and additional text with a link.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
#Only process text/html content if ( !string.startsWith (http.getResponseHeader ("Content-Type" ),"text/html")) break; #Countdown target #Julian day of the year "001" to "366" $targetday = "359"; $bgcolor = "#D71920"; $labelday = "DAYS"; $title = "UNTIL CHRISTMAS"; $titlecolor = "white"; $link = "/dept.jump?id=dept20020200034"; $linkcolor = "yellow"; $linktext = "VISIT YOUR ONE-STOP GIFT SHOP"; #Calculate days between today and targetday $timer = ( $targetday - ( sys.gmtime.format( "%j" ) ) ); #Remove the S from "DAYS" if only 1 day left if ( $timer == 1 ){ $labelday = string.drop( $label, 1 ); }; $html = ' <div class="TrafficScriptCountdown"> <h3> <font color="'.$titlecolor.'"> '.$timer.' '.$labelday.' '.$title.' </font> <a href="'.$link.'"> <font color="'.$linkcolor.'"> '.$linktext.' </font> </a> </h3> </div> '; $style = ' <style type="text/css"> .TrafficScriptCountdown { position:relative; top:0; width:100%; text-align:center; background:'.$bgcolor.'; opacity:100%; z-index:1000; padding:0 } </style> '; $body = http.getResponseBody(); $body = string.regexsub( $body, "(<body[^>]*>)" , $style."$1\n".$html."\n", "i" ); http.setResponseBody( $body );? |
Example 1 in Action
Example 2 - Ticking countdown timer with second detail
This example covers how to dynamically display the time down to seconds. Opposed to sending data to the client every second, I chose to use a client side java script found @ HTML Countdown to Date v3 (Javascript Timer) | ricocheting.com
Example 2 Response Rule
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
if (!string.startsWith(http.getResponseHeader("Content-Type" ), "text/html") ) break; #Countdown target $year = "2014"; $month = "11"; $day = "3"; $hr = "8"; $min = "0"; $sec = "0"; #number of hours offset from UTC $utc = "-8"; $labeldays = "DAYS"; $labelhrs = "HRS"; $labelmins = "MINS"; $labelsecs = "SECS"; $separator = ", "; $timer = '<script type="text/javascript"> var CDown=function(){this.state=0,this.counts=[],this.interval=null};CDown.prototype=\ {init:function(){this.state=1;var t=this;this.interval=window.setInterval(function()\ {t.tick()},1e3)},add:function(t,s){tzOffset='.$utc.',dx=t.toGMTString(),dx=dx.substr\ (0,dx.length-3),tzCurrent=t.getTimezoneOffset()/60*-2,t.setTime(Date.parse(dx)),\ t.setHours(t.getHours()+tzCurrent-tzOffset),this.counts.push({d:t,id:s}),this.tick(),\ 0==this.state&&this.init()},expire:function(t){for(var s in t)this.display\ (this.counts[t[s]],"Now!"),this.counts.splice(t[s],1)},format:function(t){var s="";\ return 0!=t.d&&(s+=t.d+" "+(1==t.d?"'.string.drop( $labeldays, 1 ).'":"'.$labeldays.'\ ")+"'.$separator.'"),0!=t.h&&(s+=t.h+" "+(1==t.h?"'.string.drop( $labelhrs, 1 ).'":\ "'.$labelhrs.'")+"'.$separator.'"),s+=t.m+" "+(1==t.m?"\ '.string.drop( $labelmins, 1 ).'":"'.$labelmins.'")+"'.$separator.'",s+=t.s+" "\ +(1==t.s?"'.string.drop( $labelsecs, 1 ).'":"'.$labelsecs.'")+"'.$separator.'"\ ,s.substr(0,s.length-2)},math:function(t){var i=w=d=h=m=s=ms=0;return ms=(""+\ (t%1e3+1e3)).substr(1,3),t=Math.floor(t/1e3),i=Math.floor(t/31536e3),w=Math.floor\ (t/604800),d=Math.floor(t/86400),t%=86400,h=Math.floor(t/3600),t%=3600,m=Math.floor\ (t/60),t%=60,s=Math.floor(t),{y:i,w:w,d:d,h:h,m:m,s:s,ms:ms}},tick:function()\ {var t=(new Date).getTime(),s=[],i=0,n=0;if(this.counts)for(var e=0,\ o=this.counts.length;o>e;++e)i=this.counts[e],n=i.d.getTime()-t,0>n?s.push(e):\ this.display(i,this.format(this.math(n)));s.length>0&&this.expire(s),\ 0==this.counts.length&&window.clearTimeout(this.interval)},display:function(t,s)\ {document.getElementById(t.id).innerHTML=s}},window.onload=function()\ {var t=new CDown;t.add(new Date\ ('.$year.','.--$month.','.$day.','.$hr.','.$min.','.$sec.'),"countbox1")}; </script><span id="countbox1"></span>'; $html = '<div class="TrafficScriptCountdown"><center><h3><font color="white">\ COUNTDOWN TO RIVERBED FORCE '.$timer.' </font>\ REGISTER NOW</a></h3></font></center></div>'; $style = '<style type="text/css">.TrafficScriptCountdown{position:relative;top:0;\ width:100%;background:#E9681D;opacity:100%;z-index:1000;padding:0}</style>'; http.setResponseBody( string.regexsub( http.getResponseBody(), "(<body[^>]*>)", $style."$1\n".$html."\n", "i" ) ); |
Example 2 in action
Notes
- Example 1 results in faster page load time than Example 2.
- Example 1 can be easily extended to enable Traffic Script to set $timer to include detail down to the second as in example 2.
- Be aware of any trailing space(s) after the " \ " line breaks when copy and paste is used to import the rule. Incorrect spacing can stop the JS and the HTML from functioning.
- You may have to adjust the elements for your web application. (i.e. z-index, the regex sub match, div class, etc.).
This is a great example of using Traffic Manager to deliver a solution in minutes that could otherwise could take hours.
