Christian Science Responsive Widgets

Teen Connect Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   tc              css Style Prefix
  IS                     Image Style (eg img-fluid) to add. 
  DI     Y      Y or N   Display Logo image
  II     Y      Y or N   Item image displayed
  IB     Y      Y or N   Item By (the author) displayed
  ID     Y      Y or N   Item Detail displayed
  DN     5      1 to 5   Display Number of featured articles
  TP     A      A,H,Q,   A=All, H=Healings, Q=Q&A, T=Trending, U=Upfront
                T,U,F,   F=Fact of Fiction, P=Turning Point, M=My Church
                P,M,W    W=Why I am a Christian Scientist

     ● 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('teenconnect','DN=3&IS=img-fluid','TCwidget');
</script>
...
</head>
<body>
...
<div id='TCwidget'></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'>
  .tcTopLogo{padding-bottom:10px;}
  .tcHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .tcGroup{text-align:left;padding:10px 0;font-family:Arial;}
  .tcImage{float:left;padding-right:10px;}
  .tcItem{color:#000;}
  .tcTitle{font-size:17px;}
  .tcBy{font-size:15px;}
  .tcDetails{font-size:14px;}
  .tcClear{clear:both;}
  a.tcItemLink{text-decoration:none;color:#000099;}
  a.tcItemLink:hover,a.tcItemlink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map