I placed a piece of ads code in a div and at the bottom of page, I have javascript code that checks for the offsetHeight size of the div. If "0" is returned, I could safely assume that the ads has been chewed by ad blockers
What I'm trying to do is, I want an image to appear in the spot where the ads was supposed to be showing when the ads was blocked.
Any idea how to do this?
Edit: Forgot to show the codes
<div id="div_bleh">
ads goes here
</div>
<script type="text/javascript">
function check_blehsize()
{
if (document.getElementById("div_bleh").offsetHeight == 0)
// do stuff
}
window.onload = check_blehsize;
</script>
Here's an example which I tested against a very common ad blocker - Firefox's Adblock Plus (using the EasyList filter):
Live Demo (edit)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.innocent-class {
background: url(http://www.google.com/images/logos/ps_logo2.png);
width: 240px;
height: 400px
}
.justForTesting, .advertise_ads {
width: 240px;
height: 400px;
background: #fff
}
</style>
</head>
<body>
<div class="innocent-class"> <!-- just don't call it "advertContainer" :) -->
<div class="advertise_ads justForTesting">
advert here!
</div>
</div>
</body>
</html>
When Adblock Plus finds an element with a class (for example) .advertise_ads, it will hide that element.
If it does, the "please don't block my ads!" background-image (in this case, the Google logo) from the parent element will be visible.
If the advert isn't blocked, the advert will cover the replacement image.
Try changing advertise_ads to something else such as sdpfjsdfjp, and the advert will be visible.
I imagine this technique will also work with most other ad blockers.
You can add a class to that div with javascript(jquery in example below),
for example,
adContainer = $(".ad-container");
if ( $(".ad-container").height() == 0 ) {
adContainer.addClass("no-ads");
}
and the css will be
.no-ads {
background: url(the_picture.jpg) no-repeat 0 0;
width: ?px;
height: ?px;
}
Assuming you know the size of the adverts you will be displayed, which normally you do.
<div class="advert">
<!-- Adverts go here -->
</div>
.advert {
background-image: url(blah);
width: 120px;
height: 250px;
}
.advert > * {
background-color: white;
}
When the advert gets chewed up by an ad blocker wouldn't this content show instead. Just an idea, I've never personally tried to get around an ad blocker.
Related
I wanted to scroll to the bottom of the page using vanilla JS, but I encountered a problem. The code below is supposed to scroll to the bottom of the page:
window.scrollTo(0,document.body.scrollHeight);
Whereas all it does is logs "undefined" in the console. Inputting
document.body.scrollHeight
returns an integer 736. Other than that, it doesn't matter what I input into the function's parameters, nothing happens. What more, it only happens on one website. What may matter (not sure) is that the website hides its vertical scrolling bar, even thought it has a really long list of content.
The problem might be that the actuall scroll that you have on the website is not the scroll of the body but a scroll of another element inside that body.
Here is an example:
$('#btn1').click(function() {
window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
el = $('.a')[0];
el.scrollTop = el.scrollHeight;
});
body {
overflow: hidden;
margin: 0;
padding: 0;
}
div.a {
height: 100vh;
overflow: auto;
}
div.b {
height: 1500px;
position: relative;
}
div.c {
position: absolute;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
<div class="b">
<button id="btn1">Scroll body - doesn't work</button><br />
<button id="btn2">Scroll element - will work</button>
<div class="c">This is at bottom of page</div>
</div>
</div>
Note - the usage of jquery is only to make the example shorter.
Put some content in your page o style the body heigth = 1500px for example, then try to execute same code.
Solved. This is what had to be done:
document.getElementsByTagName('body')[0].style.display = "block";
For whatever reason, changing the display to "block" enabled the scrolling using the given code:
window.scrollTo(0,document.body.scrollHeight);
If you will try to type in browser's console like a var a = 5 you also will get undefined. It happens that your example and my did not return anything.
im trying to make a dialog such that while it is visible, it prevents access to page content. if i click accept the dialog should disappear is never re-presented on subsequent visits. if a disagree it should redirection to another site, and continually represent the dialog on next visits, im having a lot of trouble with this i have the outline done but im having trouble to implement its functions.
this is what i have done
<!DOCTYPE html>
<body>
<div id= Cooky>
<h2>Warning</h2>
<p>site-usage requires the user’s acceptance of cookie usage before progressing.</p>
<button id="button" onclick="toggleDiv('Cooky');">agree</button>
<button id="button" onclick="toggleDiv('Cooky');">diagree</button>
</div>
<div>
this is the rest of the wesbite<br>
this is the rest of the wesbite<br>
this is the rest of the wesbite<br>
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function toggleDiv(divId) {
$("#"+divId).toggle();
}
</script>
the rest of the code is on jsfiddle: https://jsfiddle.net/a02ma3x5/
please have a look
thanks for your help in advance
You can try with overlay, see jsfiddle
<div class="overlay active">
.overlay.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.8;
filter: alpha(opacity=80);
z-index:1;
}
$('.overlay').toggleClass('active');
I have created an html5 banners and validated it here:
https://h5validator.appspot.com/dcm.
It returns the error: "Missing click tag check".
How do I implement a clickTag? I've found this code on google support:
<html>
<head>
<meta name="ad.size" content="width=300,height=250">
<script type="text/javascript">
var clickTag = "http://www.google.com";
</script>
</head>
<body>
<a href="javascript:window.open(window.clickTag)">
<img src="images/dclk.png" border=0>
</a>
</body>
</html>
But isn't the destination URL of the banner set after uploading the ZIP file in DoubleClick?
Do I have to set the destination URL hardcoded in the HTML? Doesn't make any sense to me..
I have made a lot of flash banners in the past and there you only referred to a variable _root.clickTag.
Can anyone help me out?
Thanks
In order to create a doubleclick studio banner you need to import doubleclick studio library and initialize enabler. Then set Exit_url. Save yourself all the trouble create the Banner in Google Web Designer its easy and will upload directly to DC studio
<script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
<style>html, body {width: 100%; height: 100%}
#bg-exit {
background-color: rgba(255,255,255,0);
cursor: pointer;
height: 381px; //banner height
left: 0px;
position: absolute;
top: 19px;
width: 400px; //banner width
z-index: 1;
}</style>
<div id="bg-exit"></div> <!-- put this div inside your main container of banner -->
<script>
window.onload = function() {
if (Enabler.isInitialized()) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
}
function enablerInitHandler() {
}
function bgExitHandler(e) {
Enabler.exit('Background Exit');
}
document.getElementById('bg-exit').addEventListener('click', bgExitHandler, false);
</script>
Using this code you can change the exit_url from DC studio Dynamically
I am a new HTML developer, so can someone please describe briefly how to write a JavaScript function to open an image in (css) pop up with a close button?
Just to get you started I've set up an simple example for you, try it out here: http://www.lunarailways.com/demos/popup.html
<html>
<head>
<style>
#popup {
border: 1px solid gray;
border-radius: 5px 5px 5px 5px;
float: left;
left: 50%;
margin: auto;
position: fixed;
top: 200px;
z-index: 9999;
}
</style>
</head>
<body>
<h1>Your page</h1>
Open Image 1
Open Image 2
Open Image 3
<div id="popup" style="display:none">
<a id="popup-close" href="" class="button">Close</a>
<p>
<img id="image-placeholder" src="">
</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".popup-open").click( function(e) {
$("#popup:visible").hide(); //hide popup if it is open
e.preventDefault(); // don't follow link
$("#image-placeholder").attr("src", $(this).attr("href")); // replace image src with href from the link that was clicked
$("#popup").fadeIn("fast"); //show popup
});
$("#popup-close").click( function(e) {
e.preventDefault();
$("#popup").fadeOut("fast");
});
});
</script>
</body>
</html>
FanyBox, which is uses the jQuery library is the right tool for that.
In a simple way,
- place anchor and image tags in a div container.
- set display attribute of the div to "none".
- create displayMyPopup and closeMyPopup functions in js.
- set anchor's onclick attribute to closeMyPopup.
- in displayMyPopup function, set the div's display attribute to "block"
- in closeMyPopup function, set the div's display attribute to "none"
or you can use jquery's show/hide functions.
I guess jQuery library is a good start. Start with defining your HTML markup and then google image galleries and see what fits your bill.
Something like this:
<ul class="gallery">
<li><img src="path-small-image" alt="thumbnail" /></li>
</ul>
Well, I'm working on a visual form designer and decided to use jQuery UI as both the end form widgetset as well as the widgetset for the designer itself.
My main concern is to make jQuery wigets "read-only". I've had the following idea:
<style type="text/css">
.widget-wrap { position: relative; }
.widget-overlay { position: absolute; left:0; right:0; top:0; bottom:0; /*maybe z-index as well*/ }
</style>
<div class="widget-wrap" id="wdt1">
<button class="jquery-widget">Hello World!</button>
<div class="widget-overlay"><!----></div>
</div>
<script type="text/javascript">
$(function() {
$("button.jquery-widget").button();
});
function widgetLock(){
$("#wdt1 .widget-overlay").show();
}
function widgetRelease(){
$("#wdt1 .widget-overlay").hide();
}
</script>
Hope my example makes sense :)
My questions are;
does this sound good to you?
do you know of a better or another way?
do you see any possible issues with it?
I would say this is a very bad idea in that 1) you may find the overlay in a weird place in certain browser resolutions etc and 2) you can still tab to the item.
Much better to either;
Hide the element
Disable the element
Replace text boxes with labels, buttons with graphics etc.
Disable the click on the button
edit
You can use jQuery to unbind events on elements and then you can re-bind them later on.
If I was to build a form designer I'd make all elements divs with an image of the actual widget as a css background image, that way you can drag the widget representation around the form without activating it or having any of the overlay problems.
If you really wanted to make it look like the finished product you can have the actual widget nested inside the div but invisible when the users mouse is within the div, when the user moves the mouse out of the div then set the widget visible again.
DC
Yes I was aware that the background image would look wrong when stretched. So I thought about it on the way home. A better technique would be to create a widget sandwich
place the widget between 2 divs the bottom div controls the size and position the top prevents the widget from activating
<html>
<head>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"></script>
<style type="text/css">
<!--
.widget {
height: 100%;
width: 100%;
}
.widget_overlay {
border: thin solid #FF0000;
position: absolute;
top: 1px;
left: 1px;
right: 1px;
bottom: 1px;
right: 1px;
visibility:visible
}
.sz_controller {
position:absolute;
width:365px;
height:61px;
left: 142px;
top: 75px;
}
-->
</style>
<script language="JavaScript" type="text/JavaScript">
function ShowHide(button,id){
elem = document.getElementById(id)
if (elem.style.visibility=='hidden') {
elem.style.visibility='visible';
button.value="Hide Overlay";
} else {
elem.style.visibility = 'hidden';
button.value="Show Overlay";
}
}
</script>
</head>
<body>
<input type="button" name="Button" value="Hide Overlay" onClick="ShowHide(this,'widget_overlay')">
<div id="draggable" class="sz_controller" style=""><select class="widget" name="test">
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</select><div id="widget_overlay" class="widget_overlay"></div></div>
<script>
$(function() {
$( "#draggable" ).draggable();
});
</script>
</body>
</html>
The above will work in firefox
Clicking the button hides the overlay div allowing testing of the widget, You can drag the object around the screen, no resizing logic has been implemented.
DC