Christian Science Responsive Widgets

Journal Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●  jnl              css Style Prefix
  DI     C     C,L or N  Display top image (C=cover image,
                         L=Periodical Logo, N=None)
  DT     Y      Y or N   Display Title of Periodical
  DD     Y      Y or N   Display Date of Periodical
  IS                     Image Style (eg img-fluid) to add. 
  DN     0      0 to 5   Display Number of periodical articles
  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

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('journals','DN=5','JNLwidget');
</script>
...
</head>
<body>
...
<div id='JNLwidget'></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'>
  .jnlTopLogo{padding-bottom:10px;}
  .jnlHdrImage{display:block;margin-left:auto;margin-right:auto;}
  .jnlItem{text-align:center;font-family:Arial;color:#000;width:100%;}
  .jnlTitle{margin:5px;font-weight:bold;font-size:18px;}
  .jnlDate{margin:5px;font-size:16px;font-weight:bold;}
  .jnlArticles{padding-top:5px;font-size:14px;text-align:left;}
  ul.jnlBlt{list-style-type:square;list-style-position:outside;margin:0;padding:10px;}
  ul.jnlBlt li{padding:0 0 5px 0;font-size:16px;}
  a.jnlArtLink{text-decoration:none;cursor:pointer;color:#000099;}
  a.jnlArtLink:hover{color:#000;text-decoration:none;}
/* Following is used only by the JSH option */
  .jnlWrapper{padding:10px;border:1px solid #69c;margin-bottom:10px;overflow:hidden;}
  .jnlCover{margin-right:10px;float:left;}
  .jnlCover img{border:1px solid #000;width:130px;}
  .jnlDescription{font-family:Arial;line-height:22px;}
  .jnlHeader{font-size:20px;padding-bottom:5px;font-weight:bold;}
  .jnlHeader a,.jnlMore a{text-decoration:none;cursor:pointer;color:#000099;}
  .jnlHeader a:hover,.jnlMore a:hover{color:#000;}
  .jnlQuote{font-size:12px;font-style:italic;line-height:16px;padding-bottom:5px;}
  .jnlLast{font-size:16px;padding-bottom:5px;}
  a.jnlMore{text-decoration:none;cursor:pointer;color:#000099;}
  a.jnlMore:hover{color:#000;text-decoration:none;}
</style>

Publications

Site Map