jQuery Slide Scroll Panel is a great way to create sliding scroll panels that slide in by touch, trackpad and scrolling
Click the buttons to see jQuery Slide Scroll Panel in action!
$('#yourPanel').scrollSlidePanel({direction:'right'})
$('#yourPanel').data('slidescrollpanel').showPanel()
$('#yourPanel').data('slidescrollpanel').hidePanel()
$('#yourPanel').scrollSlidePanel({direction:'left'})
$('#yourPanel').data('slidescrollpanel').showPanel()
$('#yourPanel').data('slidescrollpanel').hidePanel()
$('#yourPanel').scrollSlidePanel({direction:'top'})
$('#yourPanel').data('slidescrollpanel').showPanel()
$('#yourPanel').data('slidescrollpanel').hidePanel()
$('#yourPanel').scrollSlidePanel({direction:'bottom'})
$('#yourPanel').data('slidescrollpanel').showPanel()
$('#yourPanel').data('slidescrollpanel').hidePanel()
The following configuration is available when creating your slide scroll panel with: $('#yourPanel').scrollSlidePanel(config)
# Direction that our panel should slide in from
direction: 'right'
# jQuery Element our panel is wrapped in
# Defaults to a new div
$wrap: null
# Should we auto set the panel's width?
autoContentWidth: true
# Should we auto set the panel's height?
autoContentHeight: true
# Should we auto set the wrap's width?
autoWrapWidth: true
# Should we auto set the wrap's height?
autoWrapHeight: true
# How long should we wait on desktop devices for the user to scroll again
disableDelay: 1*1000
# The classname to apply to the wrapper when the panel is active
wrapActiveClass: 'slidescrollpanel-active'
# The classname to apply to the wrapper when the panel is visible
wrapVisibleClass: 'slidescrollpanel-visible'
# Auto Show Above Percentage
autoShowAbove: 0.7
# Auto Hide Below Percentage
autoHideBelow: 0.3
# Keep Visible By
keepVisibleBy: false
# Force the wrapper to be position by this property instead of the default
forcedPositionProperty: false
# Styles to apply to the wrap
wrapStyles:
margin: 0
padding: 0
position: 'absolute'
top: 0
left: 0
overflow: 'auto'
'z-index': 100
# Styles to apply to the panel
contentStyles:
margin: 0
padding: 0
width: '100%'
display: 'inline-block'
The CSS class slidescrollpanel-wrap
is added to the wrapper
The CSS classes slidescrollpanel-content
and slidescrollpanel-direction-THEDIRECTION
are added to the panel
jquery-slidescrollpanel
and move all the files and directories into that to continue.jquery-slidescrollpanel
which has a whole bunch of stuff in it, then that is fine and you can continue onto the next step.jquery-slidescrollpanel
then you must rename it to jquery-slidescrollpanel
to continue.jquery-slidescrollpanel
directory to somewhere on your webserverBe sure to always keep the entire jquery-slidescrollpanel
directory intact; this means if you were to only move some of the files instead of moving the entire directory, then you would run into problems due to the cross directory references would no longer be working.
If your page already has jQuery included then you can skip this step.
<!-- Include jQuery (Dependency of jQuery Slide Scroll Panel) -->
<script src="http://www.yoursite.com/somewhere/on/your/webserver/jquery-slidescrollpanel/vendor/jquery.js"></script>
<!-- Include jQuery Slide Scroll Panel -->
<script src="http://www.yoursite.com/somewhere/on/your/webserver/jquery-slidescrollpanel/lib/jquery-slidescrollpanel.js"></script>
If anything isn't working the way you want it to, or if you would like to request a feature or provide praise or general feedback then be sure to click the feedback button to the right, or the "Get Support" link up the top of this page.
This work is powered by coffee and distributed for free. Donations are how we afford our coffee. Coffee is how we stay awake after our day job hours to work on things like this free open-source project which you're looking at. So go ahead, and get that warm fuzzy feeling knowing you just helped some poor fellow working after hours for free to buy his coffee. You only need to spare a few dollars, or as much as you feel this piece of work is worth. Thanks so much. Alternatively; if you are not in a donating mood, then spreading the word about this project on twitter, your blog, or whatever is just as good. Thanks a bunch, we appreciate the help deeply.
Licensed under the MIT License.