Response title
This is preview!
Initializing problem with jScrollPane
in Using jQuery Plugins
•
11 years ago
Hello everybody,
because my last problem was quite hard to understand, here is a test site I set up to illustrate it.
Clicking on a picture should update the entire left DIV. The first time you click on a picture works well but repeating this process makes the "Bio" section disappear. This is definitely because of a wrong initialization of the jScrollPane plugin.
If you (re)load the website and click on Urkel at first you'll see the custom scrollbar.
So here's the buggy code for calling the hover and click events:
- $('div.artistImg a').hover(function(){
- var currArtist = $(this).parent().find('div.artistName');
- var clicked = $(currArtist).hasClass('artistActive');
- if(!clicked) $(currArtist).stop().css('top', '30px').show().animate({"top": "0px"}, "fast");
- },function(){
- //if(!$clicked) { $(currArtist).stop().css('display', 'block').css('top', '0px').animate({"top": "30px"}, "fast"); }
- }).bind('click',
- function(e)
- {
- $('div.artistActive').removeClass('artistActive');
- $(this).parent().find('div.artistName').addClass('artistActive');
- $('.artistWrap .artistDates').css('display', 'none');
- e.preventDefault();
- $("div.firstDates").hide().html($(this.hash).html()).fadeIn('slow');
- var api = $('.artistBio').jScrollPane(
- {
- showArrows:false,
- verticalGutter: '1',
- }
- );
- api.reinitialise();
- }
- );
Basically this code handles a hover animation and the click event. As you can see in the code it should also handle the mouse-out animation which also seems not to work.
Any help to get the initialization right would be appreciated (and if you get the mouse-out stuff working too you will be my hero).
1