jQuery放大和缩小可滚动div，当所有内容可见时消除滚动

Question

I have created a page that contains a variety of columns. These columns can end up off the side of the screen which is the intended default position. However, I want to be able to give users the option of zooming out so that all the columns would be visible. I have followed another stack overflow question about how to do this here , but it only zooms the visible part of the div and not the rest of the contents.

 // Set initial zoom level var zoom_level = 100; // Click events $('.zoom-in').click(function() { zoom_page(10, $(this)) }); $('.zoom-out').click(function() { zoom_page(-10, $(this)) }); $('.zoom-reset').click(function() { zoom_page(0, $(this)) }); // Zoom function function zoom_page(step, trigger) { // Zoom just to steps in or out if (zoom_level >= 200 && step > 0 || zoom_level <= 30 && step < 0) return; // Set / reset zoom if (step == 0) zoom_level = 100; else zoom_level = zoom_level + step; var scale = zoom_level / 100; // Set page zoom via CSS $('.board-canvas').css({ moztransform: 'scale(scale, scale)', // Moz-browsers transform: 'scale(' + (scale) + ')', // set zoom transformOrigin: '50% 0' // set transform scale base }); // Adjust page to zoom width if (zoom_level > 100) $('.board-canvass').css({ width: (zoom_level * 1.2) + '%' }); else $('body').css({ width: '100%' }); // Activate / deactivate trigger (use CSS to make them look different) if (zoom_level >= 20 || zoom_level <= 40) trigger.addClass('disabled'); else trigger.parents('ul').find('.disabled').removeClass('disabled'); if (zoom_level != 100) $('#zoom_reset').removeClass('disabled'); else $('#zoom_reset').addClass('disabled'); } function updateLists(element, columnId) { //doSomething } $('.btn').on("click", function(event) { $("*").css("cursor", "progress"); }); 

 .card { transition: 0.3s; } .portfolio-container { background-color: #1d3c5c; } .card-member-span { padding-right: 1em; } .project-dialog { overflow: auto; background-color: #1d3c5c; } .portfolio-dialog { overflow: auto; background-color: #ffffff; } .dialog { display: none; } .project-block { padding-left: 0.25em; padding-bottom: 0.25em; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; /* -webkit-user-select: none; */ /* -moz-user-select: none; */ /* -ms-user-select: none; */ /* user-select: none; */ /* border-radius: 1em; */ } .project-block.focus, .project-block:focus, .project-block:hover { color: #333; } .project-block-primary { color: #1d3c5c; background-color: #ddd; font-weight: 700; } .list-cards { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 4px; padding: 0 4px; z-index: 1; min-height: 0; border-radius: 1em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .portfolio-card { width: 100%; min-height: 3em; background-color: #ddd; color: #000; padding-left: 3px; } .list-card-members { background-color: #ffffff; padding: 0.5em; } .list-card-section {} .list-card-project-section { background-color: #ffffff; } .list-card { margin-bottom: 0.5em; /* background-color: #5b5353; */ background-color: #1d3c5c; border-radius: 1em; overflow: hidden; } /* Add rounded corners to the top left and the top right corner of the image */ img { vertical-align: inherit; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } /* Add some padding inside the card container */ .container { padding: 2px 16px; } #board { /* user-select: none; */ white-space: nowrap; margin-bottom: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; position: relative; top: 0; right: 0; bottom: 0; left: 0; } /* .list-header-target { */ /* cursor: pointer; */ /* position: absolute; */ /* top: 0; */ /* left: 0; */ /* right: 0; */ /* bottom: 0; */ /* } */ .list { /* background-color: #5b5353; */ background-color: #1d3c5c; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 100%; position: relative; white-space: normal; margin-top: 2px; padding-left: 5px; padding-right: 5px; } .board-menu-container, .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; } .list-wrapper { width: 270px; margin: 0 5px; height: 100%; display: inline-block; vertical-align: top; min-height: 600px; } .search-filter { padding-top: 5px; padding-bottom: 5px; display: none; font-size: 12px; } .search-filter-block { padding-top: 5px; padding-bottom: 5px; } .search-filter-tag-block { margin-top: 5px; } .search-filter-select { height: 100%; font-size: 12px; } .search-colour-button { color: white; padding: 0.5em 0.5em; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; } .search-colour-button.active { box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6; font-weight: 800; } .project-card { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-radius: 1em; overflow: hidden; /* background-color: #5b5353; */ background-color: #1d3c5c; min-height: 10%; max-height: 90%; min-width: 10%; max-width: 90%; margin: 1em; } .project-card-content { /* padding: 0.5em; */ background-color: #fff; } .portfolio-card-title { font-weight: 600; padding: 0.5em; cursor: pointer; } .portfolio-projects-title { font-weight: 600; } .search-tags-form { margin: 4px 2px; } .list-header { color: #ddd; } .list-header-name-assist { text-shadow: 2px 2px 4px #000000; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } .portfolio-dialog { background-color: #1d3c5c; color: #fff; } .portfolio-dialog-content { background-color: #1d3c5c; color: #ffffff; } dl { margin-bottom: 3px; } .bg-dark { color: #333333; background-color: #ffffff; } .portfolio-card-content { margin-bottom: 0.5em; border-radius: 1em; padding-top: 0.5em; padding-bottom: 1em; } .fps-tag-block { padding-left: 1em; padding-right: 1em; } .portfolio-icon-list { color: #000; } .ui-dialog { /* background-color: #5b5353; */ background-color: #1d3c5c; } .ui-dialog-titlebar { /* background-color: #5b5353; */ background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog-buttonpane { background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog .ui-dialog-title { text-align: center; } .ui-dialog-buttonset { color: #1d3c5c; } .ui-dialog-titlebar-close { color: #1d3c5c; content: "X"; } .ui-widget-content { /* background-color: #1d3c5c; */ } .ui-widget-content a { color: #333333; } .portfolio-toggle:before { /* content: "\\25b2"; */ content: "▸"; } .portfolio-toggle.collapsed:before { /* content: "\\25bc"; */ content: "▾"; } .project-block-rounded { border-radius: 0.5em; padding: 0.25em; margin: 0.25em; } .open-portfolio-dialog-btn { cursor: pointer; } .portfolio-overview-btn { cursor: pointer; } .media-capture-btn { cursor: pointer; } #search-filter-block { cursor: pointer; } .dl-horizontal dt { text-align: left; } .dl-horizontal dd { width: auto; } .portfolio-card-filter { padding-left: 1em; } .portfolio-metadata { color: #000; } .portfolio-overview { color: #000; } .fixed-header { position: fixed; top: 0em; background-color: #1d3c5c; padding: 1em; width: 270px; text-align: center; } .sortable-list { padding-bottom: 100px; } .search-highlighter { border: 2px solid red; } .portfolio-specific-btn { padding-right: 0.5em; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } 

 <script src="https://use.fontawesome.com/fcc45c3f3f.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid" id="core-content"> <form name="search-filter-form" method="POST" class=""> <div class="container-fluid"> <div class=""> <div class="row"> <div class="text-center col-xs-2"> <i class="fa fa-search-plus zoom-in" aria-hidden="true"></i> <i class="fa fa-search-minus zoom-out" aria-hidden="true"></i> </div> <div class="text-center col-xs-1"> <a href="#" class="btn btn-default btn-primary ">Reset</a> </div> </div> </div> </div> </form> <div id="loading-msg" style="display: none;"> <div class="row"> <div class="spacer-sml"></div> </div> <div class="row"> <div class="spacer-sml"></div> </div> <div class="col-xs-12 text-center"> <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i> <span class="sr-only">Loading...</span> <p>Loading...</p> </div> </div> <div id="portfolio-container" class="container-fluid portfolio-container" style=""> <div class="spacer-sml"></div> <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class=""> <div class="board-canvas"> <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable"> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Approval </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval"> <div data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle"> <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f; color: #000000; "> <div class="portfolio-card-filter-block"> <div class="portfolio-card-title portfolio-card-filter-heading "> <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false"> <span class="portfolio-accordion"></span> <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp; <span class="archiware-archive-state" data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis <span class="text-right"></span> </div> </div> </div> </div> <hr> <div class="list-card-details text-center"> <div class="list-card-members js-list-card-members"> <div class="portfolio-icon-list " data-example-id="portfolio-icon-list"> <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview"> <a href="#" class="portfolio-overview"> <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist"> <a href="#" class="portfolio-checklist"> <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata"> <a href="#" class="portfolio-metadata"> <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum"> <a href="#" class="portfolio-forum"> <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a> </div> </div> </div> <div class="list-card-project-section"> <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391"> Motion Sports: <span class="badge">1</span> </div> <div class="dialog project-dialog project-dialog-motion" name="project-dialog-motion" id="project-dialog-motion-5ac752e61c99a112046cf391" title="Awaiting Approval Motion Sports"> <div class="project-card"> <div class="project-card-content"> <div class="fps-tag-block fps-tag-Motion"> <dl class="dl-horizontal"> <dt class="text-left">Storyline:</dt> <dd>Motion</dd> </dl> </div> <div class="fps-tag-block fps-tag-"> <dl class="dl-horizontal"> <dt class="text-left">Comment:</dt> <dd></dd> </dl> </div> <div class="fps-tag-block fps-tag-1"> <dl class="dl-horizontal"> <dt class="text-left">Version:</dt> <dd>1</dd> </dl> </div> <div class="fps-tag-block fps-tag-createddate"> <dl class="dl-horizontal"> <dt class="text-left">Created:</dt> <dd>6-4-2018</dd> </dl> </div> <div class="fps-tag-block fps-tag-inprogress"> <dl class="dl-horizontal"> <dt class="text-left">Status:</dt> <dd>In Progress</dd> </dl> </div> <div class="fps-tag-block fps-tag-{day=11, month=4, year=2018}"> <dl class="dl-horizontal"> <dt class="text-left">Completed Date:</dt> <dd>11-4-2018</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Approved </h4> </div> <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Editing in Progress </h4> </div> <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Graphics </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Dubbing </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readydubbing" data-column-value="readydubbing Ready for Dubbing"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Grading </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readygrading" data-column-value="readygrading Ready for Grading"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Completed </h4> </div> <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Not Approved -Do Not Distribute </h4> </div> <div class="sortable-list ui-sortable" data-column-id="notapproved" data-column-value="notapproved Not Approved -Do Not Distribute"> <div class="ui-sortable-handle"> </div> </div> </div> </div> </div> </div> <div class="spacer-sml"></div> </form> </div> </div> 

As you can see the div zooms but only to the level of the default displayed content. I want to be able to zoom out enough, so that the scroll bar disappears. What am I doing wrong?

Answer 1

Apply the transform css on container-fluid

$('.container-fluid').css({
        moztransform: 'scale(scale, scale)', // Moz-browsers 
        transform: 'scale(' + (scale) + ')', // set zoom
        transformOrigin: '50% 0' // set transform scale base
});

 // Set initial zoom level var zoom_level = 100; // Click events $('.zoom-in').click(function() { zoom_page(10, $(this)) }); $('.zoom-out').click(function() { zoom_page(-10, $(this)) }); $('.zoom-reset').click(function() { zoom_page(0, $(this)) }); // Zoom function function zoom_page(step, trigger) { // Zoom just to steps in or out if (zoom_level >= 200 && step > 0 || zoom_level <= 30 && step < 0) return; // Set / reset zoom if (step == 0) zoom_level = 100; else zoom_level = zoom_level + step; var scale = zoom_level / 100; // Set page zoom via CSS $('.container-fluid').css({ moztransform: 'scale(scale, scale)', // Moz-browsers transform: 'scale(' + (scale) + ')', // set zoom transformOrigin: '50% 0' // set transform scale base }); // Adjust page to zoom width if (zoom_level > 100) $('.board-canvass').css({ width: (zoom_level * 1.2) + '%' }); else $('body').css({ width: '100%' }); // Activate / deactivate trigger (use CSS to make them look different) if (zoom_level >= 20 || zoom_level <= 40) trigger.addClass('disabled'); else trigger.parents('ul').find('.disabled').removeClass('disabled'); if (zoom_level != 100) $('#zoom_reset').removeClass('disabled'); else $('#zoom_reset').addClass('disabled'); } function updateLists(element, columnId) { //doSomething } $('.btn').on("click", function(event) { $("*").css("cursor", "progress"); }); 

 .card { transition: 0.3s; } .portfolio-container { background-color: #1d3c5c; } .card-member-span { padding-right: 1em; } .project-dialog { overflow: auto; background-color: #1d3c5c; } .portfolio-dialog { overflow: auto; background-color: #ffffff; } .dialog { display: none; } .project-block { padding-left: 0.25em; padding-bottom: 0.25em; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; /* -webkit-user-select: none; */ /* -moz-user-select: none; */ /* -ms-user-select: none; */ /* user-select: none; */ /* border-radius: 1em; */ } .project-block.focus, .project-block:focus, .project-block:hover { color: #333; } .project-block-primary { color: #1d3c5c; background-color: #ddd; font-weight: 700; } .list-cards { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 4px; padding: 0 4px; z-index: 1; min-height: 0; border-radius: 1em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .portfolio-card { width: 100%; min-height: 3em; background-color: #ddd; color: #000; padding-left: 3px; } .list-card-members { background-color: #ffffff; padding: 0.5em; } .list-card-section {} .list-card-project-section { background-color: #ffffff; } .list-card { margin-bottom: 0.5em; /* background-color: #5b5353; */ background-color: #1d3c5c; border-radius: 1em; overflow: hidden; } /* Add rounded corners to the top left and the top right corner of the image */ img { vertical-align: inherit; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } /* Add some padding inside the card container */ .container { padding: 2px 16px; } #board { /* user-select: none; */ display: flex; white-space: nowrap; margin-bottom: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; position: relative; top: 0; right: 0; bottom: 0; left: 0; } /* .list-header-target { */ /* cursor: pointer; */ /* position: absolute; */ /* top: 0; */ /* left: 0; */ /* right: 0; */ /* bottom: 0; */ /* } */ .list { /* background-color: #5b5353; */ background-color: #1d3c5c; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 100%; position: relative; white-space: normal; margin-top: 2px; padding-left: 5px; padding-right: 5px; } .board-menu-container, .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; } .list-wrapper { width: 270px; margin: 0 5px; height: 100%; display: inline-block; vertical-align: top; min-height: 600px; } .search-filter { padding-top: 5px; padding-bottom: 5px; display: none; font-size: 12px; } .search-filter-block { padding-top: 5px; padding-bottom: 5px; } .search-filter-tag-block { margin-top: 5px; } .search-filter-select { height: 100%; font-size: 12px; } .search-colour-button { color: white; padding: 0.5em 0.5em; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; } .search-colour-button.active { box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6; font-weight: 800; } .project-card { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-radius: 1em; overflow: hidden; /* background-color: #5b5353; */ background-color: #1d3c5c; min-height: 10%; max-height: 90%; min-width: 10%; max-width: 90%; margin: 1em; } .project-card-content { /* padding: 0.5em; */ background-color: #fff; } .portfolio-card-title { font-weight: 600; padding: 0.5em; cursor: pointer; } .portfolio-projects-title { font-weight: 600; } .search-tags-form { margin: 4px 2px; } .list-header { color: #ddd; } .list-header-name-assist { text-shadow: 2px 2px 4px #000000; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } .portfolio-dialog { background-color: #1d3c5c; color: #fff; } .portfolio-dialog-content { background-color: #1d3c5c; color: #ffffff; } dl { margin-bottom: 3px; } .bg-dark { color: #333333; background-color: #ffffff; } .portfolio-card-content { margin-bottom: 0.5em; border-radius: 1em; padding-top: 0.5em; padding-bottom: 1em; } .fps-tag-block { padding-left: 1em; padding-right: 1em; } .portfolio-icon-list { color: #000; } .ui-dialog { /* background-color: #5b5353; */ background-color: #1d3c5c; } .ui-dialog-titlebar { /* background-color: #5b5353; */ background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog-buttonpane { background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog .ui-dialog-title { text-align: center; } .ui-dialog-buttonset { color: #1d3c5c; } .ui-dialog-titlebar-close { color: #1d3c5c; content: "X"; } .ui-widget-content { /* background-color: #1d3c5c; */ } .ui-widget-content a { color: #333333; } .portfolio-toggle:before { /* content: "\\25b2"; */ content: "▸"; } .portfolio-toggle.collapsed:before { /* content: "\\25bc"; */ content: "▾"; } .project-block-rounded { border-radius: 0.5em; padding: 0.25em; margin: 0.25em; } .open-portfolio-dialog-btn { cursor: pointer; } .portfolio-overview-btn { cursor: pointer; } .media-capture-btn { cursor: pointer; } #search-filter-block { cursor: pointer; } .dl-horizontal dt { text-align: left; } .dl-horizontal dd { width: auto; } .portfolio-card-filter { padding-left: 1em; } .portfolio-metadata { color: #000; } .portfolio-overview { color: #000; } .fixed-header { position: fixed; top: 0em; background-color: #1d3c5c; padding: 1em; width: 270px; text-align: center; } .sortable-list { padding-bottom: 100px; } .search-highlighter { border: 2px solid red; } .portfolio-specific-btn { padding-right: 0.5em; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } 

 <script src="https://use.fontawesome.com/fcc45c3f3f.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid" id="core-content"> <form name="search-filter-form" method="POST" class=""> <div class="container-fluid"> <div class=""> <div class="row"> <div class="text-center col-xs-2"> <i class="fa fa-search-plus zoom-in" aria-hidden="true"></i> <i class="fa fa-search-minus zoom-out" aria-hidden="true"></i> </div> <div class="text-center col-xs-1"> <a href="#" class="btn btn-default btn-primary ">Reset</a> </div> </div> </div> </div> </form> <div id="loading-msg" style="display: none;"> <div class="row"> <div class="spacer-sml"></div> </div> <div class="row"> <div class="spacer-sml"></div> </div> <div class="col-xs-12 text-center"> <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i> <span class="sr-only">Loading...</span> <p>Loading...</p> </div> </div> <div id="portfolio-container" class="container-fluid portfolio-container" style=""> <div class="spacer-sml"></div> <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class=""> <div class="board-canvas"> <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable"> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Approval </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval"> <div data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle"> <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f; color: #000000; "> <div class="portfolio-card-filter-block"> <div class="portfolio-card-title portfolio-card-filter-heading "> <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false"> <span class="portfolio-accordion"></span> <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp; <span class="archiware-archive-state" data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis <span class="text-right"></span> </div> </div> </div> </div> <hr> <div class="list-card-details text-center"> <div class="list-card-members js-list-card-members"> <div class="portfolio-icon-list " data-example-id="portfolio-icon-list"> <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview"> <a href="#" class="portfolio-overview"> <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist"> <a href="#" class="portfolio-checklist"> <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata"> <a href="#" class="portfolio-metadata"> <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum"> <a href="#" class="portfolio-forum"> <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a> </div> </div> </div> <div class="list-card-project-section"> <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391"> Motion Sports: <span class="badge">1</span> </div> <div class="dialog project-dialog project-dialog-motion" name="project-dialog-motion" id="project-dialog-motion-5ac752e61c99a112046cf391" title="Awaiting Approval Motion Sports"> <div class="project-card"> <div class="project-card-content"> <div class="fps-tag-block fps-tag-Motion"> <dl class="dl-horizontal"> <dt class="text-left">Storyline:</dt> <dd>Motion</dd> </dl> </div> <div class="fps-tag-block fps-tag-"> <dl class="dl-horizontal"> <dt class="text-left">Comment:</dt> <dd></dd> </dl> </div> <div class="fps-tag-block fps-tag-1"> <dl class="dl-horizontal"> <dt class="text-left">Version:</dt> <dd>1</dd> </dl> </div> <div class="fps-tag-block fps-tag-createddate"> <dl class="dl-horizontal"> <dt class="text-left">Created:</dt> <dd>6-4-2018</dd> </dl> </div> <div class="fps-tag-block fps-tag-inprogress"> <dl class="dl-horizontal"> <dt class="text-left">Status:</dt> <dd>In Progress</dd> </dl> </div> <div class="fps-tag-block fps-tag-{day=11, month=4, year=2018}"> <dl class="dl-horizontal"> <dt class="text-left">Completed Date:</dt> <dd>11-4-2018</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Approved </h4> </div> <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Editing in Progress </h4> </div> <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Graphics </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Dubbing </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readydubbing" data-column-value="readydubbing Ready for Dubbing"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Grading </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readygrading" data-column-value="readygrading Ready for Grading"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Completed </h4> </div> <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Not Approved -Do Not Distribute </h4> </div> <div class="sortable-list ui-sortable" data-column-id="notapproved" data-column-value="notapproved Not Approved -Do Not Distribute"> <div class="ui-sortable-handle"> </div> </div> </div> </div> </div> </div> <div class="spacer-sml"></div> </form> </div> </div> 

Answer 2

If you are just trying to enable a basic zoom effect that results in scroll behavior change once all elements become visible, then I think you just need to apply the transform to a wrapper element inside your scrollable element.

In the snippet below, I just added a new #zoom-wrapper div inside your #board div and updated your zoom_page function to transform #zoom-wrapper (I also set the transform-origin: 0 0 so that you can see the zoom eliminate the scrolling more easily - not sure if you had something else in mind with how you were trying to reset the origin).

Hopefully this gets you pointed in the right direction.

 // Set initial zoom level var zoom_level = 100; // Click events $('.zoom-in').click(function() { zoom_page(10, $(this)) }); $('.zoom-out').click(function() { zoom_page(-10, $(this)) }); $('.zoom-reset').click(function() { zoom_page(0, $(this)) }); // Zoom function function zoom_page(step, trigger) { // Zoom just to steps in or out if (zoom_level >= 200 && step > 0 || zoom_level <= 30 && step < 0) return; // Set / reset zoom if (step == 0) zoom_level = 100; else zoom_level = zoom_level + step; var scale = zoom_level / 100; // Set page zoom via CSS $('#zoom-wrapper').css({ 'transform': 'scale(' + (scale) + ')', // set zoom 'transform-origin': '0 0' }); // Adjust page to zoom width if (zoom_level > 100) $('#zoom-wrapper').css({ width: (zoom_level * 1.2) + '%' }); else $('body').css({ width: '100%' }); // Activate / deactivate trigger (use CSS to make them look different) if (zoom_level >= 20 || zoom_level <= 40) trigger.addClass('disabled'); else trigger.parents('ul').find('.disabled').removeClass('disabled'); if (zoom_level != 100) $('#zoom_reset').removeClass('disabled'); else $('#zoom_reset').addClass('disabled'); } function updateLists(element, columnId) { //doSomething } $('.btn').on("click", function(event) { $("*").css("cursor", "progress"); }); 

 .card { transition: 0.3s; } .portfolio-container { background-color: #1d3c5c; } .card-member-span { padding-right: 1em; } .project-dialog { overflow: auto; background-color: #1d3c5c; } .portfolio-dialog { overflow: auto; background-color: #ffffff; } .dialog { display: none; } .project-block { padding-left: 0.25em; padding-bottom: 0.25em; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; /* -webkit-user-select: none; */ /* -moz-user-select: none; */ /* -ms-user-select: none; */ /* user-select: none; */ /* border-radius: 1em; */ } .project-block.focus, .project-block:focus, .project-block:hover { color: #333; } .project-block-primary { color: #1d3c5c; background-color: #ddd; font-weight: 700; } .list-cards { -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; margin: 0 4px; padding: 0 4px; z-index: 1; min-height: 0; border-radius: 1em; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .portfolio-card { width: 100%; min-height: 3em; background-color: #ddd; color: #000; padding-left: 3px; } .list-card-members { background-color: #ffffff; padding: 0.5em; } .list-card-section {} .list-card-project-section { background-color: #ffffff; } .list-card { margin-bottom: 0.5em; /* background-color: #5b5353; */ background-color: #1d3c5c; border-radius: 1em; overflow: hidden; } /* Add rounded corners to the top left and the top right corner of the image */ img { vertical-align: inherit; } /* On mouse-over, add a deeper shadow */ .card:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); } /* Add some padding inside the card container */ .container { padding: 2px 16px; } #board { /* user-select: none; */ white-space: nowrap; margin-bottom: 10px; overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; position: relative; top: 0; right: 0; bottom: 0; left: 0; } /* .list-header-target { */ /* cursor: pointer; */ /* position: absolute; */ /* top: 0; */ /* left: 0; */ /* right: 0; */ /* bottom: 0; */ /* } */ .list { /* background-color: #5b5353; */ background-color: #1d3c5c; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; max-height: 100%; position: relative; white-space: normal; margin-top: 2px; padding-left: 5px; padding-right: 5px; } .board-menu-container, .list { -webkit-box-orient: vertical; -webkit-box-direction: normal; } .list-wrapper { width: 270px; margin: 0 5px; height: 100%; display: inline-block; vertical-align: top; min-height: 600px; } .search-filter { padding-top: 5px; padding-bottom: 5px; display: none; font-size: 12px; } .search-filter-block { padding-top: 5px; padding-bottom: 5px; } .search-filter-tag-block { margin-top: 5px; } .search-filter-select { height: 100%; font-size: 12px; } .search-colour-button { color: white; padding: 0.5em 0.5em; text-align: center; text-decoration: none; display: inline-block; font-size: 12px; margin: 4px 2px; cursor: pointer; border-radius: 1em; -webkit-border-radius: 1em; -moz-border-radius: 1em; } .search-colour-button.active { box-shadow: inset 0 0 0 3px #b3b3b3, inset 0 5px 10px #e6e6e6; font-weight: 800; } .project-card { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; border-radius: 1em; overflow: hidden; /* background-color: #5b5353; */ background-color: #1d3c5c; min-height: 10%; max-height: 90%; min-width: 10%; max-width: 90%; margin: 1em; } .project-card-content { /* padding: 0.5em; */ background-color: #fff; } .portfolio-card-title { font-weight: 600; padding: 0.5em; cursor: pointer; } .portfolio-projects-title { font-weight: 600; } .search-tags-form { margin: 4px 2px; } .list-header { color: #ddd; } .list-header-name-assist { text-shadow: 2px 2px 4px #000000; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } .portfolio-dialog { background-color: #1d3c5c; color: #fff; } .portfolio-dialog-content { background-color: #1d3c5c; color: #ffffff; } dl { margin-bottom: 3px; } .bg-dark { color: #333333; background-color: #ffffff; } .portfolio-card-content { margin-bottom: 0.5em; border-radius: 1em; padding-top: 0.5em; padding-bottom: 1em; } .fps-tag-block { padding-left: 1em; padding-right: 1em; } .portfolio-icon-list { color: #000; } .ui-dialog { /* background-color: #5b5353; */ background-color: #1d3c5c; } .ui-dialog-titlebar { /* background-color: #5b5353; */ background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog-buttonpane { background-color: #1d3c5c; color: #ddd; border: 0px; } .ui-dialog .ui-dialog-title { text-align: center; } .ui-dialog-buttonset { color: #1d3c5c; } .ui-dialog-titlebar-close { color: #1d3c5c; content: "X"; } .ui-widget-content { /* background-color: #1d3c5c; */ } .ui-widget-content a { color: #333333; } .portfolio-toggle:before { /* content: "\\25b2"; */ content: "▸"; } .portfolio-toggle.collapsed:before { /* content: "\\25bc"; */ content: "▾"; } .project-block-rounded { border-radius: 0.5em; padding: 0.25em; margin: 0.25em; } .open-portfolio-dialog-btn { cursor: pointer; } .portfolio-overview-btn { cursor: pointer; } .media-capture-btn { cursor: pointer; } #search-filter-block { cursor: pointer; } .dl-horizontal dt { text-align: left; } .dl-horizontal dd { width: auto; } .portfolio-card-filter { padding-left: 1em; } .portfolio-metadata { color: #000; } .portfolio-overview { color: #000; } .fixed-header { position: fixed; top: 0em; background-color: #1d3c5c; padding: 1em; width: 270px; text-align: center; } .sortable-list { padding-bottom: 100px; } .search-highlighter { border: 2px solid red; } .portfolio-specific-btn { padding-right: 0.5em; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 0px; padding: 0; } 

 <script src="https://use.fontawesome.com/fcc45c3f3f.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid" id="core-content"> <form name="search-filter-form" method="POST" class=""> <div class="container-fluid"> <div class=""> <div class="row"> <div class="text-center col-xs-2"> <i class="fa fa-search-plus zoom-in" aria-hidden="true"></i> <i class="fa fa-search-minus zoom-out" aria-hidden="true"></i> </div> <div class="text-center col-xs-1"> <a href="#" class="btn btn-default btn-primary ">Reset</a> </div> </div> </div> </div> </form> <div id="loading-msg" style="display: none;"> <div class="row"> <div class="spacer-sml"></div> </div> <div class="row"> <div class="spacer-sml"></div> </div> <div class="col-xs-12 text-center"> <i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i> <span class="sr-only">Loading...</span> <p>Loading...</p> </div> </div> <div id="portfolio-container" class="container-fluid portfolio-container" style=""> <div class="spacer-sml"></div> <form action="#" id="portfolio-form" name="portfolio-form" method="POST" class=""> <div class="board-canvas"> <div id="board" class="u-fancy-scrollbar js-no-higher-edits js-list-sortable ui-sortable"> <div id="zoom-wrapper"> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Approval </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitapprove" data-column-value="awaitapprove Awaiting Approval"> <div data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391" class="list-card js-member-droppable is-covered ui-droppable search-display-block sfilter ui-sortable-handle"> <div class="list-card-cover js-card-cover portfolio-card" style="background-color: #02bf6f; color: #000000; "> <div class="portfolio-card-filter-block"> <div class="portfolio-card-title portfolio-card-filter-heading "> <div class="accordion-toggle collapsed portfolio-toggle" data-toggle="collapse" data-parent="#portfolioAccordion" data-target="#portfolio5ac752e61c99a112046cf391" aria-expanded="false"> <span class="portfolio-accordion"></span> <i class="fa fa-user-circle " aria-hidden="true" title="You are a member of this portfolio"></i>&nbsp; <span class="archiware-archive-state" data-portfolio-path="Tennis" data-portfolio-id="5ac752e61c99a112046cf391"><i class="fa fa-database" aria-hidden="true" title="Has been archived"></i></span> Tennis <span class="text-right"></span> </div> </div> </div> </div> <hr> <div class="list-card-details text-center"> <div class="list-card-members js-list-card-members"> <div class="portfolio-icon-list " data-example-id="portfolio-icon-list"> <div class="btn-group portfolio-specific-btn portfolio-overview-btn" title="Portfolio Overview"> <a href="#" class="portfolio-overview"> <i class="fa fa-eye fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn portfolio-checklist-btn" title="Portfolio Checklist"> <a href="#" class="portfolio-checklist"> <i class="fa fa-list fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-metadata-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Metadata"> <a href="#" class="portfolio-metadata"> <i class="fa fa-file-text fa-1-5-font-size" aria-hidden="true"></i></a> </div> <div class="btn-group portfolio-specific-btn open-portfolio-forum-btn" data-dialog-id="5ac752e61c99a112046cf391" title="Portfolio Forum"> <a href="#" class="portfolio-forum"> <i class="fa fa-commenting fa-1-5-font-size" aria-hidden="true"></i></a> </div> </div> </div> <div class="list-card-project-section"> <div class="project-block project-block-primary open-project-dialog-btn" name="open-project-dialog-btn" data-dialog-id="project-dialog-motion-5ac752e61c99a112046cf391"> Motion Sports: <span class="badge">1</span> </div> <div class="dialog project-dialog project-dialog-motion" name="project-dialog-motion" id="project-dialog-motion-5ac752e61c99a112046cf391" title="Awaiting Approval Motion Sports"> <div class="project-card"> <div class="project-card-content"> <div class="fps-tag-block fps-tag-Motion"> <dl class="dl-horizontal"> <dt class="text-left">Storyline:</dt> <dd>Motion</dd> </dl> </div> <div class="fps-tag-block fps-tag-"> <dl class="dl-horizontal"> <dt class="text-left">Comment:</dt> <dd></dd> </dl> </div> <div class="fps-tag-block fps-tag-1"> <dl class="dl-horizontal"> <dt class="text-left">Version:</dt> <dd>1</dd> </dl> </div> <div class="fps-tag-block fps-tag-createddate"> <dl class="dl-horizontal"> <dt class="text-left">Created:</dt> <dd>6-4-2018</dd> </dl> </div> <div class="fps-tag-block fps-tag-inprogress"> <dl class="dl-horizontal"> <dt class="text-left">Status:</dt> <dd>In Progress</dd> </dl> </div> <div class="fps-tag-block fps-tag-{day=11, month=4, year=2018}"> <dl class="dl-horizontal"> <dt class="text-left">Completed Date:</dt> <dd>11-4-2018</dd> </dl> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Approved </h4> </div> <div class="sortable-list ui-sortable" data-column-id="approved" data-column-value="approved Approved"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Editing in Progress </h4> </div> <div class="sortable-list ui-sortable" data-column-id="editinprog" data-column-value="editinprog Editing in Progress"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Awaiting Graphics </h4> </div> <div class="sortable-list ui-sortable" data-column-id="awaitgraph" data-column-value="awaitgraph Awaiting Graphics"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Dubbing </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readydubbing" data-column-value="readydubbing Ready for Dubbing"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Ready for Grading </h4> </div> <div class="sortable-list ui-sortable" data-column-id="readygrading" data-column-value="readygrading Ready for Grading"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Completed </h4> </div> <div class="sortable-list ui-sortable" data-column-id="completed" data-column-value="completed Completed"> <div class="ui-sortable-handle"> </div> </div> </div> </div> <div class="js-list list-wrapper "> <div class="list js-list-content"> <div class="list-header js-list-header u-clearfix is-menu-shown"> <div class="list-header-target js-editing-target"></div> <h4 class="list-header-name-assist js-list-name-assist text-center" dir="auto"> Not Approved -Do Not Distribute </h4> </div> <div class="sortable-list ui-sortable" data-column-id="notapproved" data-column-value="notapproved Not Approved -Do Not Distribute"> <div class="ui-sortable-handle"> </div> </div> </div> </div> </div> </div> </div> <div class="spacer-sml"></div> </form> </div> </div>