Display Janrain/RPX popup only when needed - javascript

My webpage is accessible for users without sign in, but some action requires an authentication.
I would like to show the Janrain popup window only when the user clicked on the Sign in button. My webpages usually generated dynamically with Javascript.
As far as I know, the only way to show the popup is to include an a element to the page with class="rpxnow", add the link to the rpxnow.com/js/lib/rpx.js script, and this script will add an onclick handler to my a element.
But I didn't have any a element when the page was loaded, and I don't like to waste the anonymous user's bandwidth with the unnecessary <script> tags on every page.
So my question is: how to attach the Janrain popup event trigger to a dynamically created HTML element?

What's the language you are using? Just add the script tag when needed:
if ($require_authentication)
{
echo "<script src='http://static.rpxnow.com/js/lib/rpx.js' ...";
}
if ($require_authentication)
{
echo "<a class='rpxnow'>";
}
But you still need a element.

Related

Bootstrap spinner-border disappear

currently I try to make website which should print some line after I click a link.
So far so good, now I want to add a spinner-border from bootstrap. It works pretty well but I have no idea how to remove it again.
<p>New here? Sign up here.</p><br>
<?php
if(isset($_GET['signup'])) {
echo '<div class="spinner-border" role="status"></div>';
for($i=0;$i<3;$i++){
flush();
ob_flush();
sleep(1);
}
echo "<span><h1>Sign up</h1>";
So I think what you're trying to do isn't really something you'd want to use PHP for.
Please correct me if I'm wrong, but it looks like what you want is:
Show a page with a link to a sign up form
When you click the link, show a spinner
Hide the spinner after a second, and show the Sign up page
PHP can't be used to create a dynamic page like this, as it executes all of the code on the server, before sending it to your browser.
Really, if what you want is a link to a sign up page, all you need is a separate file instead, as then you can link to that and when you click it, the new page content would be there.
However, if you want to use the spinner, things will get more complicated as you would need to use some ajax to load the page content.
Alternatively, if all you want is a spinner to show before showing the content, you could let the page reload as normal, showing the spinner. Then hide the spinner using JavaScript.
If you had your spinner-border class, you could do something like
document.getElementsByClassName('spinner-border').style.display = 'none';

Jquery window.location to new page but also open a div originally set to display none

I have a form when on submit it will run two on-click events the first to redirect the window location to the new page and then the second to open the hidden div as below.
The issue is that it will load the new div in the source code and change it's status to display block but when it refreshes for the window location the function showDiv() is then hidden again. I'm sure there is a way to merge them both into one but I'm struggling.
function SetUpRedirect(destination)
{
setTimeout("window.location=\'/?page=4\'",1000);
return true;
}
function showDiv() {
document.getElementById('thanks').style.display = "block";
}
If I understand you right, the problem here is that you refresh the page. Once you refresh the browser loads a new DOM and forgets all about the old one and all the modifications you made to it. Changes you do to the DOM with JavaScript are not persistent over page loads.
So, how can you get around this? I can think of three options:
Alt 1. Use some kind of server side scripting, i.e. PHP, and pass the state of the div in the URL:
window.location = "/?page=4&display=block";
Then in the PHP (or whatever language you use), you need to read the value of display and handle it appropriately.
Alt 2. Set a cookie with JavaScript to signal that the div should be displayed, and when the page loads check if the cookie is present and adjust the display property of the div appropriately. You can read more about cookies in JavaScript here.
Alt 3. Design your page in such a way that a page load is not needed (for instance submitting the form with AJAX). This could require a major redesign, though.
This might help you with your problem. Since window.location will just reload the page and reset all the styles to the original form: How can I make a redirect page using jquery

Pass onclick from another page

I have a page showing a list of events with anchors which trigger popups onclick. How can I trigger these modal popups when an anchor is clicked on another page?
How can I pass the values on, I suppose, and trigger the click?
For example, anchor on event page I'd like to trigger a popup for from another page:
<a class="event " href="#" data-onclick="popup" data-color="#000" data-event-id="3">
<div class="event-inner" data-event-id="3"></div>
</a>
Your webpage and Javascript won't have any knowledge of the anchor tags if they aren't on the current page (or even in another tab, for that matter). If you really need that information available on the second page, you can try passing it through the query string like this.
Otherwise, you can save JSON data for your events on the server and retrieve them for every page that needs them. If you're not familiar with JSON and AJAX, you can find a tutorial here. If you're using jquery, it has a great API for AJAX calls.

JavaScript close button works on one page, but not on another page

Does anyone know why a JavaScript button would work on one page but not on another page?
Within Magento I turned error messages to display as pop-ups, and used Java for the close button. It works on one page, but on another it doesn't. In Safari the Errormessage that won't close displays repeatedly, twice and one of them will close.
Code I'm using within Messages.php:
$html .= '<a class="msgclose" href="#" onclick="document.getElementById(\'messages\').style.visibility=\'hidden\'">x</a>';
It works on an individual product page (when adding a product to the bag) but won't work on the sign in page when entering an incorrect password.
Working close button: http://www.moramoraswimwear.com/magento/index.php/test-5
Failing Button: https://web72.secure-secure.co.uk/moramoraswimwear.com/magento/index.php/customer/account/login/
Any help would be really appreciated!
It's not working because you have two elements with the ID #messages on the same page, most likely due to the account create and account login blocks containing the error messages HTML. You cannot have two elements with the same ID on the same page.
You need to remove the error messages block from the account create/login blocks, and move it into their parent block so it only appears once on the page.
What's happened when you click the close button is that it's selecting the first #messages it finds and setting the visibility on it. The second one is completely ignored (because again, it assumes there is only ever one on the page).

Hide button after page is saved as html

At the bottom of html page, there's a button with onClick function.
As the page has only internal css, when users save the page (Right click > Save As) as html file, the page is saved without additional folders (just html) but the button is visible at the bottom.
How to hide the button when people save html page. After saving, when they open it on their computer, the button should be hidden because it doesn't work without scripts so it has no purpose to stay there.
JavaScript has no event for this type of action. You cannot determine when a user saves a page. It is part of the browser itself, not part of the page.
Ok, based on the comment string in Diodeus's answer, you could use Javascript to generate the button. Provided the script file is linked and not hosted, it won't be accessible when the user saves the page, and therefore the button would never be generated. Something like this:
Header
<script type="text/javascript" src="/js/script.js"></script>
Where script.js is the Javascript to generate your button. that script should include something like:
window.onload = button;
function button() {
//generate button here
}
Since script.js doesn't exist on the user's local machine, it will never run and the button will not exist. It does however exist on your hosted server and so any user visiting your site will see the button.
Make the button hidden by default (using CSS: display:none;), and then unhide it with Javascript when the page loads. You can do this by adding (or removing) a CSS class, or by updating the button's style attribute directly.
Evaluate the current url with document.URL and if it is equal to C:\ or http://localhost than do $('button').remove();

Categories

Resources