Category Archives: jQuery

jQuery Super Notice

img-superNotice (1)

 

jQuery Super Notice is a jQuery plugin that allows you to create easily nice and animated notices.

Notices can be full customized, positionned in any one of the screen’s corner, and have header, icons and buttons !

It can be used for your websites, your admin interfaces, contact forms send …

Features

  • Very easy to use : $(“body”).superNotice(“Hello World !”);
  • Generator included, create your notification in a few seconds
  • 9 show and hide effects
  • 10 ease presets
  • 11 CSS themes included , create your own easily
  • 14 icons included, add yours easily
  • Add buttons to your notifications
  • Many options : autoclose, close on click or close button, title, icons ….
  • Notices are positioned intelligently, following the others
  • Auto-sizing icons (48px max)
  • Full modern browsers compatibility : IE8+, Firefox, Chrome, Opera, Safari …

Parameters and documentation

You can find the full documentation on the live page .

Click here to see the plugin page

jQuery Gradient Creator

gradientCreator_item (1)

 

jQuery Gradient Creator is a jQuery plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use : CSS generators, HTML5 canvas applications, live usages …

Features

  • Unlimited gradient points
  • HTML5 Browsers compatible (IE9 +)
  • Generate and export CSS code
  • Customizable by CSS
  • Many smart parameters and methods
  • Fast loading and fluid usage
  • Included : colorpicker plugin and any jQuery-ui libraries
  • Can easily be combined with HTML5 canvas
  • No server file, only js and CSS
  • Documentation and examples

Parameters

  • gradient : String or Array | Default gradient points
  • width : Int | Gradient preview width
  • height : Int | Gradient preview height
  • pointSize : Int | Int | Gradient points size
  • orientation : “horizontal” or “vertical” | Orientation of the generated gradient
  • target : jQuery selector | Define live targets. Ex: ”#target1,#target2”
  • tooltipGradient : String or Array | Tooltip background gradient points
  • onChange : Method | Executed on each gradient change and at start
  • onInit : Method | Executed on initialization only
  • noSupport : Method | Executed if the browser doesn’t support HTML5

Methods

  • getArrayGradient() : Return the gradient points array. Ex: [[“0%”,”#FFFFFF”],[“100%”,”#000000”]]
  • getCssGradient() : Return the full gradient generated CSS code
  • getStringGradient() : Return the gradient points as string. Ex: “0% #FFFFFF,100% #000000”
  • setOrientation(orientation) : “horizontal” or “vertical” | Change the generated gradient orientation in live.

 

Click here to see the plugin page

jQuery html5 Buttons

html5Buttons_item (1)

 

jQuery html5 Buttons combines the power of jQuery, the graphics capabilities of HTML5 canvas component and the beauty of a design in css3, to give superb animated buttons, very easy to integrate.

The package contains the plugin, the documentation and this online smart generator : create your buttons in live and dowload them, ready to work.

The generator is included to create your own buttons. You must not distribute freely the buttons.

For more informations, look at the Live Preview !

Features

  • CSS3 design, load time optimized and easy to edit
  • Many jQuery parameters to customize the effects
  • An online live and smart generator included
  • Intelligent browser compatibility : the buttons work on all browsers, but are more or less detailed depending on its capabilities
  • 23 icons included, and add yours easily
  • Documentation and examples
  • CSS3 + HTML5 = Mobiles compatibility
  • Works with jQuery 1.6 and more

Plugin Parameters

  • fx : Rollover effect type : “iconCircle” , “shine” or “none”
  • fxAlpha : Rollover effect opacity : 0.0 -> 1.0
  • fxColor : Rollover effect color : hex color value, like ”#FFFFFF”
  • crystal : Crystal effect type : “linear”, “curve”, “diagonal” or “none”
  • crystalAlpha : Crystal effect opacity : 0.0 -> 1.0
  • crystalColor : Crystal effect color : hex value, like ”#FFFFFF”
  • iconColor : Sets icon color if iconTint is true : hex color value or “auto”
  • iconsPath : Sets icon folder path
  • iconTint : Tints icon or not : true or false

Online generator features

  • Creation of the buttons in live
  • Download your custom buttons ready to work
  • Creation of custom icon sets
  • Smart automations, to keep harmony

Usage

Create a button

To create a button, simply add the button classname to your link, like this :

<a href=”#” class=”jhButton”>My Button</a>

And initialize the jQuery plugin :

$(’.jhButton’).jhButton();

Differents sizes

Each button has three default sizes: default, “big” and “large”. To set the size, just add the correct classname, like :

<a href=”#” class=”jhButton large”>My Button</a>

Add an icon

Just add the icon classname to the button :

<a href=”#” class=”jhButton icon-home”>My Button</a>

 Click here to see the plugin page

jQuery Shining Image

shiningImage_item (1)

 

jQuery Shining Image is an HTML5 jQuery plugin that add an animated shining effect to your images.

This plugin use canvas element, and is compatible with all computer and mobiles modern browsers. For the others, the image keeps its default static look.

  • Very easy to use : $(‘img’).shiningImage()
  • Many options to customize the effect
  • Can be used with lightbox, using onComplete Event
  • The shining image keeps the default style and class.
  • The shining image keeps original image click, mouseover, mouseout, mouseup and mousedown events
  • Compatibility : IE9+ , Firefox 4+ , Google Chrome 11+, Opera 10.6+, Safari 3.2+

Plugin parameters list :

  • color : Sets the effect color
  • delay : Sets the delay between each shine effect
  • direction : Sets the effect direction. Horizontal, vertical or diagonal
  • onComplete : Execute this function after plugin initialisation
  • onLoopComplete : Execute this function after each shine effect
  • opacity : Sets the effect opacity
  • playOnLoad : Automatically start effect or not
  • scale : Sets the effect scale. 1 = 30% of image width or height
  • speed : Sets the effect speed in ms

Methods

  • .data(‘shiningImage’).shine() : Start shine effect
  • .data(‘shiningImage’).stopshine() : Stop shine effect

 

Click here to see the plugin page

jQuery Live Menu

liveMenu-img (1)

 

jQuery Live Menu is a jQuery plugin that allows you to create easily nice and animated menus.

Menus are opened on left or right click on the defined target. You can customize layout, effects and the tooltip design by jQuery parameters .

The icons are not sold with the plugin, they are only there for the example.
You can find quality icons here : graphicriver.net/category/icons/web

Features

  • Very easy to use : $(’#target’).liveMenu({params})
  • Customize position, effects, speeds and delays
  • Tooltips are positioned intelligently and they are fully customizable : gradient, css …
  • Smart browsers compatibility : more or less effects, but still functional !
  • Documentation and examples (click on Live Preview)

 

Click here to see the plugin page

jQuery Simple Contact Form

simpleContact_item (1)

  Finished retrieve each value of a form in JS and PHP, and re-write the labels in the content of email. With jQuery Simple Contact Form, you can install an ajax contact form on your website, writing only the form html code and one js code line. Email is generated and send by the plugin (php file included) . The plugin keeps the form’s labels in the email sended, using their “for” attribute. jQuery Simple Contact Form can check required and email fields too, and add a custom class error to the wrong elements. Many options can be configured by parameters or CSS class. Exemple : $(‘form’).simpleContactForm();

Parameters List :

  • clearAfterSend : Boolean | Clear form fields after sending the email
  • senderEmail : String | Sender e-mail
  • url : String | Url to php target file. If empty, the plugin use the action form url.
  • type : String | Ajax type, ‘post’ or ‘get’
  • subject : String | E-mail subject
  • clearAfterSend : Boolean | Clear the form elements after send
  • errorClass : String | Error CSS class
  • success : Function | Function executed after sending

Presets CSS Class List :

  • required : If is an empty value, the form don’t send email, and add the errorClass to the element.
  • email : If isn’t an email, the form don’t send email, and add the errorClass to the element.
  • senderEmail : Replace the senderEmail parameter by this element value. If there’s no senderEmail class and no senderEmail option, the senderEmail will be the last email input value.

Click here to see the plugin page