History: Custom Code HowTo - Post-It Notes

            !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 __((Tiki6|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:
{CODE(caption="XHTML Code" wrap="1")}
<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>
{CODE}

Then put the following JavaScript with jQuery to the ''__Miscellaneous__'' tab > ''__Custom Code__'' > ''__Custom JavaScript__'':
{CODE(caption="JavaScript" wrap="1" colors="javascript")}
if (getCookie('postitnote') != 'hidden') {
  $('#postitnote').removeClass('hidden').hide().delay('500').fadeIn('slow').draggable();
}
{CODE}

^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 ;))__

{HTML()}<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 (){flip_class('postitnote','hidden','hidden')} ) : 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>{HTML}

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


Related:
* ((Tutorials))


Alias names for this page:
(alias(Post-it)) | (alias(postit)) | (alias(warning note)) | (alias(warningnote)) | (alias(warnings)) | (alias(warning)) | (alias(Sticky Note)) | (alias(Sticky_Note))