Home Blog Page 2

Bootstrap – Popover confirm box or information box with pop-out on click of action button

Bootstrap Popover confirm box or information box with custom button with pop out

On click of action button this opens up popover confirmation box instead of conventional dialog box in bootstrap, which is quick and easy way of taking confirmation from user on any specific action and popover box takes less space on screen.

2015-12-08_10-09-15

CSS

The plugin uses the default popover styling Bootstrap provides.

JS Dependencies

Let’s go!

Download bootstrap-confirmation.js and include it after jquery.js and bootstrap.js.

src="path/to/jquery.js">
src="path/to/bootstrap.js">
src="path/to/bootstrap-confirmation.js">

 

Usage

Enable confirmations via JavaScript:

$('#example').confirmation(options);

Recommend way to use:

$('[data-toggle=confirmation]').confirmation(options);

Declaration order

Confirmation tries to cancel the default event of the target and trigger it when the “Ok” button is clicked. However, in order to have the good behavior, the plugin must be initialized before manually attaching event listener (with $.on()).

If this is not possible, you could listen the confirmed.bs.confirmation or use the onConfirm callback.

About links

If Confirmation is attached to a <a> tag, the href attribute will be removed and moved to the “Ok” button.

Options

Options can be passed via data attributes or JavaScript plain object. For data attributes, append the option name to data-, as indata-btn-ok-class="".

All options from Bootstrap Popover can be used except content.

Name type default description
title string | function ‘Are you sure?’ default content value if title attribute isn’t present.
singleton boolean false Set true to allow only one confirmation to show at a time.
When the newest confirmation element is clicked, the older ones will disappear.
popout boolean false Set true to hide the confirmation when user clicks outside of it.
This will affect all confirmations that use same selector.
btnOkClass string ‘btn-xs btn-primary’ Class of the “Ok” button.
btnOkIcon string ‘glyphicon glyphicon-ok’ Icon class of the “Ok” button.
btnOkLabel string ‘Yes’ Label of the “Ok” button.
btnCancelClass string ‘btn-xs btn-default’ Class of the “Cancel” button.
btnCancelIcon string ‘glyphicon glyphicon-remove’ Icon class of the “Cancel” button.
btnCancelLabel string ‘No’ Label of the “Cancel” button.
onConfirm function $.noop Callback called when the “Ok” button is clicked.
In data-on-confirm you can give the name of a function likemyConfirm or myObject.confirm.
onCancel function $.noop Callback called when the “Cancel” button is clicked.
In data-on-cancel you can give the name of a function like myCancelor myObject.cancel.

Data attributes for individual popovers

Options for individual popovers can alternatively be specified through the use of data attributes, as explained above.

Methods

.confirmation(‘show’)

Reveals an elements confirmation.

$('#element').confirmation('show');

.confirmation(‘hide’)

Hides an elements confirmation.

$('#element').confirmation('hide');

.confirmation(‘toggle’)

Toggles an elements confirmation.

$('#element').confirmation('toggle');

.confirmation(‘destroy’)

Hides and destroys an element’s confirmation.

$('#element').confirmation('destroy');

Events

All events from Bootstrap Popover are available but suffixed with bs.confirmation.

Event Type Description
confirmed.bs.confirmation This event is fired when the “Ok” button is clicked.
canceled.bs.confirmation This event is fired when the “Cancel” button is clicked.

Website: http://mistic100.github.io/Bootstrap-Confirmation/

 

 

jColumn – A jQuery plugin to make selected html elements the same height (equal heights of columns)

jColumn – A jQuery plugin to make selected html elements the same height (equal heights of columns)

jcolumn is an ultra-light jQuery plugin for making a group of columns height equal to the tallest one that works on window resize event.

Without jcolumn

without jcolumn screenshot

With jcolumn

with jcolumn screenshot

Options

option default type Description
delay 500 number (optional) The delayed time after the resize happens
maxWidth 767 number (optional) Every document width smaller than maxWidth will not use jcolumn
resize true boolean (optional) Disable resize event with false
callback null function (optional) A callaback function which gets triggered after resize
$('.col').jcolumn({
    delay: 500,
    maxWidth: 767,
    callback: function (height) {
        console.log('New max height is: ' + height);
    }
});

How to use it:

1. Include the jcolumn.js script after jQuery JavaScript library.

 

1 <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
2 <script src="jColumn.js"></script>

2. Add a group of block elements into a container.

01 <div class="row">
02   <div class="col">
03     <p> ... </p>
04   </div>
05   <div class="col">
06     <p> ... </p>
07   </div>
08   <div class="col">
09     <p> ... </p>
10   </div>
11 </div>

3. Initialize the plugin by calling the function on the columns.

1 $('.col').jcolumn();

4. Possible plugin options.

01 // The delayed time after the resize happens
02 delay: 500,
03
04 // Every document width smaller than maxWidth will not use jcolumn
05 maxWidth: 767,
06
07 // A callaback function which gets triggered after resize
08 callback: null,
09
10 // Disable resize event.
11 resize: true

 


Website: https://github.com/oliver-j/jcolumn

Demo: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Make-Equal-Height-Columns-jcolumn/


 

Thanks for reading,
Web Editor

 

jRumble – A jQuery plugin that adds vibrates, shakes, rotates and rumbles effects HTML elements for end-user attention

jRumble – A jQuery plugin that adds vibrates, shakes, rotates and rumbles effects HTML elements for end-user attention

jRumble is a jQuery plugin that rumbles, vibrates, shakes, and rotates any element you choose. It’s great to use as a hover effect or a way to direct attention to an element. You can control the X, Y, and rotation range, the speed, and event trigger for the rumble

 
//www.google-analytics.com/analytics.jshttp://jackrugile.disqus.com/embed.jshttps://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js//a.disquscdn.com/next/embed/alfie.f51946af45e0b561c60f768335c9eb79.js

Include jQuery and jRumble

Include jQuery and jRumble just before your closing body tag. Make sure the paths to your files are correct. I recommend including via Google Libraries API.


 type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
 type="text/javascript" src="js/jquery.jrumble.1.3.js">
					

Initialize jRumble on a Selector and Trigger Start or Stop

You can do this in a script tag within your HTML or in an external JavaScript file.


// Initialize jRumble on Selector
$('#rumble-element').jrumble();

// Start rumble on element
$('#rumble-element').trigger('startRumble');

// Stop rumble on element
$('#rumble-element').trigger('stopRumble');

 jRumble | A jQuery Plugin That Rumbles Elements//www.google-analytics.com/analytics.jshttp://jackrugile.disqus.com/embed.jshttps://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js//a.disquscdn.com/next/embed/alfie.f51946af45e0b561c60f768335c9eb79.js

Options/Defaults

Option Default Description
x 2 Set the horizontal rumble range (pixels)
y 2 Set the vertical rumble range (pixels)
rotation 1 Set the rotation range (degrees)
speed 15 Set the speed/frequency in milliseconds between rumble movements (lower number = faster)
opacity false Activate opacity flickering while rumbling
opacityMin .5 When the opacity option is set to true, this controls the minimum opacity while flickering

Known Issues

  • For rumble elements that are position fixed/absolute, they should instead be wrapped in an element that is fixed/absolute
  • Rotation does not work in Internet Explorer 8 and below

    by Jack Rugile – http://jackrugile.com


 

Website: http://jackrugile.com/jrumble/
Demo: http://jackrugile.com/jrumble/#demos
Download: https://github.com/jackrugile/jrumble/

Thanks for reading,

Web Editor 

CSShake – Some CSS classes to move or shake DOM elements

CSShake – Some CSS classes to move or shake DOM elements

http://platform.twitter.com/widgets.js//www.google-analytics.com/analytics.js// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js

Include the css file then apply classes to elements

 

<link type="text/css" href="csshake.min.css">
<!-- or from surge.sh -->
<link type="text/css" href="http://csshake.surge.sh/csshake.min.css">
<div class="shake"></div>
<div class="shake-hard"></div>
<div class="shake-slow"></div>
<div class="shake-little"></div>
<div class="shake-horizontal"></div>
<div class="shake-vertical"></div>
<div class="shake-rotate"></div>
<div class="shake-opacity"></div>
<div class="shake-crazy"></div>
<div class="shake-chunk"></div>
<ul class="shake-trigger">
 <li class="shake-slow"></li>
 <li></li>
 <li></li>
 <li class="shake-hard"></li>
 <li></li>
 <li class="shake"></li>
</ul>

CSS Shake :: Some CSS classes to move your DOM!   Customization
my-custom-shake {
  @include do-shake(
        $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
        $h: 5px, /*  {Number} is the max number for random to assign in x axis */
        $v: 5px, /* {Number} is the max number for random to assign in y axis */
        $r: 3deg, /* {Number} is the max number for random rotation */
        $dur: 100ms, /* {Number} is the animation-duration time value */
        $precision: .02, /* {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is $step: 100 * $precision; */
        $opacity: false, 
        $q: infinite, /* {String} is the animation-iteration-count value */
        $t: ease-in-out, /* {String} animation-timing-function value */
        $delay: null, /* {Number} animation-delay time value */
        $chunk: 100%); /* {Number} is the part of the keyframes where apply the animation */
}

/* Example shake-crazy */
.shake-crazy { 
	@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); 
}


Webiste: http://elrumordelaluz.github.io/csshake/

Thanks for reading,

Web Editor

View Port Sizes – A good resource to help with responsive design & mobile web apps testing

View Port Sizes – A good resource to help with responsive design & mobile web apps testing

As the browser UIs differ greatly across platforms and browsers, it’s not easy to compile in to a simple list. Also, as vertical media queries aren’t that common, I don’t think that it would be of much benefit anyway.

This website has list of around 280+ devices/mobile/tablets specifying device name, device version, device platform, device Operating system, device portrait width, device landscape width and release date.

Website: http://viewportsizes.com


Thanks for reading,
Web Editor

iCheck – super customized checkboxes and radio buttons for jQuery & Zepto with Touch devices, keyboard and ready to use skin/theme/styles support

iCheck – super customized checkboxes and radio buttons for jQuery & Zepto with Touch devices, keyboard and ready to use skin/theme/styles support

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

There are some CSS3 ways available to style checkboxes and radio buttons, like this one. You have to know about some of the disadvantages of similar methods:

  • — inputs are keyboard inaccessible, since display: none or visibility: hidden used to hide them
  • — poor browser support
  • — multiple bugs on mobile devices
  • — tricky, harder to maintain CSS code
  • — JavaScript is still needed to fix specific issues

While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

Features

Checkboxes and radio buttons customization (jQuery and Zepto) plugin//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js

  • Identical inputs across different browsers and devices — both desktop and mobile
  • Touch devices support — iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
  • Keyboard accessible inputs — Tab, Spacebar, Arrow up/down and other shortcuts
  • Screenreader accessible inputs — ARIA attributes for VoiceOver and others
  • Customization freedom — use any HTML and CSS to style inputs (try 6 Retina-ready skins)
  • jQuery and Zepto JavaScript libraries support from single file
  • Lightweight size — 1 kb gzipped
  • 32 options to customize checkboxes and radio buttons
  • 11 callbacks to handle changes
  • 9 methods to make changes programmatically
  • Saves changes to original inputs, works carefully with any selectors

 

Checkboxes and radio buttons customization (jQuery and Zepto) plugin//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js

Initialize

Just include icheck.js after jQuery v1.7+ (or Zepto [polyfill, event, data]).

iCheck supports any selectors, but handles only checkboxes and radio buttons:

// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();

// handle inputs only inside $('.block')
$('.block input').iCheck();

// handle only checkboxes inside $('.test')
$('.test input').iCheck({
  handle: 'checkbox'
});

// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();

// you can also change options after inputs are customized
$('input.some').iCheck({
  // different options
});

Indeterminate

HTML5 allows specifying indeterminate (“partially” checked) state for checkboxes. iCheck supports it for both checkboxes and radio buttons.

You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but indeterminate=”true” may not work in some browsers (like IE7):

<!-- indeterminate="true" -->
<input type="checkbox" indeterminate="true">
<input type="radio" indeterminate="true">

<!-- determinate="false" -->
<input type="checkbox" determinate="false">
<input type="radio" determinate="false">

indeterminate and determinate methods can be used to toggle indeterminate state.

Callbacks

iCheck provides plenty callbacks, which may be used to handle changes.

Callback name When used
ifClicked user clicked on a customized input or an assigned label
ifChanged input’s checked, disabled or indeterminate state is changed
ifChecked input’s state is changed to checked
ifUnchecked checked state is removed
ifToggled input’s checked state is changed
ifDisabled input’s state is changed to disabled
ifEnabled disabled state is removed
ifIndeterminate input’s state is changed to indeterminate
ifDeterminate indeterminate state is removed
ifCreated input is just customized
ifDestroyed customization is just removed

Use on() method to bind them to inputs:

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifCreated callback should be binded before plugin init.

Methods

These methods can be used to make changes programmatically (any selectors can be used):

$(‘input’).iCheck(‘check’); — change input’s state to checked

$(‘input’).iCheck(‘uncheck’); — remove checked state

$(‘input’).iCheck(‘toggle’); — toggle checked state

$(‘input’).iCheck(‘disable’); — change input’s state to disabled

$(‘input’).iCheck(‘enable’); — remove disabled state

$(‘input’).iCheck(‘indeterminate’); — change input’s state to indeterminate

$(‘input’).iCheck(‘determinate’); — remove indeterminate state

$(‘input’).iCheck(‘update’); — apply input changes, which were done outside the plugin

$(‘input’).iCheck(‘destroy’); — remove all traces of iCheck

You may also specify some function, that will be executed on each method call:

$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

Feel free to fork and submit pull-request or submit an issue if you find something not working.

//platform.twitter.com/widgets.jshttp://www.google-analytics.com/ga.js//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js// <![CDATA[
window.jQuery || document.write('\x3C/script>’);
// ]]>http://./icheck.js?v=1.0.1http://./demo/js/custom.min.js?v=1.0.1// https://platform.twitter.com/js/button.9594287b32ac4ed2228acac1d8fcd7c2.js

Browser support

iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

//collector-cdn.github.com/assets/api.js

License

iCheck plugin is released under the MIT License. Feel free to use it in personal and commercial projects.


Website: http://fronteed.com/iCheck/ 


Thanks for reading,
Web Editor

CHARTIST.JS – Simple and Responsive Charts

CHARTIST – SIMPLE RESPONSIVE CHARTS

You may think that this is just yet an other charting library. But Chartist.js is the product of a community that was disappointed about the abilities provided by other charting libraries. Of course there are hundreds of other great charting libraries but after using them there were always tweaks you would have wished for that were not included.

FACTS ABOUT CHARTIST

The following facts should give you an overview why to choose Chartists as your front-end chart generator:

  • Simple handling while using convention over configuration
  • Great flexibility while using clear separation of concerns (Style with CSS & control with JS)
  • Usage of SVG (Yes! SVG is the future of illustration in web!)
  • Fully responsive and DPI independent
  • Responsive configuration with media queries
  • Fully built and customizable with Sass

BROWSER COMPATIBILITY

IE9 IE10 IE11 Firefox 31 Chrome 35 Safari 7 Safari 8 Android 4.3 Android 4.4 iOS Safari 6 iOS Safari 7
Overall Browser Support Supported Supported Supported Supported Supported Supported Supported Supported Supported Supported Supported
Multi-line Labels (foreignObject) Not supported Not supported Not supported Supported Supported Not supported Supported Not supported Supported Not supported Supported
Advanced CSS Animations Not supported Not supported Not supported Supported Supported Not supported Supported Not supported Supported Supported Supported
SVG Animations with SMIL Not supported Not supported Not supported Supported Supported Supported Supported Supported Supported Supported Supported
Reponsive Options Override Supported with polyfill Supported Supported Supported Supported Supported Supported Supported Supported Supported Supported

Website: https://gionkunz.github.io/chartist-js/index.html

Documentation: https://gionkunz.github.io/chartist-js/api-documentation.html

Examples: https://gionkunz.github.io/chartist-js/examples.html

Plugins: https://gionkunz.github.io/chartist-js/plugins.html


Thanks for reading,
Web Editor

gmaps.js – Sleek plugin to use the potential of Google Maps in simple way on websites

gmaps.js – Sleek plugin to use the potential of Google Maps in simple way on websites

 

gmaps.js allows you to use the potential of Google Maps in a simple way.
No more extensive documentation or large amount of code.

Google maps api with less pain and more fun!

One of the best mapping plugin / API to customize and utilize Google Maps

Search for any location and it will automatically show map in DIV https://hpneo.github.io/gmaps/examples/geocoding.html

 

GMaps.geocode({
  address: $('#address').val(),
  callback: function(results, status) {
    if (status == 'OK') {
      var latlng = results[0].geometry.location;
      map.setCenter(latlng.lat(), latlng.lng());
      map.addMarker({
        lat: latlng.lat(),
        lng: latlng.lng()
      });
    }
  }
});

Website: https://hpneo.github.io/gmaps/

Documentation: https://hpneo.github.io/gmaps/documentation.html

Examples: https://hpneo.github.io/gmaps/examples.html


Thanks for reading,
Web Editor

Cropper – A simple jQuery image cropping plugin

Cropper – A simple jQuery image cropping plugin

Features

  • Supports options
  • Supports methods
  • Supports events
  • Supports touch (mobile)
  • Supports zoom
  • Supports rotation
  • Supports scale (flip)
  • Supports canvas
  • Supports multiple croppers
  • Cross-browser support

Main

class="cropper-example-1"> src="img/picture.jpg" alt="Picture">
JavaScript:
$('.cropper-example-1 > img').cropper({
  aspectRatio: 16 / 9,
  autoCropArea: 0.65,
  strict: false,
  guides: false,
  highlight: false,
  dragCrop: false,
  cropBoxMovable: false,
  cropBoxResizable: false
});

 

 


Website: http://fengyuanchen.github.io/cropper/

Examples: http://fengyuanchen.github.io/cropper/#examples


Thanks for reading,
Web Editor

jQuery Steps – An all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

jQuery Steps – An all-in-one wizard plugin that is extremely flexible, compact and feature-rich.

jQuery Steps is a smart UI component which allows you to easily create wizard-like interfaces. This plugin groups content into sections for a more structured and orderly page view. Furthermore, it is as simple as 1-2-3 to add plugins such as jQuery Validation which can prevent step changing or submission. Check out the demos and get a first-hand impression!

Features

Accessability support
Make it visible for everyone without extra work – just use it.
Async content loading
Load your content asynchronously via AJAX by calling e.g. aREST service.
Cool transition effects
Beautiful & sleek transition effects complete the offer.
Dynamic Manipulation
Add or remove steps dynamically via API.
Easy Navigation
Navigate in various different way using the keyboard, steps or pager – it is up to you.
State Persistence
Enable the saveState option – this will save your current step position of each individual wizard *.
Form validation made easy
Embed a validation plugin of your choice and customize it like you want – it is just that simple.
Embedded iframe content
Embed your content via an iframe – it feels like it would be a part of your site.
Keyboard navigation
Use your keyboard to navigate through your content.
Multiple wizards
Have multiple wizards on one page or even have nested wizards like you want.
Vertical Navigation
Switch to vertical navigation if you nee
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Demo</title>
  5.         <meta charset=“utf-8”>
  6.         src=“jquery.js”>
  7.         src=“jquery.steps.js”>
  8.     </head>
  9.     <body>
  10.        
  11.             $(“#wizard”).steps();
  12.        
  13.        
    id=“wizard”>

  14.     </body>
  15. </html>
    1. id=“wizard”>
    2.    

      First Step

    3.    
      First Content

    4.  
    5.     <h1>Second Step</h1>
    6.    
      Second Content

    7. </div>

 


Website: http://www.jquery-steps.com/GettingStarted

 


Thanks,

Web Editor