Christian Science Responsive Widgets

Lives Lived Widget

Other examples

Display parameters

Parameters copied to the clipboard Copy parameters to the clipboard

Param  Default  Options  Description
  SP ●   ll              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 lives lived title
  DT     Y      Y or N   Display Lives Lived Title
  DD     Y      Y or N   Display Lives Lived Description
  DC     N      N or Y   Daily Cycle through selected videos

     ● 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=jer~phi)

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('liveslived','IS=img-fluid','LLwidget');
</script>
...
</head>
<body>
...
<div id='LLwidget'></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 llShowHide(elem){
  for(var i=0;i<9;i++){document.getElementById('ll'+i).style.display='none';}
  document.getElementById('ll'+elem.value).style.display='block';
}
</script>

Styling illustration

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

<style type='text/css'>
  #ll0{display:block}
  #ll1,#ll2,#ll3,#ll4,#ll5,#ll6,#ll7,#ll8,#ll9{display:none}
  .llselection{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%;}
  .llTitle{text-align:center;font-family:Arial;padding-bottom:10px;font-size:18px;font-weight:bold;}
  .llVideo{padding:10px;font-family:Arial;}
  .llWatch{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
  .llGroupH{position:relative;padding-right:10px;float:left;}
  .llGroupV{position:relative;width:320px;margin-left:auto;margin-right:auto;}
  .llImageH{width:250px;top:0;left:0;}
  .llImageV{width:320px;display:block;margin-left:auto;margin-right:auto;}
  .llTimeH,.llTimeV{position:absolute;bottom:6px;font-size:12px;color:#fff;background-color:#000;border-radius:5px;}
  .llTimeH{right:16px;padding:5px 10px;}
  .llTimeV{right:10px;padding:4px 8px;border-radius:5px;}
  .llDetailsH,.llDetailsV{font-size:17px;}
  .llDetailsV{padding-top:10px;}
  .llClear{clear:both;}
</style>

Publications

Site Map