Christian Science Responsive Widgets

Bible Quotes Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

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

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

Publications

Site Map