Fix Page Builder Slider. Move in 1px increments.

The sliders in page builder are a bit of a pain in the neck. The sliders jump at 9px intervals which makes it impossable to get the page widths back to the default 998px width.

This mod fixes that. After this code mod is applied, you will be able to move the sliders in 1px increments.

First make make a backup copy of inc/js/classes/BxDolPageBuilder.js

Now open inc/js/classes/BxDolPageBuilder.js in a text editor.

Go to about line 85 and find this code.

BxDolPageBuilder.prototype.initPageWidthSlider = function() {
var _builder = this;
var $slider = $( '#pageWidthSlider' );

if( !$slider.length )
return false;

$slider.slider({
value: this.width2slider( this.options.pageWidth ),
change: function(e,ui) {_builder.onWidthSliderStop(ui.value)},
slide: function(e,ui) {_builder.onWidthSliderMove(ui.value)}
});

$('#pageWidthValue').html(this.options.pageWidth);
}

Change it to add the items marked in red.

BxDolPageBuilder.prototype.initPageWidthSlider = function() {
var _builder = this;
var $slider = $( '#pageWidthSlider' );

if( !$slider.length )
return false;

$slider.slider({
value: this.width2slider( this.options.pageWidth ),
change: function(e,ui) {_builder.onWidthSliderStop(ui.value)},
slide: function(e,ui) {_builder.onWidthSliderMove(ui.value)}, // add comma to end of this line
max: 940
});

$('#pageWidthValue').html(this.options.pageWidth);
}

Now go to line 101

Look for the following code.

BxDolPageBuilder.prototype.initOtherPagesWidthSlider = function() {
var _builder = this;
var $slider = $( '#pageWidthSlider1' );

if( !$slider.length )
return false;

$slider.slider({
value: this.width2slider( this.options.otherPagesWidth ),
change: function(e,ui) {_builder.onOtherWidthSliderStop(ui.value)},
slide: function(e,ui) {_builder.onOtherWidthSliderMove(ui.value)}
});

$('#pageWidthValue1').html(this.options.otherPagesWidth);
}

Change it to add the marked areas.

BxDolPageBuilder.prototype.initOtherPagesWidthSlider = function() {
var _builder = this;
var $slider = $( '#pageWidthSlider1' );

if( !$slider.length )
return false;

$slider.slider({
value: this.width2slider( this.options.otherPagesWidth ),
change: function(e,ui) {_builder.onOtherWidthSliderStop(ui.value)},
slide: function(e,ui) {_builder.onOtherWidthSliderMove(ui.value)}, // add comma to end of this line
max: 940
});

$('#pageWidthValue1').html(this.options.otherPagesWidth);
}

Now to line 117

Look for this.

BxDolPageBuilder.prototype.width2slider = function( sCurWidth ) {

if( sCurWidth == '100%' )
return 100;

var iCurWidth = parseInt( sCurWidth );

return ( Math.round( ( ( iCurWidth - 774 ) * 90 ) / 826 ) + 5 );
}


Change it to this.

BxDolPageBuilder.prototype.width2slider = function( sCurWidth ) {

if( sCurWidth == '100%' )
return 100;

var iCurWidth = parseInt( sCurWidth );

return ((iCurWidth - 774) + 50);
//return ( Math.round( ( ( iCurWidth - 774 ) * 90 ) / 826 ) + 5 ); // Comment out this line
}


Now to line 125

Look for this

BxDolPageBuilder.prototype.slider2width = function( iSliderVal ) {
if( iSliderVal < 5 )
return '774px';

if( iSliderVal > 95 )
return '100%';

return ( ( parseInt( ( ( iSliderVal - 5 ) * 826 ) / 90 ) + 774 ) + 'px' );
}


Change it to this.

BxDolPageBuilder.prototype.slider2width = function( iSliderVal ) {

if( iSliderVal < 50 )
return '774px';

if( iSliderVal > 876 )
return '100%';

return (parseInt((iSliderVal - 50) + 774) + 'px');
//return ( ( parseInt( ( ( iSliderVal - 5 ) * 826 ) / 90 ) + 774 ) + 'px' ); // Comment out this line
}

That's it. All done. Now try it out.

Very nice mod and much needed by us perfectionist tweakers!  Thanks!

Thanks.

This is better then telling users to fix it using phpmyadmin.