0

I have been trying to debug a click on a thumbnail sized "jump map" initiating scrollTo on a large 8000x6000px full sized map (main_map) but it was not behaving and I become very confused so I went back to basics.

You will see below the setup is very simple, but when the page loads the first time I get the scrollbars as expected, however if I clear cache with Ctrl F5, thereafter I may or may not get them, and in fact I may or may not get the image appear, (sometimes just an apparently empty space) then after refresing once or twice they reappear. The patten seems random. In fact this behaviour seems the same on a refresh only.

I also discovered that if the main_map displays in part whilst the scrollbars remain invisable, turning on firebug and pressing the "Reload to see all sources" link forces the scrollabrs to reappear.

What am I not seeing?

for your info - Using the simplest method: 

$(document).ready(function() {
$(function()
{
    $('.scroll-pane').jScrollPane();
});
});

and the html part:

    <!-- Begin Column main -->
    <div id="column_main">
        <div class="scroll-pane">
            <img id="main_map" src="maps/map.bmp" />
        </div>
    </div>
    <!-- End Column Main-->
Man of One Way
  • 3,904
  • 1
  • 26
  • 41
Andrew Seabrook
  • 397
  • 2
  • 17
  • does the `.scroll-pane` have a height ? – Gabriele Petrioli Jul 25 '11 at 13:30
  • not sure if this is the issue but using `$(function(){});` inside `$(document).ready()` is redundant, they both do the same thing and may be stopping your code from executing. – Greg Guida Jul 25 '11 at 13:31
  • Yes set in css .scroll-pane { width: 100%; height: 460px; overflow: auto; } – Andrew Seabrook Jul 29 '11 at 20:40
  • On the function aspect inside doc ready aspect. Ineed to test this but have not had the time however being rather new to JQuery and even Javascript come to that - how would I declare the event process then for click on a button I am using:- $('#erode_btn').bind('click', function(event) { erodeMap(); }); using this kind of declaration at the present - does this hold good for 'scroll'? – Andrew Seabrook Jul 29 '11 at 20:46

1 Answers1

0

When you clear the cache and reload the page the images will be re downloaded and offcourse you will see some delay before the images are downloaded. The javascript you have in ready method is redundant use the below.

$(document).ready(function()
{
    $('.scroll-pane').jScrollPane();
});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • Didnt see this when I responded to the above comment of Greg Guida, and I guess it would answer my question therein, however stripping out function I then always get nothing returned!! I am assuming this method is not inhibited by the presence of other events and methods in the ready section as in the actual implementation it is not alone. – Andrew Seabrook Jul 29 '11 at 21:03