Christian Science Responsive Widgets

Church Services Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   cs              css Style Prefix
  BD     N      N or Y   Display a border
  SS    1100             Sunday Service time (24 hour format)
  WM    2000             Wednesday Meeting time (24 hour format)
  SD    12345            Sundays of the month services are held
  WD    12345            Wednesdays of the month meetings are held
  DR     N      N or Y   Display [bible source] Reference

     ● Allows you to have multiple versions of this widget,
       each with their own associated CSS, on a single web page

Javascript for extracting widget content

Javascript code copied to the clipboard Copy javascript code to the clipboard

<head>
...
<script type='text/javascript' src='https://christianscience.org.uk/rwidgets/js/tmwidgets.js'></script>
<script type='text/javascript'>
getWidgetData('churchservices','SS=1000&WM=1900&DR=Y','CSwidget');
</script>
...
</head>
<body>
...
<div id='CSwidget'></div>
...
</body>

Notes
● The getWidgetData (javascript function) has three elements
  1=Widget reference, 2=parameters and 3=div id where widget content is to be displayed
● Put javascript references in page head section
● Put referenced widget div in page body section for content display
● There is no javascript dependency on jQuery

Styling illustration

Styling example copied to the clipboard Copy styling example to the clipboard

<style type='text/css'>
  .csBorder{border:1px #000 solid;border-radius:10px;width:'100%';font-size:16px;font-family:Arial;padding:10px;color:#000;}
  .csNoBorder{width:'100%';font-size:16px;font-family:Arial;padding:10px;color:#000;}
  .csTitle{font-size:18;}
  .csSubject{font-size:18;padding:5px 0;}
  .csGTintro{font-size:16;padding-top:5px;}
  .csGTver{float:right;padding-bottom:10px;color:#555;font-size:12px;}
  .csClear{clear:both;}
  .csGT{color:#ff6600;text-decoration:none;text-align:left;font-size:16px;text-shadow:#ccc 1px 1px 1px;}
  .csGTdetail{font-size:16;margin-left:90px;padding:5px 0;font-style:italic;}
</style>

Publications

Site Map