CSS Codes
CSS Layouts
FF2+ IE8+ Opera 9+

3D Drop In Notifier Panel v1.1

Author: Dynamic Drive

Note: v1.1 (Dec 22nd, 13): Fixed various issues in legacy browsers such as IE8/9 and Opera, adds alternate transition effect.

Description: 3D Notifier lets you broadcast important information to your visitors using a drop down panel that appears at the top of the page. It gently scrolls the page to the top before revealing the panel in a 3D fashion. The panel contents can either be defined inline on the page, or entirely inside an external file and fetched via Ajax. Two modes of appearing are supported- "manual", where you explicitly open/close the panel, or automatic, where the panel appears automatically once per browser session to each visitor.

Demo: Look up!

Toggle Panel Open Close

Directions: Developer's View

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

Select All

The code above references three external files, which you need to download below (right click/ select "Save As"):

  1. notifier.js
  2. notifier.css
  3. content.txt (markup of Panel, by default, defined inside this file and fetched via Ajax).

By default, upload these files to the same directory as where your webpage resides.

Step 2: Insert the below sample buttons that manipulate the panel into the BODY section of your page:

Select All

That's it for installation! Lets move on to understanding how everything works.

HTML Markup of 3D Panel

The markup of the panel can either be defined inside an external file (default setup), or inline on the page. Whichever route you go, it should consist of the below basic structure:

<div class="notify" id="mynotify">
<div class='content'>

Your content here
Your content here
Your content here
"

<div class="close">X Close</div>
</div>
</div>

The markup should contain two outer nested DIVs, with the desired content to show inside the innermost. The outermost DIV should carry an unique but arbitrary ID, with both DIVs adopting the CSS class names you see above. Any element with a class of "close" inside the markup will be treated as a close button by the script.

As mentioned, the markup of the panel can be defined inside an external file and fetched via Ajax, or inline on the page. If the later, set the "content" option of the initialization code to "inline":

jQuery(function(){ // on DOM load
 notifier.init({
  noteid: 'mynotify', //id of main panel div
  content: 'inline', // 'inline' or 'path to external file'
  defaultstate: 'open', // 'open' or 'closed'
  freq: 'manual', //'manual' or 'session'
  oninit: function($el, state){
   // do something when panel loads
  },
  onopenclose: function($el, state){
   // do something when panel opens or closes
  }
 })
})

Speaking of initialization code, it should be called in the HEAD section of your page, after the DOM loads. Lets look at the supported options of this function now, which should each be separated by a comma except the very last option.

Available Options for notifier.init()

option Description
noteid: string

required

 The ID of the outermost container of the 3D Panel.
content: 'string'

defaults to 'inline'

 Specifies the source of the 3D Panel markup and content. Set to "inline" if the markup is defined literally on the page, or if it's inside an external file, the path to that file on your server relative to this page. For example:

content: 'myfiles/content.txt'

 
freq: 'string'

defaults to 'manual'

 Sets the frequency that the panel is shown when the page loads. If set to "manual", the panel will be closed by default unless the defaultstate option below is set to "open". If set to "session', then the panel will be shown once per browser session to the user. In both modes, the panel can continue to be opened/closed explicitly by the user by calling the open() and close() methods mentioned below under "Methods".
defaultstate: 'string'

defaults to 'open'

 Sets the default open state of the Panel, applicable only when the "freq" property above is set to "manual". The two possible values are: "open" or "close".
onopenclose: function($el, state){
// code here
}		 Callback function that gets invoked once when the Panel is loaded on the page. It is passed two parameters:
  • $el: A jQuery object referencing the 3D Panel's outermost container.
  • state: A string containing either "open" or "closed" depending on the current state of the Panel.

 
oninit: function($el, state){
// code here
}		 Callback function that gets invoked everytime the Panel is opened or closed, at the very end of each action. It is passed two parameters:
  • $el: A jQuery object referencing the 3D Panel's outermost container.
  • state: A string containing either "open" or "closed" depending on the current state of the Panel.
 
Method  
notifier.toggle() Toggles the state of the Panel.
notifier.open() Explicitly opens the Panel.
notifier.close() Explicitly closes the Panel.

Creating a dynamic toggle button

Using the onopenclose() and oninit() event handlers of the Panel, you can create a toggle button that reflects the inverse ystate of the Panel. Here's an example:

Toggle Panel

Here's the markup for the toggle button:

<a id="dyntoggle" href="#" class="toggle" onClick="notifier.toggle(); return false">Toggle Panel</a>

And here's the initialization code for the Panel:

<script>
var $togglebutt // register global variable pointing to toggle button

jQuery(function(){ // on DOM load
 notifier.init({
  noteid: 'mynotify', //id of main panel div
  content: 'inline', // 'inline' or 'path to external file'
  defaultstate: 'open', // 'open' or 'closed'
  freq: 'manual', //'manual' or 'session'
  oninit: function($el, state){
   $togglebutt = $('#dyntoggle')
   $togglebutt.text( (state == 'open')? 'Close Panel' : 'Open Panel' )
  },
  onopenclose: function($el, state){
   $togglebutt.text( (state == 'open')? 'Close Panel' : 'Open Panel' )
  }
 })
})
</script>

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post