An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
Some of Our Sources
- Slashdot
- Joshua Blankenship
- The Logo Smith
- Smashing Apps
- Inspiredology
- CSS Globe
- Line 25
- 24 Ways
- Design Modo
- Dev To
Help Webnuz
Referal links:
May 25, 2021 07:05 pm GMT
Original Link: https://dev.to/codingnepal/detect-adblock-using-html-css-javascript-dkh
Detect AdBlock using HTML CSS & JavaScript
Hey friends, today in this blog youll learn how to Detect AdBlock using JavaScript. In the earlier blog, I have shared how to Detect Internet Connection Status using JavaScript and now its time to create a popup box using JavaScript that detects AdBlocker. If youre new to this blog and its the first blog youre viewing then click here to view playlists of our all JavaScript Projects on YouTube.
In our program [Detect AdBlock using JavaScript], as you can see in the preview image there is a popup box with some text and a button to dismiss the popup. If the user has enabled AdBlocker then this popup will be displayed and if not then this popup will not be displayed.
You've to create two files (HTML & CSS) and copy the given source codes and paste into your files.
HTML CODE:
<!DOCTYPE html><!-- Coding By CodingNepal - youtube.com/codingnepal --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Detect AdBlock using JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/></head><body> <div id="detect"></div> <div class="wrapper"> <div class="content"> <div class="warn-icon"> <span class="icon"><i class="fas fa-exclamation"></i></span> </div> <h2>AdBlock Detected!</h2> <p>Our website is made possible by displaying ads to our visitors. Please supporting us by whitelisting our website.</p> <div class="btn"> <div class="bg-layer"></div> <button>Okay, I'll Whitelist</button> </div> </div> </div> <script> const detect = document.querySelector("#detect"); const wrapper = document.querySelector(".wrapper"); const button = wrapper.querySelector("button"); let adClasses = ["ad", "ads", "adsbox", "doubleclick", "ad-placement", "ad-placeholder", "adbadge", "BannerAd"]; for(let item of adClasses){ detect.classList.add(item); } let getProperty = window.getComputedStyle(detect).getPropertyValue("display"); if(!wrapper.classList.contains("show")){ getProperty == "none" ? wrapper.classList.add("show") : wrapper.classList.remove("show"); } button.addEventListener("click", ()=>{ wrapper.classList.remove("show"); }); </script></body></html>CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@700&family=Poppins:wght@400;500;600&display=swap');*{ margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif;}body{ width: 100%; height: 100vh; background: linear-gradient(135deg, #9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);}::selection{ color: #fff; background: #9b27ca;}.wrapper{ position: absolute; max-width: 480px; top: 50%; left: 50%; width: 100%; padding: 40px 30px; background: #fff; border-radius: 15px; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(1.2); box-shadow: 10px 10px 15px rgba(0,0,0,0.06); transition: opacity 0.2s 0s ease-in-out, transform 0.2s 0s ease-in-out;}.wrapper.show{ opacity: 1; pointer-events: auto; transform:translate(-50%, -50%) scale(1);}.wrapper .content,.content .warn-icon,.warn-icon .icon{ display: flex; align-items: center; justify-content: center;}.wrapper .content{ flex-direction: column;}.content .warn-icon{ height: 115px; width: 115px; border-radius: 50%; background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%);}.warn-icon .icon{ height: 100px; width: 100px; background: #fff; border-radius: inherit;}.warn-icon .icon i{ background: linear-gradient(#9b27ca 0%, #9927cf 0%, #d33639 100%, #f92121 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 50px;}.content h2{ margin-top: 35px; font-size: 32px;}.content p{ font-size: 19px; text-align: center; margin-top: 20px;}.btn{ height: 57px; width: 223px; margin-top: 30px; border-radius: 50px; position: relative; overflow: hidden;}.btn .bg-layer{ height: 100%; width: 300%; position: absolute; left: -100%; background: -webkit-linear-gradient(135deg, #9b27ca, #d33639, #9b27ca, #d33639); transition: all 0.4s ease;}.btn:hover .bg-layer{ left: 0;}.content button{ position: relative; z-index: 1; height: 100%; width: 100%; background: none; font-size: 18px; border: none; outline: none; color: #fff; cursor: pointer;}Thats all, now youve successfully created an AdBlock Detector using HTML CSS & JavaScript. If your code does not work or youve faced any error/problem then please download the source code files from the given download link. Click here to download code files.
Original Link: https://dev.to/codingnepal/detect-adblock-using-html-css-javascript-dkh
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To