I am trying to try a few things for a responsive site, one of which involves moving the menu once under a certain width using insertBefore/insertAfter in JS. But then I want to be able to move the element back to it's original location within the markup, can that be done?
I don't believe that insertafter/before have a revert option. It should be possible, you'll need to store the original location, either with a var, cookie or local storage.
It sounds messy though, my 'large amount of stuffing around for not much gain' alarm is going off, which usually means you have to consider all sorts of conditions and your site can become brittle if you're not careful.
I ended up cheating and using the class name of the original previous element within my markup, which unfortunately doesn't make it generically portable which I would like.
If you install this theme you will see that for the mobile menu, the NAV element is dynamically moved and inserted directly after the opening BODY tag, and then shifts back to its original position again on the wider screen.
Simple face was that I didn't want to have the NAV element appearing right at the top of the page other than for the mobile layout.
No that part (moving the NAV to the top for the mobile menu) works perfectly, and is independent of any theme/site specific class names as I would prefer.
It's getting the NAV to return back to its original location that is the issue I'm trying to solve, without the need to add another DIV (if I'm doing that I can just use the DIV that's already in the code, as I am doing at the moment).
Ahh, but perhaps in the JS the first thing I could do is dynamically insert that DIV before the NAV element and before I move the NAV element, and then use it to go back to... hmm, will it recognise a dynamically inserted DIV for this purpose...?? Then it would be independent of any theme/site specific code, and be part of the "superfish mobile menu" code base...
Sorry, thought the nav was created on the fly to start with. Yep that should work. Make sure you are careful with the double and single quotes with your dynamic div id - it doesn't matter which way around they are, just as long as they pair up.