I have an iframe on www.example.com that points to support.example.com (which is a CNAME to a foreign domain).
I automatically resize the height of my iframe so that the frame will not need any scrollbars to display the contained webpage.
On Firefox and IE this works great, there is no scrollbar since I use <iframe ... scrolling="no"></iframe>. However, on webkit browsers (Safari and Chrome), the vertical scrollbar persists even when there is sufficient room for the page without the scrollbar (the scrollbar is grayed out).
How do I hide the scrollbar for webkit browsers?
I just ran into this problem, and discovered that the fix was to set overflow: hidden on the HTML tag of the page inside the iframe.
You can hide the scrollbars and maintain the scrolling functionality (by touchpad or scroll wheel, or touch and drag in a mobile phone or tablet, by using:
<style>
iframe::-webkit-scrollbar {
display: none;
}
</style>
Obviously, you can change iframe to whatever fits your design, and you can add the equivalent -mozilla- property to get it work in firefox as well.
Note: this is useful if you cannot edit the CSS / HTML of the iFramed content.
It's a bit of a hack, but I solved this issue by wrapping the <iframe> in a <div>, setting the <div>'s height, width & overflow:hidden, then setting the <iframe>'s width & height to actually overflow the wrapping <div>.
<style>
div {height:100px;width:100px;overflow:hidden}
iframe {height:150px;width:150px;overflow:hidden}
</style>
<div>
<iframe src="foo.html" scrolling="no"></iframe>
</div>
I'm assuming you've tried this, but have you set scrolling to no on the iframe?
<iframe scrolling="no">
To get rid of the greyed out scroll bars, put "overflow: hidden;" on the body tag of the page being displayed in the Iframe e.g. <body style="overflow:hidden;"> This worked fine for me in Chrome 8.0.552.215 and I also had "overflow: hidden" on the Iframe itself
Does this help? Works on Chrome, IE, FF...
<style type="text/css">
html { overflow:hidden; }
#test { position:absolute; top:50; left:50; right:50; bottom:50; height:2000px; }
</style>
<body scroll="no">
<div id="test">content</div>
</body>
Can you set the overflow-y CSS property for the IFRAME to either visible or hidden?
check if the scroll is realy from the iframe, maybe it's from the HTML or BODY.
For scroll in iframe
<iframe scrolling="no">
In css
iframe { overflow:hidden; }
or
iframe { overflow-x:hidden; overflow-y:hidden}
I just solved it on my blog with scrolling="no" after the style tag.
eg:
iframe src="asdf.html" style="overflow: hidden;" scrolling="no"
I left the style attribute in there because it's more proper and it worked fine on Firefox.
Using Chrome 8.0.552.224 beta under Ubuntu 10.10 is showing still the ghost scrollbars on this site: http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_iframe_scrolling. I tried all tricks what works in all browsers but not in WebKit based browser. Therefore the bug seems not to be fixed completely.
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
this works, none of the others seemed to work including the e.preventDefault() for touchstart.
Try this...
iframe { overflow:hidden; }
Setting the iframe's scrolling attribute to "no" should fix this, but there appears to be a bug in webkit: https://bugs.webkit.org/show_bug.cgi?id=29240
Tim's work-around ( Safari/Chrome (Webkit) - Cannot hide iframe vertical scrollbar ) seems to fix the issue -- as long as you have the ability to edit the document contained by the iframe...
hide iframe scrolling in chrome put body tag like this
<body style="margin:0px; padding:0px; overflow:hidden;"></body>
Do not use scrolling tag at-all on the iframe and add the style as
style="overflow-x:hidden;overflow-y:auto;"
this will remove the horizontal scroll and it should work the other way round too.
<iframe> <body style="overflow-x: hidden"> </body> </iframe>
1.when you change iframe's scrolling yes or no, the iframe's scrollbar dosen't show immediately, you must refresh the iframe.
2.the html tap overflow in iframe colud influence the iframe's scrollbar
3.in the IE,you must clear iframe's src,then refresh iframe ,it will be work
4.so, show you the code
html
<iframe id="main_ifrm" class="main" frameborder="0" scrolling="no" src="new.html" ></iframe>
<button id="btn1">scrolling yes</button>
javascript
var ifrm = document.getElementById("main_ifrm");
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
$(ifrm).prop("scrolling","no");
$(ifrm.contentWindow.document).find("html").css("overflow","hidden")
var src = $(ifrm).prop("src");
$(ifrm).prop("src","");
$(ifrm).prop("src",src);
}
Related
I'm using a podsnack mp3 player. However, every page refresh, refreshes random numerical div ID codes such as id="cover#some-random-number#
So it'll show up like this
covercontainer80191
covercontainer36190
And so forth. What I wanted to do is a display:none to hide the cover side and just display the song titles instead. Is there a way to do this in the CSS?
The code I'm using is actually an <iframe/>.
<iframe style="border:none;margin-bottom: 5px" src="http://files.podsnack.com/iframe/embed.html?hash=ah3fblli&t=1369709402" width="425" height="320" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" ></iframe>
If it's in an iframe I don't think there's much you can do with only CSS. It's a separate document and won't inherit styles from the parent document.
However, in your case you can do a little trick to accomplish your goals. Wrap the iframe in another element with overflow:hidden, then position the iframe in a way that hides the unwanted content:
<div>
<iframe></iframe>
</div>
You'll have to tweak the numbers here, but this seemed good for your case:
div {
overflow:hidden;
width:199px;
height:260px;
position:relative;
}
iframe {
position:absolute;
top:-43px;
left:-200px
}
Demo, with just the playlist displayed: http://jsfiddle.net/sxyXF/
However, the "cover side" also contains the play button, so there's no way to play the tracks.
If i'm understanding your question you want to hide all of these instances...if that's the case you can do this in your CSS to hide them
div[class~="covercontainer"]{
display:none;
}
hi guys can i change the height of black box(black border in given image).
I read that it is control by fb.
I tried changing its height(320px) from firebug and it does in browser but i can't change in real css code.I even tried using dom method to access the div(class="_4s7c") in my case but failed.Is it really,we cant do anything about that.Please suggest me.Thanks
<style>
._4s7c{height:320px !important}
</style>
here is what i did in my view page
<div id="fb-root" style="background: #fff;"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>`<fb:like-box href="http://www.facebook.com/EverestWomenTreksdotcom/" width="200" show_faces="true" border_color="#FFFFFF" stream="false" header="false"></fb:like-box>
</div>
I have changed the iframe height but i need to change the height of the divs that comes insdie the frame.
Try this,
#facebookID iframe {
height:300px !important;
}
or
#facebookID iframe[style] {
height:300px !important;
}
change the "#facebookID" with your real id from the html code.
I want to display a google map in IFrame with scrollbar.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
A website
<br />
<iframe src="http://parkall.hu/teszt/parkolok/index.html"
style="overflow: scroll; width: 540px; height: 630px;"></iframe>
</body>
</html>
It works in the latest firefox (v17), but not in Chrome (v23), strangely enough Chrome displays scrollbars for a moment and hides after that. The scrollbar is still useable if you find out to grab an invisible thing....
Have you ever noticed this? Maybe it can be solved with a CSS but i was unable to find out, the scrolling="yes" attribute is not supported in HTML5. And of course if I change scr to wikipedia.org it displays scroll bar.
There is a decent chance that google maps tries to disable the scrollbar from its iframe with javascript. In that case you will need some javascript of your own to counter that a few seconds after pageload (by using setTimeout()).
What you need to change in your setTimeout depends on what is happening that hides the scrollbars. Since the example is not complete, I can't determine what happens exactly.
Please put your code in jsfiddle.net and reply with the link so we can check the exact problem.
I have a CSS class where I added a background image like this:
.my-class{
background-image: url(images/my-bg.png);
}
this applies fine and works properly in browsers, but when I see it in the iPad, the background image is not visible.
What could be the reason?
Without further information (i.e. how you're applying this class, and to which element), I can't help further. I can tell you however, that this snippet works just fine on desktop, iPhone and iPad:
<!DOCTYPE>
<html>
<head>
<style type="text/css">
.my-class{background-image: url(images/my-bg.png);}
</style>
</head>
<body class="my-class">
<p>Some content</p>
</body>
</html>
I've had the same problem and have managed to get a working solution using jQuery
$(document).ready(function () {
var buttonsFilename = '<%=ResolveUrl("~/Content/Images/Buttons.png") %>';
$('.commands .command').css({
background: 'url(' + buttonsFilename + ')',
width: '55px',
height: '55px',
display: 'inline-block'
});
});
I'm using this within an ASP.NET MVC website, hence the <% %> tag.
I could only get it to work using the background shortcut css property. I couldn't get any of the following to work ...
background-image
backgroundImage
'background-image'
... when using the object notation. Unfortunately that wipes out any other background settings you may have. But I got around that by using another piece of jQuery to set my background-position property.
I had this issue and finally after hours of apple bashing and toiling I made a div tag with an ID around my entire site. The iPad loves it :)
Problem solved.
CSS
<style type="text/css">
#bodybackground {
background:#999 url('http://mywebsite.com/images/background.jpg')
}
</style>
HTML
<div id="bodybackground">
entire site here
</div>
Add this meta tag to your page
<meta name = "viewport" content = "width = device-width, height = device-height"/>
I found that I was having the same problem, (ie: no background image shown on iPad specifically), the problem was the use of quotes, or lack thereof, when apostrophes were needed...
Problem (no apostrophes)
.my-class{background-image: url(images/my-bg.png);}
Fix (apostrophes added)
.my-class{background-image: url('images/my-bg.png');}
If you're saving the .png from photoshop, make sure you save it via 'save for web and devices' and select PNG24.
I need to load a page with an iframe in a way that its header is hidden. I tried the following but for some reason it isn't working:
<div style="width:945px; height:600px; overflow:hidden;">
<iframe src="innerpage.html"
frameborder="0"
height="700"
scrolling="no"
width="945"
style="top:-100px" />
</div>
What meder said is true, but it could also be that your style wouldn't do anything. You'll need to set position: absolute or position: static in order for top to have any impact.
This will just move the whole iframe up though, not the content within the iframe.
It isn't working because you can't style the inside of an iframe from the parent, without accessing the document inside whether from the parent's javascript, or a stylesheet inside the iframe assuming said iframe is on the same domain as yours.