Trigger for Menu Not Working

Hi,
I need an explanation and an idea on how to fix the following. The scenario is, on cloudhost

1. if you scroll down the page the menu appears when you get to next module - Great
2. If you put a menu link to say #gkBottom1 then the menu appears - again great.

3. If you change that menu item to a full link ie http://www.xxx.com/#gkBottom1 so it will work when you are not on the home page the menu display does not get triggered until you scroll the page.

So the question is how can I get around this, and get the menu to appear when called like option 3.


Thanks

Tony

Hi,

Please try to add the following JS code at the end of the gk.scripts.js file:

Code: Select all

window.addEvent('load', function() {
        if(document.getElement('body').hasClass('imageBg') && !document.id('aside-menu')) {
                // if menu is not displayed now
                if(window.getScroll().y > document.id('gkHeader').getSize().y && !document.id('gkMenuWrap').hasClass('active')) {
                        document.id('gkTopBar').inject(document.id('gkMenuWrap'), 'inside');
                        document.id('gkHeaderNav').inject(document.id('gkMenuWrap'), 'inside');
                        document.id('gkHeader').setProperty('class', 'gkNoMenu');
                        document.id('gkHeader').getElement('div').setStyle('display', 'none');
                        document.id('gkMenuWrap').setProperty('class', 'active');
                }
                //
                if(window.getScroll().y <= document.id('gkHeader').getSize().y && document.id('gkMenuWrap').hasClass('active')) {
                        document.id('gkHeader').getElement('div').setStyle('display', 'block');
                        document.id('gkTopBar').inject(document.id('gkBg'), 'top');
                        document.id('gkHeaderNav').inject(document.id('gkHeader').getElement('div'), 'top');
                        document.id('gkHeader').setProperty('class', '');
                        document.id('gkMenuWrap').setProperty('class', '');
                }
        }
});


Hi,
I gave it a tri and it dosent work. The problem seems to only relate to the first entry under the header. you can see at www.dragonmall.co.uk. It also seems to wipe out the background image on the header somehow when you scroll back up

I will leave their overnight but will have to take back out first thing

Tony

Sorry, my mistake - now I've discovered that you're using J!3.x version so your code should be based on jQuery - please replace my code with:

Code: Select all

jQuery(window).load(function() {
    if(page_loaded && jQuery('body').hasClass('imageBg') && jQuery('#aside-menu').length == 0) {
      // if menu is not displayed now
      if(jQuery(window).scrollTop() > jQuery('#gkHeader').height() && !jQuery('#gkMenuWrap').hasClass('active')) {
         jQuery('#gkTopBar').appendTo(jQuery('#gkMenuWrap'));
         jQuery('#gkHeaderNav').appendTo(jQuery('#gkMenuWrap'));
         jQuery('#gkHeader').attr('class', 'gkNoMenu');
         jQuery('#gkHeader').find('div').eq(0).css('display', 'none');
         jQuery('#gkMenuWrap').attr('class', 'active');
      }
      //
      if(jQuery(window).scrollTop() <= jQuery('#gkHeader').height() && jQuery('#gkMenuWrap').hasClass('active')) {
         jQuery('#gkHeader').find('div').eq(0).css('display', 'block');
         
         jQuery('#gkTopBar').prependTo(jQuery('#gkBg'));
         jQuery('#gkHeader').find('div').eq(0).append(jQuery('#gkHeaderNav'));
         jQuery('#gkHeaderNav').prependTo(jQuery('#gkHeader > div').eq(0));
         
         jQuery('#gkHeader').attr('class', '');
         jQuery('#gkMenuWrap').attr('class', '');
      }
   }
});

it should helps

Ive applied this code to my Joomla 3.3.3. site and it doesnt fix the issue....

@j37h3r - did you refreshed your browser cache after adding the JS change?