Unable to persist header like Facebook

Question

I am currently a beginner JavaScript learner. I was trying some special code logics found on various top websites like Facebook. One of them I found here: How does Facebook keep the header and footer fixed while loading a different page?. But I am unable to execute it properly. Following is my code:

<html>
<head>
</head>
<body>
<div id="header">TEST HEADER
<a href="sample2.htm">SAMPLE</a></div>
<p>OUTSIDE</p>
    <script type='text/javascript'>
        var header = document.getElementById('header');
        var headerLinks = header.getElementsByTagName('a');

        for (var i = 0, l = headerLinks.length; i < l; i++) {
            headerLinks[i].onclick = function () {
                var href = this.href;

                //Load the AJAX page (this is a whole other topic)
                loadPage(href);

                //Update the address bar to make it look like you were redirected
                location.hash = '#' + href;

                //Unfocus the link to make it look like you were redirected
                this.blur();

                //Prevent the natural HTTP redirect
                return false;
            }
        }
</script>
</body>
</html>

Please tell me what I am doing wrong?

Actually the motive of my code is not just to persist header on a page but also when navigating to other page. The header should not reload when navigated to other page.

Solution from the answer by Bill F.:

Forgot to define loadPage() function:

<script type="text/javascript">
        function loadPage() {
            document.getElementById("content").innerHTML = '<object type="type/html" data="sample2.htm" ></object>';
        }
    </script>

Look into CSS positioning: http://alistapart.com/article/css-positioning-101 — Willy, Feb 21 '14 at 19:19
Actually its not CSS header persist technique. I want the effect mentioned in the linked question. CSS will only hold header upward but when you click on a link on that page it will reload the header. While in Facebook the header remains while navigating to other page. Only content changes. — Aishwarya Shiva, Feb 21 '14 at 19:21
Look into AJAX: https://developer.mozilla.org/en-US/docs/AJAX — Willy, Feb 21 '14 at 19:22
No actually this code is working code. But its not working for me because I think I am not calling the script at correct position. I want to know where should I call the script? — Aishwarya Shiva, Feb 21 '14 at 19:25

score 1 · Accepted Answer · answered Feb 21 '14 at 19:29

1

You haven't defined the function loadPage is what you're doing wrong. Presumably, that function will use AJAX to retrieve a page's contents, whether in JSON, HTML, XML, CSV, whatever.

answered Feb 21 '14 at 19:29

Willy

1,055
8
23

Apologies, actually I am not a JS expert and I didn't knew that it is a user-defined function. Thanks :) – Aishwarya Shiva Feb 21 '14 at 19:34

score 0 · Answer 2 · answered Feb 21 '14 at 19:26

0

You can keep the position of a div fixed even while scrolling using position:fixed

#header
{
position:fixed;
}

answered Feb 21 '14 at 19:26

Ankur Aggarwal

2,993
5
30
56

Actually the motive of my code is not just to persist header on a page but also when navigating to other page. The header should not reload when navigated to other page. – Aishwarya Shiva Feb 21 '14 at 19:28

score 0 · Answer 3 · answered Feb 21 '14 at 19:33

i have managed to do it properly all you need to do is create 2 seperate container divs,1 for the nav bar(which you want to remain) and 2 for the content which you want changed then simply retrieve the data from an external page

CODE representation

<div class="container_for_persistent_nav-bar">
</div>

<div class="container_for_divs_that_are_not_persistent">
</div>

then just bind a click event to links that will,1.on click clear the div container for NON_PERSISTENT DIVS and then,2.load the divs from a separate page

Unable to persist header like Facebook

3 Answers3