I'm new in javascript. I'm making a simple website with a common header in the file header.html and I included it in each page of the site with ng-include.
My problem is that the content of the page loads first and then the header, that pushes the rest of the page down. Is there a way to make the header to load first?
Thanks
EDIT: I also include a footer that has the same problem.
you can load header form external view
<div ng-include src="'views/header.html'"></div>
and then the rest of your app, notice you can put your angular refrence in head section
Did you try adding header via PHP include?
<?php include 'header.html'; ?>
I did find that most efficient way for my website and did the same with footer.
Related
Good morning, I'd like to add a HTML page containing a JS animation to my wordpress website but I also want to display wordpress header and footer in order to better "blend" it with the rest of the website, is it possible?
visually I'd like it to be like this:
WORDPRESS HEADER
HTML PAGE with JS ANIMATION
WORDPRESS FOOTER
I've tried simply adding the HTML code in a wordpress page content but I think the CSS of the HTML page is conflicting with the CSS of wordpress and it doesn't look good at all
Maybe I can simply add only the JS animation to a wordpress page? I'm not sure if it's possibile and how
any help would be appreciated
Thanks
Add a page with just page title. it will create a page with "page" prefix inside wp-content/themes/themename/page-test
you can write your own code there or you can add short code to a page. it will display header and footer:
https://www.smashingmagazine.com/2012/05/wordpress-shortcodes-complete-guide/
I need to make a webpage where the main.html loads a page with a header and footer that will remain steady after I click on some navigation links, but only changing the body content, all this, using Javascript. The body content comes from another html document in the same folder. I've seen some answers to this, but very old ones using PHP. Please help.
BTW, I'm not using server yet, only loading from file with Chrome. Basically I want to replace the whole body of the page with the body of another html.
You can change part of a website by javascript and load content from other urls using ajax.
https://www.w3schools.com/js/js_ajax_intro.asp
And you can use jQuery lib to perform the ajax calls:
https://www.w3schools.com/jquery/jquery_ref_ajax.asp
The ajax calls can be to a server (this includes firebird and other content from the cloud) or to some files of yours.
It's not the only way, you could also have a look at iframes to see whether they fit your needs.
I want to include a PHP file which is for Loading JavaScript and then remove it completely from page. I found same article here but I don't know how to use it.
Let's see I included PHP like this in top of page.
<?php include 'loader.php';?>
So, how to remove it when page loaded completely?
loader.php is already working singly, I mean after few seconds will be removed loading content, but it doesn't work when I include it to other page. so how to do it?
Thanks
Put your content into div
<div class="js-remove-this"> <?php include 'loader.php';?> </div>
Then listen with JS for page onload event and remove div.js-remove-this
I have a website that is mostly done in HTML and CSS with some JS.
Ive now set up a page where header is perfect to me - it is FIXED contains Divs with a Logo, a search bar and phone number. Underneath this div is a Navbar that is controlled by master Javacript file as a template and also the Navbar fades upon scroll with JS.
My question is how do I set it up so that the entire header with all that styling can be replicated on 80 pages and I just have to change it once?
I've tried this below - where an external page header1.html has the header code (of which has full html head, body, etc) but when I load it all, the page calls up the header1.html quickly and then disappears.
<script src="//code.jquery.com/jquery-1.10.2.js"></script> in head
<div id="header"></div>
<script>
$("#header").load("header1.html");
</script>
end body
header1.html should NOT contain a full html document. Rather, it should just be the snippet of html code that you need for the header stuff.
You can use php. Place the content from the header in header.html, place te next code in every page where you want show the header.
<?php include 'header.html'; ?>
Note: change your files from .html to .php
I'm very new to AngularJS and I'm trying to figure out the "best practices" method for including the navigation and sidebar.
I'm guessing the approach is similar to Worpdress. I would have a "header" file with content that is displayed on each page, and only call a sidebar (sidebar.html) when the template needs it. At the moment I have a main.html file and I want to include a sidebar.
Should the the sidebar be a separate html file? And how do I call that file when it is need?
Thanks in advance.
Pretty broad question but I'll give it a go.
Angular is built for SPA (Single Page Application). Therefore, you only really need one index page that will have a sidebar + header. Your content will be in separate template files that will be loaded by Angular's $route service.