I have a problem with a custom scrollbar appearing twice in an iframe.
The scrollbar looks OK in IE, but not in Chrome, Firefox and Safari.
Here you can have a look to the page:
http://tenforty.ch/index.php/setlist
I have the following code in my iframe:
<style>
iframe {
overflow:hidden;
}
</style>
<iframe scrolling="no" width="690" height="680" frameborder="0"
src="templates/musicband/setlist.html"></iframe>
Here is the code in my html file:
<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane
{
width: 690px;
height: 680px;
overflow: hidden;
}
</style>
I tried out with different widths and hights, tried also 100%. But it looks even worse when changing this.
Here you can see a printscreen how it sould look like (taken in Internet Explorer):
http://www.tenforty.ch/scrollbar.jpg
Can you help me out?
Thanks!
Swiz
The reason you get two scrollbars is because the page you link to in the iframe (http://tenforty.ch/templates/musicband/setlist.html) is also creating a scrollbar:
$(function() {
$('.scroll-pane').jScrollPane();
});
Related
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
height: 250px;
width: 250px;
overflow: auto;
}
#content {
height: 800px;
width: 2000px;
background-color: coral;
}
</style>
</head>
<body>
<p>Scroll inside the div element to display the number of pixels the content of div is scrolled horizontally and vertically.</p>
<div id="myDIV">
<div id="content">Scroll inside me!</div>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener('scroll', function (e) {
alert("scroll");
});
document.getElementById("myDIV").addEventListener('click', function (e) {
alert("click");
});
</script>
Why its not working in IE I played this same code in w3 try it yourself page, it works in IE but not if I tried it as a separate file, so confused. Even if some one downvote this please tell me what I am missing?
I found these things when I browse other answers:
pointing to window.scroll but I need on a particular element
Use overflow-x: scroll; overflow-y: hidden; or vice versa.(which didn't work and also I need scroll on both ways)
NOTE:
This code works clearly in other browsers.
Its my bad. May be helpful for someone like me, Please enable scripting in your IE. :_(
A thing to note here is, Although script is not enabled it w3 school exercises exercises worked because of iframe?. If so how?
I'm using the Disqus comments plugin on my wordpress site on http://swiftcarbon.com/carocap-the-journey-thus-far/
As you can see it is using a much darker blue (rgb(0,0,238)) than the sites blue (##288ce4), for the underlines, and anchor tags.
I've read the documentation on https://help.disqus.com/customer/portal/articles/545277 , but according to this article Disqus should apply a black colour to those links, which I'd be happy with.
So far I've tried to override the style with !important to change the colour which didn't work. I've even tried, although I know it's a no-no, to inject styles using the Javascript on the $(window).load() method to ensure the Disqus section is loaded before the js runs.
css
#disqus_thread .publisher-anchor-color {
color: black !important;
}
js
$("#disqus_thread .publisher-anchor-color").css("color", "black !important");
or
$("#disqus_thread .publisher-anchor-color").removeClass("publisher-anchor-color);
Has anyone had a similar problem and managed to change the style.s
The disqus thread is get inside an iframe. You can't change the css of the frame content from the parent page. So this need to be resolved on disqus side - maybe there is an api option that you need to set.
Disqus link colors are inherited from your site's "a" defined color, change your css to define new link colors, and it will automatically pick it up
The final working solution :
<html>
<head>
<style>
#disqus_thread a {
color: red;
}
</style>
<script type='text/javascript'>
/* <![CDATA[ */
var embedVars = {
"disqusConfig":{"platform":"wordpress#4.3.1","language":""},
"disqusIdentifier":"5829 http:\/\/swiftcarbon.com\/?p=5829",
"disqusShortname":"swiftcarbon","disqusTitle":"CAROCAP: THE JOURNEY THUS FAR",
"disqusUrl":"http:\/\/swiftcarbon.com\/carocap-the-journey-thus-far\/",
"options":{"manualSync":false},"postId":"5829"};
/* ]]> */
</script>
<script type='text/javascript' src='http://swiftcarbon.com/wp-content/plugins/disqus-comment-system/media/js/disqus.js?ver=4.3.1'></script>
</head>
<body>
<div id="disqus_thread">
<iframe id="dsq-app1" name="dsq-app1" allowtransparency="true" frameborder="0" scrolling="no" tabindex="0" title="Disqus" width="100%" height="100%" src="http://disqus.com/embed/comments/?base=default&version=9c6bf8c60a74cf4ced706cfda8a939f7&f=swiftcarbon&t_i=5829%20http%3A%2F%2Fswiftcarbon.com%2F%3Fp%3D5829&t_u=http%3A%2F%2Fswiftcarbon.com%2Fcarocap-the-journey-thus-far%2F&t_e=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_d=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&t_t=CAROCAP%3A%20THE%20JOURNEY%20THUS%20FAR&s_o=default&l=" style="width: 100% !important; border: 1px solid red !important; overflow: hidden !important; height: 475px !important;" horizontalscrolling="no" verticalscrolling="no"></iframe>
</div>
</body>
</html>
**// UPDATED ** And the debug :
I am attempting to run some very simple Skrollr animations in an IFrame. When I populate the IFrame with the simple HTML Skrollr outputs the error to the console (in FireFox):
'Not well formed'
I have confirmed that the IFrame contents are correct and run just fine if they are not in an iframe and in a standard webpage. And I've confirmed that the Skrollr javascript file/s are loading successfully. All CSS, JS and images are all on the same domain as the parent webpage so there's no cross-domain occurring. The problem exhibits itself when the content is placed in an IFrame. Which makes me think this is a Cross-Scripting issue or that Skrollr is coded to detect cross-domain/cross-scripting?
Any idea's whats going wrong and how I can overcome this? I can provide a simple example if you wish. Hoping to grab Prinzhorn's attention, yes I know Skrollr's not currently maintained and that IFrame's are not officially supported but if I have an idea of whats going wrong or what the problem is I can fork Skrollr and add this functionality.
Edit: Heres a simple JSFiddle example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tasks</title>
<style>
#main-container {
width : 1200px;
height : 1000px;
background-color : #eee;
}
iframe {
width: 100%;
height: 100%;
overflow: scroll;
}
</style>
</head>
<body>
<div class="container text-center">
<button id="load-btn">Load Iframe</button>
<br/>
<div id="main-container" class="text-center">
<iframe id="mf-preview" frameborder="0"></iframe>
</div>
</div>
<!-- Javascript files -->
<script src="js/custom.js"></script>
</body>
</html>
everything is working brother
when the size of your iframe is more then 1000px then it will show the scroll bar
Like example :
<iframe id="mf-preview" src="http://onhax.net" frameborder="0"></iframe>
I have add the source of iframe which is larger then 1200px
and after add this like it will show the scroll bar
check it in JSFiddle
I have an issue. I'm using this plugin for custom scrollbars, and have set it up to show up in iframe but I can't scroll on neither the Y or X axis. The content just doesn't load. (?) I have used this example and set the height to 100%. This is what I got so far:
<div id="iframecontainer" style="height: 100%; position: relative; overflow-x:hidden;
overflow-y:hidden;">
<iframe src="http://imgur.com/a/LqmeJ?gallery" scrolling="no" width="1000" height="100%" frameborder="0"></iframe>
</div>
//I use this javascript code to run the scrollbar plugin.
//I also include its files in <head> tag.
<script type="text/javascript">
$(window).load(function(){
$('#iframecontainer').mCustomScrollbar({
theme:"minimal-dark", scrollInertia: 0, axis:"yx"
});
});
</script>
I found a workaround for now, I set height to 99999px and I can scroll websites endlessly, but that's okay, because everything else works. It seems that there is no other way to fix that.
I'm building my personal page, which is a computer with an iframe inside of it's screen with a dummy javascript terminal. My problem is that I can't get the iframe to scroll down while I keep writing on the terminal.
I've tried adding scrolling="yes" to the iframe and it doesn't work. I tried using $(document).scrollTop($(document).height()); in the iframed page and setting the height of the iframed page to 2000px... none of this worked.
This is the code of the page:
<html>
<head>
<style type="text/css">
body{
background-image:url('http://api.ning.com/files/B4MPF1W8yyhcpqgtcWbw-UuRX4aul676AQ0rB63HYNkXgQR06pGjZVwjKcwMxGgc/apple2c.big.jpg');
background-repeat:no-repeat;
}
#iframe {
position:relative;
padding-top:35px;
padding-left:144px;
}
</style>
</head>
<body>
<div id="iframe">
<iframe src="http://static.saezmedia.com/terminal/terminal/examples/rpc-demo.html" width="458" height="341" scrolling="auto"></iframe></div>
</body>
</html>
Thank you very much for your help.
In you main page: http://static.saezmedia.com/terminal/terminal/examples/rpc-demo.html you have the following css code:
jquery.terminal.css:13:
overflow:hidden;
this makes the scroll bar non visible. If you remove this the page is scrollable and then you have to automatically scroll to the bottom.
If you open it in another window, you won't be able to scroll it either.
That looks like an issue with the site.
However, you may be able to scroll it explicitly by fixing the width/height of the iframe and setting overflow auto on the containing div.