If you look at my site www.tripleflowmusic.com, once you load the page, other HTML document with twitter plugin is loaded (Updates.html) in to container with help of of following code (jQuery):
$(document).ready(function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
But when I click News button, which does the following thing (It basically reloads Updates.html in the container):
$("#UpdatesButton").click(function() {
$("#subpageframe").fadeOut(200, function() {
$("#subpageframe").load('Pages/Updates.html', function(){
$("#subpageframe").fadeIn(200);
The twitter plugin won't show
The question is, why is this happening?
P.S. To get access to sub pages, simply remove "#" from the URL in the address bar
Your iframe and format isn't there like it is on the homepage. This code is in the homepage but not in http://www.tripleflowmusic.com/#Pages/Updates.html:
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" class="twitter-timeline twitter-timeline-rendered" allowfullscreen="" style="border: none; max-width: 100%; min-width: 180px; margin: 0px; padding: 0px; display: inline-block; position: static; visibility: visible; width: 520px;" title="Twitter Timeline" height="600"></iframe>
You have some "a class" and "style" in the news page instead of the proper
<center data-twttr-id="twttr-sandbox-0">
format.
Shows fine on both Safari and Chrome on OS X for me, can you be more specific with what browser you're using and OS?
While we are at it you might want to clean up some of the errors that are being thrown:
Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/FunctionElements/MusicPlayer/Covers/missing.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
http://www.tripleflowmusic.com/MediaElements/MusicPlayer/Songs/nylmbyb.mp3 Failed to load resource: the server responded with a status of 404 (Not Found)
Related
This is my WordPress website europeanvirtualassistant.com
if you test it on phone it redirects to europeanvirtualassistant.youcanbookme.com I want to remove this redirection but I am unable to find the reason of this redirection. I have checked WP plugin and there is mobile redirect plugin installed. I have checked my header/footer files of theme. and I have also checked .htaccess I have downloaded theme and searched in all files and nothing is in it aswell but there is nothing like which is causing this weird redirection on iPad and mobile. Can anyone help me out in this.
I believe this part is doing that
<div class="overlay-content overlay-content-3280 spb-popup-class-3280">
<p><p>
<iframe id="ycbmiframeeuropeanvirtualassistant" style="width: 100%; height: 1000px; border: 0px; background-color: transparent;" src="https://europeanvirtualassistant.youcanbook.me/?noframe=true&skipHeaderFooter=true" width="300" height="150" frameborder="0"></iframe></p>
<p><script>
<![CDATA[
window.addEventListener && window.addEventListener("message", function(event){if (event.origin === "https://europeanvirtualassistant.youcanbook.me"){document.getElementById("ycbmiframeeuropeanvirtualassistant").style.height = event.data + "px";}}, false);]]></script></p>
as ycbm may not support mobile and is detecting modal height.
Recently, I am working on the Hosted Payment Fields https://www.braintreepayments.com/blog/your-checkout-our-iframes/. And when i input something wrong, The container div 's class is changed, how does this worked? I think there is no way to call the parent with different domain?
the code with bad input.(class : "braintree-hosted-fields-invalid")
<div class="form-control braintree-hosted-fields-invalid" id="hosted-fields-number">
<iframe src="https://assets.braintreegateway.com/hosted-fields/2.15.5/hosted-fields-frame.html#5c7db060-9271-4eac-b4a2-0f405d743293" frameborder="0" allowtransparency="true" scrolling="no" type="number" name="braintree-hosted-field-number" id="braintree-hosted-field-number" style="border: none; width: 100%; height: 100%; float: left;">
</iframe>
<div style="clear: both;">
They're presumably using web messaging, which is specifically designed to provide cross-origin communication. So their script running on the parent page listens for messages from their script running in the iframe and responds to those messages by updating the classes on the field.
I am loading my embed code in iframe through jQuery like this
<div id="My-page" style="width:900px; height:900px; position: absolute;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;" class="iframely-widget-container">
<script>
$("#My-page").empty().append($("<iframe/>", {
src: "http://localhost/flipbeets3.0.com/get-embedded-code/abdul/p~2~2~2?slug-hash=HrFBx&default-tab=result&host=http%3A%2F%2Fcodepen.io"
}));
</script>
</div>
it is showing disallowed key characters error
There is no need to encode the URL when you load it via javascript. This code should work for you:
<div id="My-page" style="width:900px; height:900px; position: absolute;overflow-x:hidden !important;-webkit-overflow-scrolling:touch !important;" class="iframely-widget-container"></div><script>$("#My-page").empty().append($("<iframe/>", {src: "http://localhost/flipbeets3.0.com/get-embedded-code/abdul/p~2~2~2?slug-hash=HrFBx&default-tab=result&host=http://codepen.io"}));</script>
i have this html on mobile app:
<header class="bar-title">
<a class="button-prev" onclick="history.back(-1)">
BACK
</a>
<h1 class="title">FACEBOOK</h1>
</header>
<div style="overflow:auto;-webkit-overflow-scrolling:touch; height: 100%; width: 100%; padding-top: 42px;" >
<iframe style="height: 100%; width: 100%;" src="https://www.facebook.com/pages/SOMEPAGE" ></iframe>
</div>
but i get error:
Refused to display 'https://www.facebook.com/pages/SOMEPAGE' in a frame because it set 'X-Frame-Options' to 'DENY'
little comment: i dont have access to facebook page options
X-Frame-Options is an response header.
The X-Frame-Options HTTP response header can be used to indicate
whether or not a browser should be allowed to render a page in a
or . Sites can use this to avoid clickjacking attacks,
by ensuring that their content is not embedded into other sites.
It means facebook blocks this kind of behaviour
I've entered this into my code to use facebook comments:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:comments href="google.com" num_posts="10" width="610"></fb:comments>
But it cuts of the comments like this http://cl.ly/77fB and the loading graphic doesn't go away. I've tried removing all css that I have and js and it still does the same thing. I looked that code and the iframe that the facebook comments api generates sets a height of 200px. Here's the iframe source code:
<iframe id="f1c27030c" name="f1f67bf5c4" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 200px; width: 610px; " class="fb_ltr" src="http://www.facebook.com/plugins/comments.php?channel_url=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D2%23cb%3Df3ec50dad4%26origin%3Dfile%253A%252F%252Flocalhost%252Ff17ab9b71%26relation%3Dparent.parent%26transport%3Dpostmessage&href=google.com&locale=en_US&numposts=12&sdk=joey&width=610"></iframe>
Not sure what else to do. Thanks!
Update:
So because files I'm loading the comments from are local Chrome is saying it's not safe to load it all: http://cl.ly/77X7
I uploaded the file to my server and it loaded all the way.
Thanks for your help!
This comes from the fact that you put google.com as the URL : Facebook servers tries to contact google.com to finish loading your comments.
Try with localhost instead of google.com, it will show the error message.
So you have to put the URL of the page on which the comments are displayed. It will not work otherwise.
Hope that helps.