掲示板

Slider tools on left and bottom

thumbnail
8年前 に Troy A. Griffitts によって更新されました。

Slider tools on left and bottom

Youngling 投稿: 13 参加年月日: 16/08/12 最新の投稿
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:

Create a page and choose a the 2-2 Column Layout: ​​​​​​​ 
Place the gadgets you wish to remain stationary in the top 2 positions in the layout
Place the gadget you wish to use as the tool to slide out from the left in the bottom left position
Place the gadget you wish to use as the tool to slide out from the bottom in the bottom right position

Under the page's "Look and Feel" settings, define a custom look and feel for this page and use this in the CSS setting:

#column-3 {
    position: absolute;
    width: 620px;
    top: 200px;
    left: -90px;
    padding-left: 90px;
    padding-right: 50px;
}

#column-4 {
    bottom: -530px;
    height: 550px;
    overflow: hidden;
    position: fixed;
    left:15px;
    right: 15px;
    z-index: 5;
    padding-bottom: 90px;
}
Finally, add this to your page's JavaScript setting:
​​​​​​​
​​​​​​​AUI().use('get', function(A) { A.Get.script('http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js', { onSuccess: function() {

$('#column-3').find('header')
   .css('position', 'absolute')
   .css('-webkit-transform', 'rotate(90deg)')
   .css('-moz-transform', 'rotate(90deg)')
   .css('-ms-transform', 'rotate(90deg)')
   .css('-o-transform', 'rotate(90deg)')
   .css('transform', 'rotate(90deg)')
   .css('width', '200px')
   .css('right', '-60px')
   .css('top', '180px')
   .css('text-align', 'center');

$('#column-4').find('header')
   .css('width', '200px')
   .css('margin-left', '40px')
   .css('margin-top', '-30px')
   .css('z-index', '99999')
   .css('text-align', 'center')
   .css('position', 'fixed');

$('#column-3').mouseenter(function() {
     if (!$(this).hasClass("popped")) {
          $(this).animate({left: "-90px" }, {queue: false, duration: 500}).addClass("popped");
     }
})
.mouseleave(function(e) {
     if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;
     if ($(this).hasClass("popped")) {
          $(this).animate({left:"-550px"}, {queue: false, duration: 500}).removeClass("popped");
     }
});

$('#column-4').mouseenter(function() {
     if (!$(this).hasClass("popped")) {
          $(this).animate({bottom: "-75px" }, {queue: false, duration: 500}).addClass("popped").css('z-index', 1001);
     }
})
.mouseleave(function(e) {
    if (!e.relatedTarget || $(e.relatedTarget).attr('id')=='dockbar') return;
    if ($(this).hasClass("popped")){
          $(this).css('z-index', 3).animate({bottom:'-530px'}, {queue: false, duration: 500}).removeClass("popped");
     }
});

$(window).resize(function() {
     expandFillPageClients();
});


var MARGIN=67;
function expandFillPageClients() {
     $('#column-1, #column-2, #column-3').find('.liferaygadget, .gadget').each(function () {
         $(this).height(window.innerHeight - $(this).offset().top - MARGIN);
     });
}

var afterLoad = function(max, n) {
     if (!n) n = 0; if (n > max) return;
     expandFillPageClients();
     setTimeout(function() { afterLoad(max, n+1); }, 1000);
}
afterLoad(12);

$("body").css("overflow", "hidden");

} }); });