First, here is my code:
<script type="text/javascript">
$('#Advertisement-1').click(function () {
alert("Ad Clicked!");
});
</script>
<div id="Advertisement-1">
<!-- PBBG Ads Zone Code Begin -->
<center>
<iframe src='http://www.pbbgads.com/ad.php?z=429&bg=000000' width='468' height='67' marginwidth='0' marginheight='0' hspace='0' vspace='0' frameborder='0' scrolling='no'></iframe>
</center>
<!-- PBBG Ads Zone Code End -->
</div>
Now, my issue is when I click the ad, it doesn't send an alert. It just opens the ad in a new window. Any ideas how I can get the click event to work?
click event doesn't works on iframes, because the event does not bubble up through the <iframe> tag's ancestors in the DOM.
Instead you can use the blur event to detect when your parent page is losing focus.
This jQuery plugin is designed to track clicks on iframes : https://github.com/finalclap/iframeTracker-jquery
It's very easy to use, simply select your iframe with a selector, and supply a callback function (will be fired when the iframe is clicked) :
jQuery(document).ready(function($){
$('.iframe_wrap iframe').iframeTracker({
blurCallback: function(){
// Do something when iframe is clicked (like firing an XHR request)
}
});
});
The code to alert is in the parent window and the ad I suppose is inside the iframe so it is not possible unless the parent page and iframe are in same domain.
You can't unless you're detecting the click from http://www.pbbgads.com/
Related
I have the following JavaScript code
<div class="fb-like-box" data-href="snip" data-colorscheme="light"
data-show-faces="false" data-header="false" data-stream="false"
data-show-border="true"></div>
I am trying to detect when the like button is clicked. The above code renders an iframe so my jquery event handler of
$('.fb-like-box > button').on('click', function() { console.log('Clicked'); });
Never fires. I tried wrapping this div and other content in a wrapper div and target that in the $() call but it only fires when the other content is clicked, not the area that is rendered by the Facebook SDK.
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/v2.3
You just need to subscribe to the edge.create event for likes. See docs for example code.
But as commented, you are not allowed to reward users for liking. Read the platform policy for more information: https://developers.facebook.com/policy/
Update: https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/
edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
This code works for me:
<script>
var liked_page = function() {
alert("liked!");
}
FB.Event.subscribe('edge.create', liked_page);
</script>
I have placed it at the end of the page. Furthermore I believe you should also place
<div id="fb-root"></div>
At the beginning of the page, right after the <body> tag.
edge.create and edge.remove JS SDK Events: These Events will no longer be accessible. As an alternative, you can use our Webhooks and be notified every time someone likes one of your Facebook Pages.
https://developers.facebook.com/blog/post/2017/11/07/changes-developer-offerings/
I am developing a system that shows advertisements on mobile devices. Our clients are allowed to use their custom HTML code for their advertisement. We would like to be notified when a user clicks this ad. I can wrap the user's code with some of my code. For example:
<div id="my-code" onclick="myFunction()">
<!-- users code -->
click me!
<button onclick="someCode()" />
</div>
As you can see, the user can use javascript within their advertisements. When the ad is clicked I want to notifiy an external server, but I don't want to change the behavior of the ad. I have tried several approaches and failed to find a working one:
I cannot use ajax since ajax is restricted only to the domain of the
page (advertisements are shown on external pages and cannot connect
to our server). An alternative approach is the use of a tracking pixel, but:
A tracking pixel needs some time to be loaded. If users click an <a>
tag then the pixel tracker added by myFunction() won't be loaded
before switching to the new page. I could prevent propagation of the
event, but:
The advertisement needs to get this click too. I tried to stop propagation of the event in javascript, load the pixel tracker, and then trigger the event again. Doesn't work - <a> tags are not clicked in this way - a click event triggered by javascript exists only on the javascript level.
Any suggestions would be appreciated.
Maybe you could something like this fiddle
<body>
<div id="linkContainer">
<a target="_blank" href="http://www.icrc.org/eng/">Link</a>
</div>
<script type="application/javascript">
$(document).ready(function(){
function beforeLeave(){
alert("Outa here!"); //Replace with function to do ajax-call to server
}
$('#linkContainer > a').on('click', function() {
beforeLeave();
});
});
</script>
</body>
I'd like to change the content of a div inside a fancybox, I have this in my html page:
inline div for fancybox:
<div id="user_should_subscribe" style="display:none;">
<div id="test">hi</div>
</div>
need to show fancybox automatically when page is loaded:
<script type="text/javascript">
<!--
$("#user_should_subscribe").fancybox({
content: $("#user_should_subscribe").html()
}).trigger("click");
// -->
</script>
so far so good. fancybox is shown but if I try to change the content of div#text the content does not change. Inside the fancybox I have a ajax form, when the request is completed I trigger
$("#test").html('new')
but nothing change, but if I try to check the content in this way
$("#test").html('new')
alert($("#test").html('new'))
I get: new so I think the problem is related to fancybox because the div#test content is not rendered correctly, any hint?
Thank you
You are not opening element having ID "user_should_subscribe", but you are creating and opening its clone (using .html() method), so you are now having two identical elements having the same ID. That`s why your code later would change only first one.
So, you need to open your element as "inline". For example (this would open once) -
<script type="text/javascript">
$(document).ready(function() {
$.fancybox.open({
href : "#user_should_subscribe",
type : 'inline'
});
});
</script>
I press button after that appears div in which shows "loading" and loads iframe.
So, showing div I can do via jQuery, but how to load iframe after event?
Here is my working code as i want
Set the src attribute of the iframe the moment you want it to start loading (set it to "" by default):
$('#my-button').click(function() {
$('iframe#myIframe').attr('src', url);
});
You can also handle events for when the iframe finishes loading:
$('iframe#myIframe').load(function() {
// do stuff...
});
So I understood what I needed:
<iframe id="chgMe" src="Source1.htm">Frames are not supported on your browser.</iframe>
<button onclick="document.getElementById('chgMe').src='Source2.htm'">Next</button>
How can I prevent users from pressing my web-page buttons before the page is fully loaded?
i.e.
I have a button that opens a lightbox. The JS for the lightbox is loaded last in the page for quicker response time. So if the user presses the button before the page is fully loaded - he either gets a JS error or the lightbox data is opened on a blank page.
I'm using Javascript with MooTools.
If I understand correctly neither
<body onload="...">
nor
$('#yourButton')...
guarantees that the document has finished loading. The (jQuery) method that does:
$(document).ready(function() {
$('#yourButton').attr("disabled", false);
});
Make your button disabled. After the page is loaded - make it enabled
Here is a JQuery(sorry for not being "clean" Javascript example)
$('#yourButton').attr("disabled", false);
here's an example:
<body onload="document.getElementById('button1').disabled=false">
<button id="button1" disabled="1">
ok
</button>
<body>