Page Layout Ideas, custom CSS, JavaScript, etc.
Suggests for gadget layout to facilitate various use cases and workflows, JavaScript and CSS tricks which can be added via Edit Page option, and links to custom styles generated by users which can be added to various gadgets via configuration.
https://vmrcre.org/c/message_boards/find_category?p_l_id=30182&mbCategoryId=57267
2024-03-29T07:46:43Z
2024-03-29T07:46:43Z
Slider tools on left and bottom
Troy A. Griffitts
https://vmrcre.org/c/message_boards/find_message?p_l_id=30182&messageId=57285
2016-10-29T18:29:37Z
2016-10-29T18:28:14Z
The NTVMR Manuscript Workspace page has tool panels which rest to the left and bottom and slide out on mouse hover. The magic to make this happens is as follows:<br /><br />Create a page and choose a the 2-2 Column Layout: <img src="http://vmrcre.org/documents/20147/0/2by2layout.png/8bb5e45d-b172-10e3-30f2-df83a6fb4e01" /> <br />Place the gadgets you wish to remain stationary in the top 2 positions in the layout<br />Place the gadget you wish to use as the tool to slide out from the left in the bottom left position<br />Place the gadget you wish to use as the tool to slide out from the bottom in the bottom right position<br /><br />Under the page's "Look and Feel" settings, define a custom look and feel for this page and use this in the CSS setting:<br /><br /><div class="lfr-code"><table><tbody><tr><td class="line-numbers" data-line-number="1"></td><td class="lines"><div class="line">#column-3 {</div></td></tr><tr><td class="line-numbers" data-line-number="2"></td><td class="lines"><div class="line"> position: absolute;</div></td></tr><tr><td class="line-numbers" data-line-number="3"></td><td class="lines"><div class="line"> width: 620px;</div></td></tr><tr><td class="line-numbers" data-line-number="4"></td><td class="lines"><div class="line"> top: 200px;</div></td></tr><tr><td class="line-numbers" data-line-number="5"></td><td class="lines"><div class="line"> left: -90px;</div></td></tr><tr><td class="line-numbers" data-line-number="6"></td><td class="lines"><div class="line"> padding-left: 90px;</div></td></tr><tr><td class="line-numbers" data-line-number="7"></td><td class="lines"><div class="line"> padding-right: 50px;</div></td></tr><tr><td class="line-numbers" data-line-number="8"></td><td class="lines"><div class="line">}</div></td></tr><tr><td class="line-numbers" data-line-number="9"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="10"></td><td class="lines"><div class="line">#column-4 {</div></td></tr><tr><td class="line-numbers" data-line-number="11"></td><td class="lines"><div class="line"> bottom: -530px;</div></td></tr><tr><td class="line-numbers" data-line-number="12"></td><td class="lines"><div class="line"> height: 550px;</div></td></tr><tr><td class="line-numbers" data-line-number="13"></td><td class="lines"><div class="line"> overflow: hidden;</div></td></tr><tr><td class="line-numbers" data-line-number="14"></td><td class="lines"><div class="line"> position: fixed;</div></td></tr><tr><td class="line-numbers" data-line-number="15"></td><td class="lines"><div class="line"> left:15px;</div></td></tr><tr><td class="line-numbers" data-line-number="16"></td><td class="lines"><div class="line"> right: 15px;</div></td></tr><tr><td class="line-numbers" data-line-number="17"></td><td class="lines"><div class="line"> z-index: 5;</div></td></tr><tr><td class="line-numbers" data-line-number="18"></td><td class="lines"><div class="line"> padding-bottom: 90px;</div></td></tr><tr><td class="line-numbers" data-line-number="19"></td><td class="lines"><div class="line"> }</div></td></tr></tbody></table></div>Finally, add this to your page's JavaScript setting:<br /><br /><div class="lfr-code"><table><tbody><tr><td class="line-numbers" data-line-number="1"></td><td class="lines"><div class="line">AUI().use('get', function(A) { A.Get.script('http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js', { onSuccess: function() {</div></td></tr><tr><td class="line-numbers" data-line-number="2"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="3"></td><td class="lines"><div class="line">$('#column-3').find('header')</div></td></tr><tr><td class="line-numbers" data-line-number="4"></td><td class="lines"><div class="line"> .css('position', 'absolute')</div></td></tr><tr><td class="line-numbers" data-line-number="5"></td><td class="lines"><div class="line"> .css('-webkit-transform', 'rotate(90deg)')</div></td></tr><tr><td class="line-numbers" data-line-number="6"></td><td class="lines"><div class="line"> .css('-moz-transform', 'rotate(90deg)')</div></td></tr><tr><td class="line-numbers" data-line-number="7"></td><td class="lines"><div class="line"> .css('-ms-transform', 'rotate(90deg)')</div></td></tr><tr><td class="line-numbers" data-line-number="8"></td><td class="lines"><div class="line"> .css('-o-transform', 'rotate(90deg)')</div></td></tr><tr><td class="line-numbers" data-line-number="9"></td><td class="lines"><div class="line"> .css('transform', 'rotate(90deg)')</div></td></tr><tr><td class="line-numbers" data-line-number="10"></td><td class="lines"><div class="line"> .css('width', '200px')</div></td></tr><tr><td class="line-numbers" data-line-number="11"></td><td class="lines"><div class="line"> .css('right', '-60px')</div></td></tr><tr><td class="line-numbers" data-line-number="12"></td><td class="lines"><div class="line"> .css('top', '180px')</div></td></tr><tr><td class="line-numbers" data-line-number="13"></td><td class="lines"><div class="line"> .css('text-align', 'center');</div></td></tr><tr><td class="line-numbers" data-line-number="14"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="15"></td><td class="lines"><div class="line">$('#column-4').find('header')</div></td></tr><tr><td class="line-numbers" data-line-number="16"></td><td class="lines"><div class="line"> .css('width', '200px')</div></td></tr><tr><td class="line-numbers" data-line-number="17"></td><td class="lines"><div class="line"> .css('margin-left', '40px')</div></td></tr><tr><td class="line-numbers" data-line-number="18"></td><td class="lines"><div class="line"> .css('margin-top', '-30px')</div></td></tr><tr><td class="line-numbers" data-line-number="19"></td><td class="lines"><div class="line"> .css('z-index', '99999')</div></td></tr><tr><td class="line-numbers" data-line-number="20"></td><td class="lines"><div class="line"> .css('text-align', 'center')</div></td></tr><tr><td class="line-numbers" data-line-number="21"></td><td class="lines"><div class="line"> .css('position', 'fixed');</div></td></tr><tr><td class="line-numbers" data-line-number="22"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="23"></td><td class="lines"><div class="line">$('#column-3').mouseenter(function() {</div></td></tr><tr><td class="line-numbers" data-line-number="24"></td><td class="lines"><div class="line"> if (!$(this).hasClass("popped")) {</div></td></tr><tr><td class="line-numbers" data-line-number="25"></td><td class="lines"><div class="line"> $(this).animate({left: "-90px" }, {queue: false, duration: 500}).addClass("popped");</div></td></tr><tr><td class="line-numbers" data-line-number="26"></td><td class="lines"><div class="line"> }</div></td></tr><tr><td class="line-numbers" data-line-number="27"></td><td class="lines"><div class="line">})</div></td></tr><tr><td class="line-numbers" data-line-number="28"></td><td class="lines"><div class="line"> .mouseleave(function(e) {</div></td></tr><tr><td class="line-numbers" data-line-number="29"></td><td class="lines"><div class="line"> if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;</div></td></tr><tr><td class="line-numbers" data-line-number="30"></td><td class="lines"><div class="line"> if ($(this).hasClass("popped")) {</div></td></tr><tr><td class="line-numbers" data-line-number="31"></td><td class="lines"><div class="line"> $(this).animate({left:"-550px"}, {queue: false, duration: 500}).removeClass("popped");</div></td></tr><tr><td class="line-numbers" data-line-number="32"></td><td class="lines"><div class="line"> }</div></td></tr><tr><td class="line-numbers" data-line-number="33"></td><td class="lines"><div class="line">});</div></td></tr><tr><td class="line-numbers" data-line-number="34"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="35"></td><td class="lines"><div class="line">$('#column-4').mouseenter(function() {</div></td></tr><tr><td class="line-numbers" data-line-number="36"></td><td class="lines"><div class="line"> if (!$(this).hasClass("popped")) {</div></td></tr><tr><td class="line-numbers" data-line-number="37"></td><td class="lines"><div class="line"> $(this).animate({bottom: "-75px" }, {queue: false, duration: 500}).addClass("popped").css('z-index', 1001);</div></td></tr><tr><td class="line-numbers" data-line-number="38"></td><td class="lines"><div class="line"> }</div></td></tr><tr><td class="line-numbers" data-line-number="39"></td><td class="lines"><div class="line">})</div></td></tr><tr><td class="line-numbers" data-line-number="40"></td><td class="lines"><div class="line"> .mouseleave(function(e) {</div></td></tr><tr><td class="line-numbers" data-line-number="41"></td><td class="lines"><div class="line"> if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;</div></td></tr><tr><td class="line-numbers" data-line-number="42"></td><td class="lines"><div class="line"> if ($(this).hasClass("popped")){</div></td></tr><tr><td class="line-numbers" data-line-number="43"></td><td class="lines"><div class="line"> $(this).css('z-index', 3).animate({bottom:'-530px'}, {queue: false, duration: 500}).removeClass("popped");</div></td></tr><tr><td class="line-numbers" data-line-number="44"></td><td class="lines"><div class="line"> }</div></td></tr><tr><td class="line-numbers" data-line-number="45"></td><td class="lines"><div class="line">});</div></td></tr><tr><td class="line-numbers" data-line-number="46"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="47"></td><td class="lines"><div class="line">$(window).resize(function() {</div></td></tr><tr><td class="line-numbers" data-line-number="48"></td><td class="lines"><div class="line"> expandFillPageClients();</div></td></tr><tr><td class="line-numbers" data-line-number="49"></td><td class="lines"><div class="line">});</div></td></tr><tr><td class="line-numbers" data-line-number="50"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="51"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="52"></td><td class="lines"><div class="line">var MARGIN=67;</div></td></tr><tr><td class="line-numbers" data-line-number="53"></td><td class="lines"><div class="line">function expandFillPageClients() {</div></td></tr><tr><td class="line-numbers" data-line-number="54"></td><td class="lines"><div class="line"> $('#column-1, #column-2, #column-3').find('.liferaygadget, .gadget').each(function () {</div></td></tr><tr><td class="line-numbers" data-line-number="55"></td><td class="lines"><div class="line"> $(this).height(window.innerHeight - $(this).offset().top - MARGIN);</div></td></tr><tr><td class="line-numbers" data-line-number="56"></td><td class="lines"><div class="line"> });</div></td></tr><tr><td class="line-numbers" data-line-number="57"></td><td class="lines"><div class="line">}</div></td></tr><tr><td class="line-numbers" data-line-number="58"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="59"></td><td class="lines"><div class="line">var afterLoad = function(max, n) {</div></td></tr><tr><td class="line-numbers" data-line-number="60"></td><td class="lines"><div class="line"> if (!n) n = 0; if (n > max) return;</div></td></tr><tr><td class="line-numbers" data-line-number="61"></td><td class="lines"><div class="line"> expandFillPageClients();</div></td></tr><tr><td class="line-numbers" data-line-number="62"></td><td class="lines"><div class="line"> setTimeout(function() { afterLoad(max, n+1); }, 1000);</div></td></tr><tr><td class="line-numbers" data-line-number="63"></td><td class="lines"><div class="line">}</div></td></tr><tr><td class="line-numbers" data-line-number="64"></td><td class="lines"><div class="line">afterLoad(12);</div></td></tr><tr><td class="line-numbers" data-line-number="65"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="66"></td><td class="lines"><div class="line">$("body").css("overflow", "hidden");</div></td></tr><tr><td class="line-numbers" data-line-number="67"></td><td class="lines"><div class="line"><br /></div></td></tr><tr><td class="line-numbers" data-line-number="68"></td><td class="lines"><div class="line">} }); });</div></td></tr></tbody></table></div>
Troy A. Griffitts
2016-10-29T18:28:14Z