Double scrollbar with iframe
1,946 views
Skip to first unread message
Yvonne
Jul 22, 2011, 9:48:43 AM7/22/11
to jscrollpane
Hi,
I've been trying to get jScrollpane to work with an iframe, but I
can't get rid of the double scrollbar. And one of the two scrollbars
does get styled, but it's the wrong one.
I've looked over the code over and over again and just can't figure it
out.
I've set up this test site: http://back-to-reality.net/momac_test/test1.html
Hope you can help.
Cheers,
Yvonne
I've been trying to get jScrollpane to work with an iframe, but I
can't get rid of the double scrollbar. And one of the two scrollbars
does get styled, but it's the wrong one.
I've looked over the code over and over again and just can't figure it
out.
I've set up this test site: http://back-to-reality.net/momac_test/test1.html
Hope you can help.
Cheers,
Yvonne
Kalle Kärkkäinen
Jul 22, 2011, 9:56:25 AM7/22/11
to jscro...@googlegroups.com
Hi,
I was just trying this out today, and came up with this:
That scrolling="no" rids the scrollbar from the iframe. Then inside the frame you'd have a div with the required size. That div gets styled with jscrollpane. (you'd probably have to add the styling into the imported document, unless you are strictly in the same domain)
But yeah, that's the approach I did. If you can get the iframe to wrap the entire thing and put that inside a div, I guess that would work as well.
--
Kalle Kärkkäinen
--
You received this message because you are subscribed to the Google Groups "jscrollpane" group.
To post to this group, send email to jscro...@googlegroups.com.
To unsubscribe from this group, send email to jscrollpane...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jscrollpane?hl=en.
Yvonne
Jul 22, 2011, 10:12:16 AM7/22/11
to jscrollpane
Hi,
Thanks for your reply. The problem is that I don't have any control
over the loaded iframe. They are all external pages. So where
'scrolling="no" ' does get rid of one scrollbar, the scrollbar that is
left, isn't working properly, ie, it won't scroll the entire page.
Yvonne
On Jul 22, 3:56 pm, Kalle Kärkkäinen <kalle.karkkai...@me.com> wrote:
> Hi,
>
> I was just trying this out today, and came up with this:
>
> <iframe scrolling="no" src="…"/>
>
> That scrolling="no" rids the scrollbar from the iframe. Then inside the frame you'd have a div with the required size. That div gets styled with jscrollpane. (you'd probably have to add the styling into the imported document, unless you are strictly in the same domain)
>
> But yeah, that's the approach I did. If you can get the iframe to wrap the entire thing and put that inside a div, I guess that would work as well.
>
> --
> Kalle Kärkkäinen
>
> On perjantai 22. heinäkuuta 2011 at 16.48, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > I've been trying to get jScrollpane to work with an iframe, but I
> > can't get rid of the double scrollbar. And one of the two scrollbars
> > does get styled, but it's the wrong one.
>
> > I've looked over the code over and over again and just can't figure it
> > out.
>
> > I've set up this test site:http://back-to-reality.net/momac_test/test1.html
>
> > Hope you can help.
>
> > Cheers,
>
> > Yvonne
>
> > --
> > You received this message because you are subscribed to the Google Groups "jscrollpane" group.
> > To post to this group, send email to jscro...@googlegroups.com (mailto:jscro...@googlegroups.com).
> > To unsubscribe from this group, send email to jscrollpane...@googlegroups.com (mailto:jscrollpane...@googlegroups.com).
Thanks for your reply. The problem is that I don't have any control
over the loaded iframe. They are all external pages. So where
'scrolling="no" ' does get rid of one scrollbar, the scrollbar that is
left, isn't working properly, ie, it won't scroll the entire page.
Yvonne
On Jul 22, 3:56 pm, Kalle Kärkkäinen <kalle.karkkai...@me.com> wrote:
> Hi,
>
> I was just trying this out today, and came up with this:
>
> <iframe scrolling="no" src="…"/>
>
> That scrolling="no" rids the scrollbar from the iframe. Then inside the frame you'd have a div with the required size. That div gets styled with jscrollpane. (you'd probably have to add the styling into the imported document, unless you are strictly in the same domain)
>
> But yeah, that's the approach I did. If you can get the iframe to wrap the entire thing and put that inside a div, I guess that would work as well.
>
> --
> Kalle Kärkkäinen
>
> On perjantai 22. heinäkuuta 2011 at 16.48, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > I've been trying to get jScrollpane to work with an iframe, but I
> > can't get rid of the double scrollbar. And one of the two scrollbars
> > does get styled, but it's the wrong one.
>
> > I've looked over the code over and over again and just can't figure it
> > out.
>
> > I've set up this test site:http://back-to-reality.net/momac_test/test1.html
>
> > Hope you can help.
>
> > Cheers,
>
> > Yvonne
>
> > --
> > You received this message because you are subscribed to the Google Groups "jscrollpane" group.
> > To unsubscribe from this group, send email to jscrollpane...@googlegroups.com (mailto:jscrollpane...@googlegroups.com).
Kalle Kärkkäinen
Jul 22, 2011, 11:08:18 AM7/22/11
to jscro...@googlegroups.com
ok, what you'd need is a way to set the iframe height.
If you had any control over the content of the iframe, you could do it in a multitude of ways. Perhaps you could load the page into an offscreen div, get the height, put that height to the iframe, and then try to rock and roll.
I had this kind of test, and it works (as long as you know the height of the iframe).
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="jquery.mousewheel.js"></script>
<script type="text/javascript" src="jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#pane').jScrollPane();
});
</script>
</head>
<body>
<div id='pane' style="width:300px;height:400px;overflow:hidden;">
<iframe id="frame" frameborder=0 src='other.html' width='100%' height='1900px' scrolling="no"/>
</div>
</body>
</html>
The other.html is a lorem ipsum bit, about 1900px high at that width. The problem is that you can not access frame.document.body to get the height. If you can inject some javascript to the pages viewed, you could do this:
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
or this:
http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content
or
http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx (same message passing)
But as it is you are stuck with getting the height with some other means (if unable to inject content).
--
Kalle Kärkkäinen
To post to this group, send email to jscro...@googlegroups.com.
To unsubscribe from this group, send email to jscrollpane...@googlegroups.com.
Yvonne
Jul 25, 2011, 3:15:58 AM7/25/11
to jscrollpane
Hi Kalle,
Thanks for you help.
I tried your suggestion, but again, I don't have any control over the
page that is loaded. And the pages that will be loaded will be loaded
dynamically and all differ in height, so setting a fixed height won't
actually work. It's strange, because the example on the website seems
to work, but I can't get it to work.
Cheers,
Yvonne
> http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on...
>
> or
>
> http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx(same message passing)
Thanks for you help.
I tried your suggestion, but again, I don't have any control over the
page that is loaded. And the pages that will be loaded will be loaded
dynamically and all differ in height, so setting a fixed height won't
actually work. It's strange, because the example on the website seems
to work, but I can't get it to work.
Cheers,
Yvonne
>
> or
>
> http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx(same message passing)
>
> But as it is you are stuck with getting the height with some other means (if unable to inject content).
>
> --
> Kalle Kärkkäinen
>
> On perjantai 22. heinäkuuta 2011 at 17.12, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > Thanks for your reply. The problem is that I don't have any control
> > over the loaded iframe. They are all external pages. So where
> > 'scrolling="no" ' does get rid of one scrollbar, the scrollbar that is
> > left, isn't working properly, ie, it won't scroll the entire page.
>
> > Yvonne
>
> But as it is you are stuck with getting the height with some other means (if unable to inject content).
>
> --
> Kalle Kärkkäinen
>
> On perjantai 22. heinäkuuta 2011 at 17.12, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi,
>
> > Thanks for your reply. The problem is that I don't have any control
> > over the loaded iframe. They are all external pages. So where
> > 'scrolling="no" ' does get rid of one scrollbar, the scrollbar that is
> > left, isn't working properly, ie, it won't scroll the entire page.
>
> > Yvonne
>
Kalle Kärkkäinen
Jul 25, 2011, 3:34:24 AM7/25/11
to jscro...@googlegroups.com
Yvonne,
I don't think jscrollpane examples use an iframe. I suppose they do their thing inside a div, or some other tag, other than iframe.
The problem is that the size of the webpage in question should be known somehow. With divs this is easy, with iframes not so much. You can have the sort of communication loops if the page is from same domain. This would mean that you'd need a server side component that reroutes the data. This of course circumvents the idea of the frames protection.
Other than that: you can try to read the data with javascript and inject it into a div.
best of luck.
--
Kalle Kärkkäinen
To post to this group, send email to jscro...@googlegroups.com.
To unsubscribe from this group, send email to jscrollpane...@googlegroups.com.
Yvonne
Jul 25, 2011, 3:40:13 AM7/25/11
to jscrollpane
Actually, there is a jscrollpane example for iframes, hence me coming
in here for support: jscrollpane.kelvinluck.com/iframe2.html :)
But I'll see if I can find another way.
Thanks again.
On Jul 25, 9:34 am, Kalle Kärkkäinen <kalle.karkkai...@me.com> wrote:
> Yvonne,
>
> I don't think jscrollpane examples use an iframe. I suppose they do their thing inside a div, or some other tag, other than iframe.
>
> The problem is that the size of the webpage in question should be known somehow. With divs this is easy, with iframes not so much. You can have the sort of communication loops if the page is from same domain. This would mean that you'd need a server side component that reroutes the data. This of course circumvents the idea of the frames protection.
>
> Other than that: you can try to read the data with javascript and inject it into a div.
>
> best of luck.
>
> --
> Kalle Kärkkäinen
>
> On maanantai 25. heinäkuuta 2011 at 10.15, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi Kalle,
>
> > Thanks for you help.
>
> > I tried your suggestion, but again, I don't have any control over the
> > page that is loaded. And the pages that will be loaded will be loaded
> > dynamically and all differ in height, so setting a fixed height won't
> > actually work. It's strange, because the example on the website seems
> > to work, but I can't get it to work.
>
> > Cheers,
>
> > Yvonne
>
> > >http://geekswithblogs.net/rashid/archive/2007/01/13/103518.aspx(samemessage passing)
in here for support: jscrollpane.kelvinluck.com/iframe2.html :)
But I'll see if I can find another way.
Thanks again.
On Jul 25, 9:34 am, Kalle Kärkkäinen <kalle.karkkai...@me.com> wrote:
> Yvonne,
>
> I don't think jscrollpane examples use an iframe. I suppose they do their thing inside a div, or some other tag, other than iframe.
>
> The problem is that the size of the webpage in question should be known somehow. With divs this is easy, with iframes not so much. You can have the sort of communication loops if the page is from same domain. This would mean that you'd need a server side component that reroutes the data. This of course circumvents the idea of the frames protection.
>
> Other than that: you can try to read the data with javascript and inject it into a div.
>
> best of luck.
>
> --
> Kalle Kärkkäinen
>
> On maanantai 25. heinäkuuta 2011 at 10.15, Yvonne wrote:
>
>
>
>
>
>
>
> > Hi Kalle,
>
> > Thanks for you help.
>
> > I tried your suggestion, but again, I don't have any control over the
> > page that is loaded. And the pages that will be loaded will be loaded
> > dynamically and all differ in height, so setting a fixed height won't
> > actually work. It's strange, because the example on the website seems
> > to work, but I can't get it to work.
>
> > Cheers,
>
> > Yvonne
>
Kalle Kärkkäinen
Jul 25, 2011, 3:51:54 AM7/25/11
to jscro...@googlegroups.com
Oh, I totally missed those! :D
var doc = this.contentDocument || this.contentWindow.document;
as the doc is undefined, because of the security restrictions.
--
Kalle Kärkkäinen
To post to this group, send email to jscro...@googlegroups.com.
To unsubscribe from this group, send email to jscrollpane...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages