Preactivating links with jQuery

Question

Thanks to the several answers found at Stack Overflow I have made the following construction that works as it should with no problem: https://jsfiddle.net/cL1xw2y5/

The real problem is that when the page loads it is only top level navigation menu visible with no items selected. Also when any top level button opens associated side menu there is no item in side menu selected also. And therefore no content is displayed.

As I'm a total noob in any kind of programming I'm courteously asking for your kind help with the following matters:

I need any one of the top menu items preselected with appropriated side menu opened when the page loads.
I also need any one of the side menu items preselected with appropriated content displayed when the page loads or top level menu item activated/preactivated.

May be even in random order, say, randomly activated top level menu item shows its side menu with randomly activated side menu item showing its content.

Any kind of help would be geatly appreciated. Thanks in advance.

Hope I'm not asking too much. :)

Here is the JS for jQuery used for showing/hiding elements that needs to be updated:

$(function() {
    $('#sub_1_1 li').click(function() {
    $('#sub_1_1 li').removeClass('sub_1_sub_active');
    $('#sub_1_2 li').removeClass('sub_1_sub_active');
    $(this).addClass("sub_1_sub_active");
    });
});

$(function() {
    $('#sub_1_2 li').click(function() {
    $('#sub_1_1 li').removeClass('sub_1_sub_active');
    $('#sub_1_2 li').removeClass('sub_1_sub_active');
    $(this).addClass("sub_1_sub_active");
    });
});


$(function(){
$('#top a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.top div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.top div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});



$(function(){
$('#sub_1_1 a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.sub_1_1 div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.sub_1_1 div').each(function(){
    $(this).hide();});
    $('.sub_1_2 div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});


$(function(){
$('#sub_1_2 a').click(function(e){
     hideContentDivs();
     var tmp_div = $(this).parent().index();
     $('.sub_1_2 div').eq(tmp_div).show();
  });

function hideContentDivs(){
    $('.sub_1_1 div').each(function(){
    $(this).hide();});
    $('.sub_1_2 div').each(function(){
    $(this).hide();});
}
hideContentDivs();
});

The rest can be found at https://jsfiddle.net/cL1xw2y5/

First, how do you recognize what menu should appear on the right side when page load? — Axel Stone, Jul 08 '15 at 15:20
I think it can be recognized the same way as it is recognized when a link at top menu is clicked. — Garfield, Jul 08 '15 at 15:26

score 0 · Accepted Answer · answered Jul 09 '15 at 19:32

So, here is the JSFiddle with the working example: http://jsfiddle.net/502Lj77y/

Actually, I have only added the following piece of JS, compiled from Incredible's examples:

$(function(){
    $('#top li a.default').click();
    $('#left_3 li a.default').click();
});


$(function(){
    function getItemId(item){
    var cls = $(item).attr('id');
    var id = parseInt(cls.replace('top_', ''));
    return id;    
    }
    $('#top ul li').click(function(){
        var itemId = getItemId(this);
        $('#left_'+itemId+' li a.default').click();
    });
});

to my initial JS and added a dummy class "default" for menu and submenu items that should be selected on page/menu load.

Once again, the result is 100% Incredible's achievement.

Everything seems to work fine.

Can I optimize the added piece of JS this way?

$(function(){
    function getItemId(item){
    var cls = $(item).attr('id');
    var id = parseInt(cls.replace('top_', ''));
    return id;    
    }
    $('#top ul li').click(function(){
        var itemId = getItemId(this);
        $('#left_'+itemId+' li a.default').click();
    });
    $('#top li a.default').click();
});

Axel Stone · Answer 2 · 2015-07-08T18:24:48.373

Add this at the end of your javascript. This will simulate clicking on menu items after page load:

$(function(){
  $('#top li:first').click();
  $('#top li:first a').click();

  $('#sub_1_1 li:first').click();
  $('#sub_1_1 li:first a').click();
});

But I rewrote all your code to I believe more convenient and universal way, that is based on parsing menu item classes and its "id" number. Check fiddle: https://jsfiddle.net/cL1xw2y5/6/ Here is the javascript:

$(document).ready(function() {

    // what should be active/visible on page load
    $('#top .menuitem-1').addClass('active');
    $('#side .menuitem-1').addClass('active');
    $('#side #submenu-1').removeClass('invisible');
    $('.content #content-1-1').removeClass('invisible');

    // what happens after top menu item click
    $('#top ul li').click(function(){
        // get number of pressed menu item from its class
        var itemId = getItemId(this);
        // activate pressed item
        $('#top li').removeClass('active');
        $('#top .menuitem-'+itemId).addClass('active');
        // display appropriate left menu
        $('#side ul').addClass('invisible');
        $('#side #submenu-'+itemId).removeClass('invisible');        
        // activate first item of submenu
        $('#side li').removeClass('active'); 
        $('#side #submenu-'+itemId+' .menuitem-1').addClass('active');
        // show appropriate content
        $('.content div').addClass('invisible');
        $('.content #content-'+itemId+'-1').removeClass('invisible');

    });

    // what happens after side menu item click
    $('#side ul li').click(function(){

        // get number of pressed menu item from its class
        var subItemId = getItemId(this);
        // get number of top menu active item
        var topItemId = getActiveTopMenuItemId();
        // activate pressed left menu item
        $('#side li').removeClass('active');
        $('#side #submenu-'+topItemId+' .menuitem-'+subItemId).addClass('active');
        // show appropriate content
        $('.content div').addClass('invisible');
        $('.content #content-'+topItemId+'-'+subItemId).removeClass('invisible');
    }); 

});

function getItemId(item){

    var cls = $(item).attr('class');
    var id = parseInt(cls.replace('menuitem-', ''));
    return id;    

}

function getActiveTopMenuItemId(){

    var cls = $('#top ul .active').attr('class');
    var id = parseInt(cls.replace(' active','').replace('menuitem-',''));
    return id;

}

But you have to rewrite your css again :) Just don't add any other classes to menu items, otherwise you'll have to replace it with empty string '' in getItemId() and getActiveTopMenuItemId() functions where the "id" numbers are parsed.

Your answer is at best a comment and the link tells you that their use of `$(function(){ });` is the functional equivalent of `$(document).ready(function() { });`. — Samsquanch, Jul 08 '15 at 15:30
Ok. Lets expand your answer. :) What should I place instead of // display whatever you want here to force page preactivate for visitor... say... all the folowing items: Menu 2 > Left menu 2.2 > Content of Left Menu 2.2? — Garfield, Jul 08 '15 at 15:33
I have added your code to my JSFiddle but unfortunately it only shows Menu 1 as activated but it requires a mouse click to show its side menu wich then appears with no selected items. Have I done something wrong? Please note that any class with ACTIVE in its name are just for appearance adjustments, they are not responcible for show/hide. — Garfield, Jul 08 '15 at 15:59
Here is what I think, I again may (and most likely) be wrong. Is there a way of force activating a link, say, by a timer, without user intervention at all? May be the only thing I need is to FIRST: force activate any link within the top menu and SECOND: force activate any link within opened side menu? The problem is I don't know how, therefore can not try it myself. — Garfield, Jul 08 '15 at 16:04
Rewrited code looks exactly what I've ment but it has one flow for me - every child requires customization when it comes to adding menu/submenu items, while my example requires setting attributes for parents only. Can we try to combine your first attempt which just clicks required items on page load with an unknown yet code which will select a subitem when clicked on top menu item? It would be the best solution. — Garfield, Jul 09 '15 at 17:32
I've done it myself!!! :) **Thanks a lot, Incredible!** I wouldn't have done it without your help, ever. I'll put an answer to my initial question with the final result, the only thing I would ask you is to check the result for errors. Once again, **thank you very much**! — Garfield, Jul 09 '15 at 17:48

Preactivating links with jQuery

2 Answers2