reinitialise with ajax

[James]

Hi!

First, this is a great product thanks so much for creating it!

I have a scenario where I:
1. create a horizontal jScrollPane of thumbnails (list 1)
2. Use ajax to update to a fewer number of thumbs (list 2), no scroll
required, the scroll bar stays but is sized to list1.
a. if I go back to list1, the scroll bar works
3. If I use ajax again to create an empty list, the scroll bar
disappears
4. Create list1 again, there is no scroll bar, and I cannot bring it
back even if I call reinitialise() multiple times (even from js
console)

What I have found in the code is that there is an if statement on line
146 (github) which checks for some changes, if there are none, then it
returns. But, if the scroll bars are gone it never gets to line 195
to reinitialize the initialiseHorizontalScroll() given that all
dimensions stay the same. As a workaround I've forked the code and
created a new 'settings' variable and another if statement which will
ignore the if statement (line 146) to force a full reinitialise.
Ideally, I thought that if the code would test for scroll bar
existence against isScrollableH, isScrollableV would be a cleaner way
to do it, but it seemed like it would just execute most of the rest of
initialise anyway.

This also seems similar to issue #63. I would love to contribute to
the project or submit a pull request. This workaround seems to be a
bit of a blunt hammer approach tho, what do you think?

Thanks,
James

[Kelvin Luck]

Hi,

I'm not sure I completely follow the scenario you mention. Would be it
possible to put together an example showing it? That would help me to
visualise the problem and your solution.

A fork and a pull request on github is a great way to go - sometimes
it's easier to understand code than descriptions!

Thanks,

Kelvin :)

p.s. When you load new content into the scrollpane are you using the
.getContentPane() method to load it into the correct place?

[James]

Hi Kevin,

Yes I did use the .getContentPane() to do the ajax updating. I have
submitted a pull request to show you the code I changed. Essentially,
it seems certain ajax updates which affect the size of the scoll pane
(not the window) will not trigger a full reinitialise. The code is
somewhat of a manual override to that logic.

I am trying to setup a machine to serve this web app on a static ip
address but I ran into a few hickups. I'll see what I can do about
getting a test up to look at.

Thanks!
James

[James]

Here is the test link I can leave it up for the next few days:

http://128.32.145.16:3000/galleries/1/edit?describe_images=1

Scenario 1
-for the 'Earthquake' dropdown, click San Francisco,USA, and click
'Update'
-this should show 4 images which should not need to scroll, but the
scroll bar has not been updated, and has the track size from before
the update

Scenario 2
-for 'Earthquake' drop down click 'Reingerfort', and click update
-there result will be no images displayed, and the scroll bar
disappears
-Set 'Earthquake' back to the empty entry (first choice) and click
update again
-this should bring back a large set of images for which the scroll bar
is not available.

If I change the initialization command to include the new setting $
("#image_list").jScrollPane({ fullInitialise : true}) it will bypass
the width check in Inititalise() and cause a full reinitialise.

Hope this makes sense! and sorry for the slow download...

James

[Kelvin Luck]

Hi,

Thanks for the detailed example.

Weirdly it seems to work for me correctly (but intermittently) in
Firefox and Chrome. But sometimes I do see what you describe below.

Looking at the jScrollPane code it looks like I'm not setting
contentWidth/height before checking it (so "previousContentWidth ==
contentWidth" will always be true). This seems to be to be the cause of
the bug you are seeing but I will have to investigate further to see why
the order of the code is as it is... It may be a bug I introduced in
https://github.com/vitch/jScrollPane/commit/f9187640b489620630bdae047b4df8a2535a3fcb

You could see if you have the problem with beta 9 (
https://github.com/vitch/jScrollPane/commits/2.0.0beta9 ) which has
different code for calculating the width... Although from a quick look
it looks like the order is the same...

I'll investigate further when I get a chance and will let you know how
it turns out,

Cheers,

Kelvin :)

[Pash]

Mhhh, got the same Problem with ajax and the size of the Scrollpane:

Im using this part of code:


var XXX="";
$.ajax({type: "POST",url:'php/portfolio.php',data:{count :
sCount,portfolio : content, action : 'portfolio'},
success:function(data) {
if(!data.error) {
XXX=eval(data.data);
}
},
dataType:'json',
async:false
});

$mbContentItems.eq(pos).show().children('.mb_content_inner');
console.log("XXX: "+XXX)

var pane =
$mbContentItems.eq(pos).show().children('.mb_content_inner');
pane.jScrollPane();
var api = pane.data('jsp');

$.each(XXX,function() {
imgPortf=this["img"];
api.getContentPane().children('#mb_imagelist_'+content).append('<li>
<div id="li_' + content + '"><img src="portfolio/' +content+'/slide/'
+ imgPortf + '.jpg"/> <div class="vote" id="'+"v_"+imgPortf+'">/
'+thousandSep(this["anz"])+'</div> <div id="' + imgPortf + '"
class="jRating" data-id="' + imgPortf + '" data-anz="' + this["anz"] +
'" data-score="' + this["score"] + '" data-porto="' + content + '" ></
li>');
api.reinitialise();
$("#"+imgPortf).jRating({
length: 5,
rateMax: 5,
step: true,
showRateInfo: false,
bigStarsPath: 'images/stars.png',
smallStarsPath: 'images/stars.png',
onError: function() {
alert("Bewertung konnte nicht gespeichert werden.\nAdministrator
wurde verständigt.");
}
});
});

1.st I make an ajax call to get my array, then I through it an append
the LI to my HTML Code:

<div id="portrait" class="mb_content" data="portfolio" data-
count="999" data-recev="no">
<h2>
Portrait
</h2>
<div class="mb_content_inner">
<ul id="mb_imagelist_portrait" class="mb_imagelist">
</ul>
</div>
</div>


First I got everything in the success part of ajax, then I moved
everything outside the ajax to check for bugs, but it was the same.

The Problem is, that sometime JSP wont get the right size of the UL
List, and only shows e.g. 12 out of 20 LI's in the UL. (

Thanks for help and when something is unclear I will explain
further. :O)

PS: Im using jquery.jscrollpane.2.0.0b11

[Kelvin Luck]

It looks like there are images inside your scrollpane. Are you giving
them an explicit height in the CSS? If not then you will need to
reinitialise once the images have loaded:

http://jscrollpane.kelvinluck.com/image.html

[James]

Hi Kevin,

I swapped in Beta9 to see if it would make a difference and also found
the results to be somewhat intermittent, but mostly I'm able to
reproduce the missing scroll bar using the same method.

Do you think it would make sense to put this block below ahead of the
return statement and check if a scroll bar exists? If its not there
and it should be, then bypass the return statement and do a full
reinitialise.
pane.css('overflow', 'auto');
if (s.contentWidth) {
contentWidth = s.contentWidth;
} else {
contentWidth = pane[0].scrollWidth;
}
contentHeight = pane[0].scrollHeight;
pane.css('overflow', '');
percentInViewH = contentWidth / paneWidth;
percentInViewV = contentHeight / paneHeight;
isScrollableV = percentInViewV > 1;
isScrollableH = percentInViewH > 1;

Anyway, I'll stay tuned,

James

[dj...@gmx.ch]

Hi thanks for your response,

ok, now I did a reinitialise on onLoad of the img, sometimes it works sometimes not. So I also wrote the height and width into the img tag and now I think it looks good.

I'll be back if not. :O)

PS: Here you can see your scrollpane work:

www.dirkschmitz.de/beta.php

Thank you for this great Plugin.

> --
> 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.
>

--
dj...@gmx.ch <dj...@gmx.ch>