CODEWITHSUNDEEP
javascripthtml
Spratters53
Spratters53

Reputation: 415

navigation bar loads late

Here is an example of the problem however, if you go directly to the navigation page, it loads instantly.

I presume that this is caused because I am creating the foundation top-bar in a separate html file and calling using this script. 

<script>
    $(function(){
        $("#includeHeader").load("Navigation.html");
    });
</script>

and then, right after the opening body tag

<div class="fixed shadow" id="includeHeader"></div>

Is there a better way to call an external file, or should I just copy the navigation code separately into each HTML page? (seems kinda stupid for when I want to make changes though).

Upvotes: 4

Views: 1135

Answers (2)

taufique
taufique

Reputation: 2751

Put the div ahead of the script and get rid of $(function(){}); like following. It may speed things up a bit.

<div class="fixed shadow" id="includeHeader"></div>

<script>
    $("#includeHeader").load("Navigation.html");
</script>

$(function(){}) runs when document is ready. So your page starts loading once whole document is ready. You don't want to delay loading Navigation.html untill the whole page is ready, do you?

Upvotes: 1

Alex Tartan
Alex Tartan

Reputation: 6836

Your code is evaluated after the entire page loads. (http://www.w3schools.com/jquery/jquery_syntax.asp)

If you want your extra html rendered at the same time as the rest of the page, you must either copy-paste it in your page or load it's contents via a server-side language (php, for example)

$(function(){ // document-ready event
    // code is executed after the page loads
});

In PHP, you can do it like this:

<?php  
$header = file_get_contents('/path/to/header.html');
echo $header;
?>

Upvotes: 1

Related Questions