Forums

Slider tools on left and bottom

thumbnail
Troy A. Griffitts, 8 Jaren geleden aangepast.

Slider tools on left and bottom

Youngling Berichten: 13 Aanmelddatum: 12-8-16 Recente berichten
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");

} }); });