Question

I have a menu that I’ve created using jquery that “pops-up” on certain button mouse-overs.

it has a LOT of options and sub-menu options and I’d like to put it into a separate file so that it only needs to be downloaded once and all of the html markup and text doesn’t need to be re-downloaded every time a user hits a sub page on my site.

I was toying with the idea of using the jquery template engine but couldn’t quite wrap my head around the best way to work that. This isn’t a template after all, but a static menu.

I’m pretty sure I can’t put it in a JS file because it’s not script per se, it’s actual html markup (mostly tables).

Any ideas?

Answer 1

not really sure what you mean but what I tend to do is include the html for all “pop-ups” in the original page markup and simply toggle display to none or block with whatever JQuery event you want, such as

$("button#popupbtn").click(function(){$("#hiddencontent").css("display", "block")});

This way you dont have to download the markup every time as you would if you were using Ajax and you get the SEO benefits of whatever is in the extra markup too.

If you did choose to use Ajax you could also prevent repeated downloading by caching the results (basically saving a local copy to reuse) after they have been downloaded, but this wouldn’t really be necessary because the 1st method is easier and better for SEO