Question

How can I achieve the following?

// Resize triggers
$(window).resize(function() {
    if (window.innerWidth <= 480) {
        $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>');
        $('#menu').prepend('<a href="#">Menu</a>');
    }
    if (window.innerWidth >= 480) {
        // Remove the above .wrapInner & .prepend()
    }
}) .resize();

UPDATE:

This is what I have without the resize events, but I’d like to remove the .wrapInner and .prepend code when the screen is less than 480px wide.

Answer 1

Try this:

$(function() {
    $(window).resize(function() {
        if (window.innerWidth <= 480 && !$('#menu').length) {
            $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>');
            $('#menu').prepend('<a id="premenu" href="#">Menu</a>');
        } else if (window.innerWidth > 480 && $('#menu').length) {
            $('#menu').replaceWith($('#menu > ul').children());
            $('#premenu').remove();
        }
    }).resize();

});

Note I added && !$('#menu').length. This is to only add the menu if it doesn’t already exist. You can also put the second if as an else, as they are mutually exclusive. (when you change the >= 480 to > 480)

Demo Code: http://jsfiddle.net/jtbowden/WzweR/

Demo (full screen): http://jsfiddle.net/jtbowden/WzweR/embedded/result/

Also, I don’t think you can end up with valid markup. Either you are wrapping non-li items in a ul, or you are adding a a inside of a ul… But maybe I haven’t thought through what your markup looks like. I am just guessing. And I am assuming you are collapsing part of your menu structure if the window is too narrow.

Update:

After seeing your code, a couple of changes. First I was missing a > in my replaceWith($('#menu > ul').children());. That makes a big difference, as you don’t want to pull all of the uls out of context. Second, you are adding some stuff to your links, which you need to do in your resize call:

$(window).resize(function() {
    if (window.innerWidth <= 480 && !$('#menu').length) {
        $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>');
        $('#menu').prepend('<a id="premenu" href="#">Menu</a>');
        $('#premenu').prepend("<span class='arrow-down'></span>"); // Dropdown Arrows
        $('#premenu').next().addClass('navhidden'); // Optional
    } else if (window.innerWidth > 480 && $('#menu').length) {
        console.log("test");
        $('#menu').replaceWith($('#menu > ul').children());
        $('#premenu').remove();
    }
}).resize();

You will also need to change your .click() handler to a .on() call, because your elements are being created dynamically. When they are removed, any click handlers are removed. If you use .on() you essentially attach the handler to a higher element in the DOM tree and filter on the element you want to respond:

$('#access').on('click', 'li.dd a', function() {
    // ... do stuff here
    // This basically says, whenever something in #access is clicked,
    // check if it is a `li.dd a` link, and if so, do this stuff
});

Demo Code: http://jsfiddle.net/jtbowden/9fHPA/7/

Demo (full screen): http://jsfiddle.net/jtbowden/9fHPA/7/embedded/result/