Hi I'm using the the iframeSizer to load iframes dynamically. On the parent page I'm currently implementing this code to load the spinning preloader image with css:
<script type="text/javascript" src="//example.com/iframeResizer.min.js"></script>
<style>
iframe{width:100%}
.holds-the-iframe {
background:url(//example.com/preloader.gif) center center no-repeat;
}
</style>
<div class="holds-the-iframe">
<iframe src="http://example.com/iframed-content-url" scrolling="no" frameborder="0"></iframe>
</div>
<script>iFrameResize()</script>
The problem with this is if there is a transparent background on the iframe content, the spinner shows through. iFrameResizer has a bodyBackground option but that changes the entire body, not just the content inside of the iframe.
Any thoughts on how to improve this? Is there a way with CSS or JS to remove the spinner node completely after the iframe initially is loaded? Thanks!
The plugin allows you to use options,
one of them is bodyBackground and accepts a String value.
so you could perhaps give this a try:
iFrameResize({
bodyBackground : "rgba(0,0,0,1) url(preloader.gif) 50% no-repeat"
});
Thanks for the feedback. My simple solution was to just put the spinner as a background in the actual iframe css, rather than in a wrapper. Then the content overwrites it upon load.
Related
I'm not a programmer, but I need to find out if there's a way to force a java script to fit completely within an element in my page, without showing a horizontal scroll bar. Sorry if I use the wrong terminology.
Below is a given code that I get from a third party, which I place on my page, to get a display gallery of items. The problem is that it too wide.
Is there a code I can add, to force the script to completely fit inside the screen (600px wide), so the horizontal scroll bar disappears automatically?
Below is the script:
'<noscript>
<p>powered by example.com</p>
</noscript>
<script id="scriptId_718x940_60872" type="text/javascript" src="//example.com/?scriptId=60872&bid=1301660001&format=718x940&bannerType=3">
</script>
I should add that this is a specific html element within my page, and that I'm trying to apply this code only to this element, not to the whole page or the whole site.
Thank you so much for your help!
600 what? I'm going to assume pixels. Add this to your CSS:
body {
max-width: 600px !important;
}
Added !important in edit
Add this to your html. It isn't very pretty but it should narrow the iframe that is displaying the coupons.
<style type="text/css">
div#ci_gallery {
width: 600px;
overflow: scroll;
}
</style>
I have an iframe:
<iframe src='myurl.php' frameborder='0' width='500' height='500' ></iframe>
I need to place its contents right below a <fieldset></fieldset> element.
How can I do that using jquery/javascript?
I am working with dynamic content so is not that easy as to put the iframe right below the fieldset.
Thanks a lot
First as dudzio said, use it simple like this:
<fieldset></fieldset>
<iframe src='myurl.php' frameborder='0' width='500' height='500'></iframe>
If you have another problems and you don't tell us corectly you can use:
CSS, sample: position:absolute;top:X px; for iframe,
If your fieldset is not visible it may be z-index lower than another element on page.
We need the entire page to check why fieldset is below iframe... A lot of causes can be responsible for this. Please update you question!
I supose you want a fieldset at top of the iframe. Put them into consecutive div's.
But this doesn't use javascript/jquery just plain HTML tags.
<fieldset></fieldset>
<iframe src='myurl.php' frameborder='0' width='500' height='500'></iframe>
It should be that simple. If it's not - check CSS code, especially float: left/right or position:absolute for fieldset element.
And try to avoid using iframes it can make a lot of troubles. Starting with CSS styling problems, ending with security issues, for example with https protocol.
I'm trying to make an embedding Flickr video be fluid on a responsive theme I'm working on for Tumblr. I'm doing well with any other embedded video or audio players (Youtube, Vimeo, Soundcloud, Spotify, etc), but Flickr videos are overlaping, being unable to contain them on their parent container.
Flickr video iframe and some of its children elements has inline css declarations which are causing the content overflows.
Here's a screenshot with the iframe structure
First I've tried to simply overwrite those styles with CSS but have no effect.
Then I tried with jQuery, but can't target the iframe.
<iframe frameborder="0" allowfullscreen="" class="flickr-embed-frame" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen="" width="700" height="393" data-natural-width="1024" data-natural-height="576" style="overflow: hidden; padding: 0px; margin: 0px; width: 700px; height: 393px; max-width: none;" data-loaded="true"></iframe>
Despite the iframe has a css class .flickr-embed-frame I can't neither target it, nor its child elements. I've tried with my function inside $(document).ready() and $(window).load() with any result.
Selectors like $('.flickr-embed-frame').contents().find('.child-class'); haven't worked neither.
Inside the iframe there's a video element:
<video src="https://www.flickr.com/photos/138041208#N02/27214754585/play/hd/9ecf29781c/" width="699" height="393" poster="https://farm8.staticflickr.com/7776/27214754585_9ecf29781c_c.jpg" controls=""></video>
Also tried to target it with selectors like $('video[src^="https://www.flickr.com"]') with no result.
Couldn't find any question related, so hope someone will have a solution. Thanks.
EDIT =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Ok, I tried to manually embed a Flickr Video on a JSFiddle instead of Tumblr (where you just have to paste an URL link to the video). This is the code Flickr asks you to add on your code in order to display the video:
<a data-flickr-embed="true" href="https://www.flickr.com/photos/138041208#N02/27214754585/in/dateposted-public/" title="Test video"><img src="https://c2.staticflickr.com/8/7776/27214754585_9ecf29781c_b.jpg" width="1024" height="576" alt="Test video"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Seems to be that iframe is added later, injected into the DOM via javascript. This must be the reason why I can't target the iframe, neither via CSS nor jQuery, since initially it doesn't exist.
Now my question is: How can I check when this iframe is injected to the DOM? This way I could target it and make the changes I need via jQuery.
SOLVED =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
I've finally found a solution for this problem, check my comment bellow.
Thanks to a pretty neat trick exposed by David Walsh (davidwalsh.name/detect-node-insertion) I've managed to solve this.
First we add an animation that will start when the iframe is inserted:
/* set up the keyframes; remember to create prefixed keyframes too! */
#keyframes nodeInserted {
from { opacity: 0.99; }
to { opacity: 1; }
}
The animation needs to be applied on the elements you'd like to listen for (in this case, the iframe).
.parent-container iframe {
animation-duration: 0.001s;
animation-name: nodeInserted;
}
When the animation ends, the insertion event will fire.
First, you have to create a function which acts as the event listener callback:
var insertListener = function(event){
if (event.animationName == "nodeInserted") {
// This is the debug for knowing our listener worked!
// event.target is the new node!
console.warn("Another node has been inserted! ", event, event.target);
}
}
If the animation name matches the desired animation, we know a DOM node has been injected. Now we add the event listener to the parent:
document.addEventListener("animationstart", insertListener, false); // standard + firefox
document.addEventListener("MSAnimationStart", insertListener, false); // IE
document.addEventListener("webkitAnimationStart", insertListener, false); // Chrome + Safari
Here's a demo I made with the Flickr video embedded, working fine:
Check out this previous post on SO: How to access the content of an iframe with jQuery?
The solution seems to be using jQuery's contents()
$("#myiframe").contents().find("#myContent")
EDIT: What's right below this has been answered - see the question below it for the current question that has arisen from that answer.
The below code makes the page fit the screen, and I can size the iframe to be any height or width that I want, and the page will not scroll. THis is what I want. However, I don't just want the page to cut the iframe off. I want the iframe to stretch/shrink to fit the browser window. How can I achieve this efficiently? Can it be done without javascript? If javascript is needed for this, please provide a beginner level explanation, or a good tutorial link; I'm new with JS.
Here is what I have so far:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="wrapper">
<iframe id="myIframe" src="https://#.com" border="0" scrolling="no" frameborder="0">
</iframe>
</div>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
margin: 0;
padding: 0;
}
EDIT! It just so happens that this particular page that I want to use in the iframe here offers a very interesting control feature in the url itself! The url allows size control. So this leads me to ask a new question, which involves using a javascript. My new question is this:
Can I use some sort of JS script to take advantage of the size control here in the url
<iframe id="myIframe" src="https://media.embed.ly/1/frame?url=http%3A%2F%2Fwww.twitch.tv%2Fgamemode_mc_&width=1280&height=1280&secure=true&key=0202f0ddb5a3458aabf520e5ab790ab9&"
to dynamically force the size of the iframe content to match the user's browser window?
This will combine the solution to my original question with a secondary solution to provide the perfect fix for my problem here.
(My goal here is actually to place this Twitch feed as a background to my webpage - resizing the actual content of the iframe is actually a very unlikely but seemingly possibly additional treat here!)
I think what you are attempting to accomplish can be done with the following in tour CSS
#myIframe {
height: 100%;
width: 100%
}
If you are trying to stretch the content of iframe then.....
You will have to write css that will give proportional height and width to all elements in the iframe document
if the iframe href is not from your domain then there is no way to achieve this.
Overall, there is no way to stretch the content of page so that all things are visible on the screen without scrollbar.
I dynamically load an iframe with JavaScript. After it's loaded, how can I make it scroll down a specific number of pixels (ie. after the page in the iframe has loaded, how can I make the iframe scroll by itself to the a specified region of the page?)
You can use the onload event to detect when the iframe has finished loading, and there you can use the scrollTo function on the contentWindow of the iframe, to scroll to a defined position of pixels, from left and top (x, y):
var myIframe = document.getElementById('iframe');
myIframe.onload = function () {
myIframe.contentWindow.scrollTo(xcoord,ycoord);
}
You can check a working example here.
Note: This will work if both pages reside on the same domain.
Inspired by Nelson's and Chris' comments, I've found a way to workaround the same origin policy with a div and an iframe:
HTML:
<div id='div_iframe'><iframe id='frame' src='...'></iframe></div>
CSS:
#div_iframe {
border-style: inset;
border-color: grey;
overflow: scroll;
height: 500px;
width: 90%
}
#frame {
width: 100%;
height: 1000%; /* 10x the div height to embrace the whole page */
}
Now suppose I want to skip the first 438 (vertical) pixels of the iframe page, by scrolling to that position.
JS solution:
document.getElementById('div_iframe').scrollTop = 438
JQuery solution:
$('#div_iframe').scrollTop(438)
CSS solution:
#frame { margin-top: -438px }
(Each solution alone is enough, and the effect of the CSS one is a little different since you can't scroll up to see the top of the iframed page.)
Inspired by Nelson's comment I made this.
Workaround for javascript Same-origin policy with regards to using.ScrollTo( ) on document originating on an external domain.
Very simple workaround for this involves creating a dummy HTML page that hosts the external website within it, then calling .ScrollTo(x,y) on that page once it's loaded. Then the only thing you need to do is have a frame or an iframe bring up this website.
There are a lot of other ways to do it, this is by far the most simplified way to do it.
*note the height must be large to accommodate the scroll bars maximum value.
--home.html
<html>
<head>
<title>Home</title>
</head>
<frameset rows="*,170">
<frame src=body.htm noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling="no">
<frame src="weather.htm" noresize=yes frameborder=0 marginheight=0 marginwidth=0 scrolling="no">
</frameset>
</html>
--weather.html
<html>
<head>
<title>Weather</title>
</head>
<body onLoad="window.scrollTo(0,170)">
<iframe id="iframe" src="http://forecast.weather.gov/MapClick.php?CityName=Las+Vegas&state=NV&site=VEF&textField1=36.175&textField2=-115.136&e=0" height=1000 width=100% frameborder=0 marginheight=0 marginwidth=0 scrolling=no>
</iframe>
</body>
</html>
Use the scrollTop property of the frame's content to set the content's vertical scroll-offset to a specific number of pixels (like 100):
<iframe src="foo.html" onload="this.contentWindow.document.documentElement.scrollTop=100"></iframe>
A jQuery solution:
$("#frame1").ready( function() {
$("#frame1").contents().scrollTop( $("#frame1").contents().scrollTop() + 10 );
});
Based on Chris's comment
CSS
.amazon-rating {
width: 55px;
height: 12px;
overflow: hidden;
}
.rating-stars {
left: -18px;
top: -102px;
position: relative;
}
HAML
.amazon-rating
%iframe.rating-stars{src: $item->ratingURL, seamless: 'seamless', frameborder: 0, scrolling: 'no'}
Or, you can set a margin-top on the iframe...a bit of a hack but works in FF so far.
#frame {
margin-top:200px;
}
The main issue when programming the scroll is related to getting the whole document embedded into the page, remember than an Iframe would be a full-page (head and all) inside your main doc, for this reason, before actually scrolling, you need to get the inner document, not just the container, so you can actually scrollTo.
We add a validation to sendure compatibility, and the differences betwen contentDocument and windows can be found here
Havign this, the final code would be:
var $iframe = document.getElementByID('myIfreme');
var childDocument = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
childDocument.documentElement.scrollTop = 0;
I've also had trouble using any type of javascript "scrollTo" function in an iframe on an iPad. Finally found an "old" solution to the problem, just hash to an anchor.
In my situation after an ajax return my error messages were set to display at the top of the iframe but if the user had scrolled down in what is an admittedly long form the submission goes out and the error appears "above the fold". Additionally, assuming the user did scroll way down the top level page was scrolled away from 0,0 and was also hidden.
I added
<a name="ptop"></a>
to the top of my iframe document and
<a name="atop"></a>
to the top of my top level page
then
$(document).ready(function(){
$("form").bind("ajax:complete",
function() {
location.hash = "#";
top.location.hash = "#";
setTimeout('location.hash="#ptop"',150);
setTimeout('top.location.hash="#atop"',350);
}
)
});
in the iframe.
You have to hash the iframe before the top page or only the iframe will scroll and the top will remain hidden but while it's a tiny bit "jumpy" due to the timeout intervals it works. I imagine tags throughout would allow various "scrollTo" points.