[SOLVED] content not displayed completely in news module

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

[SOLVED] content not displayed completely in news module

Post 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
Attachments
news-01.jpg
news-02.jpg
Last edited by frankmanl on Wed Oct 24, 2012 3:54 am, edited 1 time in total.
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: content not displayed completely in news module

Post 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.
Top
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: content not displayed completely in news module

Post 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?
Top
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: content not displayed completely in news module

Post by Dr.CSS »

Why do you scroll the content instead of the page..?
Top
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: content not displayed completely in news module

Post 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.
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: content not displayed completely in news module

Post 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.
Top
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3497
Joined: Mon Nov 28, 2011 9:29 am

Re: content not displayed completely in news module

Post 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.
Top
User avatar
frankmanl
Power Poster
Power Poster
Posts: 425
Joined: Sat Jul 12, 2008 3:50 am

Re: content not displayed completely in news module

Post 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
Top
Post Reply

Return to “Layout and Design (CSS & HTML)”