I am prototyping a layout for an unusual website project which has the following requirements:
For demo purposes I have set the height of the content area wrapper to 50% to be able to better illustrate the issue I'm having within the space provided in JSFiddle - http://jsfiddle.net/f5hgL/
I'm using the jQuery UI slider component for the horizontal scrolling with some extra custom JS to calculate and set the width of the .scroll-content container (which needs to be set). If the width of each content box to a set pixel width it works fine. However when it is a percentage for flexibility it breaks (see demo).
Aside from this problem, I'm not sure this layout is achievable or even advisable. Whatever about a 100% width, 100% height raises a number of issues including consistency of the position of the scrollbar and the main navigation.
Can anyone advise on another approach for it using jQuery? The site was designed originally to be a Flash site but the client changed to a HTML/CSS/JS solution after we advised it would be better for a number of reasons including easier CMS integration, SEO and the ability to link to individual pages.
$(function() {
//scrollpane parts
var scrollPane = $( ".scroll-pane" ),
scrollContent = $( ".scroll-content" );
//set length of conveyor
$(".scroll-content-item").css("width","10%");
var itemwidth = $(".scroll-content-item").width();
var itemcount = $(".scroll-content-item").length;
var itemswidth = itemwidth * itemcount;
var itemsmargins = itemcount * 20; //margin of 0 10px
var itemborders = itemcount * 2; //1px border
var containerwidth = itemsmargins + itemswidth + itemborders + 200 + "px";
//alert("itemsmargins + itemswidth + itemborders = "+containerwidth);
scrollContent.css("width",containerwidth);
//build slider
var scrollbar = $( ".scroll-bar" ).slider({
max: 100,
slide: function( event, ui ) {
if ( scrollContent.width() > scrollPane.width() ) {
scrollContent.css( "margin-left", Math.round(
ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
) + "px" );
} else {
scrollContent.css( "margin-left", 0 );
}
}
});
//append icon to handle
var handleHelper = scrollbar.find( ".ui-slider-handle" )
.mousedown(function() {
scrollbar.width( handleHelper.width() );
})
.mouseup(function() {
scrollbar.width( "100%" );
})
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
//change overflow to hidden now that slider handles the scrolling
scrollPane.css( "overflow", "hidden" );
//size scrollbar and handle proportionally to scroll distance
function sizeScrollbar() {
var remainder = scrollContent.width() - scrollPane.width();
var proportion = remainder / scrollContent.width();
var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
scrollbar.find( ".ui-slider-handle" ).css({
width: handleSize,
"margin-left": -handleSize / 2
});
handleHelper.width( "" ).width( scrollbar.width() - handleSize );
}
//reset slider value based on scroll content position
function resetValue() {
var remainder = scrollPane.width() - scrollContent.width();
var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
parseInt( scrollContent.css( "margin-left" ) );
var percentage = Math.round( leftVal / remainder * 100 );
scrollbar.slider( "value", percentage );
}
//if the slider is 100% and window gets larger, reveal content
function reflowContent() {
var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
var gap = scrollPane.width() - showing;
if ( gap > 0 ) {
scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
}
}
//change handle position on window resize
$( window ).resize(function() {
resetValue();
sizeScrollbar();
reflowContent();
});
//init scrollbar size
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.