Christian Science Responsive Widgets

Monitor Perspective Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   mp              css Style Prefix
  DI     Y      Y or N   Display Logo image
  HT     A     A,B or N  Display header text After logo, Before logo or Not at all
  IS                     Image Style (eg img-fluid) to add. 
  PS     Y      N or Y   Display Perspective summary
  TO ♦   1      1 or 2   Text option (see below)

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

     ♦ 1 = Spiritual insights for today from an article
           in the Christian Science Monitor.
       2 = The Monitor’s aim is to embrace the human family,
           shedding light with the conviction that understanding the
           world’s problems and possibilities moves us towards
           solutions.

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('monitorperspective','IS=img-fluid','MPwidget');
</script>
...
</head>
<body>
...
<div id='MPwidget'></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'>
  .mpItem{text-align:left;color:#000;padding:10px 0;font-size:12px;font-family:Arial;}
  .mpHdrLogo{padding-bottom:10px;}
  .mpHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .mpHdrText{font-size:14px;padding:10px 0;}
  .mpTitle{padding:5px 0;font-size:16px;line-height:18px;font-style:bold;}
  .mpInfo{font-size:14px;}
  a.mplink{text-decoration:none;color:#000099;}
  a.mplink:hover,a.mplink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map