I have an iframe application build up on php.
I have set iframe size as resizable.
There is a problem the display is not proper if the content is too large.
I have applied the code available on http://wiki.developers.facebook.com/index.php/Resizable_IFrame
My xd_receiver.htm file is inside my templates folder where my php files are residing.
The code which I am using is:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 0px;"></div>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
}
);
</script>
Please guide on how to make the display correct.
even though In am not sure about this, but Large content could be the the real issue,
try to move this part to the end of your page
FB_RequireFeatures(["CanvasUtil"],
function(){
FB.XdComm.Server.init(xd_receiver.htm>);
FB.CanvasClient.startTimerToSizeToContent();
} ); </script>
Related
I am using Editor.md (https://pandao.github.io/editor.md/en.html) on a project.
The backend is flask. I fetch all of the information from the DB and load into the render page:
<div id="test-editormd">
<textarea id="jobDescription">
{{job_data['job_description']}}
</textarea>
</div>
The html page template imports the Editor.md lib in the end of the page and the CSS on top of the page:
<script src="https://cdnjs.cloudflare.com/ajax/libs/editor-md/1.5.0/editormd.min.js" integrity="sha512-bbYbjE426azR7zve+4dGnNpiD7Hp+zKzvWttsxa4Uc0t2GyA6FjTHLZ+3Q5BkoUAG/TZHMzVYwFEIT58HHEANw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>
<script src="../static/assets/editormd/languages/en.js"></script>
<script type="text/javascript">
var testEditor;
$(function() {
testEditor = editormd({
id : "test-editormd",
width : "100%",
height : 1000,
path : "../static/assets/editormd/lib/"
});
});
</script>
Problem: It loads ok and works on my local machine when I run it.
But when I deploy to the server I get the forever will of death lol:
Any ideas of what can be causing the problem?
Thanks!
I want to track each time someone clicks on a link on my web (this click makes a file to be downloaded) to optimise my Facebook Ads (pay per conversion). After including the Facebook pixel in the head section of my web, I have to track this event, for example as a "lead", so I'm using this piece of code at the beginning of the body:
<script type="text/javascript">
$( '#link' ).click(function() {
fbq('track', 'Lead');
});
</script>
Please note that "link" is the id I've set for the link:
<a id="link" href="/content/file.zip">press here</a>
However, I'm tracking a "PageView" (because of the first code in the head section), but I'm not tracking the lead event (the click on the link).
I've also tried this one:
<script type="text/javascript">
$("#link").on('click', function() {
fbq('track', 'Lead');
});
</script>
And I've also tried with an onclick event in the link, like this:
press here
<script type="text/javascript">
function fileDownloaded() {
fbq('track', 'Lead');
return true;
}
</script>
Nothing works for me (I've also put the code of the event at the end of the body section). What am I doing wrong?
Thanks a lot.
I've found a solution that works for me, in case is useful for someone else:
Instead of putting the link inside an href, I've moved the link to the javascript function.
I've used an onclick method to call the javascript function in which I first call the Facebook event to track, and then the download of the file starts.
The result is something like this for the HTML (the text I want to link):
<div onclick="fileDownloaded()">press here</div>
And something like this for the javascript function I want to track with Facebook pixel when someone clicks on the link (at the end of the body section):
<script>
function fileDownloaded() {
fbq('track', 'Lead');
window.open("/content/file.zip","_self")
}
</script>
Best regards.
If you put the URL inside javascript, the link will be "dead" for any visitor that doesn't have scripts enabled in their browser.
You can just put fbq() inside a function inside separate script tags like so:
//pixel code above
fbq('track', 'PageView');
</script>
<script>
function Lead(){ fbq('track','Lead'); }
</script>
<body>
Click tracked by FB!
I use this with image;
<a href="https://downloadurl">
<img src="target image" alt="xxx" onclick="fbq('track','Lead')"/>
</a>
this works if you have installed the fb pixel code in the website header.
While trying to create a modal using Foundation Reveal, I found that I couldn't close it. Not by using the reveal-modal-close class, not by javascript, nothing was working.
I tried to put this example from the documentation into the page:
<div id="myModal" class="reveal-modal" data-reveal>
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>I'm a cool paragraph that lives inside of an even cooler modal. Wins!</p>
<a class="close-reveal-modal">×</a>
</div>
When the page loads, it's open, but I can't get it to close. Also, not sure why it loads open.
At the bottom of my <body>, I have this:
<script src="//ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.6.2.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation.min.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.3.1/js/foundation/foundation.reveal.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="js/smooth-scroll.js"></script>
<script type="text/js" src="js/modal.js"></script>
<script>
$(document).foundation();
</script>
you don't need to load both foundation.min and foundation.reveal, just load min unless you need only reveal. Also you don't need modal.js - might be a conflict there.
See documentation here and follow it, should work once you fix the above issues: http://foundation.zurb.com/docs/components/reveal.html
How can we resize a website which appears in an iFrame ? Is it possible if the website is wider than the Facebook page to make it appear a bit smaller so that we can see it all ?
Here is the code I used to avoid the scroll bar at least:
<html>
<head></head>
<body>
<iframe style="width:827px; height:1000px;" src="#"></iframe>
</body>
</html>
Thanks by advance !
Change the height and width for example for my facebook i changed it to
style="border:none; overflow:hidden; width:215px; height:290px;"
Just make sure to add the overflow hidden part so it hides any extra
Use this code just after your opening tag
<div id="fb-root"></div>
<script src="https://connect.facebook.net/en_US/all.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR APP ID', //Your facebook APP here
cookie : true, // enable cookies to allow the server to access the session
});
}
window.onload = function() {
FB.Canvas.setAutoGrow(91);
}
</script>
also add this css statement to your header section.
<style>
body {overflow:hidden;} /*This is handy for removing horizontal/vertical scrollbars as we won't need them if we autosize; */
</style>
I m new to MVC. I need to refresh tab panel after 10 seconds in MVC.
Can anybody help me in that?
Thanks
you can do that using JQuery or ajax the following is a sample example using Jquery
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').fadeOut("slow").load('your target page will be here').fadeIn("slow");
}, 100);
</script>
</head>
<body>
<div id="responsecontainer">
here you can place your Div,html or ASP.net control
</div>
</body>
</head>
</html>
The div or whatever you use for content should have an id and should be rendered as an action that returns a partial view. Then you can use JavaScript to set the timer, and jquery Ajax call to replace the content with what is returned by calling the URL you get by URL.Action.