Inset and sidebar min-height

Hi,

I'm new to gavick templates.
I'm currently seting-up a new website based on game template. Everything works fine and I made some successful customization.
Anyway, there's something I can't find.

If I look to the template live demo, I can see that the min-height of gkSidebar, gkInset and gkContentWrap are dynamically updated to fit the whole height of the page. i.e. http://demo.gavick.com/joomla25/game/in ... s-official

On my website, the min-height remains 0 on these elements so the inset for example just fit the height of the content placed in it.
You can see it here: http://costumes.webizi.be/fr/le-concept

I turned of my overrides CSS and custom template position but the problem remains.

Is there something to setup, install or activate to achieve the automatic correct matching of the height of those elements?

Thank you for your help

Hi

There is no special option to trigger it. If inset will be smaller than content script will activate itself. Here is a part responsible:

Code: Select all

   var resize_boundary = parseInt(document.getElement('body').getProperty('data-tablet-width'), 10);
   var small_resize_boundary = parseInt(document.getElement('body').getProperty('data-tablet-small-width'), 10);
   var mobile_resize_boundary = parseInt(document.getElement('body').getProperty('data-mobile-width'), 10);
   var col_m = document.id('gkContentWrap');
   var col_s = document.id('gkSidebar');
   var col_i = document.id('gkInset');

   if(col_i) {
      var columnResize = function() {
         col_m.setStyle('min-height', '0');
         if(col_s) col_s.setStyle('min-height', '0');
         col_i.setStyle('min-height', '0');
         
         if(window.getSize().x > resize_boundary) {
            var col_m_h = col_m.getSize().y;
            var col_s_h = (col_s) ? col_s.getSize().y : 0;
            var col_i_h = col_i.getSize().y;
            var max = col_m_h;
            if(max < col_s_h) max = col_s_h;
            if(max < col_i_h) max = col_i_h;
            col_m.setStyle('min-height', max + "px");
            if(col_s) col_s.setStyle('min-height', max + "px");
            col_i.setStyle('min-height', (max + 35) + "px");
         } else if(window.getSize().x <= resize_boundary && window.getSize().x > mobile_resize_boundary) {
            var col_m_h = col_m.getSize().y;
            var col_i_h = col_i.getSize().y;
            var max = col_m_h;
            if(max < col_i_h) max = col_i_h;
            if(col_s) col_s.setStyle('min-height', "0");
            col_m.setStyle('min-height', max + "px");
            col_i.setStyle('min-height', max + "px");
         }
      }
      
      columnResize();
      
      setTimeout(function() { columnResize(); }, 1000);
      setTimeout(function() { columnResize(); }, 2500);
      setTimeout(function() { columnResize(); }, 5000);
      setTimeout(function() { columnResize(); }, 10000);
   
      window.addEvent('resize', function() {
         columnResize();
      });
   }



In Joomla! 3.3 does not calculate the min-height position "sidebar" and "inset" (still 0px) in Joomla! 2.5 it is OK.
Can you help?

Hi

Please show me Your site @Robert-J15.

Web have yet to localhost.
So far I have replaced in the script "...\templates\gk_game\js\gk.scripts.js"
Original code:

Code: Select all

jQuery.noConflict();
// cookie function
jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);
        if (value === null || value === undefined) {
            options.expires = -1;
        }
        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//
var page_loaded = false;
//
jQuery(document).ready(function() {
   // NSP suffix showcase
   jQuery('.showcase').each(function(i, wrapper) {
      wrapper = jQuery(wrapper);
      if(wrapper.find('.nspImageWrapper').length > 0 && wrapper.find('.nspHeader').length > 0) {
         wrapper.find('.nspArt').each(function(i, art) {
            jQuery(art).find('.nspImageWrapper').append(jQuery(art).find('.nspHeader'));
         });
      }
   });
});
//
jQuery(window).load(function() {
   setTimeout(function() {
      if(jQuery('#gkTopBar').length > 0) {
         jQuery('#gkTopBar').addClass('active');
      }
   }, 500);
   //
   page_loaded = true;
   // style area
   if(jQuery('#gkStyleArea').length > 0){
      jQuery('#gkStyleArea').find('a').each(function(i, element){
         jQuery(element).click(function(e){
            e.preventDefault();
            e.stopPropagation();
            changeStyle(i+1);
         });
      });
   }
   // font-size switcher
   if(jQuery('#gkTools').length > 0 && jQuery('#gkMainbody').length > 0) {
      var current_fs = 100;
      
      jQuery('#gkMainbody').css('font-size', current_fs+"%");
      
      jQuery('#gkToolsInc').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         if(current_fs < 150) { 
            jQuery('#gkMainbody').animate({ 'font-size': (current_fs + 10) + "%"}, 200);
            current_fs += 10;
         }
      });
      jQuery('#gkToolsReset').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         jQuery('#gkMainbody').animate({ 'font-size' : "100%"}, 200);
         current_fs = 100;
      });
      jQuery('#gkToolsDec').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         if(current_fs > 70) {
            jQuery('#gkMainbody').animate({ 'font-size': (current_fs - 10) + "%"}, 200);
            current_fs -= 10;
         }
      });
   }
   // system message container auto hide
   if(jQuery('#system-message-container').length > 0){
      jQuery('#system-message-container').each(function(i, element){
         (function() {
            jQuery(element).fadeOut('slow');
         }).delay(3500);
      });
   }
   // K2 font-size switcher fix
   if(jQuery('#fontIncrease').length > 0 && jQuery('.itemIntroText').length > 0) {
      jQuery('#fontIncrease').click(function() {
         jQuery('.itemIntroText').attr('class', 'itemIntroText largerFontSize');
      });
      
      jQuery('#fontDecrease').click( function() {
         jQuery('.itemIntroText').attr('class', 'itemIntroText smallerFontSize');
      });
   }
   // login popup
   if(jQuery('#gkPopupLogin').length > 0 && jQuery('#gkLogin').length > 0) {
      var popup_overlay = jQuery('#gkPopupOverlay');
      popup_overlay.css({'display': 'none', 'opacity' : 0});
      popup_overlay.fadeOut();
      
      jQuery('#gkPopupLogin').css({'display': 'block', 'opacity': 0, 'height' : 0});
      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
      
      if(jQuery('#gkPopupLogin')) {

         popup_login = jQuery('#gkPopupLogin');
         popup_login.css('display', 'block');
         popup_login_h = popup_login.find('.gkPopupWrap').outerHeight();
         
         jQuery('#gkLogin').click( function(e) {
            e.preventDefault();
            e.stopPropagation();
            popup_overlay.css({'opacity' : 0.45});
            popup_overlay.fadeIn('medium');
            
            setTimeout(function() {
               popup_login.animate({'opacity':1, 'height': popup_login_h},200, 'swing');
               opened_popup = 'login';
               popup_login.addClass('gk3Danim');
            }, 450);

            (function() {
               if(jQuery('#modlgn-username').length > 0) {
                  jQuery('#modlgn-username').focus();
               }
            }).delay(600);
         });
      }
      
      popup_overlay.click( function() {
         if(opened_popup == 'login')   {
            popup_overlay.fadeOut('medium');
            popup_login.removeClass('gk3Danim');
            setTimeout(function() {
               popup_login.animate({
                  'opacity' : 0
               },350, 'swing');
            }, 100);
            
         }
      });
   }

   var resize_boundary = parseInt(jQuery('body').data('tabletWidth'), 10);
   var mobile_resize_boundary = parseInt(jQuery('body').data('mobileWidth'), 10);
   var col_m = jQuery('#gkContentWrap');
   var col_s = jQuery('#gkSidebar');
   var col_i = jQuery('#gkInset');

   if(col_i.length > 0) {
      var columnResize = function() {
         col_m.css('min-height', '0');
         if(col_s) col_s.css('min-height', '0');
         col_i.css('min-height', '0');
         
         var col_m_h = col_m.height();
         var col_s_h = (col_s) ? col_s.height() : 0;
         var col_i_h = col_i.height();
         var max = col_m_h;

         if(jQuery(window).width > resize_boundary) {
            if(max < col_s_h) max = col_s_h;
            if(max < col_i_h) max = col_i_h;
            col_m.css('min-height', max + "px");
            if(col_s) col_s.css('min-height', max + "px");
            col_i.css('min-height', (max + 35) + "px");
         } else if(jQuery(window).width <= resize_boundary && jQuery(window).width() > mobile_resize_boundary) {
            col_m_h = col_m.height();
            col_i_h = col_i.height();
            max = col_m_h;
            if(max < col_i_h) max = col_i_h;
            if(col_s) col_s.css('min-height', "0");
            col_m.css('min-height', max + "px");
            col_i.css('min-height', max + "px");
         }
      };
      
      columnResize();
      
      setTimeout(function() { columnResize(); }, 1000);
      setTimeout(function() { columnResize(); }, 2500);
      setTimeout(function() { columnResize(); }, 5000);
      setTimeout(function() { columnResize(); }, 10000);
   
      jQuery(window).resize(function() {
         columnResize();
      });
   }
});
// Function to change styles
function changeStyle(style){
   var file1 = $GK_TMPL_URL+'/css/style'+style+'.css';
   var file2 = $GK_TMPL_URL+'/css/typography/typography.style'+style+'.css';
   jQuery('head').append('<link rel="stylesheet" href="'+file1+'" type="text/css" />');
   jQuery('head').append('<link rel="stylesheet" href="'+file2+'" type="text/css" />');
   jQuery.cookie('gk_game_j30_style', style, { expires: 365, path: '/' });
}

The modified script (rows 162-195):

Code: Select all

jQuery.noConflict();
// cookie function
jQuery.cookie = function (key, value, options) {
    // key and at least value given, set cookie...
    if (arguments.length > 1 && String(value) !== "[object Object]") {
        options = jQuery.extend({}, options);
        if (value === null || value === undefined) {
            options.expires = -1;
        }
        if (typeof options.expires === 'number') {
            var days = options.expires, t = options.expires = new Date();
            t.setDate(t.getDate() + days);
        }

        value = String(value);

        return (document.cookie = [
            encodeURIComponent(key), '=',
            options.raw ? value : encodeURIComponent(value),
            options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
            options.path ? '; path=' + options.path : '',
            options.domain ? '; domain=' + options.domain : '',
            options.secure ? '; secure' : ''
        ].join(''));
    }
    // key and possibly options given, get cookie...
    options = value || {};
    var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
    return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//
var page_loaded = false;
//
jQuery(document).ready(function() {
   // NSP suffix showcase
   jQuery('.showcase').each(function(i, wrapper) {
      wrapper = jQuery(wrapper);
      if(wrapper.find('.nspImageWrapper').length > 0 && wrapper.find('.nspHeader').length > 0) {
         wrapper.find('.nspArt').each(function(i, art) {
            jQuery(art).find('.nspImageWrapper').append(jQuery(art).find('.nspHeader'));
         });
      }
   });
});
//
jQuery(window).load(function() {
   setTimeout(function() {
      if(jQuery('#gkTopBar').length > 0) {
         jQuery('#gkTopBar').addClass('active');
      }
   }, 500);
   //
   page_loaded = true;
   // style area
   if(jQuery('#gkStyleArea').length > 0){
      jQuery('#gkStyleArea').find('a').each(function(i, element){
         jQuery(element).click(function(e){
            e.preventDefault();
            e.stopPropagation();
            changeStyle(i+1);
         });
      });
   }
   // font-size switcher
   if(jQuery('#gkTools').length > 0 && jQuery('#gkMainbody').length > 0) {
      var current_fs = 100;
      
      jQuery('#gkMainbody').css('font-size', current_fs+"%");
      
      jQuery('#gkToolsInc').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         if(current_fs < 150) { 
            jQuery('#gkMainbody').animate({ 'font-size': (current_fs + 10) + "%"}, 200);
            current_fs += 10;
         }
      });
      jQuery('#gkToolsReset').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         jQuery('#gkMainbody').animate({ 'font-size' : "100%"}, 200);
         current_fs = 100;
      });
      jQuery('#gkToolsDec').click(function(e){
         e.stopPropagation();
         e.preventDefault();
         if(current_fs > 70) {
            jQuery('#gkMainbody').animate({ 'font-size': (current_fs - 10) + "%"}, 200);
            current_fs -= 10;
         }
      });
   }
   // system message container auto hide
   if(jQuery('#system-message-container').length > 0){
      jQuery('#system-message-container').each(function(i, element){
         (function() {
            jQuery(element).fadeOut('slow');
         }).delay(3500);
      });
   }
   // K2 font-size switcher fix
   if(jQuery('#fontIncrease').length > 0 && jQuery('.itemIntroText').length > 0) {
      jQuery('#fontIncrease').click(function() {
         jQuery('.itemIntroText').attr('class', 'itemIntroText largerFontSize');
      });
      
      jQuery('#fontDecrease').click( function() {
         jQuery('.itemIntroText').attr('class', 'itemIntroText smallerFontSize');
      });
   }
   // login popup
   if(jQuery('#gkPopupLogin').length > 0 && jQuery('#gkLogin').length > 0) {
      var popup_overlay = jQuery('#gkPopupOverlay');
      popup_overlay.css({'display': 'none', 'opacity' : 0});
      popup_overlay.fadeOut();
      
      jQuery('#gkPopupLogin').css({'display': 'block', 'opacity': 0, 'height' : 0});
      var opened_popup = null;
      var popup_login = null;
      var popup_login_h = null;
      
      if(jQuery('#gkPopupLogin')) {

         popup_login = jQuery('#gkPopupLogin');
         popup_login.css('display', 'block');
         popup_login_h = popup_login.find('.gkPopupWrap').outerHeight();
         
         jQuery('#gkLogin').click( function(e) {
            e.preventDefault();
            e.stopPropagation();
            popup_overlay.css({'opacity' : 0.45});
            popup_overlay.fadeIn('medium');
            
            setTimeout(function() {
               popup_login.animate({'opacity':1, 'height': popup_login_h},200, 'swing');
               opened_popup = 'login';
               popup_login.addClass('gk3Danim');
            }, 450);

            (function() {
               if(jQuery('#modlgn-username').length > 0) {
                  jQuery('#modlgn-username').focus();
               }
            }).delay(600);
         });
      }
      
      popup_overlay.click( function() {
         if(opened_popup == 'login')   {
            popup_overlay.fadeOut('medium');
            popup_login.removeClass('gk3Danim');
            setTimeout(function() {
               popup_login.animate({
                  'opacity' : 0
               },350, 'swing');
            }, 100);
            
         }
      });
   }

       var resize_boundary = parseInt(document.getElement('body').getProperty('data-tablet-width'), 10);
       var small_resize_boundary = parseInt(document.getElement('body').getProperty('data-tablet-small-width'), 10);
       var mobile_resize_boundary = parseInt(document.getElement('body').getProperty('data-mobile-width'), 10);
       var col_m = document.id('gkContentWrap');
       var col_s = document.id('gkSidebar');
       var col_i = document.id('gkInset');

       if(col_i) {
          var columnResize = function() {
             col_m.setStyle('min-height', '0');
             if(col_s) col_s.setStyle('min-height', '0');
             col_i.setStyle('min-height', '0');
             
             if(window.getSize().x > resize_boundary) {
                var col_m_h = col_m.getSize().y;
                var col_s_h = (col_s) ? col_s.getSize().y : 0;
                var col_i_h = col_i.getSize().y;
                var max = col_m_h;
                if(max < col_s_h) max = col_s_h;
                if(max < col_i_h) max = col_i_h;
                col_m.setStyle('min-height', max + "px");
                if(col_s) col_s.setStyle('min-height', max + "px");
                col_i.setStyle('min-height', (max + 35) + "px");
             } else if(window.getSize().x <= resize_boundary && window.getSize().x > mobile_resize_boundary) {
                var col_m_h = col_m.getSize().y;
                var col_i_h = col_i.getSize().y;
                var max = col_m_h;
                if(max < col_i_h) max = col_i_h;
                if(col_s) col_s.setStyle('min-height', "0");
                col_m.setStyle('min-height', max + "px");
                col_i.setStyle('min-height', max + "px");
             }
          }
         
          columnResize();
         
          setTimeout(function() { columnResize(); }, 1000);
          setTimeout(function() { columnResize(); }, 2500);
          setTimeout(function() { columnResize(); }, 5000);
          setTimeout(function() { columnResize(); }, 10000);
       
          window.addEvent('resize', function() {
             columnResize();
          });
       }


});
// Function to change styles
function changeStyle(style){
   var file1 = $GK_TMPL_URL+'/css/style'+style+'.css';
   var file2 = $GK_TMPL_URL+'/css/typography/typography.style'+style+'.css';
   jQuery('head').append('<link rel="stylesheet" href="'+file1+'" type="text/css" />');
   jQuery('head').append('<link rel="stylesheet" href="'+file2+'" type="text/css" />');
   jQuery.cookie('gk_game_j30_style', style, { expires: 365, path: '/' });
}

It seems that it works and not a script error. If you have a better solution, I'll just like it.
Thanks for the reply.

Hi

I cannot tell much without seeing the site. Need to check console, because I think it may be because of some javascript conflict. If replacing file worked than I believe it is a good solution and You can leave it like that, but if You will see this problem again than please let me know when site will be available online.