Christian Science Responsive Widgets

S&H Citations Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   shc             css Style Prefix
  DC     Y      Y or N   Daily Cycle through S&H citations
  IW     90    (max 200) Set pixel width of S&H image
  IM     B     B,L or N  Image: Background, Left (S&H) or None
  IA     Y      Y or N   Include Attribution for citation

     ● 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('shcitations','','SHCwidget');
</script>
...
</head>
<body>
...
<div id='SHCwidget'></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'>
  .shcGroup{font-family:Arial;width:'100%';font-size:12px;background-image:url(https://www.christianscience.org.uk/rwidgets/img/SHbg.png);background-size:cover;}
  .shcText{padding:10px;font-size:18px;text-shadow:1px 0px 0 #fff;}
  .shcSource{padding:10px;25px;text-align:right;text-shadow:1px 0px 0 #fff;}
  .shcImage{float:left;padding-right:10px;width:120px;}
  .shcQT{font-size:20px;font-weight:bold;}
  a.shcRefLink{text-decoration:none;color:#000099;}
  a.shcRefLink:hover,a.shcRefLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map