How to bind an event in a Facebook Like Button - javascript

first of all, sorry for my bad english.
I would like to create a "like-close" button for my site. Now I'll explain what I mean.
I've created 2 div, 1 for an overlay background in all the browser window and one for a window where I ask users to "Like" my facebook page.
I have also created a close button for hide the 2 divs and in this button I have hidden another Facebook Like Button and, when a user try to close the popup, he will put a "Like". In this button I wrote "close and like" so, for who thinks It's a clickjacking, the users know what they are doing.
I've been able to close the window in the same moment when the user click on the button on the first time (so, before he didn't like my page) with the method
FB.Event.subscribe('edge.create', function(response) {
jQuery('#overlay').hide(); //hide the overlay
jQuery('#popoup').hide(); //hide the popup window
});
Now when he visit my page again, the popup will appear again and I don't know how to close it without "dislike" the page.
I tried to bind an event "click" in the iframe of like button but it didn't work.
I tried to bind an event in the wrapper of the iframe but it didn't work...
So I have no more ideas and I know it's possibile because I saw this trick in another web site.
Thank you all for help

Sorry, in the button where I hide the Facebook like I wrote "like and close". It's the only button in the Window for show the main page content just to fans.

Related

jQuery .unload() function issue, activating only when a specific link is clicked

I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});

DHTML modal window, close on background click

I am using the dhtml window widget script found here:
http://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm
I would like for the user to be able to close the dhtml popup window when clicking the background. Currently it only works when clicking the close button. How do I add that to this script?
This is NOT for "dhtmlmodal" as the subject says. This is for "dhtmlwindow". There IS a difference as "dhtmlmodal" does not even seem to have a .close() event, only a .hide()
That widget is quite old now (over 6 years) and there are no doubt numerous newer, better alternatives, but that's besides the point.
The documentation on the page you linked to details how to create the popup, and then how to access functions that act on the pop up. Copied below for reference:
Create links that manipulate an opened window in various ways when clicked on
<script type="text/javascript">
// this function invocation generates the popup with your specific parameters
// the variable name you assign (googlewin) is used to interact with the popup later
var googlewin=dhtmlwindow.open("googlebox", "iframe", "http://google.com", "Google Web site", "width=700px,height=450px,resize=1,scrolling=1,center=1", "recal")
</script>
<!-- this is an example link that will call the close method on the googlewin object
this is the bit you need to apply to whatever it is that you want the visitor to be able to click on to close the popup -->
Close Window
Bear in mind that the widget you are using creates a popup window, not a true modal. If you were to use a modal (lightbox) you would have built in close functionality whenever the visitor clicked anywhere outside of the main modal content area.

Javascript opening a link

I am trying to open a link in a new tab/window when a user presses a key.
Here is the function I made for opening a link, it gets called when the user presses the "X" key.
function open_link() {
window.open($("#active").attr("link"), '_blank');
}
My page consists of a bunch of divs looking like this, and the user sets the active one by navigating up/down with the keys j/k. All this works, but the problem is that there is a popup blocked warning when the "X" key is pressed to open the link.
<div class="read entry" id="active" entryNumber="0" entryId="733" link="http://www.reddit.com/r/buildapc/comments/1aux43/build_help_ordering_soon_final_review/">
I don't think you can disable popup blocker from javascript. If you could, then popup blockers would be quite useless.
Have you considered using modal divs instead? E.g. modal dialog from jQueryUI.
That is a problem that you can't avoid, popup blocking is a built in function that all the recent browsers have and getting around a pop-up blocker isn't going to get the user happy.
You can use a jquery/javascript alternative like on-request iframes or modal dialog windows

Clicking OK in a prompt

I know how to create alerts and confirm boxes, but what I cannot find out how to do is to do the actual clicking of OK. I have a page that pops up a confirm box. I want to click OK using a Java Script add-on. Basically, I want my code to click a link on the page, then click ok when prompted. Is that possible?
That's not possible with a browser pop-up.
However if it's a modal dialog that sits within the DOM of the page, then you can trigger a JavaScript event to close it. An example of such a dialog is jQuery's dialog.

I need to keep the modal from being closed by the user

Any Ideas?
I tried inserting ....({ .....,...., close:false,....}) and nothing.
Thanks in advance.
PS: I will close the modal window when satisfied with $.modal.close();
If you call a modal window as you have indicated {close:false}, the following will happen:
The closeHTML will not be displayed
The user cannot click the overlay to close the dialog
The user cannot press ESC to close the dialog
If you have a button/link in your code with the simplemodal-close class, the user will still be able to press that to close the dialog.
So, based on the information you have provided, if you are using {close:false}, the only other way possible for a user to close the dialog is if you have provided a way for them to. As such, you need to hide, disable, or remove the simplemodal-close class until you are ready for them to close the dialog.

Categories

Resources