Develop Reference

How do I open a link to a website on a new window in a browser and block the current website until the user finish or close the new one?

Currently I'm working with Mercado Pago API, but the thing is that I want when the user clicks the pay button, I want to open a new window in the browser (chrome, firefox, etc.) in the middle of the screen where is going to fill his credit card number and all that stuff meanwhile i want that the background site (I mean the main site where the user clicked on pay) to be blocked, like with darker colors, and not be able to do anything in that site until the user close the new window or he finish with the payment. I've been looking on the internet but I haven't found anything related to the blocked site. Maybe you could help me or have any idea to make that. thanks in advance.

I can't make comments, so sorry in advance for this being an "answer". But are you not able to store information about what the user has selected and then use the current page to process the payment, then bring back or send off what they wanted? perhaps using AJAX to run a PHP page that stores something. Just a suggestion but not entirely an answer, because AFAIK you can't "block" tabs as that could be very dangerous and could be used for the wrong reasons.

The task you want to do requires both back-end programming (php/server-side) and a bit of front-end jquery(js) + ajax.
For front-end something like this could be your start.
Bootstrap Static Modal Example.
And you would need to put your form there, submit it via ajax, and on success close the modal.
I hope this could help you a bit, and get you started in the right direction.
Note: This is not particularly safe. (It's not hard to hide the modal and fiddle around the page in the background.

redirect link from facebook to website - javascript?

I have articles posted on facebook from my website http://juniorgoldreport.com/
the website is made in wordpress, and I've also created a "Welome" landing page where I want most new users to be directed too.
I have no idea where I can find information on how to do this, even after countless efforts of googling.
To give an exact idea of what I' trying to create...
Where someone clicks on an article on facebook, it'll take them to the "welcome" sign up page, then have a link on it to the article that they clicked on. The link would change depending on what article they clicked on so they can be redirected properly.
I know I can just hard code it, and create multiple landing pages with different links in relation to the article posted, but this just seems inefficient.
Does anyone know how to go about doing this?
this is the landing page
http://juniorgoldreport.com/welcome/

You can try using Javascript, as it would be much easier than creating several webpages. At the point in your page where you want a link to be placed, put something like
<p id="mynewredirectlink">Hey!</p>
And then at the bottom of your code, add some javascript to resemble this:
<script type="text/javascript">
if (document.referrer === "facebooklink.com")//Where did you come from?
$("#mynewredirectlink").innerHTML = "Hey!" //Where are you going?
Then include the other sites you need, and close it with
</script>
There may be some sites that have varying parts, like an id, so if you need to, you can use (document.referrer.includes("facebook.com")) instead.

You can convert your landing page into a fullscreen modal popup. So every new visitor will see the popup when the visit the site or any article. They can fill the form / they can close it to see the article. There is already several plugin for modal popup / newsletter popup. You just need to do a little bit css to make it full screen.

Embedding PDF with flipping pages

I've seen a lot of questions and answers here that help you too embed PDF documents, but they are all "vertical read", where you scroll down to see other pages.
Is there any plugin, or maybe even a simple script that would help you to embed and read the PDF document horizontaly? Like where you see two pages and click next on top to see the next two.
Just like a book. (No fancy animations though)
Thanks.

There are plugins that lets you read pdf documents. But they might be fancy.
http://www.jqueryrain.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
or
http://fliphtml5.com/free-pdf-to-jquery-flipbook.php
I like the last one especially

You can set the initial view of a PDF to show two pages.
If you add Fullscreen view to that, and the user has not deactivated clicking to the next page, it actually should give the effect you want (not verified).
If the Fullscreen view does not work, your user would use the cursorLeft and cursorRight buttons to navigate.

waitForKeyElements(); - Stop a script firing on a popup in Chrome Extension?

This question is a follow-on to another question which needed asking and warranted a new post, so excuse me if I refer to things which may not be clear without reading the other question.
When using the utility waitForKeyElements() I'm facing an issue in which a div is included inside a small popup contained within the same URL. My extension is currently running on the Twitter site, and my intention is that a div contained on the profile pages (e.g. http://twitter.com/todayshow) gets moved above another div on the page. I'm doing this via waitForKeyElements() because of some loading issues which are resolved by using this utility.
However, on a profile page you can click a link to another users name which pops up a small window (inside the same window/tab, on the same URL) showing some info about them and a few previous tweets. The issue here is that the same div appears on this popup and is then moved to the main page behind the popup window, where it shouldn't be. On a profile page, this can be stopped by plugging in the false parameter to waitForKeyElements(), however on a non-profile page it is still possible to activate this popup which is then moving onto the main page, as the div I wish to move it above on a profile page still exists here, causing clear issues.
I'm wondering if there's a way around this, as bugs in Chrome have stopped me from excluding these pages. So far (just brainstorming) I'm thinking:
on a page where the div doesn't exist to begin with, create an empty one meaning false will handle the issue.
somehow stop the script from firing on a given URL, although due to the way Twitter works this would have to monitor OnClick() and the page URL (I think) which I'm unsure how to do.
stop running when the popup appears, but I have almost no idea where to start with that.
Any help is appreciated. Any necessary code related to this question can be found in the first two links, and the issue I'm facing can be seen by a quick visit to Twitter.
EDIT: When plugging in the false param it works when going directly to profiles via the URL bar, if you're on a profile and use a link to get to a profile, the script isn't inserted and my extension fails. So this would need resolving too, or an alternative method altogether.

I had a brainwave that I could use insertAfter() to insert the <div> I was originally moving in front of, after the <div> I was originally moving. This <div> is not present on the popup, which means that nothing is moved onto the back page when it shouldn't be.
In regards to the previous question, my code is now simply:
waitForKeyElements (
"jQuery selector for div(s) you want to move", // Opposite to what it was.
moveSelectDivs
);
function moveSelectDivs (jNode) {
jNode.insertAfter ("APPROPRIATE JQUERY SELECTOR"); // Again, the opposite.
}
This solves the issue I was having and my extension is now working just fine, however I will leave this question posted in case anybody comes back to it in future.

Loaded AJAX content breaking out of DIV tag

Hi.
I'm new to Java/AJAX etc.
I have a page with links down the left and a DIV on the right.
I want content (other pages) to load in the DIV when users click on the links on the left... beginner AJAX stuff I guess.
I played around with a few JQery plugins and found one that allows pages to load with a fade effect, which is perfect. I have a problem though:
The plugin works fine when I click links on the parent page, but when I click links in one of the loaded pages, after one link deep, it breaks out of the div and replaces my parent page. (This issue was described on the plugin page, supposedly solved, but is still cropping up on my page). I suspect it has something to do with the "bind" variable.
I've uploaded a stripped down example of my site here:
This is the plugin website: www.thecreativeoutfit.com/index.php?view=Simple-AJAX-Content-Changer-with-EZJax (Because I'm a new user I can't add any more links, sorry for the long-hand).
For those who are willing to look at my site or the plugin, I'd appreciate your insight.
If that's a hassle maybe you could recommend a similar simple ajax plugin that allows the loading of content with a fade-in effect, but also allows links within the loaded content to stay contained within the original div.
Many thanks!
Max

I was going to post a comment but it got too long so, what the heck..
Your website worked just fine for me (except for the pages that were not available) in Firefox running on Windows XP.
However, I would strongly recommend against that type of design - it will be a pain for you to maintain in the long run and it is generally considered bad design because it is against the functioning principles of the web: different pages of your website should be represented by distinct URLs which users of your site could use to link to. It also breaks browser back button functionality which is a big usability issue (at least for me).
Plus, it will not be SEO friendly - which means that search engines like Google won't think highly of your website - which means that you won't show up in searches.

You nested pages are breaking because the JavaScript click events are not being reattached to the paging controls after the first page causing the normal href attribute to be used.