I am just a learner and don't have clue about javascript and jquery. What I want to ad an adblock detector script. What I found is this piece of code which gives a nasty alert message. What I want is to give an ajaxed message just not a message popping out of screen.
<script type="text/javascript">
function _enabled() {
alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
}
function _disabled() {
alert('not detected');
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = 'disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
Replacing this code can you please help me with an alternate to this code?
{
alert('Hey Dude!!! You are using Adblock on this site? Please disable Adblock or Any other plugin blocking ads. Its the only way we cover the cost of the Servers and Website. Click OK to continue what you were doing');
}
I came along finding some solutions about getting it with jquery or jquery-ui but don't have the knowledge of what to put here and replacing the code. I tried code example from http://m0006.gamecopyworld.com/games/gcw_notice.shtml which gives a nice friendly Adblock Detect message. But it wasn't working at all. Only this Alert Message is working on my website.
As a very quick alternative, that looks a bit nicer you can use a jQuery-ui dialog (as Ricky Baby said)
You will also need to include the jQuery and jQuery-ui libraries in your page.
These can be downloaded from http://jquery.com/download/ and http://jqueryui.com/download/, if you haven't got them already.
You can change the "Hey dude ...... etc" text to what ever you like
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
</head>
<body style='height: 100%;'>
<script type="text/javascript">
function _enabled()
{
var html = "<div>Adbloc detected</div>";
var diag = $(html).dialog(
{
autoOpen: true,
modal: true,
close: function() { $(this).empty().remove(); },
buttons:
{
"Close": function() { $(this).dialog("close"); }
}
});
}
function _disabled()
{
var html = "<div>Adbloc NOT detected</div>";
var diag = $(html).dialog(
{
autoOpen: true,
modal: true,
close: function() { $(this).empty().remove(); },
buttons:
{
"Close": function() { $(this).dialog("close"); }
}
});
}
var _abdDetectedFnc = '_enabled';
var _abdNotDetectedFnc = '_disabled';
</script>
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
</body>
</html>
Alternatively you could just put a message at the bottom of the screen if you didn't want a pop up at all
<div id='adBlockDetected' style='position: fixed; bottom: 20px; left: 0px; width: 100%; display: none;' >Hey dide .... etc </div>
Then in the _enabled() function
$("#adBlockDetected").css({display: "block" });
See this question:
Problems with Adblock detecting
at the bottom, he sets his message to display in a div ( which he calls #Ad-One ) by setting the html attribute.
If you want to use JQuery-ui there is the dialog option to make the message box more pretty see: http://jqueryui.com/dialog/
However you are also getting your terms mixed up - AJAX - is a "brand" name for requesting data from the remote sever using the XMLHTTP object and related techniques.
If all you need is "pretty" alerts, jQuery UI is a bit of an overkill. I'd go with something like Apprise: http://thrivingkings.com/read/Apprise-v2-The-new-and-improved-attractive-alert-alternative-for-jQuery
Using nothing but the default settings:
<!-- added to head -->
<link href="path_to_css/apprise-v2.min.css" rel="stylesheet" type="text/css" />
<script src="path_to_jquery"></script>
<script src="path_to_scripts/apprise-v2.min.js"></script>
<script>
$(function(){
Apprise('hi there');
});
</script>
gets you a pretty slick alert message:
Of course, I'm also curious as to what you're trying to achieve here:
<script type="text/javascript" src="http://www.adblockdetector.com/script.php"></script>
Unless that PHP page is actually a JavaScript file, you can't do that. The src attribute needs to point to a valid and addressable JavaScript file.
Related
I will be using the same header on two sites, one is already up and running with no issues, the second I can't seem to get my Javascript to work despite it being the exact same code as on the site that does work?
Here is the scripts and the Javascript:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.carouFredSel-6.2.1-packed.js" type="text/javascript"></script>
<script src="js/tinynav.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#carousel').carouFredSel({
pagination : "#sliderpagi",
scroll : {
duration : 1000,
pauseOnHover : true
}
});
$('.mobilemenu').tinyNav();
});
</script>
I have checked all the files are where they should be to rule that out or before it is suggested.
Can anyone shed some light on this? Been fighting with it the best part of the day. I'd love to get it working but also understand why the same code works on a different site?
Also to note - I have the same HTML for the Carousel and tinynav as i do on the working site.
I have a problem with my Jquery mobile code. When I hit button it redirects me to another page but when I check Firebug console there is ajax calling: GET http://www.example.com/cz/cs/7_kontakty.html 200 OK 162ms .
Code:
{literal}
<script type="text/javascript">
// turn off Ajax (no compability with jQuery functions)
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
{/literal}
<div class="menu-top" style="margin: 0 auto; text-align: center;" >
<a class="globe" href="http://www.example.com/{$country}/{$lang}/7_kontakty.html?do=mob_countries" data-role="button" data-inline="true"><img width="37px" src="/css/globe_menu.png" alt="globe" /></a>
<a class="message" href="http://www.example.com/{$country}/{$lang}/7_kontakty.html" data-role="button" data-inline="true"><img width="37px" src="http://www.example.com/css/message.png" alt="message" /></a>
</div>
If you want to turn AJAX navigation off in jQuery mobile, you need to make sure that you set your $.mobile.ajaxEnabled property to false on the prototype before you load in jQuery Mobile.
In other words, what you need to do is something like the following:
...
<script type="text/javascript" src="//[cdn or your local path to jQuery goes here]" />
...
<script type="text/javascript">
$(document).on("mobileinit", function() { $.mobile.ajaxEnabled = false; });
</script>
...
<script type="text/javascript" src="//[cdn or your local path to jQuery Mobile goes here]" />
This works because you are changing the prototype directly (think of it like setting a variable), which does not require the library to be loaded. When initialized, the library will look for the settings on the $.mobile prototype and will use those to determine whether or not to turn AJAX navigation on.
If you would like to change more settings, as I did on my personal site, you can do something like the following:
$(document).on("mobileinit", function() { $.extend( $.mobile, { ajaxEnabled: !1, defaultPageTransition: "none" }) });
Because the performance hit is so minimal to load in one extra JS file, I prefer to put my mobile settings in a separate file, just to keep things neat when browsing the source (personal preference). If you want to see the working example of disabling the AJAX navigation, you can look at the source code for my personal site.
I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").
I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX
What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.
I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.
I have a conflict between JavaScript and Mototools, I know there is something like NoConflict script but I do not fully understand how can I make it work I will leave the code of both dependencies so that It can be explained also I think It can be very useful for people who have encounter the same conflict, If one works the other one won't. you can see it I made it partially work but not totally www.softglobal.com.mx. Thank you
<script type="text/javascript" src="jquery-1.2.2.pack.js" ></script>
<script type='text/javascript' src="
http://static.tumblr.com/5bbaxlr/2tlmqkzma/mototools.js">
</script>
<script type="text/javascript">
//<![CDATA[
var hoveroptions = {
animout: 'JAMenuhover_fade',
animin: 'JAMenuhover_fade',
duration: 400,
transition: Fx.Transitions.linear};
window.addEvent ('domready', function (){
if ($('ja-mainnav')) {
var items = $$('#ja-mainnav li a');
new JAMenuhover (items,hoveroptions );
}
});
//]]>
</script>
This make on mouse over a drag effect which looks fantastic but then I got this which was my previous question
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4/jquery.min.js">
</script>
<script type="text/javascript">
//<![CDATA[
jQuery(function() {
var request = window.location.hash;
if(request == '#page-2') {
jQuery('.page.current').removeClass('current');
jQuery('.page').eq(1).addClass('current');
}
jQuery('div ul li').click(function(){
var speed = 600;
var i = $(this).index();
jQuery('.page.current').animate({opacity: 0, marginTop:80},speed,function(){
jQuery(this).removeClass('current');
jQuery('.page').eq(i).css('marginTop',30).animate({opacity:1,marginTop:
50},speed).addClass('current');
});
});
});
//]]>
</script>
I believe you mean MooTools and jQuery not MoToTools and JavaScript.
You can technically combine these 2 libraries together and make them work. This is however not recommended, since they both do similar things and including them on page side by side brings a lot of overhead, resulting in slow page rendering.
That being said, this is an example how you can use them both:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<p>jQuery sets this paragraph's color to red but MooTools sets the border color.</p>
<script>
//no conflict jquery
jQuery.noConflict();
//jquery stuff
(function($) {
$('p').css('color','#ff0000');
})(jQuery);
//moo stuff
window.addEvent('domready',function() {
$$('p').setStyle('border','1px solid #fc0');
});
</script>
NOTE: the versions of jQuery and MooTools displayed in your question are quite outdated and it's unlikely they will work in newer browsers without many glitches and hiccups, therefore I used the newest versions of both libraries in my answer
Working jsFiddle here: http://jsfiddle.net/9zLQV/
Source for the example code: http://davidwalsh.name/jquery-mootools