Adi.js

Developer
Marius Balaj
Size
3,555 Kb
Views
85,008
  1. Adi.js Previews
  2. Adi.js HTML Codes
  3. Adi.js CSS Codes
  4. Adi.js JS Codes

How do I make an adi.js?

Simple jQuery plugin for Adblock detection.More documentation here: https://github.com/balajmarius/Adi.js. What is a adi.js? How do you make a adi.js? This script and codes were developed by Marius Balaj on 07 July 2022, Thursday.

Adi.js Previews
IQ Test

Adi.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Adi.js</title> <link rel="stylesheet" href="http://daneden.github.io/animate.css/animate.min.css"></link> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://mariusbalaj.com/dev/Adi.js/plugin/javascript/advertisement.js'></script> <script src="js/index.js"></script>
</body>
</html>

Adi.js - Script Codes CSS Codes

/* Adi.js CSS ====== */
.jquery-adi { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; text-align: center; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; background: rgba(0, 0, 0, .75); z-index: 999999;
}
.jquery-adi_content { position: absolute; top: 50%; left: 50%; width: 320px; padding: 30px 40px; background: #ffffff; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); margin-left: -160px; box-sizing: border-box;
}
.jquery-adi_content h2,
.jquery-adi_content p,
.jquery-adi_content button { padding: 0; margin: 0;
}
.jquery-adi_content button { position: absolute; right: -15px; top: -15px; border: 0; outline: 0; width: 30px; height: 30px; border-radius: 50%; background-color: #d5d5d5; background-image: url('https://raw.githubusercontent.com/balajmarius/adi.js/master/icn_close.png'); background-repeat: no-repeat; background-position: 0 0; box-shadow: -2px 2px 8px rgba(148, 146, 145, 0.3);
}
.jquery-adi_content h2 { color: #e76e65; font-size: 22px; font-weight: bold;
}
.jquery-adi_content h2:before { content: ""; width: 80px; height: 80px; background-color: #e76e65; background-image: url('https://raw.githubusercontent.com/balajmarius/adi.js/master/icn_danger.png'); background-position: 0 0; background-repeat: no-repeat; display: block; margin: 0 auto 30px; border-radius: 50%;
}
.jquery-adi_content p { font-size: 14px; color: #989898; line-height: 1.4; margin: 10px 0;
}
/* Dark Theme ====== */
.jquery-adi.dark .jquery-adi_content { background: #1F1F1F;
}
.jquery-adi.dark .jquery-adi_content h2 { color: #FF4335;
}
.jquery-adi.dark .jquery-adi_content h2:before {	background-color: #FF4335;	background-position: bottom center;
}
.jquery-adi.dark .jquery-adi_content p { color: #ffffff;
}
.jquery-adi.dark .jquery-adi_content button {	background-color: #ffffff;	background-position: bottom left;
}
/* End Adi.js CSS ====== */
body { text-align:center; margin: 0; padding: 0; font-size: 16px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
.container { width:500px; margin: 50px auto;
}
.container h3 { margin: 0 0 15px;
}

Adi.js - Script Codes JS Codes

/** * Adi.js */
;(function($) { 'use strict'; var Adi; $.adi = function(args) { /** * Merge defaults with user options */ var options = $.extend({}, Adi.defaults, args); return new Adi(options); }; /** * Constructor */ Adi = function(args) { /** * Merge this with user options */ $.extend(this, args); if (this._check()) { this._init(); this.active(); } if (!this._check()) { this.inactive(); } }; /** * Check for $.adblock */ Adi.prototype._check = function() { return $.adblock === undefined }; /** * Start plugin */ Adi.prototype._init = function() { this._append(); }; /** * Set template */ Adi.prototype._setTemplate = function(title, content) { return '<div class="jquery-adi">' + '<div class="jquery-adi_content">' + '<button class="jquery-adi_close"></button>' + '<h2>' + title + '</h2>' + '<p>' + content + '</p>' + '</div>' + '</div>'; }; /** * Append html */ Adi.prototype._append = function(callback) { this.$el = $(this._setTemplate(this.title, this.content)).appendTo($(document.body)).addClass(this.theme); this._show(); }; /** * Show modal */ Adi.prototype._show = function() { var that = this; this.$el.show(); this._center(); this._controls(); this.onOpen(this.$el); }; /** * Modal controls */ Adi.prototype._controls = function() { var that = this; function close() { that.$el.hide(); that.onClose(that.$el); } this.$el.on('click', '.jquery-adi_close', close); $(document).on('keyup', function(e) { if (e.keyCode == 27) close(); }); }; /** * Center modal */ Adi.prototype._center = function() { var $modal = this.$el.find('.jquery-adi_content'); $modal.css('margin-top', -Math.abs($modal.outerHeight() / 2)); }; /** * Defaults */ Adi.defaults = { title: 'Adblock detected!', content: 'We noticed that you may have an Ad Blocker turned on. Please be aware that our site is best experienced with Ad Blockers turned off.', theme: 'light', onOpen: function() {}, onClose: function() {}, active: function() {}, inactive: function() {} };
})(jQuery);
/*========================== End plugin
===========================*/
$(document).ready(function() { $.adi({ theme: 'dark', onOpen: function(el) { /* $.adi working with animate.css */ el.find('.jquery-adi_content').addClass('animated bounceInDown') }, onClose: function(el) { /** * Redirect * ======== * window.location.href('http://some-website') * * Dont let user to see content / reload page * ========================================== * window.location.reload(true); */ }, inactive: function() { var tpl = '<h3>You cool, G.</h3>' + '<img src="//media.giphy.com/media/POWvddaQEHrgc/giphy.gif" />'; $('.container').append(tpl); console.log('Adblock not detected :)'); }, active: function() { var tpl = '<h3>You not cool, G</h3>' + '<img src="//media.giphy.com/media/4lhJQOACaIfWU/giphy.gif" />'; $('.container').append(tpl); console.log('Adblock detected :(') } });
});
Adi.js - Script Codes
Adi.js - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded July 07, 2022
Rating 4
Size 3,555 Kb
Views 85,008
Do you need developer help for Adi.js?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Marius Balaj (mariusbalaj) Script Codes
Name
Symphony of Math.PI
Social Buttons Slide
Metro UI animations
Angular Particles Explosion
Simple Parallax with jQuery
Imperial March
Codepen CSS Illustration
Follow Widget with Folding CSS3 Animation
Flat Turntable Icon and Animation in Pure CSS
JCalculator
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!