search

jQsafi / jscrollpane

Automatically exported from code.google.com/p/jscrollpane
0 stars 0 forks source link

jScrollPane Safari / Mac OS Bug - Scroll bar broken until refresh #60

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
What steps will reproduce the problem?

1. The scroll bar breaks, moving off screen to the right
2. Switch pages on the same site using the nav, scroll remains broken
3. Click refresh, the scroll bar is fixed (until you change page again a
few times)
4. Works fine in Firefox

What is the expected output? What do you see instead?

Expect the scroll to work as brilliantly as it usually does.

The scroll bar goes way of screen to the right, forcing horizontal scroll
bars along the bottom and the text to run off screen.

What version of the jScrollPane are you using? On what browser? And
operating system?

Mac OS X Version 10.5.6 and Safari Version 3.1.2

Breaks with all versions of jScrollPane and most recent

Please provide a URL to a page displaying the problem.

Visit http://s217147840.onlinehome.us/main/developer/

Please provide any additional information below.

Original issue reported on code.google.com by dom%studiojuice.com@gtempaccount.com on 13 Feb 2009 at 4:03

GoogleCodeExporter commented 9 years ago 
Kelvin,

I'm building a site on Wordpress which loads its own jQuery library in no 
conflict mode 
as referenced 
here:http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noCo
nflict_
wrappers.

I tried the following altered code but it didn't work and the scrollbars 
disappeared 
altogether. Any chance you can take a look and let me know if anything is off?

jQuery(window).bind(
    'load',
    function($) 
    {
        $('#pane1').jScrollPane();
        $('#pane2').jScrollPane();
        $('#pane3').jScrollPane();
    }
);

Thanks,
- John

Original comment by crackpixels on 7 Apr 2010 at 11:45

GoogleCodeExporter commented 9 years ago 
Below is the full head section of the website mentioned in the above reply. 
jScrollPane doesn't load at all and I can't figure out why. I would really 
appreciate 
any help with this.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; 
charset=<?
php bloginfo('charset'); ?>" />

<title><?php bloginfo('name'); ?><?php wp_title('»', true, 'left'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" 
type="text/css" 
media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/960.css" 
type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="shortcut icon" type="image/gif" href="/favicon.ico" />

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>
<?php wp_head(); ?>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?
>/scripts/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?
>/scripts/jquery.em.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?
>/scripts/jScrollPane.js"></script>
<script type="text/javascript">
jQuery(window).bind(
    'load',
    function($) 
    {
        $('#pane1').jScrollPane();
        $('#pane2').jScrollPane();
        $('#pane3').jScrollPane();
    }
);

jQuery(document).ready(function($) {
$('#tabs').tabs();
});
</script>

</head>

Original comment by crackpixels on 8 Apr 2010 at 12:22

GoogleCodeExporter commented 9 years ago 
hey.. 
I just changed the javascript file so that safari is excluded and uses the 
"normal"
scroll... at least it is displayed right although u don't have the nice design 
;) 

the JS file is attached.. 

katrin

Original comment by i...@netzhautflimmern.ch on 6 May 2010 at 9:37

Attachments:

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
This shouldn't be necessary. jScrollPane works fine with Safari... You have to 
make
sure that you include the CSS above the JS and use the latest jScrollPane code 
but
most people manage to get it working with that. If you have problems still then 
send
a link to your page online to the mailing list and we will try to help you:

http://groups.google.com/group/jscrollpane/

Original comment by kelvin.l...@gmail.com on 7 May 2010 at 8:32

GoogleCodeExporter commented 9 years ago 
This turned into a major problem for me on my current project in Safari/Chrome 
and Opera. In all three browsers the drag bar wouldn't appear. Non of the 
discussed workarounds fixed the problem. $drag[0] was always undefined. I did 
eventually figure out a fix though. DOM scripting...

I CHANGED

$container.append(
    $('<div></div>').attr({'className':'jScrollPaneTrack'}).css({'width':settings.scrollbarWidth+'px'}).append(
        $('<div></div>').attr({'className':'jScrollPaneDrag'}).css({'width':settings.scrollbarWidth+'px'}).append(
            $('<div></div>').attr({'className':'jScrollPaneDragTop'}).css({'width':settings.scrollbarWidth+'px'}),
            $('<div></div>').attr({'className':'jScrollPaneDragBottom'}).css({'width':settings.scrollbarWidth+'px'})
        )
    )
);

var $track = $('>.jScrollPaneTrack', $container);
var $drag = $('>.jScrollPaneTrack .jScrollPaneDrag', $container);

TO

// DOM Build Method - Start //
var docfrag = document.createDocumentFragment();

var spTrack = document.createElement("div");
spTrack.className = 'jScrollPaneTrack';
spTrack.style.width = settings.scrollbarWidth + 'px';

var spDrag = document.createElement("div");
spDrag.className = 'jScrollPaneDrag';
spDrag.style.width = settings.scrollbarWidth + 'px';

var spDragTop = document.createElement("div");
spDragTop.className = 'jScrollPaneDragTop';
spDragTop.style.width = settings.scrollbarWidth + 'px';

var spDragBottom = document.createElement("div");
spDragBottom.className = 'jScrollPaneDragTop';
spDragBottom.style.width = settings.scrollbarWidth + 'px';
spDrag.appendChild(spDragTop);
spDrag.appendChild(spDragBottom);
spTrack.appendChild(spDrag);
docfrag.appendChild(spTrack);

$container[0].appendChild(docfrag);
// DOM Build Method - End //

var $track = $('> .jScrollPaneTrack', $container);
var $drag = $(spDrag);

Once I did that it worked fine. No other work arounds needed. Seems that the 
HTML injected into page was not rendered fast enough for the normal selectors 
to access them. I also tried just

var $drag = $container.children().last().eq(0);

which did work in as much the bar was functional. But it wasn't styled 
properly. Maybe more can be done with that though. That was an after-though of 
my testing though as I was writing this.  O:-)

This was tested on OS X Snow Leopard with Firefox 3.6.8, Safari 5.0.1, Chrome 
5.0.375.55 and Opera 10.60. Also on WinXP (via VMware Fusion 3) with IE 8 and 
Safari 5.0, Chrome 5.0.375.125.

There is still a problem in Opera though where the scrollbar is much taller 
than it should be. Not sure why that is.

Original comment by Rune...@gmail.com on 7 Aug 2010 at 2:24

GoogleCodeExporter commented 9 years ago 
Got it working with jQuery only code as well.

var spTrack = 
$('<div></div>').attr({'className':'jScrollPaneTrack'}).css({'width':settings.sc
rollbarWidth+'px'});
var spDrag = 
$('<div></div>').attr({'className':'jScrollPaneDrag'}).css({'width':settings.scr
ollbarWidth+'px'})
    .append(
        $('<div></div>').attr({'className':'jScrollPaneDragTop'}).css({'width':settings.scrollbarWidth+'px'}),
        $('<div></div>').attr({'className':'jScrollPaneDragBottom'}).css({'width':settings.scrollbarWidth+'px'})
    );

spTrack.append(spDrag);
$container.append(spTrack);

Seems to just be the need to have a direct reference to the drag object instead 
of trying to select it out of the DOM.

Original comment by Rune...@gmail.com on 10 Aug 2010 at 10:23

GoogleCodeExporter commented 9 years ago 
Thanks for the update. It's very weird that you are seeing this issue - what 
versions of jquery and jscrollpane are you using? Do you have the CSS included 
above the JS? Are you initialising on document ready? Is your document in 
standards mode (e.g. with a DOCTYPE as the very first thing in the page)?

Original comment by kelvin.l...@gmail.com on 11 Aug 2010 at 7:39

GoogleCodeExporter commented 9 years ago 
The page uses

<!DOCTYPE html>

so should be in standards mode for HTML 5. Until I implemented the above fix I 
had the CSS for jScrollPane in the HTML header above the script tags. All other 
CSS was included via link tags also above the script tags. I had initially been 
using jQuery.ready(onReady) from the HTML header where onReady was a function 
in an external script file. But I also tried jQuery.load(onReady) and 
window.onload = onReady with the same results.

jQuery v1.4.2
jScrollPane v1.2.3
Browsers mentioned above on OS X Snow Leopard v10.6.4

And this happens weather I used the original jScrollPane or the one I modified 
for arrow grouping.

BTW, in Opera the scrollbar works but is way too tall. Everything injected has 
the height of the window. Even if I use window.onload to trigger onReady. 
Though that is likely a jQuery issue and not a jScrollPane one.

Original comment by Rune...@gmail.com on 11 Aug 2010 at 5:17

GoogleCodeExporter commented 9 years ago 
Very strange that you are running into those problems - pretty much the same 
setup works fine for me on my examples and the other pages I've implemented 
jScrollPane on. Do you see the problems on my example pages? Do you have a URL 
that I can see the problem on to see if I can see anything else going wrong?

I have a new version of jScrollPane which is nearly ready for release - I 
expect to get it out later this week. Hopefully that will help with this 
problem too...

Original comment by kelvin.l...@gmail.com on 11 Aug 2010 at 5:28

GoogleCodeExporter commented 9 years ago 
Your examples where fine in Safari with the exception that the scrollbars were 
double-wide for

http://www.kelvinluck.com/assets/jquery/jScrollPane/imagesExample.html
http://www.kelvinluck.com/assets/jquery/jScrollPane/jumpToExternalAnchorExample.
html#marker
http://www.kelvinluck.com/assets/jquery/jScrollPane/cap_examples.html #pane4 
only
http://www.kelvinluck.com/assets/jquery/jScrollPane/onImagesLoadExample.html

This was true for Opera as well. And in addition the window scrollbar would 
show when using the scrollbars for most examples except

http://www.kelvinluck.com/assets/jquery/jScrollPane/textSizeChange.html
http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html
http://www.kelvinluck.com/assets/jquery/jScrollPane/chat.html

Sorry, I can't show off the site in question yet. But I'm getting zero 
JavaScript, CSS or HTML errors (after my jScrollPane fixes) from any of the 
consoles/dev tools for all browsers tested.

Original comment by Rune...@gmail.com on 12 Aug 2010 at 2:09

GoogleCodeExporter commented 9 years ago 
The examples where the scrollbar is double wide is correct behaviour. If you 
look at all of those examples they have "scrollbarWidth: 20" in the 
initialisation script.

The windows scrollbars showing in Opera is a known problem and is related to an 
opera bug. You can work around it by using position: absolute on a parent of 
your jScrollPane if this problem effects your page: 
http://code.google.com/p/jscrollpane/issues/detail?id=19&can=1&q=opera

I'm still very confused as to why your pages are breaking while my example 
pages appear to work correctly. Did you implement anything strange in the CSS? 
Do you include the default CSS settings for jScrollPane?

Original comment by kelvin.l...@gmail.com on 12 Aug 2010 at 8:35

GoogleCodeExporter commented 9 years ago 
I have just announced the beta of a completely rewritten version of jScrollPane:

http://groups.google.com/group/jscrollpane/browse_thread/thread/c1bc1bf63e3f80d8

Please test and reply on the list if you are still having this issue,

Thanks,

Kelvin

Original comment by kelvin.l...@gmail.com on 17 Aug 2010 at 4:00

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Commented out the old CSS, JS includes and initialization code and added the 
new ones without modifying the CSS or anything. Scrollbars never show up. Or 
rather they seem to be outside the the viewport of the element they're 
scrolling.

Hm, more background info. As mentioned this is HTML 5, but not mentioned these 
are scrollbars specifically for div elements within section elements. The divs 
and sections all have fixed pixel width and 100% height. The divs are the width 
of the containing section minus side padding for the div. A reset CSS file 
based on the one from the Blueprint CSS framework is initially loaded to zero 
out borders, margins and padding on all elements including new HTML 5 elements.

Reviewing the Generated Source in Firefox it seems to be setting the 
jspContainer to the original innerWidth of the target div and jsPane to the 
target div's innerWidth minus the vertical scrollbar width and gutter. That 
would be fine but it doesn't take into account the 20px of padding on either 
side of the target div making the div roughly 20px wider than the viewport in 
Firefox and more in Safari and Opera.

Yes, changed

paneWidth = elem.innerWidth();

to

paneWidth = elem.width();

In both places in the plugin and now I can see the scrollbar... in Firefox 
only. Safari and Opera it's still too far off to the side. Also in Firefox the 
target div's padding is now pushing the scrollbar inwards away from the edge of 
the pane. Much closer to a final solution though.

BTW, nice arrow disabling when at either end of the track, arrow grouping and 
other feature implementation!  :D

Original comment by Rune...@gmail.com on 17 Aug 2010 at 11:47

GoogleCodeExporter commented 9 years ago 
I did some tweaking to the code and came up with a demo showing what I believe 
you describe:

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

(make sure to clear your cache as I had to update the js file). jScrollPane now 
takes into account padding on the original element. Let me know if that fixes 
your problem,

Cheers,

Kelvin :)

Original comment by kelvin.l...@gmail.com on 18 Aug 2010 at 11:28

GoogleCodeExporter commented 9 years ago 
Sorry, been trying to test but crazy busy. Unfortunately is doesn't work for me.

The demos work fine. Those all use divs though. That might be part of the 
problem, dunno. I have content divs inside HTML 5 sections. Also the sections 
are being animated with jQuery UI effect slide.

Works completely in Firefox, initially in IE7 and IE8 (within WinXP inside 
VMware Fusion) but secondary panels don't seem to initialize. In Safari, Chrome 
and Opera the sections seem to loose their padding and the scrollbars are so 
far off to the side that they aren't visible at all.  :(

Original comment by Rune...@gmail.com on 21 Aug 2010 at 2:35

GoogleCodeExporter commented 9 years ago 
No problem. It would be great if you could put together a stripped down test 
case and post it either to the mailing list [ 
http://groups.google.com/group/jscrollpane/ ] or the github issues list [ 
http://github.com/vitch/jScrollPane/issues ]. An example of a great test case 
is this one submitted on the list: 
http://www.lifford.org/exp/jscrollpane-reinit/

I'll be working on a fix for the problem above which may also fix your issue 
but it would be great to have an independent test case to make sure.

Thanks!

Kelvin :)

Original comment by kelvin.l...@gmail.com on 21 Aug 2010 at 9:22

GoogleCodeExporter commented 9 years ago 
hi, i've read all the comments on the safari problem but I still have the issue 
around.
http://www.dimitrinube.com/work/francescovanstraten_new5_firefox/

this is the site i'm working on. jscroll pane shoud be active on section2, 
section3 ( Stills, food, etc.)
shows up correctly only in firefox, not in safari ! i'm on mac.

Original comment by dimitri....@gmail.com on 26 Jun 2011 at 1:36

GoogleCodeExporter commented 9 years ago 
This is no longer the place to get support for jScrollPane. If you are still 
having problems please see:

http://jscrollpane.kelvinluck.com/#support

Original comment by kel...@lucklaboratories.com on 4 Jul 2011 at 3:41