This question already has answers here:
How to detect Adblock on my website?
(46 answers)
Closed 3 years ago.
With some simple javascript, how can I detect if the client user is using an Adblocker?
Adblockers detect scripts called ads.js or scripts with similar names and then block them so that they don't run. They also detect id's and classes that have suspicious names and simply remove them from the DOM. So here is one simple trick (explanation below) that can help you detect if your user is using an adblocker or not:
<div id="randomDiv">
<div class="adBanner">
</div>
</div>
This HTML simply places a random div on your page with only one child, an empty div that has a class of adBanner. Now an adblocker would think of the child div as an advertisement, and it would remove it.
Using CSS, we can give the .adBanner class a fixed height and a fixed width, so that it renders something on the screen.
.adBanner {
height: 2px;
width: 2px;
visibility: hidden;
}
This CSS simply gives our fake "adBanner" element a fixed width and height that we can check for later, and hides it from the user.
Now using jQuery, we can check for the height or the width of the element. We do this because if the adblocker were to remove this element from the DOM, then the height would not exist.
if ($("#randomDiv").height() > 1) {
console.log("No Adblocker!!");
}
else {
console.log("An adblocker was detected!!");
}
I'm sure there are other ways to do this, but this is just one of the ways.
Hope this helps!!!
Related
Current Design
In a website I am designing I have a number of elements that initially will appear hidden, until the user needs to see them. For example they have scrolled to a desired height on the page.
Currently this works by JavaScript adding a class line.classList.add('show-header-line');
Which in CSS will be defined next to the main styling for the element. This show variant of the class will only contain attributes required to make the element visible opacity: 1. The main styling for the element will contain the opposite attributes required to hide the element initially opacity: 0.
The Alternative
Of course this could work the other way around. With a class designed to hide the element initially being set in the html, then to be removed when required by JavaScript.
HTML
<div class="header-line hide-header-line" />
JS
line.classList.remove('hide-header-line');
Note
Of course I could add and remove styles directly (without the need for extra classes) in the JavaScript, but this seems much worse. Regarding a lack of separation of concerns.
Question
My current approach means the resulting rendered DOM is littered with elements that have main style class and a show class. The alternative means my html file is littered with elements with a main style class and a hide class. Which is considered better practice? Is there another cleaner way I could be doing this?
I would strongly suggest against using opacity:0 for this, rather use display: none. The reason being that an element with opacity: 0 still occupies space in the markup, whereas display: none will add the element to the DOM, but it won't be rendered in the markup (if that makes sense).
Here is a more detailed explanation
Also, an example using the scroll pass certain point you said, this is how I would do it, note code is untested.
window.addEventListener('scroll', function(){
document.querySelector('#navigation').classList[this.scrollTop > 200 ? 'add' : 'remove']('fixed-nav');
});
css
.fixed-nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
This question already has answers here:
Find all CSS rules that apply to an element
(10 answers)
Closed 5 years ago.
I want to get the element computed style and the css (file and line) that applies that rule. Similar to what Chrome Dev Tools does when the "Computed" tab is used and you click on that arrow beside the value.
In short, I want to be able to, using javascript, find out these two things:
What is the CSS value that is actually being applied to that element (computed style)
Once I found the computed style, I want to know where it comes from (like file name and line number)
I know this can be done manually using devtools, but I need this done by a script.
Thanks
You can use Window.getComputedStyle(). An example of usage:
<style>
#elem-container{
position: absolute;
left: 100px;
top: 200px;
height: 100px;
}
</style>
<div id="elem-container">dummy</div>
<div id="output"></div>
<script>
function getTheStyle(){
var elem = document.getElementById("elem-container");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("height");
document.getElementById("output").innerHTML = theCSSprop;
}
getTheStyle();
</script>
See MDN Documentation to learn more how to use this feature and it's compatibility with different browsers.
Unfortunately, this approach will not give you the location of where this value comes from.
I work for an adtech. We show ads using iframe but for one particular website where we are showing ads my iframe height is being overriden.
The style that overrides my css style is as follows:-
#story-sec .led-content .cont-bot .right-side .news-detail-landing iframe:not(.instagram-media) {
width: 100% !important;
height: 200px!important;
margin: 5px 0px;
}
I create iframe dynamically using javascript. The site is overriding my css.
var iframe = createHtmlElement("iframe");
setAttributesForElement(iframe, { 'vspace':'0', 'hspace':'0', 'scrolling':'no', 'id':'myIframeId', 'frameborder':'0', 'marginwidth': '0', 'marginheight': '0', 'allowtransparency':'true', } );
setStyle(iframe, {'margin':'0px', 'width':'100%', 'height':'100%', 'padding':'0px'} );
So in above code setAttributes and setStyle are function that I have which take input and set style adn attributes for html elements.
Is there a way to avoid my css being overridden ? I tried searching for answers but got not much clarity.
I can set class named instagram-media for my iframe which solves the issue but the ads are placed on different sites so I might encounter same problem again. so looking for a permanent solution.
I had experience of work like that, so in those cases I would usually do this:
- Target the iframe you created with > css pointer.
- Is there any possibility to set !important flags on your styles?
- Try to create a very long distinctive class name for your iframe.
You mentioned adding a class resolves the issue but that you're worried about, another website using that same class and again over writing your css.
Your best bet may be to simply use some really obscure class?
Like...
class="YourCompany_iframeCSS_InsertADateHere_AnAlphaNumericStringHere"
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
This question already has answers here:
How do I find which JavaScript is changing an element's style?
(5 answers)
Closed 10 years ago.
I'm new on a project which has a boatload of javascript classes (16-20 files) and many dynamic features. There an element which has its height and maximum height set inline from a javascript file. Is there a way to which file this is set from?
<div class="ccass" style="width: 100%; height: 67px; max-height: 67px;">
resizes to
<div class="ccass" style="width: 100%; height: 307px; max-height: 307px;">
when the window is resized. I need to disable the resizing and set a fixed height - for some of the pages at least.
Is there some developer tool that would assist with this?
If you have firefox you can check the "Break on Attribute Change" option in the HTML tab. Just right click the target element and the menu will pop up. After that, resize the window and it will break in the script line where the attribute is changed.
grep the js sources for resize or onresize event/method and go from there.