Christian Science Responsive Widgets

Daily Lift Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   dl              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
  IW    200    (max 400) Set pixel width of header logo
  TO ♦   1    1, 2 or 3  Text option (see below)
  II     N      N or Y   Item image displayed
  ID     Y      Y or N   Item Date posted displayed
  IB     Y      Y or N   Item By (the author) displayed
  DN     5      1 to 5   Display Number of daily lift items

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

     ♦ 1 = Daily Lift podcasts are short takes on inspiring ideas
           to enrich your day and share with friends.
       2 = Responding to current challenges with spiritual ideas.
       3 = Daily nuggets of spiritual insights.

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('dailylift','DN=3&DI=N&II=Y','DLwidget');
</script>
...
</head>
<body>
...
<div id='DLwidget'></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'>
  .dlHdrBanner{text-align:center;}
  .dlHdrText{font-size:18px;font-family:Arial;text-align:left;padding-bottom:16px;}
  .dlHdrLogo{margin-left:auto;margin-right:auto;padding-bottom:16px;}
  .dlitem{font-family:Arial;color:#000;display:table-row;}
  .dlitemimage{display:table-cell;padding-right:10px;}
  .dlitemdetails{display:table-cell;vertical-align:top;padding-bottom:15px;}
  .dlimage{width:75px;height:75px;}
  .dlitemby{font-size:17px;color:#333;}
  .dlitemdate{font-size:17px;}
  .dlitemtitle{font-size:18px;}
  a.dlitemlink{text-decoration:none;color:#000099;}
  a.dlitemlink:hover,a.dlitemlink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map