Loading...
 

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


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

JavaScript
if (getCookie('flip_class_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 ;))





Related:



Alias names for this page:
Post-it | postit | warning note | warningnote | warnings | warning

Created by: Last Modification: Friday 02 February, 2018 02:30:06 GMT-0000 by drsassafras
List Slides
Show PHP error messages