Slider tools on left and bottom
Slider tools on left and bottom
https://vmrcre.org/c/message_boards/find_thread?p_l_id=30182&threadId=57286
2024-03-29T15:32:37Z
2024-03-29T15:32:37Z
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