Remove scrollbars from Facebook page tab app? - javascript

There are hundreds of posts about this on the internet, many of which are here on StackOverflow, but unfortunately none of the solutions mentioned seem to work for me. I have spent the better part of 6 hours tinkering with no success.
Here's what I have:
I have created a Facebook app and added it as a Page Tab.
I have added the app to a Facebook page here: https://www.facebook.com/pages/PARKROYAL-Darling-Harbour-Sydney/236917443012539?sk=app_195092900626979
But I cannot for the life of me set the height of the iFrame so that I can safely remove the scrollbars!
Here is the structure of my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>PARKROYAL Magic Moments</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<MAIN CODE HERE>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId : '<APP-ID>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize( { height: 1642 } );
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize( { height: 1642 } );
}
</script>
</body>
</html>
In my CSS I have also set body { overflow:hidden }

Have you tried FB.Canvas.setAutoGrow. You can use it like this:-
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '235024806624460',
});
FB.Canvas.setAutoGrow();
}
</script>

Related

The value of 'callback' is not a function on trying to signing in with google account

With following code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="JS/JQuery3.6min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if(r9 == null){var r9 = {}; }
r9.log= function(log1="Not Set", log2="Not set"){
console.log(log1);
if(log2 != "Not set"){console.log(log2) };
} // EOF f:r9log
window.fbAsyncInit = function() {
FB.init({ appId : '123456789', autoLogAppEvents : true,
xfbml : true, version : 'v10.0' });
};
function FB_onSignIn() {
console.log('F: FB_onSignIn by cl'); // Called when a person is finished with the Login Button.
r9.log('F: FB_onSignIn by r9log');
} // EOF: F:FBcheckLoginState
function GO_onSignIn(response) {
console.log('F: GO_onSignIn');
r9.log('F: FB_onSignIn by r9log');
}
});
</script>
</head>
<body>!-- Load the JS SDK asynchronously -->
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
<div class='r9-tdiv'> == GOOGLE == <br>
<div id="g_id_onload"
data-client_id="MyID.apps.googleusercontent.com"
data-callback="GO_onSignIn" data-auto_prompt=false>
</div>
<div class="g_id_signin" data-type="standard" data-shape="rectangular"
data-theme="outline" data-text="signin_with" data-size="large"
data-logo_alignment="left"> </div>
</div>
<div> ========== FACE BOOK ============ </div>
<fb:login-button scope="public_profile,email" onlogin="FB_onSignIn();">
</fb:login-button>
</body>
</html>
I am getting
Where "The value of 'callback' is not a function. Configuration ignored." happens on page load
and "Uncaught ReferenceError: FB_onSignIn is not defined" when signing in with facebook.
Nothing happens when signing in with google :(
Any idea what I am doing wrong here?
Thanks

How to migrate javascript from a multi-file example, in to a simple, single page?

I know this sounds like a ridiculously simple question, but there is a lot more to it than just a basic function call. I'm implementing authentication on a webapp using the Auth0 python example, they have a full example available here.
I completely understand the python Auth0 stuff, and can get all the details I require from the session, but I simply can NOT work out how to move this sample code in to my app using a simple "login" and "logout" button! The HTML from the sample app looks like this:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
The Javascript that is running is contained in a seperate file that is read in on document load:
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
$('.btn-login').click(function(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
});
$('.btn-logout').click(function(e) {
e.preventDefault();
window.location.href = '/logout';
})
});
I don't want to use the standard HTML provided with the sample, all I want is a simple "login" button to, well log in the user, but for the life of me I simple don't understand how to make that happen. I want this to be as simple as possible, with all the javascript embedded in the page. I've tried the following, but it fails as the variable "e" is undefined, and I don't understand where it came from in the original example!
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<p><button onclick="loginfunc()">Click me</button></p>
<script>
$(document).ready(function() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
},
</script>
<script>
function loginfunc(e) {
e.preventDefault();
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome from BootstrapCDN -->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
<script src="/public/app.js"> </script>
<link href="/public/app.css" rel="stylesheet">
</head>
<body class="home">
<div class="container">
<div class="login-page clearfix">
<div class="login-box auth0-box before">
<img src="https://i.cloudup.com/StzWWrY34s.png" />
<h3>Auth0 Example</h3>
<p>Zero friction identity infrastructure, built for developers</p>
<a class="btn btn-primary btn-lg btn-login btn-block">SignIn</a>
</div>
</div>
</div>
</body>
</html>
I'm guessing lines 6 and 7 of the original HTML is where all the "magic" is happening, I just don't know how to "read" what's going on there.
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
I understand this is a horrible, horrible question, but I've been looking at this for hours now and I'm just ready to give up, I can't look at it any more. For the life of me I don't understand why Auth0 didn't just make a super simple, all-on-on-page example that anyone can understand, not all this fancy bootstrap/css/html mess!
If anyone can help, I will be eternally grateful!
Thank you.
I did it!!!
So it turns out I was waaaaay off, it had nothing to do with the script lines I was focusing on. Here is the working code:
<html>
<head>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="https://cdn.auth0.com/js/auth0/8.6.0/auth0.min.js"></script>
<script>
function loginfunc() {
var auth = new auth0.WebAuth({
domain: AUTH0_DOMAIN,
clientID: AUTH0_CLIENT_ID
});
auth.authorize({
audience: 'https://'+AUTH0_DOMAIN+'/userinfo', // you can also set this on the .env file and put API_AUDIENCE instead
scope: 'openid profile',
responseType: 'code',
redirectUri: AUTH0_CALLBACK_URL
});
}
</script>
<script>
var AUTH0_CLIENT_ID = '{{env.AUTH0_CLIENT_ID}}';
var AUTH0_DOMAIN = '{{env.AUTH0_DOMAIN}}';
var AUTH0_CALLBACK_URL = '{{env.AUTH0_CALLBACK_URL if env.AUTH0_CALLBACK_URL else "http://localhost:3000/callback" }}';
var API_AUDIENCE = '{{env.API_IDENTIFIER}}';
</script>
</head>
<body >
<p><button onclick="loginfunc()">Click me</button></p>
</body>
</html>
Basically I just pulled the app.js code in to the main html file, then used a standard "onclick" button action to call the auth function. This is so much easier to read than the auth0 example.
I hope this makes the example clearer for someone else in the future. I find it really frustrating the developers confuse the core code example with completely unnecessary css and artys html formatting.

Radio button on click not working but works fine in fiddler

I am trying to fire an event whenever a user clicks / declicks a radio button
Searching on stack overflow and trying out my own example on jsfiddle works.
However the same thing in a MOzilla Browser version 31 or Google chrome it fails - not sure why
I am using JQuery 2.1.1
<!DOCTYPE HTML>
<html lang = "en">
<head>
<title>formDemo.html</title>
<meta charset = "UTF-8" />
<script src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
</head>
<body>
<input id='r1' type='radio' class='rg' name="asdf"/>
<input id='r2' type='radio' class='rg' name="asdf"/>
<input id='r3' type='radio' class='rg' name="asdf"/>
<input id='r4' type='radio' class='rg' name="asdf"/>
</body>
<script>
alert("1");
$(".rg").change(function () {
alert("yahoo");
});
alert("2");
$("#r1").change(function () {
alert("yahoo");
});
</script>
</html>
May be your jquery-2.1.1.min.js path is wrong, check you path and include it. If you don't know the path or you have not downloaded the library then you can include like this :
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
Also put your jQuery code inside ready function like this :
$(document).ready(function(){
$(".rg").change(function () {
alert("yahoo");
});
$("#r1").change(function () {
alert("yahoo");
});
});
You are not making function in a proper way. Make it this way.
$(function(){
$(".rg").change(function () {
alert("yahoo");
});
})
$(function(){
$("#r1").change(function () {
alert("yahoo");
});
})
Do you got any error in your console ?
If there is any error in your browser console post here
Try to put your code in $(document).ready();
Change the script src and link href to following it will work fine:-
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"</script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

embedding large js files into one page

i want to use tinymce editor but my final html file must not contain any links to any sources or css files.
i mean there must not be any references to external resources, it should be embedded in one html
(all js files and css files)
performance is not important and the target browser is ie11 only.
i do not want any
<script src=".."> or
<link rel="stylesheet" type="css" href="..">
i want that
<script>
function tinymce..
</script>
same as style info also should be in this html without any reference to outside.
due to the limits of native browsers on java applictions (djbrowser), i can deploy one one file, i do not go
deeply into technical details of ie11 with dj.
is that possible? or any method? because when i copy paste tiny_mce.js directly into the html it fails. The reason may be dynamically created scripts which are made by document.write.
my test cases:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- DO NOT CHANGE TITE -->
<title>Editor</title>
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/ui.css">
<link rel="stylesheet" type="text/css" href="tiny_mce/themes/advanced/skins/default/content.css">
<style>
.mce-widget.mce-tooltip { display : none !important; }
</style>
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/table/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/contextmenu/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/plugins/paste/editor_plugin.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/editor_template.js"></script>
<script type="text/javascript" src="tiny_mce/langs/en.js"></script>
<script type="text/javascript" src="tiny_mce/themes/advanced/langs/en.js"></script>
<script type="text/javascript">
function init() {
// Check that tinymce exists
if (typeof tinyMCE === 'undefined') {
alert("tinymce.js is missing");
return;
}
tinyMCE.init({
mode : "textareas",
theme : "advanced",
plugins : "lists,style,linespace",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,fontselect,fontsizeselect,listbox",
theme_advanced_buttons2 : "cut,copy,paste,|,outdent,indent,|,forecolor,backcolor",
theme_advanced_toolbar_align : "left",
theme_advanced_toolbar_location : "top",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : "true"
});
}
// Sets content
function JH_setData(html) {
try {
var oEditor = tinyMCE.activeEditor;
oEditor.setContent(html);
//Check whether decoding needed
//oEditor.setContent(decodeURIComponent(html));
} catch(e) {
//alert('exception occured' + e.description + ' ' + e.message);
return 'FAIL';
}
return 'OK';
}
// Gets the content
function JH_getData() {
var oEditor = tinyMCE.activeEditor;
var val = oEditor.getContent();
return val;
}
function setContent() {
JH_setData('test content');
}
function getContent() {
var content = JH_getData();
alert('content:' + content);
}
</script>
</head>
<body onLoad="init();">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%;height:100%"></textarea>
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:600px;width:80px;height:23px" value="SetContent" onClick="javascript:setContent();">
<input type=button class="button_fu_class" style="position:absolute;top:30px;left:700px;width:80px;height:23px" value="GetContent" onClick="javascript:getContent();">
</body>
</html>
works, but if i copy pase the tiny_mce.sc into a script block whole page fails.
if i replace
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
with
<script type="text/javascript">
//content of tiny_mce.js
(function(d){var a=/^\s*|\s*$.....
</script>
it fails

How to make Zurb Joyride run _once_ for each user [duplicate]

I'm using Foundation Joyride and every time I load the webpage the tour starts, but how do I only start the tour for the first time the webpage is loaded?
My settings are ...
$(window).load(function() {
//Foundation Joyride (Tour)
$("#tour").joyride({
'cookieMonster': true,
'cookieName': 'JoyRide',
'cookieDomain': 'mydomain.co.uk/',
'postRideCallback' : function () {
$(this).joyride('destroy');
},
cookieMonster: false
});
});
Got it working at last and it turned out to be the order in which the header files were declared.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="foundation.css">
<script type="text/javascript" src="foundation.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jquery.foundation.joyride.js"></script>
<script>
$(window).load(function() {
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide'
});
});
</script>
</head>
<body>
<ol id="tour">
<li><p>This is the tour.</p></li>
</ol>
</body>
</html>
You have to use the cookieMonster option se to true, with your domain or false in cookieDomain.
Also remove the cookieMonster: false outside of the parenthesis.
To let joyride use cookies you must include the jQuery.cookie library in your page (https://github.com/carhartl/jquery-cookie)
Here is a sample:
$("#tour").joyride({
cookieMonster: true,
cookieName: 'JoyRide',
cookieDomain: false
});
In this way you'll see the tour only the first time you visit the page (or when you clear the cookies).

Categories

Resources