Description:  Sugar Bar adds a drop down bar to the top of your page that's shown in a non intrusive manner, only when the page is scrolled and past the designated threshold (ie: > 50px from the top of the page). It is ideal for pushing content that's optional yet merits user attention, such as an opt-in box or advertisement. The content inside the Sugar Bar can either be defined inline on the page, or inside a separate file and embedded via Ajax. A "close" button inside the Bar when clicked on dismisses the bar either just once, or for the entire user session.

Demo: Scroll the page to see Sugar Bar!

---

Directions:

Step 1: Insert the following code in the HEAD section of your page

Select All
<link rel="stylesheet" href="sugarbar.css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="sugarbar.js"> /*********************************************** * Sugar Bar- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Please keep this notice intact * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more ***********************************************/ </script> <script> var mysugarbar jQuery(function(){ // on DOM load mysugarbar = new sugarbar({ sugarbarid: 'sugarbar', externalfile: 'sugarcontent.htm', persistclose: false }) }) </script>

The above references the following files, which you should download (by default, to the same directory as your page itself):

• sugarbar.css
• sugarbar.js
• sugarcontent.htm (external file containing sugar bar markup)

 Note that your page should also contain a proper HTML doctype and mobile meta tag to ensure Sugar Bar works properly across all browsers and devices.

And that's it for installation!

Set up Information

To initialize Sugar Bar, simply call the sugarbar() constructor function in the HEAD section of your page when the DOM has loaded, for example:

var mysugarbar

jQuery(function(){ // on DOM load
 mysugarbar = new sugarbar({
  sugarbarid: 'sugarbar',
  externalfile: 'sugarcontent.htm',
  persistclose: false
 })
})

where "mysugarbar" should be an arbitrary but unique variable to reference the current Sugar Bar instance. The sugarbar() function supports the following settings, each separated by comma:

setting	Description
sugarbarid: "string" Required	The ID of the main sugar bar DIV container, whether it's defined inline on your page or inside an external file.
externalfile: "path_to_contentfile" defaults to undefined	If your sugar bar content is defined inside an external file (instead of inline on the page), set the path to this file relative to the current page.
persistclose: true/false defaults to false	A Boolean setting controlling the behaviour of the "close" button (with CSS class "sugarclose") inside the Sugar Bar when it's clicked on. When set to true, once the user closes the Sugar Bar, it remains closed for the duration of the user session, until the user closes and relaunches the browser. The default value of false only dismisses the Sugar Bar until the page is reloaded.
showafter: number defaults to 100 (pixels)	Determines how many pixels from the very top of the page the user should scroll past before the Sugar Bar is shown. The implied unit is pixel.
showdelay: milliseconds defaults to 50	Determines the delay once the showafter threshold above is met before the Sugar Bar is animated into view. The unit is in milliseconds, with the default being 50.

The following is a sample call to sugarbar() that incorporates some of the above settings:

var mysugarbar

jQuery(function(){ // on DOM load
 mysugarbar = new sugarbar({
  sugarbarid: 'sugarbar'
  persistclose: true,
  showafter: 200 //<- no comma after last setting
 })
})

In the above code, the externalfile setting is not defined, meaning the contents of the Sugar Bar is assumed to be defined inline on the page. The following is an example markup for Sugar Bar, whether defined inline on the page or inside an external file on your server:

<div class="sugarbar" id="sugarbar">
<div class="sugarclose" title="Close">x</div>
<p>
Sugar Bar contents go here
</p>

</div>

As you can see, the markup consists of just a container DIV with a CSS class of "sugarbar" and an arbitrary but unique ID attribute. Any element with a CSS class of "sugarclose" will automatically close the Sugar Bar when clicked on.

Dynamically opening/ closing a Sugar Bar

While the default mechanism for opening and closing a Sugar Bar is based on the user scrolling the document, you can also explicitly perform these actions dynamically inside your own script or via links, for example.  Just call the method:

sugarbarinstance.showhidebar(action, [persistclose])

The first parameter can be either the string "show" or "hide". If the later value, the 2nd parameter (true/false Boolean) determines whether the bar should close for an entire user session or not. The following creates 2 links that explicitly opens and closes a sugar bar after it's initialized:

<script>

var mysugarbar

jQuery(function(){ // on DOM load
 mysugarbar = new sugarbar({
  sugarbarid: 'sugarbar'
  persistclose: true,
  showafter: 200 //<- no comma after last setting
 })
})

</script>

<a href="javascript:mysugarbar.showhidebar('show')">Show Bar</a> |
<a href="javascript:mysugarbar.showhidebar('hide', false)">Hide Bar</a>

Demo: Show Bar | Hide Bar

Proper DOCTYPE and mobile meta tag

To ensure Sugar Bar doesn't melt and turn into a sticky mess, your page should contain a valid HTML Doctype at the very top, such as:

<!doctype html>

Also, to ensure Sugar Bar behaves in mobile browsers, the following mobile meta tag should be present in the HEAD section of your page to prevent any initial zooming that may obscure part of the Sugar Bar when it's shown:

 <meta name="viewport" content="width=device-width, initial-scale=1">