CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3236756
user3236756

Reputation: 79

jQuery: Page Text Not Selectable

I have a system of jQuery dropdown menus, but have a strange problem where the text cannot be selected (e.g. to copy/paste) after the menu is used.

Check out the Fiddle here, and try selecting the sample text before using the menu. Then hover over a menu item, and the text can no longer be selected.

I need the text to still be selectable after the user opens/closes the menus. Take a look:

HTML Structure:

<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
    <li><a href="">Home</a>

        <div class="hover-div">Content 1</div>
    </li>
    <li><a href="">Projects</a>

        <div class="hover-div">Content 2</div>
    </li>
    <li><a href="">No Hover</a>

        <div class="hover-div not-shown">This should not appear and no other menu divs or the dark overlay should be shown.</div>
    </li>
    <li><a href="">Events</a>

        <div class="hover-div">Content 4</div>
    </li>
    <li><a href="">Stores</a>

        <div class="hover-div">Content 5</div>
    </li>
</ul>

JS:

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        if ($this.children('.hover-div').hasClass('not-shown')) {
            $oe_menu_items.not('.slided').children('.hover-div').hide();
            $this.removeClass('slided');
        } else {
            $this.children('.hover-div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
                $oe_menu_items.not('.slided').children('.hover-div').hide();
                $this.removeClass('slided');
            });
        }

    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('.hover-div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);
        $oe_overlay.stop(true, true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true, true).fadeTo(200, 0);
        $oe_menu_items.children('.hover-div').hide();
    })
});

Thanks in advance for your help. Once again, this is the Fiddle.

Upvotes: 0

Views: 99

Answers (1)

Grant Gibson
Grant Gibson

Reputation: 813

The problem is your div oe_overlay is starting out display:none (good), then fading in on mouse over, then fading out on mouse out, but it's not being set to display:none again so it's effectively masking all other input on the page.

All you need is to hide the div after you've faded it out:

$oe_overlay.stop(true, true).fadeTo(200, 0, function() {
    $(this).hide();
});

See updated fiddle

Upvotes: 1

Related Questions