We Keep Coding

button click event from iframe

So I have this web application that our customers use. It is like xxx.mydomain.com. I have another web application that is like yyy.mydomain.com. So what I want to do is have a hidden div with iframe on xxx.mydomain.com whereby when a user clicks on a button on xxx.mydomain.com this "floating" div with iframe (which src is yyy.mydomain.com) will display over top of the screen of xxx.mydomain.com.
We are doing this versus opening a new window so that the user feels like they are the same experience. It will feel like the second program is part of the first program. So all of this is working fine.
So on the second program (yyy.domain.com displayed in iframe) I have a button that basically tells them to go back to the main program. I want to be able to capture this button click event and hide this "floating" div with iframe so the user then sees the screen of the main program.
How do I go about doing this? Any help would be appreciated.

If your second app is always in the iframe, you can call functions from the parent document using:
parent.myFunction();

You need to bind event over button but as it is iframe,trick is to select content of iframe then find button over it to hide parent of iframe.
code:
$('body iframe').contents().find('.backButton').bind('click',function(e) {
//lets parent of iframe is having parent class
$('.parent').hide();
});

Simplest way to disable links to external website?

First let me explain the problem:
On certain pages throughout the website im building, users can click a thumbnail of a video, and a modal (bootstrap) is displayed with that video inside, which is an embed link from various sites where the videos are hosted. The problem however, is that if the user clicks anywhere except Play/Pause, or inside the video, they are taken to the embeded videos website.
Is there anyway i can block this?
My goal is to have the user watch the embedded video on my site and not have them leave just for clicking the video player.
Im looking for a way (possibly with jQuery), to disable any, all links while the modal is shown. Or if there is another simpler way, id love to know. Thanks!

Since you haven't shared a snippet of your code or structure, we can only give limited suggestions. Try something like this (assuming your bootstrap modal is wrapped in a container with the id #myModal):
$('#myModal a').on('click', function(e) {
e.preventDefault();
/* your own logic to handle the click if you want */
return false;
});
This would prevent the default action on all anchor tags (navigation in this case) and you can add your own custom handler if you want to alert the user that they are about to navigate away from the website (don't return false in that case).
Update: Since it is possible for the embedded players in your scenario to have navigation links of their own, the above snippet will not work. The best you can do is that you detect the navigation and prompt the user confirming if they really want to navigate away from your site.
First set the following event handler to detect whenever the user clicks a link in the video and is about to be navigated away from the page:
window.onbeforeunload = function() {
if (window.isPlayingVideo) {
return "Are you sure you want to stop playing the video and leave the website?";
}
}
Then, whenever the user clicks the video thumbnail to open the modal player and start playing the video, set the following flag:
window.isPlayingVideo = true;
This will prompt the user confirming if they want to leave the page (the exact UI depends on the browser). Note that you still can't disable the navigation from your code. All you can do is to give the user a choice.

Multiple iFrames: block parent page until user finishes his job with the current frame

My requirement is to show 3 third party pages using iFrames. I need to show these 3 third party pages, 1st one on click of image, 2nd one on click of anchor where these two are present in the content page holder body portion and 3rd one on the click of anchor in Header party of the page which is in master.
Right now, i'm using 3 iFrames for each one of them.
My Problem is when still one iFrame is open, I'm able to click on the other iFrames which should not be ideally. I mean if one frame is open, the parent page should not be accessible to the user until he finishes save or close the iFrame. Even i tried jQuery blockUI, but the loading message is appearing on the iFrame which is unpleasant for the user to access the iFrame.
1) I need clarification how to achieve the functionality, only the iFrame which is opened at present is accessible and make the parent page unaccessible until user completes his action on the iFrame opened currently. Blocking the parent page till user finishes his job with opened iFrame.
parent.window.$.blockUI(); //but it is making the iFrame visibility hided by the msg
Please provide me some feasible solution to achieve the above functionality.
2) can i use single iFrame and dynamically change the src attribute using javascript? or maintain separate iFrames individually to avoid dilemma in using frame ID's.
Please advice me, i achieved all the functionality with frame except these two things. If these are achieved then the functionality will be perfect without any hassles for the user to access the UI.

jQuery dialog option modal=true solved my first problem. As of now i kept individual frames for the 2nd one..

Dynamically add Like Buttons to a page

I'm building a page that is aggregating other pages in a Wordpress site, and displaying snippets of information about them along with a 'Like' button. Right now I'm using the iFrame option.
What happens is when a user clicks on a video, it displays it in a Feature area with the video, some text, and a Like button. This HTML is generated from a template and created after a user clicks on a video to watch it. There isn't a page refresh.
If I use the HTML5 version of the Like button, it never gets rendered, which I'm guessing is because the Like div never exists when the Facebook init is called. I'd like to not use the iFrame version though, because it doesn't seem to let me allow people to comment on their like.
Is there a way to have Facebook re-scan for elements to render? I know that Twitter will allow you to do this by running twttr.widgets.load() at any time to have it rescan for things to render.

Just call this function after loading the dynamic site, i am pretty sure it´s what you need:
https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Using the BACK button to revert to the previous state of the page

I am trying a new functionality for my web site. I want to do simple navigation by hiding/showing <div> elements.
For example, when a user clicks a "details" button on some product, I want to hide the main <div> and show the <div> containing the details for the product.
The problem is that to go back to the previous "page", I have to undo all the display/visibility style changes, which is ok if the user clicks the "close" button in the newly opened <div>. But most users will hit the BACK button.
Is there a way to make the BACK button go back to the previous "state" of the page i.e., undo the visibility/display changes?
Thanks.

Yes. What you're looking for is called AJAX browser history.
There are a few open implementations out there, like RSH as well as plugins/modules for frameworks like jQuery and YUI.

to answer the question of your title (that's what I was looking for)
Using the BACK button to revert to the previous state of the page
and from the link from #reach4thelasers's answer, you have to set up a timer and check again and again the current anchor:
//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
setInterval("checkAnchor()", 300);
});
because there's no Javascript callback triggered when the BACK button is pressed and only the anchor is changed ...
--
by the way, the pattern you're talking about is now known as Single Page Interface !

You need to add an anchor to the URL whenever a change is made
www.site.com/page.html#anchor1
This will allow the browser to maintain the pages in its history. I implemented it in my current site after following this tutorial, which works great and gives you a good understanding of what you need to do:
http://yensdesign.com/2008/11/creating-ajax-websites-based-on-anchor-navigation/
Your example in the comments won't work, because it works like this:
Page Loaded
Page Changed, Add Anchor to URL (back button takes you back to back to 1)
Page Changed, Anchor Changed (back button button takes you back to 2)
Page Changed, Anchor Changed (back button button takes you back to 3)
.... and so on and so on..

If there is, it sounds like a pretty evil thing to do from a UX perspective. Why don't you design a "back" button into your application, and use design to make it obvious to the user that they should use your application's back button instead of the browser.
By "use design," I mean make your application look like a self-sufficient user interface inside of the browser, so the user's eye stays within your page, and not up on the browser chrome, when they are looking for controls to interact with your app.

You can do this with anchors, which is how it's done in a lot of flash applications, or other apps that don't go from page to page. Facebook uses this technique pretty liberally. Each time the user clicks on a link that should go in their history, change the anchor on the page.
So say my home page link is:
http://www.mysite.com/#homepage
For the link that works your javascript magic, do this:
My Other Page
This will send the user to http://www.mysite.com/#otherpage where clicking the back button will go back to http://www.mysite.com/#homepage. Then you just have to read the anchors with
window.location.hash
to figure out which page you're supposed to be on.

Take a look to this tutorial based on ItsNat a Java web framework focused on Single Page Interface web sites