I've been working on a simple website for a while now. The basic coding and CSS are complete, so I am now looking to expand by adding certain features to the website. As it is a fully functioning website that serves a purpose, the main source of revenue comes from Google AdSense. I am looking for a way to show an image if Adblock is detected and another one if if it not.
The method I've found for detecting whether AdSense is active is shown below:
JS (saved as advertisement.js)
document.write('<div id="TestAdBlock" style="display:none;">an advertisement</div>');
The HTML bit:
<div id="adblockFrame">
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.write('<strong>ADBlock Plus</strong> NOT detected!');
}
else
{
document.write('<strong>ADBlock Plus</strong> detected!');
}
</script>
</div>
CSS:
#adblockFrame {
visibility: hidden;
}
What I'm asking is that if someone could be kind enough to show me how, instead of displaying text, the JS would show an image in its place. I'm not that good with JS so I'm grateful for any help.
I would create an empty target div :
<div id="adblockDetector"></div>
<script type="text/javascript">
if (document.getElementById("TestAdBlock") != undefined)
{
document.getElementById('adblockDetector').innerHTML="<img src='noadblock.jpg' alt='no adblock' />";
}
else
{
document.getElementById('adblockDetector').innerHTML="<img src='adblock.jpg' alt='Adblock detected!' />";
}
</script>
Assuming you are using jquery, just because you tagged it:
html
<div id="wheretoappend"></div>
js
var whereToAppend = '#wheretoappend';
var myDiv = $('<div/>', {id: 'mydiv'});
($('#adblockFrame').length)
? myDiv.addClass('hasit').appendTo(whereToAppend)
: myDiv.addClass('doesnt').appendTo(whereToAppend);
CSS
.hasit {background: url('hasit.png');}
.doesnt {background: url('doesnt.png');}
Please, don't use the devil document.write!
If you want to add content to your page, use DOM methods or .innerHTML.
If you want to detect AdBlock, just create a global variable in advertisement.js
For example:
advertisement.js:
window.TestAdBlock = true;
Your page:
<div id="adblockFrame">
<img id="TestAdBlock" alt="AdBlock Detected???" />
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
(function() {
var AdBlockImg = document.getElementById('TestAdBlock');
if (window.TestAdBlock)
{
AdBlockImg.src = "/images/AdBlockDetected.jpg";
AdBlockImg.alt = "AdBlock Detected!";
}
else
{
AdBlockImg.src = "/images/AdBlockNOTDetected.jpg";
AdBlockImg.alt = "AdBlock NOT Detected!";
}
AdBlockImg.title = AdBlockImg.alt;
});
</script>
</div>
Firstly, you shouldn't use document.write for anything. It's just bad practice. But here's generally how I'd do it with jquery, since you tagged it:
<div id="adblockFrame>
<script type="text/javascript" src="js/advertisement.js"></script>
<script type="text/javascript">
var adsAllowed = adsAllowed || false;
var src = adsAllowed ? '/images/myAd.png' : '/images/noAd.png';
$('#ad').attr('src',src);
</script>
<img id="ad"/>
</div>
advertisement.js
var adsAllowed = true;
Related
i create a javascript librarys and in this library i set a Css for all span tags in document and i loaded my library in header a document and try call library in body with an script tag
and this (library) BoldFunction just work for elements of before script tag in body and cant work for after this
i try set defer attr in loaded script of library and got ERORR your function not define because library loade after DOM and i get Erorr but i cant solve my problem
html Codes
<head>
<script src="libraryinJS.js"></script>
</head>
<body>
<div class="">test</div>
<div class="">test</div>
<div class="fss">test</div>
<div>test</div>
<div id="bld">test</div>
<span class="bld">span tag Class=bld before</span>
<div >test</div>
<script >
bold.makeboldanimate('.bld');
</script>
<span class="bld">span tag Class=bld after</span>
</body>
JavaScript Codes
(function (window) {
function Testlibrary_instance() {
this.version = '1.0';
this.makeboldanimate = function (cs) {
var elements = document.querySelectorAll(cs);
for (var i = 0; i < elements.length; i++) {
console.log(elements.length);
elements[i].style.fontWeight = "bold";
}
};
this.makespanboldanimate = function () {
this.makeboldanimate('span');
};
}
if (typeof (bold) === 'undefined') {
window.bold= new Testlibrary_instance();
} else {
console.error('LIBRARY ERROR : Name of \"testlibrary\" already defined with type of ' + typeof testlibrary + ' in your library ');
}
}(window));
ّFist result in chrome
The second result in chrome when i add defer attr to script
Finally and briefly
i want my script bold function work in all lines of html document before and after calling library in a script
When you write a tag and then have more HTML after that, it wont work for HTML elements written after that.
Remember to place your after all lines of HTML code to make it work for the whole page
Can anyone let me know how can i make it blink text based on if statement?
Sample:
if value 0 - NO BLINK
If not 0 - Should blink
Thank you in advance
I think you mean $('.blink'), assuming you mean a class and not a tag name.
<script type="text/javascript">
setInterval(function(){
$('.blink').each(function(){
$(this).css('visibility' , $(this).css('visibility') === 'hidden' ? '' : 'hidden')
});
}, 250);
</script>
JSFiddle test
You don't need the inline style, Since you are using jQuery, toggle will help you doing this. you can simply do it in this way.
Here is demo:
setInterval(function(){
$('.blink').toggle();
}, 250);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='blink'>Hello!</div>
<div class="blink">Testing again.</div>
See this fiddle.
http://jsfiddle.net/tcy6a5kz/
//Line 21
if (blinkStatus == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
At this line, you can change the if statement to whatever you want (true-like or false-like value).
You can get the span value like this:
// This will return the inner text of the span
// I expect this text as 0 or more. (number or text)
// No text in the span == 0
$('span.top-title').val();
So you can change my code at line 21:
//Line 21
if ($('span.top-title').val() == 1) {
Blinker.start();
}
else {
Blinker.stop();
}
NOTE: You need jQuery included to your site to run this code. Everything starting with '$' is jQuery object and cannot operate without jQuery library.
In case you do not have jQuery. You can include it in your HTML:
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
This script must be included before the scripts that uses jQuery. (in most cases it's included at the <head> tag of the HTML. I'm not sure, but I think the "blog service providers" ignoring script definitions in the blog posts.
I know this is too old, but it might help someone searching for this.
I figure it out myself and I know that this is not the best solution.
<div class="blink1">
<span><asp:Label runat="server" Text="Label" ID="inprogress"></asp:Label></span>
</div>
<div class="blink2"><span><asp:Label runat="server" Text="Label" ID="behindsched"></asp:Label></span>
</div>
<script>
var in_progress = parseInt(documentElementById("<%=inprogress.ClientID%>").innerHTML);
var behind_sched = parseInt(documentElementById("<%=behindsched.ClientID%>").innerHTML);
var blinkfunc1 = function(){
$('.blink1').toggle();
}
var blinkfunc2 = function(){
$('.blink2').toggle();
}
var blinkspeed = 550;
$(document).ready(function{
if(in_progress > 0){
setInterval(blinkfunc1, blinkspeed);
}
if(behind_sched > 0){
setInterval(blinkfunc2, blinkspeed);
}
});
</script>
Make sure you don't forget this into your head tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
I have one div when I click that div I want to open a child browser.I have the code for child browser but when I click the div it executes the javascript line and I didn't get any url from there.
Please check my code
Div code
<div class="box_padding " onClick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes);return false;" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
when I tried this nothing happening.
So I have tried one more way to solve this issue
function openwindow(){
w=open("myurl",'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
HTML:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320"></script>
</div>
This is also not working.
If you have jquery available you can use this instead of this.href:
$('script').attr('src');
function openwindow(){
w=open($(this).find('script').attr('src'),'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
This seems to work in a preliminary test, native javascript. This would be trivial w/ jquery as a previous poster has shown.
Use the URL as a parameter in the div tag "srcVal".
<div class="box_padding " srcVal="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" onClick="openwindow()" id="column-c-box-1">click me</div>
or this way:
<div class="box_padding "onClick="openwindow();" id="column-c-box-1" >
<script type="text/javascript" src="http://ad.leadboltads.net/show_app_ad.js?section_id=838333320" id="scriptTag"></script>
</div>
Your function slightly modified:
function openwindow(){
var id = document.getElementById("column-c-box-1").getAttribute("srcVal");
//or
// var scr = document.getElementsByTagName('script');
//var id = scr[0].src; // use scr[scr - 1].src if have multiple scripts
var w=open(id,'windowname','width=600,height=250,scrollbars,resizable,toolbar,status');
with(w.document){
write("<body>");
write("This is a new window");
write("</body>");
}
return false;
}
I used "with" because that is in your original code, but I'd caution against it.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with?redirectlocale=en-US&redirectslug=JavaScript%2FReference%2FStatements%2Fwith
I know theres lots of answers on this problem, but I've read through all I can find but still cant get it to work.
I have a div which i need to be hidden if another div is empty, or just containing whitespace.
<div id="rt-main" class="mb12">
<div class="rt-grid-12">
<div class="rt-block component-block main-overlay-light">
<div id="rt-mainbody">
<div class="component-content">
<div class="blog-featured"></div>
( I want to hide div.mb12 when div blog-featured = ' ' )
My closest bet is this:
$(document).ready(function() {
str = $('div.section').text();
if($.trim(str) === "") {
$('div.section').hide();
}
});
But I get all sorts of errors in the console when trying.
Now I've got "TypeError: Cannot call method 'text' of null"
On the actual site (not included in the question), you have this:
jQuery.noConflict();
This makes it so that $ is no longer jquery. Most likely because one of the many other libraries you have included uses the $ name. You can simply change your code to use jQuery in place of $:
jQuery(document).ready(function() { ...
Alternatively, you can assign jQuery to a different variable name:
var $j = jQuery.noConflict();
$j(document).ready(function(){ ...
You want this -
jQuery(document).ready(function () {
var str = jQuery('div.blog-featured').text();
if (jQuery.trim(str) === "") {
jQuery('div.mb12').hide();
}
});
Demo ---> http://jsfiddle.net/PqXWJ/20/
Are you loading the jQuery library before your script? Do you have something like this in the <head> tags of your page?
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function() {
etc etc
</script>
I have a video player that runs client-side, and I want to store a configuration for it so I don't have to write it each single time.
I had an idea where I could place a marker in the markup, such as:
<player id="Player1" #marker></player>
Or something to that effect, and then replace #marker with the settings I have stored in the javascript function.
I know some basic Javascript, but I have never done something so advanced.
Here is an example:
<script type="text/javascript" language="JavaScript">
flowplayer("player", "http://www.easymuaythai.com/Videos/FlowPlayer/flowplayer-3.2.7.swf", #marker);
</script>
Where it says #marker, I want to replace it with:
{
clip: {
Scaling: 'fit',
onStart: function (clip) {
var w = parseInt(clip.metaData.width, 10),
h = parseInt(clip.metaData.height, 10);
$(this.getParent()).css({
width: w,
height: h
});
}
}
}
You can use JQuery,
add this to the Head section of your page :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
then write this in your js file or section
$('#player1').attr('playerConfiguration', 'Value');
that will cause <player id="Player1" playerConfiguration="value"></player>
hope that helps...
Maybe this will help you ? It creates and sets an attribute (marker) to the player node and it gives it a value (config)
<html>
<head>
<script type="text/javascript">
var p = {
onload: function() {
var markerAttribute = document.createAttribute("marker");
document.getElementById("Player1").setAttributeNode(markerAttribute);
markerAttribute.nodeValue = "config";
}
};
</script>
</head>
<body onload="p.onload()">
<div>
<player id="Player1"></player>
</div>
</body>
</html>
You could include Jquery and do the following:
$("#Player1").attr('config', 'write=all&settings;you,need');
Or something like:
$("#Player1").replaceWith('The html code u want');