Page 1 of 1
[SOLVED] content not displayed completely in news module
Posted: Sat Oct 13, 2012 11:54 am
by frankmanl
http://www.alertgroepen.nl/news/65/108/ ... euwspagina
When using i.e. Chrome the last lines of this page are:
(...) hebben en veroorzaakt – onzichtbaar, buiten beeld, op de achtergrond – ziekte, ellende, dood en milieuvernietiging.
As you can see (image 1) it is impossible to scroll down from here, although there is more content.
But when selecting part of the text it suddenly is possible to select also the last part of the content, which was not displayed before (image 2).
Why is this last part of the content not displayed right away?
I suspect it's got something to do with css definitions, but can't find out which.
There are two max-heigth definitions in the stylesheet, but changing these makes no difference.
Frank
Re: content not displayed completely in news module
Posted: Tue Oct 16, 2012 9:30 pm
by velden
Maybe a timing issue? jScrollPane calculating faster than everything is loaded (images perhaps).
Why do I think that? Because (using Firefox) after a normal refresh (F5) it works. But when refreshing with shift-F5 it's broken again.
Have a look at the reinitialise function of the scrollpane Javascript. Maybe you can call that after all images are loaded.
Re: content not displayed completely in news module
Posted: Tue Oct 23, 2012 3:43 am
by frankmanl
I call all jQuery code by using a GCB.
That GCB was put in the <head> of my template.
I moved the GCB to just before the <__body> tag. The jQuery functionality still works, but in Chrome I still have the same problem.
Without jQuery the problem is solved, so it seems it indeed is caused by jQuery, somehow.
Any other suggestion how to solve this?
Re: content not displayed completely in news module
Posted: Tue Oct 23, 2012 5:46 pm
by Dr.CSS
Why do you scroll the content instead of the page..?
Re: content not displayed completely in news module
Posted: Tue Oct 23, 2012 6:16 pm
by frankmanl
@Dr.CSS - We want to keep the image in the left column in a fixed place and have the content scroll along it.
This way the site is (on a big screen) always displayed as a white rectangle of fixed size.
Re: content not displayed completely in news module
Posted: Tue Oct 23, 2012 6:52 pm
by velden
http://api.jquery.com/load-event/
is different from .ready function. You might want to use both, and use .load() for reinitialize the scrollbar.
Also read the caveats.
Re: content not displayed completely in news module
Posted: Tue Oct 23, 2012 7:40 pm
by velden
I'm pretty sure it has to do with the images and I'm 100% sure it's because of jScrollpane.
Have a try with .load as mentioned above and call
Code: Select all
$('.scroll-pane').data('jsp').reinitialise()
It might also help to supply a width and height attribute for all images in the news article. It helps the browser to 'know' how large those image will be (else it has to wait until they are actually loaded).
What now happens is that the scrollPane is set and after that those image are loaded and displayed. Those image make the content a little bit larger but the scrollPane is not aware of that. You should make it aware by reinitialising.
Re: content not displayed completely in news module
Posted: Wed Oct 24, 2012 3:54 am
by frankmanl
There was 1 image without width and height. When I added those attributes the problem was solved.
I also had a look at the jScrollPane function. Changing that from
Code: Select all
$(function()
{$('.scroll-pane').jScrollPane();});
to
Code: Select all
$(window).load(function()
{$('.scroll-pane').jScrollPane();});
also solved the problem, even when I did not specify the width and height of that one image.
Thanks for your replies.
Frank