Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create a horizontal scrolling container (with a scrolling bar) to display all image choices on a single line. You can add a HTML field to your form and put this script as its content
<script type="text/javascript">
(function($){
function scrollableImageChoices( formId ) {
var $fields = ( typeof formId !== 'undefined') ? $('#gform_' + formId + ' .image-choices-field') : $('form[id^="gform_"] .image-choices-field');
if (!$fields.length) {
return;
}
$fields.each(function(){
var $field = $(this);
var $fieldsWrap = $field.closest('.gform_fields');
var $scroller = $field.find('.ginput_container');
var $scrolling = $field.find('.ginput_container > .gfield_radio, .ginput_container > .gfield_checkbox');
$field.width( $fieldsWrap.width() );
$scroller.css('overflow-x', 'scroll').css('max-width', $fieldsWrap.width() + 'px');
$scrolling.css('width', '');
var totalWidth = 0;
$scrolling.find('.image-choices-choice').each(function(){
totalWidth += $(this).outerWidth(true);
});
$scrolling.width( totalWidth );
});
}
var debounce;
$(window).on('resize', function(e){
clearTimeout(debounce);
debounce = setTimeout(scrollableImageChoices, 100);
});
$(document).bind('gform_post_render', function(e, formId, currentFormPage){
clearTimeout(debounce);
debounce = setTimeout(function(){
scrollableImageChoices( formId );
}, 100);
});
if (window.gform && window.gform.addAction) {
window.gform.addAction('gform_post_conditional_logic_field_action', function (formId, action, targetId, defaultValues, isInit) {
clearTimeout(debounce);
debounce = setTimeout(function(){
scrollableImageChoices( formId );
}, 100);
});
}
})(jQuery);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment