Little components to use in your project, easy to initalize and customize.
Little things matter :)
Dependency:'jquery.min.js'
Unminified:'placeholderavatar.css, app.init.js, app.placeholderavatar.js'
Minified:'placeholderavatar.css, app.placeholderavatar.min.js'
$(function(){
app.init({
});
});
Add: data-xt-placeholder-avatar='name goes here'
Change text size: data-xt-avatar-size='medium, large or small'
Use background image: data-xt-background-uimage='path to image'
Default state with no name, change icon in style: data-xt-placeholder-avatar
Use image: data-xt-uimage='path to image'
If you want colors to be handled from stylesheet
$(function(){
app.init({
placeholderAvatar: {
useColorClasses: true
}
});
});
Dependency:'jquery.min.js'
Unminified:'countdowntimer.css, app.init.js, app.countdowntimer.js'
Minified:'countdowntimer.css, app.countdowntimer.min.js'
$(function(){
app.init({
});
});
Add: data-xt-countdowntimer
To add schedule dates: data-xt-schedule="October 5 2016, October 15 2016"
To add in secs: data-xt-endsec="30"
To add in days: data-xt-endday="October 13 2016 15:39 GMT+0100"
"15:39 GMT+0100" is so it will start from your GMT, you can set
Dependency:'jquery.min.js'
Unminified:'seemore.css, app.init.js, app.seemore.js'
Minified:'seemore.css, app.seemore.min.js'
$(function(){
app.init({
});
});
Add with a count: data-xt-seemore="300"
Dependency:'jquery.min.js'
Unminified:'socialshare.css, app.init.js, app.socialshare.js'
Minified:'socialshare.css, app.socialshare.min.js'
$(function(){
app.init({
});
});
Dependency:'jquery.min.js'
Unminified:'app.init.js, app.confetti.js'
Minified:'app.confetti.min.js'
$(function(){
app.init({
});
});
Add: data-xt-confetti
If you want change the width, position and z-index
$(function(){
app.init({
confetti: {
position: 'static',
width: '100%',
zIndex: '-1'
}
});
});
Dependency:'jquery.min.js'
Unminified:'app.init.js, app.exitintent.js'
Minified:'app.exitintent.min.js'
$(function(){
app.init({
});
});
Add: data-xt-exitintent
Try and close or leave the page