Christian Science Responsive Widgets

Practical CS Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   pa              css Style Prefix
  JS     Y      Y or N   Include illustrative javascript
  TT     Y      Y or N   Theme Title displayed (applies only
                         when individual themes are selected)
  ID     Y      Y or N   Item Detail displayed
  II     Y     Y,N or S  Item image displayed (S=small icon)
  DN     5     1 to 11   Display Number of articles
                         (applies to all themes)
  TS     A     A,C,D,E   Theme Subject - selective display option
               H,I,M,N   A=All, C=Finding CS, D=Healing addiction, E=Employment,
               O,P,R,Y   H=Health, I=Healing racism, M=Mental Health, N=Finances,
                         O=Hope, P=Purpose, R=Relationships, Y=Family

     ● 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('practicalcsarticles','DN=3','PAwidget');
</script>
...
</head>
<body>
...
<div id='PAwidget'></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

Javascript requirement

Javascript copied to the clipboard Copy javascript to the clipboard

<script type='text/javascript'>
function paShowHide(elem){
  for(var i=0;i<11;i++){document.getElementById('pa'+i).style.display='none';}
  document.getElementById('pa'+elem.value).style.display='block';
}
</script>

Styling illustration

Styling example copied to the clipboard Copy styling example to the clipboard

<style type='text/css'>
  #pa0{display:block}
  #pa1,#pa2,#pa3,#pa4,#pa5,#pa6,#pa7,#pa8,#pa9,#pa10{display:none}
  .paselection{display:block;font-size:16px;font-family:Arial;
    font-weight:bold;color:#444;line-height:1.1;padding:.4em .6em;
    width:100%;max-width:100%;box-sizing:border-box;margin:0;
    border:1px solid #aaa;box-shadow:0 1px 0 1px rgba(0,0,0,.04);border-radius:.5em;
    -moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#fff;
    background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom, #fff 0%,#e5e5e5 100%);background-repeat:no-repeat,repeat;
    background-position:right .7em top 50%,0 0;background-size:.65em auto,100%;}
  .paArticles{padding-top:10px;font-size:15px;font-family:Arial;}
  .paGroupSm{font-family:Arial;color:#000;min-height:22px;display:table-row;}
  .paGroupLg{font-family:Arial;color:#000;min-height:65px;display:table-row;}
  .paGroup{font-family:Arial;color:#000;padding-bottom:10px;}
  .paItem{display:table-cell;vertical-align:top;padding-bottom:10px;}
  .paIcon{float:left;padding-right:10px;display:table-cell;padding-bottom:10px;}
  .paThemeTop{font-size:18px;font-weight:bold;font-family:Arial;text-align:center;padding-bottom:10px;}
  .paTitle{font-size:18px;}
  .paDetails{font-size:16px;color:#333;}
  .paClear{clear:both;}
  a.paLink{text-decoration:none;color:#000099;}
  a.paLink:hover,a.paLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map