Christian Science Responsive Widgets

Youth Focused Articles Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   ya              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,E,F,G   Theme Subject - selective display option
               H,I,J,M   A=All, E=Education, F=Family, G=Grief & Loss,
               P,R,S,T   H=Healing & Prayer, I=Social Issues, J=Jobs,
                  X      M=Mental Health, P=Peer Pressure, R=Relationships,
                         S=Self-Esteem, T=#MeToo, X=Anxiety

     ● 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('youtharticles','DN=3','YAwidget');
</script>
...
</head>
<body>
...
<div id='YAwidget'></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 yaShowHide(elem){
  for(var i=0;i<12;i++){document.getElementById('ya'+i).style.display='none';}
  document.getElementById('ya'+elem.value).style.display='block';
}
</script>

Styling illustration

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

<style type='text/css'>
  #ya0{display:block}
  #ya1,#ya2,#ya3,#ya4,#ya5,#ya6,#ya7,#ya8,#ya9,#ya10,#ya11{display:none}
  .yaselection{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%;}
  .yaArticles{padding-top:10px;font-size:15px;font-family:Arial;}
  .yaGroupSm{font-family:Arial;color:#000;min-height:22px;display:table-row;}
  .yaGroupLg{font-family:Arial;color:#000;min-height:65px;display:table-row;}
  .yaGroup{font-family:Arial;color:#000;padding-bottom:10px;}
  .yaItem{display:table-cell;vertical-align:top;padding-bottom:10px;}
  .yaIcon{float:left;padding-right:10px;display:table-cell;padding-bottom:10px;}
  .yaThemeTop{font-size:18px;font-weight:bold;font-family:Arial;text-align:center;padding-bottom:10px;}
  .yaTitle{font-size:18px;}
  .yaDetails{font-size:16px;color:#333;}
  .yaClear{clear:both;}
  a.yaLink{text-decoration:none;color:#000099;}
  a.yaLink:hover,a.yaLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map