Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 

#jQuery-Easy-Label

This JS allows you to add removable sticky label (with cookie state check)into your form or web page.

This comes in handy if you want to show some informative or help text to your user which once they have read (by clicking Remove button) , they should not be prompted to show the same text anymore.

Include the easy.stickypost.css and easy.stickypost.js after the jquery.js file. Specify a data attribute data-stickyid="xx" to any HTML object that you wants it to be Removable.

See demo/demo.html file for a simple demo. Some configuration can be done:

  • Specifying the Color (e.g. 'color': 'orange' as parameter)
  • Specifying your own Delete button. HTML support
  • Changing the Tooltip text when hover.
  • Specifying a label which is removable or Always show.

e.g.

   $("#tips1").stickypost({'tooltip': 'alamak','pin': '<span>x</span>'});
   $("#tips2").stickypost({
     'cached':false,
     'tooltip': 'Click here to close it temporarily',
     'pin': '<img src="https://cdn2.iconfinder.com/data/icons/windows-8-metro-style/128/delete.png" height="16" width="16"/>',
     'color': 'orange'
   });
   $("#tips3").stickypost();

HTML

<div id="tips1">
   <h2>Tips:</h2>
   <p>Default color with custom delete Pin 'x' and Cookie is turn on (After removing the sticky post, F5 refresh and you shall not see it again)</p>
   <p data-stickyid="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus rutrum nibh ut rhoncus congue. Interdum et malesuada fames ac ante ipsum primis in faucibus.
   </p>
   <p data-stickyid="2">Nulla nec egestas enim. Donec porttitor, quam cursus faucibus facilisis, magna ex condimentum ipsum, a sagittis nulla libero ac velit. Nunc scelerisque arcu eleifend, pellentesque lectus et, porta urna.
   </p>
   <p data-stickyid="3">Aliquam fringilla, dolor ut gravida porttitor, urna risus auctor libero, eget dapibus ante sem et ante. Proin erat orci, pulvinar ac tincidunt a, blandit a risus.
   </p>
 </div>

 <div id="tips2">
   <h2>Tips 2:</h2>
   <p>Orange color (hover) with custom delete image Pin and no Cookie Check</p>
   <p data-stickyid="4">ABC</p>
   <p data-stickyid="5">def</p>
   <p data-stickyid="6">GHI</p>
 </div>

 <div id="tips3">
   <h2>Tips 3:</h2>
   <p>Default stick post setting. You need to have Awesome font included</p>
   <p data-stickyid="7">This is Awesome Delete icon 1</p>
   <p data-stickyid="8">This is Awesome Delete icon 2</p>
   <p data-stickyid="9">This is Awesome Delete icon 3</p>
 </div>

The data-stickyid is used as cookie cache checking. Avoid using the same ID.

Refer to demo here http://wp.ahcheng.com/wp-content/uploads/jQuery%20Easy%20Label/demo/demo.html

About

Plugin to turn any of your HTML to a Removable with cookie cache state hide and show. Try it out and see if it helps

Resources

Releases

No releases published

Packages

No packages published