CSS & JS disable ads code in website on smartphone or tablet

Example – CSS & JS disable ads code (as pop-unders, pop-ups ads) in website on smartphone or tablet.


<style>#popadfs{max-height:1px;}@media(max-width:727px){#popadfs{display:none!important;}}</style>
<div id="popadfs">
<script type="text/javascript">
var adfly_id = ######;
var popunder_frequency_delay = 0;
</script><script src="https://cdn.adf.ly/js/display.js"></script>
</div>
<script>if((window.getComputedStyle(document.getElementById("popadfs")).getPropertyValue("display"))=="none"){document.getElementById("popadfs").innerHTML="";}</script>

JS for IE8 support of HTML5 elements and media queries

The HTML code inside the head element


<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/{newest_version}/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/{newest_version}/respond.min.js"></script>
<![endif]-->

Get the newest_version

– http://cdnjs.com/libraries/html5shiv
– http://cdnjs.com/libraries/respond.js


<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

Or:

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

JS stick div at top on window scroll event

# Stick div on scroll with JavaScript
– No JQuery!
– Without JQuery!

The original

I look to find a solution using JavaScript (without JQuery) stick div on window scroll event.
This code was written based on a template by John Resig. It works in all of the modern browsers: Windows IE 5+, Mozilla, Opera, and Safari. Though it has a problem with Internet Explorer. The original can be found at:
– http://ejohn.org/projects/flexible-javascript-events/
– http://stackoverflow.com/questions/12522807/scroll-event-listener-javascript
– http://www.webmonkey.com/2010/02/javascript_event_-_scroll/

The JavaScript, CSS and HTML code

<!DOCTYPE html>
<html>
<head>
<title>
Flexible JS events – Stick div on scroll
</title>
<script>
function getScrollY() {
var scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
} else if( document.body && document.body.scrollTop ) {
//DOM compliant
scrOfY = document.body.scrollTop;
}
return scrOfY;
}
/*
addEvent function by John Resig:
http://ejohn.org/projects/flexible-javascript-events/
http://stackoverflow.com/questions/12522807/scroll-event-listener-javascript
http://www.webmonkey.com/2010/02/javascript_event_-_scroll/
*/
function addEvent( obj, type, fn ) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function() { obj['e'+type+fn]( window.event ); }
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}

addEvent(window, 'scroll', function() {
var d = document.getElementById("sidebar");
if (getScrollY() >= 180) {
d.style.position = "fixed";
d.style.top= "-180px";
} else {
d.style.position = "absolute";
d.style.top= "0";
}
});
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
margin: 0 auto;
width: 100%;
}
#sidebar {
clear: both;
top: 0;
left: 0;
position: absolute;
background-color: white;
width: 30%;
text-align: center;
}
#masthead {
background-color: darksalmon;
height: 180px;
}
#sticky {
clear: both;
background-color: cornflowerblue;
height: 270px;
}
#third {
clear: both;
background-color: powderblue;
height: 630px;
}
#content {
float: right;
background-color: aliceblue;
width: 69%;
min-height: 1800px;
}
.post {
padding: 18px;
line-height: 36px;
}
h1, h2 {
padding-top: 18px;
}
</style>
</head>

<body>
<div id="page">
<div id="sidebar">
<div id="masthead">
<h1>Page title</h1>
<p>Page description</p>
</div>
<div id="sticky">
<h2><strong>Div this will stay at top of page</strong></h2>
</div>
<div id="third">
<h2>Page widget</h2>
<p>Widget content here</p>
</div>
</div>
<div id="content">
<div class="post">
<h2>Stick div at top after scrolling demo</h2>
<p>Post content here</p>
</div>
</div>
</div>
</body>
</html>

Demo

Stick div at top after scrolling:
http://www.sharingdailynotes.com/demo/flexible-js-events_stick-div-on-scroll.php

More

JavaScript sticky div after scroll:
http://stackoverflow.com/questions/17893771/javascript-sticky-div-after-scroll