How do I add a constant header that includes other files?

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

How do I add a constant header that includes other files?

mountainbiker
I want to create a JavaScript file that I can add to my HTML.  This JavaScript will use jQuery to add the header and footer to the page.  The header must call 3 additional files which have HTML snippets to do the tabs within the header.

The code below seems to load the header and footer okay, but the tabs (built by the other 3 files don't work).  It seems as I have some sort of load/timing issue.  [Of course, if I save the "generated source", it runs fine -- so it has to be timing.]

        function init() {
            var toggleMenu = function(){
                $(this).children('.submenu').toggleClass('off');
            }
            var megaMenuConfig = {
                interval:100,
                sensitivity: 4,
                over: toggleMenu,
                timeout:100,
                out:toggleMenu
            };

            $("ul#topMenuTabs li.tab").hoverIntent(megaMenuConfig)
        }
       
        $('#header').load('header.html');

        $('#tab_data_1').load('menu-tab-1.html');
        $('#tab_data_2').load('menu-tab-2.html');
        $('#tab_data_3').load('menu-tab-3.html');

        $('#footer').load('footer.html');

        $(document).ready(init);
Reply | Threaded
Open this post in threaded view
|

Re: How do I add a constant header that includes other files?

mountainbiker
This seemed to do it, but I am open to other suggestions ...

                $('#header').load('header.html', function() {
                        alert('loaded header and about to load tabs');
                        $('#tab_data_1').load('menu-tab-1.html', function() { alert('loaded tab 1') });
                        $('#tab_data_2').load('menu-tab-2.html', function() { alert('loaded tab 2') });
                        $('#tab_data_3').load('menu-tab-3.html', function() { alert('loaded tab 3') });
                   $("ul#topMenuTabs li.tab").hoverIntent(megaMenuConfig)
          });