Christian Science Responsive Widgets

Lectures Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   le              css Style Prefix
  JS     Y      Y or N   Include illustrative javascript
  C  ⯅                   Country
  R  ⯅                   Region (eg state or county)
  L  ⯅                   Lecturer name
  TZ ⯅                   Time Zone of lecture (select by)
  SO     L      L or D   Sort Order (L=Location, D=Date)
  HI     N      N or Y   Hide Information (phone number) details
  DC     Y      Y or N   Display Country
  DR     Y      Y or N   Display Region (eg State or County)
  DL     Y      Y or N   Display Lecturer
  DTZ    Y      Y or N   Display Lecture Time Zones
  DUO    N      N or Y   Display UTC Offset (hours)
  LT     A      A,W,I    Lecture Type (A=All, W=Web, I=In Person)
  DN     0               Display Number of lectures (0 means no limit)
  LL     A     E,G,F,S   Lecture Language (A=All, E=English, G=German, F=French,
                P,I,O    S=Spanish, P=Portuguese, I=Italian, O=Other)

  PW    600              Set pixel width of google map popup window
  PH    500              Set pixel height of google map popup window

     ● Allows you to have multiple versions of this widget,
       each with their own associated CSS, on a single web page

     ⯅ Entries are case insensitive, and can match one or more
       countries, regions, time zones or lecturers respectively.
       Multiple entries can also be used with tilde (~) as a
       seperating character (eg C=uk~ireland&R=london~surrey)

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('lectures','C=UK&SO=D&JS=N&DTZ=N','LEwidget');
</script>
...
</head>
<body>
...
<div id='LEwidget'></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 lePopup(pgid,ww,wh){
  var wl=(screen.width - ww) / 2;
  var wt=(screen.height - wh) / 2;
  var wprms='toolbar=0,location=0,status=0,menubar=0,scrollbars=0,width='+ww+',height='+wh+',top='+wt+',left='+wl;
  win = window.open(pgid,'Lecture Location',wprms);
}
</script>

Styling illustration

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

<style type='text/css'>
  .leGroup{font-family:Arial;padding-bottom:10px;color:#000;}
  .leDtWhen{font-size:15px;}
  .leDtTitle{padding-left:15px;font-size:14px;font-weight:bold;color:chocolate;}
  .leDtDetails{padding-left:15px;font-size:13px;}
  .leLnCountry{font-size:15px;font-weight:bold;padding-top:10px;}
  .leLnRegion{padding-left:10px;font-size:13px;font-weight:bold;padding-top:5px;}
  .leLnCity{padding-left:20px;font-size:13px;font-weight:bold;color:#333;}
  .leLnTitle{padding-left:30px;font-weight:bold;font-size:12px;color:chocolate;}
  .leLnDetails{padding-left:40px;font-size:13px;}
  a.leLink{text-decoration:none;color:#000099;}
  a.leLink:hover,a.leLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map