I want to include html page in other page
for example home and footer page
i want to include footer page in home page
and when run home.html and Ctrl u view source code both page code will be
want to show
please help me
Thanks In advance
Using PHP
You can create you home.html file and can include your footer using the following php code. using this you can view the home.html and footer.html code when you view your page source
<?php include("footer.php");?>
Using jquery
You can perform this using jQuery as well, with the following code.
home.html will have
<!DOCTYPE html>
<html>
<body>
<div id="footer">
<iframe src="footer.html">
<p> Footer text</p>
</iframe>
</div>
</body>
</html>
<script>
$(function(){
$('#footer').load("footer.html");
});
</script>
Hello according to me you can do it with jquery:
Home.html
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
$("#includedFooterContent").load("footer.html");
});
</script>
</head>
<body>
<div id="includedFooterContent"></div>
</body>
</html>
Hope it will work :)
Related
Im looking to figure out how to compile a couple of html pages into one page. like if i made a triangle in one html page, how would i link it with another html page that has a rectangle for example so that they both show up in one page. of course im not trying to figure out how to do this specifically but i want to generally know how to do it.
With jquery you can do it like so:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("#includeContent").load("fileName.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
source: https://www.codegrepper.com/profile/abutahir
I switched from Jade to basic HTML and ran into the following problem:
How can I have one navigation menu for my whole website (in one file)?
In Jade I did the following:
I had my menu in default.jade:
body
.header-site
h1.page-title Christopher Kadé
ul.nav-site
li: a(href='/') About me
li: a(href='/projects') Projects
li: a(href='/contact') Contact
.main-content
block content
And would include default.jade in every other .jade file, and write its content in a block content. This way, I have my header and menu available throughout my website.
But I can't seem to figure out the equivalent method in good old plain HTML.
In order to have the same navigation menu throughout your website, you could either use php or javascript. Using php-
<?php
include_once 'navigation.php';
?>
Using javascript
<div id="navigation">
</div>
<script>
$("#navigation").load("navigation.html");
</script>
You need a server side include (with a server side language) - HTML doesn't support this natively. Or if using jQuery:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#nycontent").load("header.html");
});
</script>
</head>
<body>
<div id="mycontent"></div>
</body>
</html>
header.html
<h1>test</h1>
alternatively, with plain old JS:
<html>
<body>
<script src="myscript.js" />
</body>
</html>
document.write('\
\
<h1>This is my include file</h1>\
\
');
I am developing a website , I have an html page which has some contents, have also made a signUp modal in the same page, but the code is getting longer, I just want to know if I keep the code of sign up modal in another file with .html/.htm extension, and on button click that modal is displayed on the same page, not to be redirected to another page, like it is displaying on the home.
I don't want the home contents to be shattered , just the modal to be displayed on above.
You can use jquery to accomplish this task:
Just create a new file "modal.html" and write code for popup there.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function(){
$("#header").load("modal.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!-- other code -->
</body>
Use w3data and include your file where ever you want. In blow i included signup.html file.
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="signup.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Simple Method to load Html File to main
$(function(){
$('#which').load('test.html');
});
you can write inside document.ready also
Simply use an iframe (inline frame) to load the external webpage. You can style the size of the iframe like you normally would with any HTML element.
<DOCTYPE html>
<html>
<head>
...
</head>
<body>
<iframe src="/your-signup-page.html"></iframe>
</body>
</html>
More information on the iframe element.
I'm making a header using HTML and Bootstrap and I want the header to appear on all pages of my site. Is there a way to do something similar to a CSS style sheet but instead of CSS, reusing HTML?
The simplest way I believe is to use jQuery.
See jQuery docs here
one.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#header").load("two.html");
});
</script>
</head>
<body>
<div id="header"></div>
</body>
</html>
two.html:
<p> Put your header in here </p>
If you don't want to store jquery, you can use a CDN
<html>
<head>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>$(document).ready(function () { $("header").load("assets/header.html"); });</script>
</head>
<body>
<header></header>
</body>
</html>
Javascript as on: {% extends "xxx.html" %}
You can use an <iframe> to change the content that is displayed, and only code the surrounding header/footer/etc. only once. There seems to be some uneasy feelings about using them floating around, so I would do some research on that before I committed to it.
HTML include is a recent feature you could try as well. Otherwise, it's gonna be good ol' fashioned ctrl-c ctrl-v.
In my website i made a mainpage which has 3 divs: header, footer and main. Header div has some buttons which change main div. Means that page is loaded only once then i just change main div when some button is clicked. I simply put a html page in main div when some button is clicked.
i have put alert in every page's $(document).ready function. Whenever main div is changed, these alerts should come because main div is a html page. But these alerts are not coming. Why is that so. I want to load some data every time when main div is changed. How can i do that? Thanks in advance.
main page:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
$("#main").load("page1.html");
});
$("#btn2").click(function(){
$("#main").load("page2.html");
});
});
</script>
</head>
<body>
<div id="header"> --- </div>
<div id="maincontent"><div id="main"> --- </div></div>
<div id="footer"> --- </div>
</body>
</html>
page1:
<html>
<head>
<script type="text/javascript" src="jquery-1.7.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
// trying to load data. but its not working
});
</script>
</head>
<body>
<div id="page1-div"> --- </div>
</body>
</html>
You are just making changes in DOM, not loading new document which would trigger $(document).ready();.
Based in questions tags, i assume that you are loading content using AJAX. In that case just use jQuery's callbacks for $.ajax* functions to do any kind of action when content is loaded.
This looks like what you need.
http://james.padolsey.com/javascript/monitoring-dom-properties/