Christian Science Responsive Widgets

Monitor Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●  mon              css Style Prefix
  IS                     Image Style (eg img-fluid) to add. 
  DI     Y      Y or N   Display Monitor Cover image
  DN     5      0 to 5   Display Number of monitor items
  MC ♦   AS              Monitor Content
  ID     Y      Y or N   Item Detail displayed
  IB     Y      Y or N   Include Bullets on article list
  JSH    N     N,D or C  JSH style (N=No, D=Detailed, C=Condensed)
 JSHDT   Y      Y or N   Display JSH style Title

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

     ♦ AS (All Stories), PE (CS Perspective), CO (Commentary),
       VW (View), CU (Culture), HF (Home Forum)

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('monitors','DN=2','MONwidget');
</script>
...
</head>
<body>
...
<div id='MONwidget'></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'>
  .monTopLogo{padding-bottom:10px;}
  .monHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .monItem{font-family:Arial;color:#000;padding:10px 0;width:100%;}
  .monImage{float:left;padding-right:10px;width:25%;}
  .monTitle{font-size:17px;padding:10px 0;line-height:19px;}
  .monInfo{font-size:14px;}
  .monSummary{font-size:14px;padding-bottom:10px;}
  .monclear{clear:both;}
  ul.monBlt{list-style-type:square;list-style-position:outside;margin:0;padding:10px;}
  ul.monBlt li{padding:0 0 5px 0;font-size:16px;}
  a.monLink{text-decoration:none;color:#000099;}
  a.monLink:hover,a.monLink:active{text-decoration:none;color:#000;}
/* Following is used only by the JSH option */
  .monWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .monCover{margin-right:10px;float:left;}
  .monCover img{border:1px solid #000;width:130px;}
  .monDescription{font-family:Arial;line-height:22px;}
  .monHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .monHeader a,.monMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .monHeader a:hover,.monMore a:hover{color:#000;}
  .monQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .monLast{font-size:16px;padding-bottom:5px;}
  a.monMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.monMore:hover{color:#000;text-decoration:none;}
</style>

Publications

Site Map