I'm experiencing some strange behavior with a jQuery plugin that I wrote. Basically, the plugin makes a sidebar element stick to the top of the browser window when scrolling through the blog post that the sidebar belongs to. This should only happen when the window reaches a certain size (768px) or above (the plugin detects this by checking the float style of the sidebar).
Everything works as expected...until you resize the browser from large -- sidebar is sticky -- to small -- sidebar should not be sticky. My onResize function supposedly removes the scroll event handler and only adds it back if the startQuery is true (so, if the sidebar float value is something other than none). I've double and triple checked through the console: everything is working correctly as far as I can tell. I even added console.log('scroll') to the onScroll function and it doesn't show up when the event handler is supposed to be removed, but my sidebar is still turning sticky when I scroll through the blog posts.
You can see the problem in action here. To recreate the steps:
Resize your browser window to less than 768px wide and visit the page. See that the .share-bar element inside each blog post does not move as you scroll. 'scroll' is not logged in the console.
Resize your browser window to 768px or larger. See that the .share-bar element becomes sticky as you scroll through each blog post, then sticks to the bottom of the post as you scroll past it. 'scroll' is logged in the console.
Resize your browser window to less than 768px. See that the .share-bar element becomes sticky as you scroll through each blog post. 'scroll' is not logged in the console.
It's almost as if the event handler is removed, but the elements aren't updating or something. I'm sure I'm missing something fundamental, but I've researched and tried all sorts of fixes for $(window).scroll event problems and none of them are working here.
My call to plugin:
$('.share-bar').stickySides({
'wrapper': '.post-wrapper',
'content': '.entry-content' });
Plugin code:
;( function ( $, window, document, undefined ) {
var settings;
var throttled;
$.fn.stickySides = function( options ) {
settings = $.extend( {}, $.fn.stickySides.defaults, options );
// Store sidebars
settings.selector = this.selector;
settings.startQuery = '$("' + settings.selector + '").css(\'float\') != \'none\'';
// Create debounced resize function
var debounced = _.debounce( $.fn.stickySides.onResize, settings.wait );
$(window).resize( debounced );
// Create throttled scroll function
throttled = _.throttle( $.fn.stickySides.onScroll, settings.wait );
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$(window).on( 'scroll.stickySides', throttled );
}
return this;
};
// Define default settings
$.fn.stickySides.defaults = {
wrapper: 'body',
content: '.content',
wait: 100,
startQuery: ''
};
$.fn.stickySides.onResize = function ( ) {
$(window).off( 'scroll.stickySides' );
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$(window).on( 'scroll.stickySides', throttled );
} else {
var sides = $(settings.selector);
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
if ( elem.css('position') == 'fixed' || elem.css('position') == 'absolute' ) {
elem.css( 'position', 'static' );
}
if ( content.css('margin-left') != '0px' ) {
content.css( 'margin-left', 0 );
}
});
}
};
$.fn.stickySides.onScroll = function ( ) {
console.log('scroll');
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Only continue if the wrapper is taller than the sidebar
if ( elemHeight >= wrapperHeight ) {
return;
} else {
var wrapperFracs = wrapper.fracs(function (fracs) {
// Only continue if the wrapper is in view
if ( fracs.visible == 0 ) {
return;
} else {
// Check if the wrapper extends beyond the top of
// the viewport
var wrapperSpaceTop = fracs.rects.element.top;
// If it does, change sidebar position as appropriate
if ( wrapperSpaceTop > 0 ) {
var visibleWrapper = fracs.rects.document.height;
// If the visible portion of the wrapper is smaller
// than the height of the sidebar...
if ( visibleWrapper <= elemHeight ) {
// ...position the sidebar at the bottom
// of the wrapper
if ( wrapperSpaceTop != 0 ) {
elem.css('position', 'absolute').css( 'top', (wrapperHeight - elemHeight) + content.position().top + 'px' );
}
// Otherwise, move sidebar to appropriate position
} else {
elem.css('position', 'fixed').css('top', 0);
}
content.css('margin-left', elem.outerWidth());
} else {
elem.css('position', 'static');
content.css('margin-left', 0);
}
}
});
}
});
};
} )( jQuery, window, document );
PS: I would use an existing plugin, but I didn't see one that got really close to the functionality I need here; feel free to point one out if you know of one. I haven't tested outside of Mac yet. And yes, I know some of the page elements don't flow very well on mobile -- ex: site header & nav -- and there are some other missing items unrelated to this problem. I'm waiting for some feedback from my client before I can address that.
Happens every time. Shortly after I ask for help, I figure it out on my own. ;)
The problem was in the fracs function inside the onScroll function. I didn't realize it called its own resize/scroll handlers, so those weren't getting unbound when I removed my scroll handler. I just reworked the plugin to take advantage of the fracs library's handlers instead of calling my own scroll handler:
;( function ( $, window, document, undefined ) {
var settings;
var throttled;
$.fn.stickySides = function( options ) {
settings = $.extend( {}, $.fn.stickySides.defaults, options );
// Store sidebars
settings.selector = this.selector;
settings.startQuery = '$("' + settings.selector + '").css(\'float\') != \'none\'';
if ( eval( settings.startQuery ) == true ) {
$.fn.stickySides.doFracs();
}
// Create debounced resize function
var debounced = _.debounce( $.fn.stickySides.onResize, settings.wait );
$(window).resize( debounced );
return this;
};
// Define default settings
$.fn.stickySides.defaults = {
wrapper: 'body',
content: '.content',
wait: 100,
startQuery: ''
};
$.fn.stickySides.doFracs = function ( ) {
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Only continue if the wrapper is taller than the sidebar
if ( elemHeight >= wrapperHeight ) {
return;
} else {
var wrapperFracs = wrapper.fracs( $.fn.stickySides.fracsCallback );
}
});
}
$.fn.stickySides.unbindFracs = function ( ) {
var sides = $(settings.selector);
// Check each sidebar
sides.each ( function () {
var elem = $(this);
var content = elem.siblings( settings.content );
var wrapper = elem.closest( settings.wrapper );
if ( elem.css('position') == 'fixed' || elem.css('position') == 'absolute' ) {
elem.css( 'position', 'static' );
}
if ( content.css('margin-left') != '0px' ) {
content.css( 'margin-left', 0 );
}
wrapper.fracs('unbind');
});
}
$.fn.stickySides.fracsCallback = function ( fracs ) {
// Only continue if the wrapper is in view
if ( fracs.visible == 0 ) {
return;
} else {
var wrapper = $(this);
var elem = wrapper.find(settings.selector);
var content = elem.siblings( settings.content );
var elemHeight = elem.height();
var wrapperHeight = wrapper.height();
// Check if the wrapper extends beyond the top of
// the viewport
var wrapperSpaceTop = fracs.rects.element.top;
// If it does, change sidebar position as appropriate
if ( wrapperSpaceTop > 0 ) {
var visibleWrapper = fracs.rects.document.height;
// If the visible portion of the wrapper is smaller
// than the height of the sidebar...
if ( visibleWrapper <= elemHeight ) {
// ...position the sidebar at the bottom
// of the wrapper
if ( wrapperSpaceTop != 0 ) {
elem.css('position', 'absolute').css( 'top', (wrapperHeight - elemHeight) + content.position().top + 'px' );
}
// Otherwise, move sidebar to appropriate position
} else {
elem.css('position', 'fixed').css('top', 0);
}
content.css('margin-left', elem.outerWidth());
} else {
elem.css('position', 'static');
content.css('margin-left', 0);
}
}
}
$.fn.stickySides.onResize = function ( ) {
// Only continue if the start query is true
if ( eval(settings.startQuery) == true ) {
$.fn.stickySides.doFracs();
} else {
$.fn.stickySides.unbindFracs();
}
};
} )( jQuery, window, document );
Voila! Problem solved.
Related
I'm trying to migrate some jQuery code to pure JavaScript. The current jQuery code toggles a class named is-page-scrolled in the body element when the user scrolls down to a specific offset set in a data attribute in the body element named data-page-scrolled-offset. If the user scrolls up again to the top of the page, the class is toggled off.
My working jQuery code:
var scrolled_page_offset = parseInt( $( 'body' ).data( 'pageScrolledOffset' ) );
var scrolled_page = function() {
var scroll_top = window.pageYOffset;
$( 'body' ).toggleClass( 'is-page-scrolled', scroll_top > scrolled_page_offset );
};
$( window ).on( 'scroll', function() {
scrolled_page();
} );
scrolled_page();
My non-working pure JavaScript code:
var scrolled_page_offset = parseInt( document.body.dataset.pageScrolledOffset );
var scrolled_page = function() {
var scroll_top = window.pageYOffset;
if ( scroll_top > scrolled_page_offset ) {
document.body.classList.toggle( 'is-page-scrolled' );
}
};
window.addEventListener( 'scroll', function() {
scrolled_page();
} );
scrolled_page();
My proposed pure Javascript code is not working as expected because it toggles the class on and off intermittently when the user scrolls down in the page.
What am I doing wrong?
Explanation of the current problem, copied from my comment:
jQuery's toggleClass() is setting the class on/off based on the
scroll_top > scrolled_page_offset. Your if + toggle() is
inverting the on/off state of the class every time scroll_top > scrolled_page_offset is true.
If we compare "does the class exist" to "do we want the class to exist", we avoid accidentally inverting the state of the class.
If this example I've added:
const isEnabled = document.body.classList.contains(className)
const shouldBeEnabled = scroll_top > scrolled_page_offset
if (shouldBeEnabled !== isEnabled) { ... }
Which will only run the if when we expect the class to change.
(In this demo, the background turns green to show when the class is added)
// Set up the demo, ignore this
document.body.dataset.pageScrolledOffset = 200;
//
const className = 'is-page-scrolled'
const scrolled_page_offset = parseInt(document.body.dataset.pageScrolledOffset);
const scrolled_page = function() {
const scroll_top = window.pageYOffset;
const isEnabled = document.body.classList.contains(className)
const shouldBeEnabled = scroll_top > scrolled_page_offset
if (shouldBeEnabled !== isEnabled) {
document.body.classList.toggle(className);
}
};
window.addEventListener('scroll', function() {
scrolled_page();
});
scrolled_page();
#scrollable {
height: 10000px;
}
.is-page-scrolled {
background: #060;
}
<div id="scrollable">
Scroll down
</div>
I'm trying to capture all images in an HTML page using Javascript. I found this similar question, the best answer to which gives in excellent detail a solution to the problem:
Detect all images with Javascript in an html page
My question is that I can't get the code shown in the best answer to run without error - even when I copy/paste directly into the Firefox console. I suspect the answer is straightforward, though it's had me scratching my head for hours - is anyone able to help please?
This code gives me the error "SyntaxError: missing ) after argument list"...
var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
var style = window.getComputedStyle( el, false );
if ( style.backgroundImage != "none" ) {
images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "")
}
}
The full solution, which seems to include the above, also appears to give the same error...
var images = [],
bg_images = [],
image_parents = [];
document.addEventListener('DOMContentLoaded', function () {
var body = document.body;
var elements = document.body.getElementsByTagName("*");
/* When the DOM is ready find all the images and background images
initially loaded */
Array.prototype.forEach.call( elements, function ( el ) {
var style = window.getComputedStyle( el, false );
if ( el.tagName === "IMG" ) {
images.push( el.src ); // save image src
image_parents.push( el.parentNode ); // save image parent
} else if ( style.backgroundImage != "none" ) {
bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
}
}
/* MutationObserver callback to add images when the body changes */
var callback = function( mutationsList, observer ){
for( var mutation of mutationsList ) {
if ( mutation.type == 'childList' ) {
Array.prototype.forEach.call( mutation.target.children, function ( child ) {
var style = child.currentStyle || window.getComputedStyle(child, false);
if ( child.tagName === "IMG" ) {
images.push( child.src ); // save image src
image_parents.push( child.parentNode ); // save image parent
} else if ( style.backgroundImage != "none" ) {
bg_images.push( style.backgroundImage.slice( 4, -1 ).replace(/['"]/g, "") // save background image url
}
} );
}
}
}
var observer = new MutationObserver( callback );
var config = { characterData: true,
attributes: false,
childList: true,
subtree: true };
observer.observe( body, config );
});
Thank you.
You're missing some closing parentheses on the images.push() line and the last line.
Not sure if this will make your code do what you ultimately want it to do, but it will at least not cause a syntax error.
var elements = document.body.getElementsByTagName("*");
Array.prototype.forEach.call( elements, function ( el ) {
var style = window.getComputedStyle( el, false );
if ( style.backgroundImage != "none" ) {
images.push(style.backgroundImage.slice(4, -1).replace(/['"]/g, ""));
}
});
Hye,
Just a newbie trying to get something done and out of idea's I have a ul that is marqued from jquery function its marqueed left that means its sliding left what I want to do is to make it slide top
i Have made a working fiddle here
http://jsfiddle.net/arafays/wnXh8/
(function($)
{
var methods =
{
init : function( options )
{
return this.each(function()
{
var _this=$(this);
_this.data('marquee',options);
var _li=$('>li',_this);
_this.wrap('<div class="slide_container"></div>')
.height(_this.height())
.hover(function(){if($(this).data('marquee').stop){$(this).stop(true,false);}},
function(){if($(this).data('marquee').stop){$(this).marquee('slide');}})
.parent()
.css({position:'relative',overflow:'hidden','height':$('>li',_this).height()})
.find('>ul')
.css({width:screen.width*2,position:'relative'});
for(var i=0;i<Math.ceil((screen.width*3)/_this.width());++i)
{
_this.append(_li.clone());
}
_this.marquee('slide');});
},
slide:function()
{
var $this=this;
$this.animate({'left':$('>li',$this).width()*-1},
$this.data('marquee').duration,
'swing',
function()
{
$this.css('left',0).append($('>li:first',$this));
$this.delay($this.data('marquee').delay).marquee('slide');
}
);
}
};
$.fn.marquee = function(m)
{
var settings={
'delay':4000,
'duration':2000,
'stop':true
};
if(typeof m === 'object' || ! m)
{
if(m){
$.extend( settings, m );
}
return methods.init.apply( this, [settings] );
}
else
{
return methods[m].apply( this);
}
};
}
)( jQuery );
jQuery(document).ready(
function(){jQuery('.some ul').marquee({delay:3000});}
);
I just want to make it slide up instead of sliding left I tried making append top and doing some other some stuff but its making full ul slide up leaving blank space
Like this?
http://jsfiddle.net/wnXh8/5/
$this.animate({'top':$('>li',$this).height()*-1},
$this.data('marquee').duration,
'swing',
function()
{
$this.css('top',0).append($('>li:first',$this));
$this.delay($this.data('marquee').delay).marquee('slide');
}
);
In drupal i have generated a list where each item is a fieldset with collapsible, that can contain extra information.
Because of the rather large list i want to avoid loading the extra information until a user clicks on the fieldset.
Best case scenario:
User clicks on collapsed fieldset.
Fieldset loads extra information.
Fieldset uncollapses.
I've copied and loaded the copy of collapse.js into my form, but I'm very new to js and jQuery, so I'm a little lost. If someone can show me how to call a function the first time the fieldset is expanded, I'm sure i can figure out the rest.
I've included the code from collapse.js:
(function ($) {
//Toggle the visibility of a fieldset using smooth animations.
Drupal.toggleFieldset = function (fieldset) {
var $fieldset = $(fieldset);
if ($fieldset.is('.collapsed')) {
var $content = $('> .fieldset-wrapper', fieldset).hide();
$fieldset
.removeClass('collapsed')
.trigger({ type: 'collapsed', value: false })
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Hide'));
$content.slideDown({
duration: 'fast',
easing: 'linear',
complete: function () {
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
},
step: function () {
// Scroll the fieldset into view.
Drupal.collapseScrollIntoView(fieldset);
}
});
}
else {
$fieldset.trigger({ type: 'collapsed', value: true });
$('> .fieldset-wrapper', fieldset).slideUp('fast', function () {
$fieldset
.addClass('collapsed')
.find('> legend span.fieldset-legend-prefix').html(Drupal.t('Show'));
fieldset.animating = false;
});
}
};
//Scroll a given fieldset into view as much as possible.
Drupal.collapseScrollIntoView = function (node) {
var h = document.documentElement.clientHeight || document.body.clientHeight || 0;
var offset = document.documentElement.scrollTop || document.body.scrollTop || 0;
var posY = $(node).offset().top;
var fudge = 55;
if (posY + node.offsetHeight + fudge > h + offset) {
if (node.offsetHeight > h) {
window.scrollTo(0, posY);
}
else {
window.scrollTo(0, posY + node.offsetHeight - h + fudge);
}
}
};
Drupal.behaviors.collapse = {
attach: function (context, settings) {
$('fieldset.collapsible', context).once('collapse', function () {
var $fieldset = $(this);
// Expand fieldset if there are errors inside, or if it contains an
// element that is targeted by the uri fragment identifier.
var anchor = location.hash && location.hash != '#' ? ', ' + location.hash : '';
if ($('.error' + anchor, $fieldset).length) {
$fieldset.removeClass('collapsed');
}
var summary = $('<span class="summary"></span>');
$fieldset.
bind('summaryUpdated', function () {
var text = $.trim($fieldset.drupalGetSummary());
summary.html(text ? ' (' + text + ')' : '');
})
.trigger('summaryUpdated');
// Turn the legend into a clickable link, but retain span.fieldset-legend
// for CSS positioning.
var $legend = $('> legend .fieldset-legend', this);
$('<span class="fieldset-legend-prefix element-invisible"></span>')
.append($fieldset.hasClass('collapsed') ? Drupal.t('Show') : Drupal.t('Hide'))
.prependTo($legend)
.after(' ');
// .wrapInner() does not retain bound events.
var $link = $('<a class="fieldset-title" href="#"></a>')
.prepend($legend.contents())
.appendTo($legend)
.click(function () {
var fieldset = $fieldset.get(0);
// Don't animate multiple times.
if (!fieldset.animating) {
fieldset.animating = true;
Drupal.toggleFieldset(fieldset);
}
return false;
});
$legend.append(summary);
});
}
};
})(jQuery);
It looks to me like you'd have to override the whole Drupal.toggleFieldset function (just like when you are overriding a Drupal theme function.
You could perhaps add a class to the fieldset in FormAPI then catch it in the complete function of the $content.slideDown params and fire a custom function of yours, to add a 'loading' graphic and make your ajax request.
I'm assuming from your question that you are familiar enough with FormAPI/jQuery.ajax() to have a go. But let me know if not and i'll include some snippets
EDIT
Here is some example code, it'd take a quite a while to setup a test environment for this, so it'just a pointer (cant create a JS fiddle for this ;))
You might add your fieldset like this in PHP
$form['my_fieldset'] = array(
'#type' = 'fieldset',
'#title' = t('My fieldset'),
'#collapsible' = true,
'#collapsed' = true,
'#attributes' => array(
'class' => array('ajax-fieldset'),
'rel' => 'callback/url/path' // random attribute to store the link to a menu path that will return your HTML
)
);
$form['my_fieldset'] = array(
'#markup' => '<div class="response">loading...</div>'
);
You'll also obviously have setup a menu hook returning your themed data # callback/url/path. IMO it's better to return JSON data and theme them in with JS templating, but the Drupal way (for the moment at least) seems to be to render HTML in the menu hook callback function.
Then here is the JS. I've only included the altered complete function, rather than reproduce what you pasted. Add the complete function in to a copy of the code the re-specify the core Drupal function in your own JS file
$content.slideDown({
complete: function () {
Drupal.collapseScrollIntoView(fieldset);
fieldset.animating = false;
if($fieldset.hasClass('ajax-fieldset')) {
$.get(
Drupal.settings.basePath + $fielset.attr('rel'),
function(data) {
$fieldset.find('.response').html(data);
}
)
}
}
});
Or, rather than messing around with the collapsible function. just create your own fieldset without the collapsible/collapsed classes and implement from scratch yourself
....so.. something like that :)
i'm with a problem here: http://thehitz.com.br/loja.php
when the page loads, appears an AJAX ERROR alert but the script works. That alert only shows up when i put the javascript code in the html. I've looked into the code and tried to localize the factor that is making this annoing thing happen but didnt have luck on it. Help me, please.
<script type="text/javascript">
$(function() {
// the element we want to apply the jScrollPane
var $el = $('#conteudo-container').jScrollPane({
verticalGutter : -16
}),
// the extension functions and options
extensionPlugin = {
extPluginOpts : {
// speed for the fadeOut animation
mouseLeaveFadeSpeed : 500,
// scrollbar fades out after hovertimeout_t milliseconds
hovertimeout_t : 1000,
// if set to false, the scrollbar will be shown on mouseenter and hidden on mouseleave
// if set to true, the same will happen, but the scrollbar will be also hidden on mouseenter after "hovertimeout_t" ms
// also, it will be shown when we start to scroll and hidden when stopping
useTimeout : false,
// the extension only applies for devices with width > deviceWidth
deviceWidth : 980
},
hovertimeout : null, // timeout to hide the scrollbar
isScrollbarHover: false,// true if the mouse is over the scrollbar
elementtimeout : null, // avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
isScrolling : false,// true if scrolling
addHoverFunc : function() {
// run only if the window has a width bigger than deviceWidth
if( $(window).width() <= this.extPluginOpts.deviceWidth ) return false;
var instance = this;
// functions to show / hide the scrollbar
$.fn.jspmouseenter = $.fn.show;
$.fn.jspmouseleave = $.fn.fadeOut;
// hide the jScrollPane vertical bar
var $vBar = this.getContentPane().siblings('.jspVerticalBar').hide();
/*
* mouseenter / mouseleave events on the main element
* also scrollstart / scrollstop - #James Padolsey : http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
*/
$el.bind('mouseenter.jsp',function() {
// show the scrollbar
$vBar.stop( true, true ).jspmouseenter();
if( !instance.extPluginOpts.useTimeout ) return false;
// hide the scrollbar after hovertimeout_t ms
clearTimeout( instance.hovertimeout );
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
}).bind('mouseleave.jsp',function() {
// hide the scrollbar
if( !instance.extPluginOpts.useTimeout )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
else {
clearTimeout( instance.elementtimeout );
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}
});
if( this.extPluginOpts.useTimeout ) {
$el.bind('scrollstart.jsp', function() {
// when scrolling show the scrollbar
clearTimeout( instance.hovertimeout );
instance.isScrolling = true;
$vBar.stop( true, true ).jspmouseenter();
}).bind('scrollstop.jsp', function() {
// when stop scrolling hide the scrollbar (if not hovering it at the moment)
clearTimeout( instance.hovertimeout );
instance.isScrolling = false;
instance.hovertimeout = setTimeout(function() {
if( !instance.isScrollbarHover )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
// wrap the scrollbar
// we need this to be able to add the mouseenter / mouseleave events to the scrollbar
var $vBarWrapper = $('<div/>').css({
position : 'absolute',
left : $vBar.css('left'),
top : $vBar.css('top'),
right : $vBar.css('right'),
bottom : $vBar.css('bottom'),
width : $vBar.width(),
height : $vBar.height()
}).bind('mouseenter.jsp',function() {
clearTimeout( instance.hovertimeout );
clearTimeout( instance.elementtimeout );
instance.isScrollbarHover = true;
// show the scrollbar after 100 ms.
// avoids showing the scrollbar when moving from inside the element to outside, passing over the scrollbar
instance.elementtimeout = setTimeout(function() {
$vBar.stop( true, true ).jspmouseenter();
}, 100 );
}).bind('mouseleave.jsp',function() {
// hide the scrollbar after hovertimeout_t
clearTimeout( instance.hovertimeout );
instance.isScrollbarHover = false;
instance.hovertimeout = setTimeout(function() {
// if scrolling at the moment don't hide it
if( !instance.isScrolling )
$vBar.stop( true, true ).jspmouseleave( instance.extPluginOpts.mouseLeaveFadeSpeed || 0 );
}, instance.extPluginOpts.hovertimeout_t );
});
$vBar.wrap( $vBarWrapper );
}
}
},
// the jScrollPane instance
jspapi = $el.data('jsp');
// extend the jScollPane by merging
$.extend( true, jspapi, extensionPlugin );
jspapi.addHoverFunc();
});
</script>
Well if you look at the console, you can see that there is a Ajax post request that is failing:
"NetworkError: 405 Method Not Allowed - http://thehitz.com.br/jcart/js/jcart.min.js"