Christian Science Responsive Widgets

Lecture Videos Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   lv              css Style Prefix
  IS                     Image Style (eg img-fluid) to add. 
  JS     Y      Y or N   Include illustrative javascript
  L      V      V or H   Vertical or Horizontal layout
  K  ⯅                   Keyword to match a lecture title
  DT     Y      Y or N   Display Title of Lecture
  DD     Y      Y or N   Display Description of Lecture
  DC     N      N or Y   Daily Cycle through selected videos
  LL  ⚑  E      E,F,G,P  Lecture Language (E=English, F=French, G=German,
                S        P=Portuguese, S=Spanish) see below

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

     ⯅ Keywords are case insensitive, and can match one or more
       titles (or parts thereof) if required. Multiple keywords
       can also be used with tilde (~) as a seperating character
       (eg K=innoc~opportun)

     ⚑ Entries can match one or more languages by concatenating
       required language identifiers (eg LL=SF)

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('lecturevideos','IS=img-fluid','LVwidget');
</script>
...
</head>
<body>
...
<div id='LVwidget'></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 lvShowHide(elem){
  for(var i=0;i<10;i++){document.getElementById('lv'+i).style.display='none';}
  document.getElementById('lv'+elem.value).style.display='block';
}
</script>

Styling illustration

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

<style type='text/css'>
  #lv0{display:block}
  #lv1,#lv2,#lv3,#lv4,#lv5,#lv6,#lv7,#lv8,#lv9{display:none}
  .lvselection{display:block;font-size:16px;font-family:Arial;
    font-weight:normal;color:#444;line-height:1.1;padding:.4em .6em;
    width:100%;max-width:100%;box-sizing:border-box;margin:0;
    border:1px solid #aaa;box-shadow:0 1px 0 1px rgba(0,0,0,.04);border-radius:.5em;
    -moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#fff;
    background-image:url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
    linear-gradient(to bottom,#fff 0%,#e5e5e5 100%);background-repeat:no-repeat,repeat;
    background-position:right .7em top 50%,0 0;background-size:.65em auto,100%;}
  .lvTitle{text-align:center;font-family:Arial;padding-bottom:10px;font-size:18px;font-weight:bold;}
  .lvVideo{padding:10px;font-family:Arial;}
  .lvWatch{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  .lvGroupH{position:relative;padding-right:10px;float:left;}
  .lvGroupV{position:relative;width:320px;margin-left:auto;margin-right:auto;}
  .lvImageH{width:250px;top:0;left:0;}
  .lvImageV{width:320px;display:block;margin-left:auto;margin-right:auto;}
  .lvTimeH,.lvTimeV{position:absolute;bottom:6px;font-size:12px;color:#fff;background-color:#000;border-radius:5px;}
  .lvTimeH{right:16px;padding:5px 10px;}
  .lvTimeV{right:10px;padding:4px 8px;border-radius:5px;}
  .lvDetailsH,.lvDetailsV{font-size:17px;}
  .lvDetailsV{padding-top:10px;}
  .lvClear{clear:both;}
</style>

Publications

Site Map