Hi I tried to make a div remove after clicking the facebook like button in it but Cant do it
here is my code
<div onclick="this.parentNode.parentNode.removeChild(this.parentNode);">
<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href="www.facebook.com/makestream"&layout=standard&show_faces=true&width=53&action=like&colorscheme=light&height=80' style='width:53px;height:23px;overflow:hidden;border:0;opacity:"0.8";filter:alpha(opacity="0.8");'></iframe>
</div>
is there a way to remove the div or the ifreme after clicking the facebook like button ?
You cannot capture the click event in the iframe area, since it's handled by iframe itself and won't bubble up to the DIV parent. This question on SO may be helpful to you: capture click on div surrounding an iframe
I can imagine one workaround though: take use of Facebook's SDK and register a listener on the action on like button(see this facebook doc). This article "How to execute JavaScript when the Facebook Like button is clicked" gives some examples.
I'm not sure about your JavaScript.
Try this:
<div onclick="this.parentNode.removeChild(this);">
<!-- iframe -->
</div>
UPDATE:
I don't think this is possible.
The click event on the FB Like button will not propagate out of the iframe.
Here's an example: http://jsfiddle.net/kboucher/pdvdH/
Facebook provides a callback function when someone clicks on the like button :
https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
Related
I have a page of styled links that I broke into sections using jQuery.
Using jQuery .internal causes the page to navigate to the specified target specified by the href attribute of the link inside the div the user clicked on.
.external does the same thing as .internal except it opens in a new tab.
.video should simply cause the div clicked to play the video specified by the link in a fancybox but it does not. Nor does it report an error in the console.
Here is my code for the fancybox:
HTML
<div id="fentanylVid" class="col-sm-3 dept video" data-department="fentanyl the real deal">
<div class="box listed-left animated-content move_right animate clearfix">
<div class="box-text">
<h4><a data-fancybox="" href="https://youtu.be/Tt0dFCuwkfQ?rel=0">Fentanyl: The Real Deal (Video)</a></h4>
</div>
</div>
</div>
jQuery
$('.video').click(function(){
$().fancybox({
selector : '.video'
});
});
I also have the two resources in the header of my page
You can either initialize the fancybox like this
$('.video').fancybox({
selector : '.video'
});
or as #Taplar said
$('.video').click(function(){
$.fancybox.open(this)
});
A bit explaining what your code does:
$('.video').click(function(){ // <- Here you are attaching your click event on selected items
// So, when user clicks, this happens:
$().fancybox({ // Here you are telling fancybox to attach click event ..
selector : '.video' // .. on this selector
});
});
So, basically you have done too much work and all you have to do is to remove your own click event and it should work fine. Or you can use API to start fancybox programmatically, like in the other answer.
I was wondering what would the best way to add something that would hide a image when a iFrame was clicked, in this case a embedded YouTube video. I have a image that's on that's slighly over the iFrame and I'd like to hide it when the iFrame is clicked and show it again once it's clicked again after the first time. I'm not really experienced in JQuery but I know php well enough.
My image would be under something like:
<div class="picture">
Something like this? Add a click listener to the iframe and hide the picture.
$( "#myIframe" ).click(function() {
$("#myImage").hide();
});
edit: since your pic only has a class, not id it would be $(".picture").hide();
I can't seem to get the modal window to show any content from another link. I'm quite sure I've used the correct classes to link them together. This is the basic js given from http://www.ericmmartin.com/projects/simplemodal_v101/.
jQuery(function ($) {
// Load dialog on page load
//$('#basic-modal-content').modal();
// Load dialog on click
$(' .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});});
I've put the basic class onto
<li><a href="about me/about me.html" class='basic'>about me</a></li>
and in the external html link (about me) I put a div id of
<div id="basic-modal-content">
<p> Darrien is an industrial & product designer based from Toronto. My creative approach falls along the line of biomimicry and human-centric design.
I've recently graduated from the University of Guelph and am currently pursuing my Masters of Industrial Design at Pratt Institute.
Feel free to contact me to just chat and don't forget to look at some of my work.
</p>
I've included my code in this zip (http://www.4shared.com/zip/LGOb7yugba/Darrien_Website_V2.html)
Any help would be much appreciated! :)
You have the following problem:
User click on your link
Click event is fired
Javascript look after some element with ID equals to basic-modal-content
There is no element with this ID
The browser load the about page
What you have to do:
User click on a link (with href='#')
Click event is fired
Use JQuery .load() function to load the html content of about page into a specific div
Call modal with id equals to basic-modal-content
Javascript will look after basic-modal-content and find it
My Page Tab tells people to Like the page using the Like Button next to the title of the Page (directly above the iframe).
How do I subscribe to that event being clicked?
Javascript within the Page Tab does not work:
FB.Event.subscribe('edge.create',
function(response) {
alert('clicked like button');
}
);
Thanks!
EDIT: For now, I'm going with "you can't do it" as the answer...
edge.create is to be used with the Facebook Like Plugin. It won't fire when the like button next to the page name is clicked.
The page will get reloaded once the button is clicked.
Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.
I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.