Daily Prayers Web Site Widget Example

This uses the div-type code, basic settings, but with a style attribute added to make it float right.

    <div id="dailyPrayerWidget" style="float:right"></div>

The float-style is usually a desired quality for things like this.

If you use the <span>-style, it will appear like the text at the top of every page at The Rosary Shop.

The widget inherits the style information from your web page for fonts, sizes, etc. You can add any style settings you want, but it will set its own width, border, margin, padding and background color unless you add data-DBstyle="manual" in the opening div. You'll then need to specify those style attributes, or the div will automatically expand to fill whatever space it is in, run up against neighboring text, and generally misbehave.

The widget does not attempt to set any style information for <span>s, only <div>s.

If you look at the source code for this web page, you'll see that the script that loads the java library is in the head of the page, but you could put it anywhere you want. Its location in the page does not matter, because it doesn't actually load anything until the rest of your web page has loaded, thereby preventing any delays on your web content presentation.

All that fancy javascript code is doing is adding a short javascript library to you page that handles the filling of the widget. It is just doing it in a way to minimize impact on your web site. If you want to simplify your life, you could just include the following in its place:

    <script language="JavaScript" src='http://www.rosaryshop.com/dailyPrayer.js'></script>

Here is the HTML for this web page (so you can easily inspect it):

<html>
<head>
<title>Widget Test</title>

<script>
(function(w, d, s) {
  function go(){
	var js, 
	fjs = d.getElementsByTagName(s)[0], 
	load = function(url, id) {
	  if (d.getElementById(id)) {return;}
	  js = d.createElement(s); 
	  js.src = url; 
	  js.id = id;
	  fjs.parentNode.insertBefore(js, fjs);
	};
	load(('https:' == document.location.protocol ? 'https://bsd1.rosaryshop.com/secure-rosaryshop/' : 'http://www.rosaryshop.com/') + 'dailyPrayer.js', 'dpjs');
  }
  if (w.addEventListener) { 
	w.addEventListener("load", go, false); 
  } else if (w.attachEvent) 
	{ w.attachEvent("onload",go); 
  }
}(window, document, 'script'));
</script>

</head>

<body>

<div id="dailyPrayerWidget" style="float:right"></div>

<h1>Daily Prayers Web Site Widget Example</h1>
<p>From the <a href="http://www.rosaryshop.com/calendar.php">liturgical calendar web page</a>.</p>
<h2>This uses the div-type code, basic settings, but with a style attribute added to make it float right.</h2>
<pre>    <div id="dailyPrayerWidget" style="float:right"></div></pre>
<p>The float-style is usually a desired quality for things like this.</p>
<p>If you use the <span>-style, it will appear like the text at the top of every page at <a href="http://www.rosaryshop.com/">The Rosary Shop</a>.</p>
<p>The widget inherits the style information from your web page for fonts, sizes, etc. You can add any style settings you want, but it will set its own width, border, margin, padding and background color unless you add <strong>data-DBstyle="manual"</strong> in the opening div. You'll then need to specify those style attributes, or the div will automatically expand to fill whatever space it is in, run up against neighboring text, and generally misbehave.</p>
<p>The widget does not attempt to set any style information for <span>s, only <div>s.</p>
<p>If you look at the source code for this web page, you'll see that the script that loads the java library is in the head of the page, but you could put it anywhere you want. Its location in the page does not matter, because it doesn't actually load anything until the rest of your web page has loaded, thereby preventing any delays on your web content presentation.</p>
<p>All that fancy javascript code is doing is adding a short javascript library to you page that handles the filling of the widget. It is just doing it in a way to minimize impact on your web site. If you want to simplify your life, you could just include the following in its place:</p>
<pre>    <script language="JavaScript" src='http://www.rosaryshop.com/dailyPrayer.js'></script></pre>

(Were you expecting an infinite loop about here?)