I need to embed the following code on a self hosted Wordpress installation -
<iframe id="slydy"
style = "border: none; max-width: 100%; min-width: 100px;"
src = "http://slydy.co/users/TCC/01"
width = "648"
height = "435"
frameborder = "0"
marginwidth = "0"
marginheight = "0"
scrolling = "no"
allowfullscreen = "allowfullscreen">
</iframe>
but it just doesn't show up. I've installed the same on at least two other Wordpress blogs and it worked just fine.
What setting do i need to tweak?
probably one of these things:
if your website httpS then its blocked because your iframe is http.
make sure that you in text ( not visual ) editing mode on post editing screen
WP caching ?
The Wordpress editor blocks/removes iframes. Try using some of the plugins out there that supports iframes, og make an Shortcode to make iframes.
Related
I am working on a personal site, and the site uses an <iframe> to display most of its contents. You navigate the site by changing the target of the <iframe> to a specific .html.
Here's an example of how the navigation works:
<ul>
<li><a>onclick="document.getElementById('iframe1').src='home.html'>Home</a></li>
<li><a>onclick="document.getElementById('iframe1').src='prjcts.html'>Projects</a></li>
</ul>
<iframe src="home.html" id="iframe1"></iframe>
The problem that I've encountered is that since most things are is inside of the <iframe> that I can't link directly to any specific content.
If I wanted to show someone the Projects page, I can only link "www.example.com/" and tell them to navigate there themselves, and not simply link "www.example.com/projects".
My theory is that you can do it with something like:
"www.example.com#projects" using ID's or something, but since I'm pretty new to HTML5, I might be completely wrong. I have no idea how to make it work, and I can't seem to find anyone explaining it.
Is there any way to use the URL to specify an <iframe> target, and if so, how?
You would want to check the url and then set the src of your iframe using the url:
This is just an example of how you could do it, you should use maybe an array of URLs. There are a bunch of ways to accomplish this.
HTML:
<div id="wrapper">
<iframe id="myIframe" src="http://example.com/"></iframe>
</div>
JavaScript (using jQuery here):
$(document).ready(function () {
var myPath = window.location.pathname; // returns something like /projects.html
if (myPath == "/projects.html") {
$('#myIframe').src = "http://www.example.com/projects.html"; // sets the src of your iframe
}
});
Refer to this post's answer: dynamically set iframe src
i need to make my iframe to show me a specific area of a website in my page.
i failed to find the answer on the internet, i tried several codes but nothing seems to work.
if anyone is kind enough to show me how to do the exact location - i need it to be where the scrolling news part is. thank you!
this is my code-
<section><iframe src="http://www.walla.co.il" scrolling="no" frameborder="0"></iframe></section>
the css -
iframe { width:130px; height:275px; position:absolute; top:40px; left:55px; clip:rect(692px 682px)}
You can use window.scrollBy as commented by anishsane, as long as you know how many pixels to scroll. But this will obviously change as the second pages design changes.
If this is a page under your control, this is an acceptable solution, and you now need to figure out how to remove the scrollbars (IE has posed problems for me in the past).
If this page is from another domain, you have another problem to deal with. The cross domain policy for iframes.
This does what you want...
<html>
<head>
<script>
function scrollTheIframe()
{
var frame = document.getElementById("ifr");
frame.contentWindow.scrollTo(350,300);
}
</script></head>
<body onLoad = "scrollTheIframe()">
<iframe src="r.html" id="ifr" width="500">
</iframe>
</body>
</html>
The above example does expect the page (in the iframe) to load very fast... If updated the source to an external site, such as bbc.co.uk then it didn't function. the r.html I've used in the above was a very small file.
I'm working on a local WordPress site, and for some reason there is an iframe added just after the opening body tag which makes the body to drop down about 20px.
Google only returned 1 relevant result when searching for it, and what I read there didn't help much. It can be found here.
The WordPress site has no plugins installed, and setting it to display: none; doesn't work.
Here's a screenshot from Chrome so you can see it:
It seems like it is added by the Twitter script. If you remove it the iframe will disappear.
It sure looks like you have the Twitter plugin installed in some way or the other as you can see it says data-twttr-rendered="true" in the body tag.
If you remove the code - in my case the code below - it will disappear
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = '//platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
Hi I use iframefor my facebook apps. The iframe gets a scrollbar around itself. Can you tell me how to avoid getting the scrollbar around the iframe? I currently have 2 facebook apps as iframes and one of them gets scrollbars that it shouldn't have:
http://apps.facebook.com/cyberfaze/ (has scrollbars or scroll areas around iframe that I don't want)
http://apps.facebook.com/koolbusiness/ (same CSS and has no scrollbars)
Could you help me?
Thanks
Go to your application settings on Facebook
you will find canvas settings
In the canvas settings you will find IFrame Size:
You will find two options
Show scrollbars
Auto-resize
select Auto-resize to get rid of from the scroll bars.
You will need to go to your app settings -> canvas settings -> iFrame size (as mentioned by Micheal) and set it to auto-resize.
You will also need to make sure you have body, html { overflow: hidden; } for you iframe content
Then the below will help, chuck that in and change your app id -
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxx',
status: true,
cookie: true,
xfbml: true
});
//this resizes the the i-frame
//on an interval of 100ms
FB.Canvas.setAutoResize(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
There is a setting in the Facebook Developers App Setup section to set scrolling to Auto-resize. and you can add to your CSS file : html { overflow:hidden; }
Could it be that you have forgot to set the iframe scrolling attribute to "no"?
Try to change the iframe tag to this:
<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 719px; overflow-y: hidden; ">
Hope this was what you where looking for!
Usually with iframes you can either use the CSS method setting overflow: hidden or you can use the scrolling attribute of the iframe and set it to scrolling="no".
Having looked at your examples though, I am not sure that is what is causing your issue. Facebook iframes have their own set of issues.
First go to the devloper app and edit your app settings. In the Facebook Integration area set iframe size to auto-resize. Then in your app, after FB.init, call FB.Canvas.setAutoResize. Here is a link about FB.Canvas.setAutoResize.
I have an application that I would like to embed inside our companies CMS. The only way to do that (I am told), is to load it in an <iframe>.
Easy: just set height and width to 100%! Except, it doesn't work.
I did find out about setting frameborder to 0, so it at least looks like part of the site, but I'd prefer not to have an ugly scrollbar inside a page that allready has one.
Do you know of any tricks to do this?
EDIT: I think I need to clarify my question somewhat:
the company CMS displays the fluff and stuff for our whole website
most pages created through the CMS
my application isn't, but they will let me embedd it in an <iframe>
I have no control over the iframe, so any solution must work from the referenced page (according to the src attribute of the iframe tag)
the CMS displays a footer, so setting the height to 1 million pixels is not a good idea
Can I access the parent pages DOM from the referenced page? This might help, but I can see some people might not want this to be possible...
This technique seems to work (gleaned from several sources, but inspired by the link from the accepted answer:
In parent document:
<iframe id="MyIFRAME" name="MyIFRAME"
src="http://localhost/child.html"
scrolling="auto" width="100%" frameborder="0">
no iframes supported...
</iframe>
In child:
<!-- ... -->
<body>
<script type="text/javascript">
function resizeIframe() {
var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
}
else if (document.body
&& typeof document.body.scrollHeight != 'undefined') {
docHeight = document.body.scrollHeight;
}
// magic number: suppress generation of scrollbars...
docHeight += 20;
parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";
}
parent.document.getElementById('MyIFRAME').onload = resizeIframe;
parent.window.onresize = resizeIframe;
</script>
</body>
BTW: This will only work if parent and child are in the same domain due to a restriction in JavaScript for security reasons...
You could either just use a scripting language to include the page into the parent page, other wise, you might want to try one of these javascript methods:
http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html
Provided that your iframe is hosted on the same server as the containing page, you can access it via javascript.
There are a number of suggested methods for setting the iframe to the full height of the contents, each with varying degrees of success - a google for this problem shows that it's quite a common one, with no real, one-size-fits-all consensus solution i'm afraid!
Several people have reported that this script does the trick, but may need some modification for your specific case (again, assuming your iframe and parent page are on the same domain).
I might be missing something here, but adding scrolling=no as an attribute to the iframe tag normally gets rid of the scrollbars.