In my facebook page tab app I have a couple of different pages that are of different height. As title says, the page pushes the height up when necessary, but the window height doesn't return to shortest possible when I go back to a page that doesn't require much height. This is how it looks:
http://www.facebook.com/EasterIslandTraveling/app_167418876720611
The "Basics" page is the tall page I'm referring to.
After FB.init i use FB.Canvas.setAutoGrow(); which should do the trick, right? What am I doing wrong?
When using FB.init(), first fb js library must be initialized. So you have to include FB.init() function inside window.fbAsyncInit event like as follows:
window.fbAsyncInit = function() {
FB.init({ appId: 'FB APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 700 });
}
You can think as you are writing a javascript inside document ready event...
$(document).ready(function(){ /* Js Code */ })
You can decrease the height by using this given below code
<script src="//connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({ appId: 'YOUR APP ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Canvas.setSize({ height: 600 }); // You can set height here..
}
</script>
This is working perfectly for me. Let me know if it doesn't work!!
Related
I'm using FullCalendar and I just integrated tippyJs for popover. It is having layout issues related to what seems to be zIndex. I have attached the Screenshot of my problem. You can see that popover is hiding behind the event wrapper. plus it is also not clickable. I can use some help in showing complete popover box above anything. Your help is greatly appreciated. Thanks
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
theme: 'light',
zIndex: 9999,
});
tippy v6.x has prop appendTo read here
so you can try appendTo: () => document.body
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
interactive: true,
appendTo: () => document.body,
theme: 'light',
zIndex: 9999,
I don't know if you found a solution about it but I had the same problem. The library (CSS) was badly imported for tippy.js and popper.
So I just had to add the cdn file in the index.html and all worked fine.
I had these files in index.html
<!-- Development -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5"></script>
<!-- Production -->
<script src="https://unpkg.com/popper.js#1"></script>
<script src="https://unpkg.com/tippy.js#5/dist/tippy-bundle.iife.js">
tippy(arg.el, {
content: ReactDOMServer.renderToStaticMarkup(
//my html for popover
),
allowHTML: true,
placement: 'auto',
theme: 'light',
zIndex: 9999,
});
Remove the interactive params, it should normaly works :)
I embedded Power BI into my web page using iframe code but I would like to hide the footer with share buttons. Is there any way to achieve this?
I'm specifically talking about embed code (iframe), not public URL.
Thank you.
Typically, PowerBI returns the Iframe with it to show it was created by PowerBI, with the name embedded.
Depending on how you created it you have some options.
JavaScript with CSS to hide the footer.
If you used the UI, from the UI using this
link, as described below from the site in link
Some code to help you out: at configuration you can setup various values, and set your
footer to false
<html>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/jquery/dist/jquery.js"></script>
<script src="https://microsoft.github.io/PowerBI-JavaScript/demo/bower_components/powerbi-client/dist/powerbi.js""></script>
<script type="text/javascript">
var embedConfiguration = {
type: 'report',
accessToken: 'someToken',
id: '71.Tykt.org',
embedUrl: 'https://app.powerbi.com/reportEmbed?reportId=xxx.TYKT.org',
settings: {
filterPaneEnabled: false,
navContentPaneEnabled: false
// Find the setting you want to hide and set it to False
}
};
var report;
window.onload = function () {
var $reportContainer = $('#reportContainer');
report= powerbi.embed($reportContainer.get(0), embedConfiguration);
}
</script>
<div id="reportContainer"></div>
</html>
Hope it helps!
I want to remove the dependency of Iframe from my application. What are the possible way I can call a different application URL other than using iframe, object or html embeded variable.
I am trying something like this.
<body>
<a class="ajax" href="http://www.google.com">
Open in Modal Window
</a>
<script type="text/javascript">
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none" class="Waiting"></div>').appendTo('body');
dialog.dialog({
close: function(event, ui) {
dialog.remove();
},
modal: true
});
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.removeClass('Waiting');
}
);
return false;
});
});
</script>
</body>
sorry can't comment
assuming there's no no anti CSF or similar measures on the target website you can use JavaScript ajax
or do it server side by grabbing the site
for better help describe what you're trying to archive what you did providing sample code if possible
In this demo http://jsfiddle.net/pHJgP/8/ an image gets replaced with a text
I'd like to do the same on a blogger post http://myblog.blogspot.com/2015/06/firstpost.html
This code goes into post body:
<div id="outer"><img src="http://existdissolve.com/wp-content/uploads/2010/08/microsoft-logo-64x64.png"/></div>
<div id="text" style="display:none">Text here</div>
Where do I put this code?
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
Do I need to add an operator to invoke the function or action in this particular post http://myblog.blogspot.com/2015/06/firstpost.html when it opens? And where/how do I add that operator or trigger code?
What else is missing ?
Before asking I've read several posts on stackoverflow.com , on w3schools.com , etc. experimented but failed due to the lack of knowledge.
place this code just above or before </head>
<script src='http://code.jquery.com/jquery-1.7.2.js'/>
<script type='text/javascript'>
$(document).ready(function()
{
setTimeout(function()
{
$("div#outer").fadeOut("slow", function ()
{
$("div#outer img").remove();
$("div#outer").html($("div#text").text());
$("div#outer").show();
});
}, 3000);
});
</script>
Note: 1.7.2 is taken from the top left corner of the demo http://jsfiddle.net/pHJgP/8/
if 1.7.2 did not work, try other versions.
I am not a PRO. And this is all I know from experimenting.
I could be wrong
I have an accordion element in my page. The problem is that the accordion appears on the page but it is not clickable. By 'not clickable', I mean that when I click on the header it does not expand to reveal the contents. Nothing happens at all. I hope someone can help.
Thanks in advance.
Your jQuery.js module must be loaded before the semantic-ui accordion.js
module.
Simply put
<script src="js/accordion.js"></script>
after
<script src="js/vendor/jquery-1.11.2.min.js"><\/script>
( or whatever your jQuery version is ... )
and initialize the accordion in the html document inside a script tag as :
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
It happens on nested accordions while you script is under $( document ).ready(function()
So try to call accordion function in an ajax callback like this;
$('input[name=sampleInput]').on('input', function() {
var val = $("input[name=sampleInput]").val();
if (val.length >= 3)
{
$.ajax( {
url: 'sample_handler.php',
type: 'GET',
data: {
data: data
},
dataType: 'html',
success: function ( response ) {
$('.ui.accordion').accordion({});
}
})
}
})
For instance, I've put accordion function in a callback. So I could use it again and again, even I add nested accordions.
In my case I had syntax errors inside javascript/jQuery. After fixing that and importing jQuery module before semantic-ui it works. You can open development tools in the browser and check the console for errors in javascript (F12 in Chrome).
<script type="text/javascript">
$(document).ready(function() {
window.onload = function(){
$('.ui.accordion').accordion();
};
});
</script>