0
Welcome Guest! Login
0 items Join Now

responsive layout, javascript vs css

Last Post
Search Topic

  • responsive layout, javascript vs css

    Posted 7 years 8 months ago
    • Hi,
      since the dropdown menu in the default template does not work well I checked the code and wondered
      about the mixure of
      • responsive layout for new browsers (css mediaqueries)
      • responsive layout for IE8 (javascript mediaqueries)
      • normal css menu stuff

      My comments and questions are in the code.
      Old Version of dropdown feature layout.php:
      public function stageHeader()
    {
		global $gantry;

        JHtml::_('behavior.framework', true);
        
        // mix single load Javascript with responsive-mode?
        // where are the css mediaqueries for newer browser type?
		if (!self::$jsLoaded && $gantry->get('layout-mode', 'responsive') == 'responsive'){
		
		    // NOT IE<9 !? So all this javascript is loaded for new browsers !?
            if (!($gantry->browser->name == 'ie' && $gantry->browser->shortver < 9)){
                $gantry->addScript($gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js');
                if ($this->args['responsive-menu'] == 'selectbox') {
                    $gantry->addScript($gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive.js');
                    $gantry->addScript($gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive-selectbox.js');
                } else if (file_exists($gantry->basePath . '/modules/mod_roknavmenu/themes/default/js/sidemenu.js') && 
                            ($this->args['responsive-menu'] == 'panel')) {
                    $gantry->addScript($gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/sidemenu.js');
                }
                
            } //
              // else for newer browser? css mediaqueries ?
            
			self::$jsLoaded = true;
        }
        
		$gantry->addLess('menu.less', 'menu.css', 1, 
		                  array('headerstyle'=>$gantry->get('headerstyle','dark'), 
		                 'menuHoverColor'=>$gantry->get('linkcolor')));

        // hovers are loaded only for old IE 8 !?
        // IE8 condition is relevant only for the media query method
        if ($gantry->browser->name == 'ie' && $gantry->browser->shortver < 9){
            $gantry->addLess('menu-hovers.less', 'menu-hovers.css', 1, 
            array('headerstyle'=>$gantry->get('headerstyle','dark'), 'menuHoverColor'=>$gantry->get('linkcolor')));
        }
    }

      I think it should look like that. Can someone verify this?
      New version of dropdown feature layout.php:
      public function stageHeader()
{
    global $gantry;
    
    JHtml::_('behavior.framework', true);
    
    $lessVariables = array('headerstyle' => $gantry->get('headerstyle', 'dark'),
                        'menuHoverColor' => $gantry->get('linkcolor', '#ccc'));
    
    $gantry->addLess('menu.less', 'menu.css', 1, $lessVariables );
    $gantry->addLess('menu-hovers.less', 'menu-hovers.css', 1, $lessVariables);
    
    
    if ($gantry->get('layout-mode', 'responsive') == 'responsive')
    {
        $this->_includeIECompatibility();
    
        // CSS mediaqueries for new browsers are included with feature/styledeclaration.php 
    }
}


private function _includeIECompatibility()
{
    global $gantry;
    
    // newer browsers do not require javascript media queries
    if( !($gantry->browser->name == 'ie' && $gantry->browser->shortver < 9) ) return;
    
    
    // IE <= 8 does not support css mediaqueries, so javascript is used
    $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js';
    if (file_exists($filepath)) $gantry->addScript($filepath);
    
    if ($this->args['responsive-menu'] == 'selectbox')
    {
        $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive.js';
        if (file_exists($filepath)) $gantry->addScript($filepath);
    
        $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive-selectbox.js';
        if (file_exists($filepath)) $gantry->addScript($filepath);
    }
    else // if ($this->args['responsive-menu'] == 'panel')
    {
        $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/sidemenu.js';
        if (file_exists($filepath)) $gantry->addScript($filepath);
    }
}

      Can someone verify this?
      Besides I think the implementation of common menu css and js stuff is the wrong place
      since there is a copy & paste version in splitmenu layout.php.
      It should be in a common /feature/menu.php file and depend on
      $gantry->get('menu-enabled')
    • Last Edit: 7 years 8 months ago by Christoph Hagedorn.
    #1359284
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: responsive layout, javascript vs css

    Posted 7 years 8 months ago
    • I can't really comment so I'll ask our lead developer to take a look at your suggestion and will get back to you.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1359294
    • Matias Griese's Avatar
    • Matias Griese
    • Sr. Rocketeer
    • Posts: 249
    • Thanks: 104
    • Lead Developer

    Re: responsive layout, javascript vs css

    Posted 7 years 8 months ago
    • Unfortunately, I'm not familiar with this code and without proper and extensive testing it is almost impossible to know which way it should be. Your code looks clean and correct, but the comments in the old code contradict on your changes.

      If you would be kind and give our testers proper example on how to test the functionality, they could try to reproduce the issue and apply the fix.
    • Gantry 5, enjoy!
    #1359305

  • Re: responsive layout, javascript vs css

    Posted 7 years 8 months ago
    • Hi,
      just for the records. The changes mentioned before were wrong, because
      • gantry4 dropdown and splitmenu require css media queries and javascript
      • the javascript relocates under certain screen sizes the menu code
      • the javascript code has to be called in a specific order otherwise the menus do not work properly
      • the javascript media queries are not in sync with the css ones, e.g. (min-width: 768px) and (max-width: 959px) is not supported

      The tested version of the above mentioned version is below.
      What I still could not figure out is how to make touch devices work with the dropdown menu.
      public function stageHeader()
{
    global $gantry;
    
    //don't include class_sfx on 3rd level menu
    $this->args['class_sfx'] = (array_key_exists('startlevel', $this->args) 
                               && $this->args['startLevel'] == 1) ? '' : $this->args['class_sfx'];
    $this->activeid          = (array_key_exists('enable_current_id', $this->args) 
                               && $this->args['enable_current_id'] == 0) ? false : true;
    
    JHtml::_('behavior.framework', true);


    $lessVariables = array('headerstyle' => $gantry->get('headerstyle', 'dark'),
                           'menuHoverColor' => $gantry->get('linkcolor', '#ccc'),
                           'layout-mode' => $gantry->get('layout-mode', 'responsive'),
    );

    $gantry->addLess('menu.less', 'menu.css', 1, $lessVariables );


    if ($gantry->get('layout-mode', 'responsive') == 'responsive')
    {
      if(!self::$jsLoaded){

        self::$jsLoaded= true; // prevent multiple load of js

        // $gantry->addScript() searches pathes itself, no test if exist required
        $gantry->addScript('modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js');

        if ($this->args['responsive-menu'] == 'selectbox') {

          $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive.js';
          $gantry->addScript($filepath);

          $filepath = $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive-selectbox.js';
          $gantry->addScript($filepath);

        }
        else { // if ($this->args['responsive-menu'] == 'panel')
          $filepath = $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/sidemenu.js';
          $gantry->addScript($filepath);
        }

      }
    }
}
    #1360483
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: responsive layout, javascript vs css

    Posted 7 years 8 months ago
    • Matias Griese wrote:
      If you would be kind and give our testers proper example on how to test the functionality, they could try to reproduce the issue and apply the fix.

      Without knowing the issue that you trying to solve it's difficult for us to comment further. Please give an example of the issue (without fix) so we can see the actual problem.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1360531

  • Re: responsive layout, javascript vs css

    Posted 7 years 7 months ago
    • Well, I fixed it for my purposes already. I just did not understand the reasons for that code and what it was supposed to solve.
      But meanwhile I have made some progress :)

      Here is the current code I use:

      public function stageHeader()
{
    global $gantry;
    
    // don't include class_sfx (class suffix) on 2nd level  (level==1,whatever sense that's supposed to make)
    $this->args['class_sfx'] = (array_key_exists('startlevel', $this->args) && 
                            $this->args['startLevel'] == 1) ? '' : $this->args['class_sfx'];
                            
    $this->activeid          = (array_key_exists('enable_current_id', $this->args) && 
                            $this->args['enable_current_id'] == 0) ? false : true;
    
    JHtml::_('behavior.framework', true);
    
    // compared to gantry4 default template changes in css classes have been made
    // e.g. no menu-hover.less but menu-responsive.less
    $lessVariables = array('headerstyle' => $gantry->get('headerstyle', 'dark'),
                         'menuHoverColor' => $gantry->get('linkcolor', '#ccc'),
                       'layout-mode' => $gantry->get('layout-mode', 'responsive'),
                      );
    
    $gantry->addLess('menu.less', 'menu.css', 1, $lessVariables );
    
    
    if ($gantry->get('layout-mode', 'responsive') == 'responsive')
    {
        if(!self::$jsLoaded){
        
            self::$jsLoaded= true; // prevent multiple load of js
            
            // $gantry->addScript() searches pathes itself, no test if exist required
            $gantry->addScript('modules/mod_roknavmenu/themes/default/js/rokmediaqueries.js');
            
            // beware, order of js includes is mandatory, otherwise responsive menus are messed up
            if ($this->args['responsive-menu'] == 'selectbox') {
            
                $filepath= $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive.js';
                $gantry->addScript($filepath);
                
                $filepath = $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/responsive-selectbox.js';
                $gantry->addScript($filepath);
            
            }
            else { // if ($this->args['responsive-menu'] == 'panel')
                $filepath = $gantry->baseUrl . 'modules/mod_roknavmenu/themes/default/js/sidemenu.js';
                $gantry->addScript($filepath);
            }
        }
    }
}
    • Last Edit: 7 years 7 months ago by Christoph Hagedorn.
    #1361182
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: responsive layout, javascript vs css

    Posted 7 years 7 months ago
    • Ok but we will still don't understand what you are "fixing" to be able to comment. What is the issue when using our code?

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1361187

  • Re: responsive layout, javascript vs css

    Posted 7 years 7 months ago
    • Well, my inital post is related to this thread:
      www.rockettheme.com/forum/gantry-for-joo...-drop-down-is-active

      Finally I did not actually fix anything here. It's just a little cleaner and I pass a "layout-mode" variable into less.
      With this I have better control over the styles in responsive mode.
      The "fix" is done in the part of the other thread mentioned above.
    #1361324
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: responsive layout, javascript vs css

    Posted 7 years 7 months ago
    • Ok Well Matt already raised a ticket for you and that is still outstanding - our DEVS will have to investigate.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1361352

Time to create page: 0.070 seconds