Christian Science Responsive Widgets

Pandemic Response Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   pr              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)
  TI     Y      Y or N   Theme Image displayed
  ID     Y      Y or N   Item Detail displayed
  DN     5      1 to 5   Display Number of articles
                         (applies to all themes)
  TS     A      A,H,E,   Theme Subject - selective display option
                O,I,F    A=All, H=Healing, E=Economic security,
                         O=Overcoming fear, I=Immunity,
                         F=Finding certainty in uncertain times

     ● 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('pandemicresponse','DN=5','PRwidget');
</script>
...
</head>
<body>
...
<div id='PRwidget'></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 prShowHide(elem){
  for(var i=0;i<6;i++){document.getElementById('pr'+i).style.display='none';}
  document.getElementById('pr'+elem.value).style.display='block';
}
</script>

Styling illustration

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

<style type='text/css'>
  #pr0{display:block}
  #pr1,#pr2,#pr3,#pr4,#pr5{display:none}
  .prselection{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%;}
  .prArticles{padding-top:10px;font-size:15px;font-family:Arial;}
  .prArtImage{max-width:100%;}
  .prContainer{display:block;position:relative;color:#fff;margin-left:auto;margin-right:auto;}
  .prGroup{padding:5px 0;}
  .prTheme{position:absolute;font-weight:bold;font-size:24px;font-family:Arial;bottom:8px;left:16px;}
  .prThemeTop{font-size:18px;font-weight:bold;font-family:Arial;text-align:center;padding-bottom:10px;}
  .prTitle{font-size:18px;}
  .prDetails{font-size:16px;}
  .prClear{clear:both;}
  a.prLink{text-decoration:none;color:#000099;}
  a.prLink:hover,a.prLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map