Question

I have a vertical taskbar containing several rows/buttons (each of class .slidebar and different IDs #start, #sprache, #modus etc.). When I hover over each row/button, a different flyout-menu should appear (e.g. #start_fly for button #start). Unfortunately it doesn't. I suppose that's because I'm trying to apply functions to string variables, like so:

flyout_id = "$('#"+id_name+"')"; //$('#start_fly')
flyout_id.css({//some code
});

This is the complete code:

$(document).ready(function () {
 $('.slidebar').each(function () {
    var startOffset = $(this).position();
    var ID = $(this).attr('id');
    var id_name, flyout_id;
    switch (ID) {
    case 'start':
        id_name = "start_fly";
        break;
    case 'sprache':
        id_name = "sprache";
        break;
    case 'modus':
        id_name = "modus_fly";
        break;
    case 'teilen':
        id_name = "teilen_fly";
        break;
    case 'info':
        id_name = "info_fly";
        break;
    }

    flyout_id = "$('#" + id_name + "')"; //$('#start_fly') in 1. case 'start'
    $(this).bind({
        mouseenter: function () {
            flyout_id.css({
                position: 'fixed',
                top: startOffset.top + 8,
                left: $(this).offset().left - flyout_id.width()
            });
            flyout_id.show();
        },
        mouseleave: function () {
            flyout_id.hide();
        }
    });
    flyout_id.bind({
        mouseleave: function () {
            $(this).hide();
        },
        mouseenter: function () {
            $(this).show();
        }
    });
 });
});
Was it helpful?

Solution

This is a string:

flyout_id = "$('#"+id_name+"')";

What you presumably wanted to do was create a jQuery object:

flyout_id = $("#"+id_name);

Also note, since all your switch statement does is add "_fly" to the end of ID (except for the case of sprache), you could replace it with just:

id_name = ID;
if (ID !== "sprache") {
    id_name = ID + "_fly";
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top