Christian Science Responsive Widgets
Sentinel Watch Widget
Other examples
Display parameters
Parameters copied to the clipboard
Param Default Options Description SP ● sw css Style Prefix IS Image Style (eg img-fluid) to add. DI Y Y,N or L Display SW image (Yes, No or Left) DD Y Y or N Display Description of Sentinel Watch ● 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
<head> ... <script type='text/javascript' src='https://christianscience.org.uk/rwidgets/js/tmwidgets.js'></script> <script type='text/javascript'> getWidgetData('sentinelwatch','','SWwidget'); </script> ... </head> <body> ... <div id='SWwidget'></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
<style type='text/css'> .swItem{font-family:Arial;color:#000;padding-bottom:10px;} .swLogo{padding-bottom:10px;} .swHdrImage{display:block;margin-left:auto;margin-right:auto;} .swImage{float:left;padding-right:10px;width:150px;} .swTitle{font-size:22px;padding-bottom:10px;} .swDetails{font-size:16px;} a.swLink{text-decoration:none;color:#000099;} a.swLink:hover,a.swlink:active{text-decoration:none;color:#000;} </style>
 

© 2026  T Marr IT Services     •     Email: itservices@trevormarr.com    •     Privacy    •     Cookies    •     Site Map