I am using iframe on my site. Now I want to make the scroll on the right side of the iframe invisible. I've searched the whole internet but all the codes I've found don't work.
This is my iframe
<iframe src="../pages.php" width="100%" height="650px" class="gitartik"></iframe>
last piece of code I tried
.gitartik{
overflow-y: scroll;
}
.gitartik::-webkit-scrollbar {
width: 0px;
}
``
CSS of the parent frame cannot affect an iframe, you have to include it in the source of the page loaded by the iframe.
JavaScript of the parent frame can add CSS to the page in the iframe, if both pages come from the same origin (which seems to be the case in your example).
To do so First of all remove this part below from the code
.gitartik::-webkit-scrollbar {
width: 0px;
}
Then go to your html and find the iframe for example:
<iframe src="exampleisfake.co.in">
Then edit the iframe tag as shown below:
<iframe src="exampleisfake.co.in" scrolling=no>
add just like shown above:
scrolling=no
Related
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.
I am using a simple iframe code;
<iframe src="http://caesium.x10.mx/test/index.html" allowtransparency="true" style="border:none" width="852" height="500"></iframe>
And inside http://caesium.x10.mx/test/index.html there is a working button (bottom right) but if you try to click this button on the iframed page (http://caesium.x10.mx/test/index.php) the button does not work.
Can anyone help me find a solution to this?
Thanks!
The code being used for the button.
<center><button onclick="ChangeSkin()">Change Skin</button></center>
<script>
function ChangeSkin() {
location.href = 'https://www.minecraft.net/profile/skin/remote?url=https://crafatar.com/skins/' + document.getElementById('username').value + '.png';
}
</script>
Is it possible the entire iframe is behind another transparent layer?
Try setting css properties:
EDIT:
Position:static;
z-index: 1000000; (or higher than any other elements)
You can do this either in a linked .css file, or within the head tags of the page like so:
<head>
<style>
#content{
Position:static;
z-index: 1000000;
}
</style>
</head>
I often find this to be the issue when ui elements are not functioning as expected.
Your transparent footer div is overlapping the iFrame. If I give your content div a positive z-index (like #content { z-index: 1; }), then the div containing your iFrame is layered on top of the footer, and all the buttons start working again.
Iframes are great, but from what I remember the entire Iframe is one button.
Thats because of exploits that broke out a long while back. The Iframe is basically a live updated screenshot.
I have however seen many that allow links.
So, I would try the other answers first.
I have solved this problem in bootstrap 4 by adding the following to my custom stylesheet:
iframe{
z-index:9999;
}
That seemed to do the trick
I am just wondering, is there anyway to resize a video that is inside an iframe? Below is the code I am working on, when I tried to resize the iframe, it only resizes the wrap and not the player itself therefore creating a scrollbar. Is there anyway to resize the video player itself?
<iframe width="600" height="370" src="http://online.fairytail.tv/s/googplayer.php?skintype=nemesis1&to=1002MJumgQZG&autostart=false&id=108994262975881368074/Ft1#5832691710150899906"></iframe>
iframe{
width: 600px; height: 370px;
}
you cant style the elements inside iframe from another domain
unless they give you the ability to change some parameters in url or something...
https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
Here's your WORKING DEMO
$("button").click(function () {
$('embed').attr('width', '800');
$('embed').attr('height', '600');
});
Stackoverflow is not a code generator, that's why I only gave you a clue not a simple solution. It would be better if you can work out something and become your own knowledge. Id doesn't mean I don't really know how to.
i have a rather strange question:
Is there a possibility to open a only a specific div element of a website in my browser?
The reason why i want to know is, because i want to embed only the stream element of this website:
http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001
The page is rather new, so they dont offer a share embed code function yet, therfore i thought about creating an Iframe which shows the stream, like this:
<iframe height="433" width="770" frameborder="0" src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001"></iframe>
While this iframe shows the whole site, i want only to show the stream element. I checked the code of the side and the div element called "player-wrap" shows pretty much what i need.
Any ideas?
Your best option may be to contact them and request embed functionality. It's maybe not their top priority so if you must, a possible workaround could be this (modified from the SO post found here).
div{
width: 960px;
height: 424px;
overflow: hidden;
}
iframe{
position: relative;
top: -300px;
width:100%;
height:800px;
}
<div>
<iframe src="http://www.azubu.tv/channel/live_small.do?cn_id=2196420951001" autoscroll="false"></iframe>
</div>
http://jsfiddle.net/daCrosby/5PMyu/
I think the best way to do it is to use jQuery's load function to return the iframe.
For example your code would be this which would return the wrapping div of the video which is called .palyer_wrap and insert it into #target-div.
$('#target-div').load('www.azubu.tv/channel/live_small.do?cn_id=2196420951001 .palyer_wrap');
Hopping someone can help with this.
When someone clicks 'Like' on one of our product pages the comment section that drops down goes behind the twitter/google social buttons and I can't seem to pin point exactly where the problem lies. I have tried setting overflow to visible/auto and no luck, yet when I change the height it appears ok (although I don't want to change the height but rather it appear over the top).
The code is below around the facebook button:
<div class="product-link">
<iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"
scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>
Tweet
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>
</div>
Also a link to a product page (probably a bit more useful) : http://foscam-uk.com/foscam-fi8910w.html
Thanks a lot for your help.
Regards
The combination of height and overflow on the iframe does not seem to work as you expected it to.
My suggestion: Embed the iframe into DIV element, and format that DIV element as follows:
<div id="foobar"><iframe …></div>
#foobar {
height: 30px:
overflow: hidden;
position: relative;
z-index: 1;
}
#foobar:hover {
overflow: visible;
}
After that, the comment bar should show up over the twitter/g+ buttons.
But the “faces” of users that have already liked your page will then show up over the twitter/g+ buttons. I’d suggest you remove the parameter &show_faces=true from your iframe’s URL, since showing the faces will not really fit into the page layout you’re going for.