howto javascript jquery css postit note tips admin customize widget

Rating

[-] View

Useful ?

	Yes	(0)
	No	(0)

[-] Vote

Useful ?

0 : Yes

0 : No

Custom Code HowTo - Post-It Notes

This is an example how to create customized draggable and closeable Post-It Note for your site using the various "Custom Code" textareas of Admin > Look & Feel panel.
Please note that this trick requires jQuery and jQuery UI feature enabled and was originally tested in Tiki 6.

First paste this piece of code for example in the Admin > Look & Feel > General Layout > Custom Center Column Header textarea or in a custom module:

XHTML Code

Copy to clipboard

<div id="postitnote" class="hidden" style="background: #ffc; margin: 2px 0 0 2px; padding: 5px 5px 10px; position: fixed; top: 250px; right: 10px; width: 180px; z-index: 2000; min-height: 240px"><img src="http://tiki.org/img/icons/close.png" alt="Close" width="16" height="16" class="rbox-close" onclick="confirm('Are you sure you want to close this note and keep it hidden permanently on next page load? (If you ever want it back, you would need to delete the cookie named flip_class_postitnote in your browser settings.)') ? $(this).parent().fadeOut( function () {literal}{setCookie('postitnote','hidden')}{/literal} ) : false;" style="border: none" title="Close" />
  <div class="rbox warning">
    <div class="rbox-title"><img src="http://tiki.org/img/icons/exclamation.png" alt="warning" width="16" height="16" style="border: none" title="warning" class="icon" />
      <span>Hello World!</span>
    </div>
    <div class="rbox-data">
      I'm an example of a Post-It like note! Feel free to drag me around! You can close me too but I'd like to stay visible longer! :)
    </div>
  </div>
</div>

Then put the following JavaScript with jQuery to the Miscellaneous tab > Custom Code > Custom JavaScript:

JavaScript

Copy to clipboard

if (getCookie('postitnote') != 'hidden') {
  $('#postitnote').removeClass('hidden').hide().delay('500').fadeIn('slow').draggable();
}

Now just hit the Apply button and your new post-it note should appear at your site "sticked" on the position specified by top and right values!

If you want more post-it-like notes on your site, just do copy'n'paste and add a number after every postitnote text found in the code (because the identifier must be unique for every one of them).

You can also optimize and put the inline CSS (in the style attribute) to your Custom CSS tab textarea of course and try other tricks. Enjoy!

By the way, You can see a live example of the code above appearing on this page ! (unless you or someone closed it in your browser already 😉)