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)

  NLM  No lectures cur-  Customise the No Lecture Message text
       rently scheduled
  NLL                     Web link for the No Lectures message text
  NLS  leNMLink           Styling class for the NLL parameter if used

  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;}
  a.leNMLink{text-decoration:none;color:#000099;font-size:18px;}
  a.leNMLink:hover,a.leLink:active{text-decoration:none;color:#000;}
</style>

Publications

Site Map