Sunday, 18 June 2017
IMPORT HTML FILE
--------------------------------------------------------------------------------------------------------------------
ReadMore:
https://www.w3schools.com/howto/howto_html_include.asp
https://eureka.ykyuen.info/2012/10/06/html-include-html-using-jquery/
http://www.technomark.in/Include-Another-HTML-File-In-A-HTML-File.aspx
https://www.youtube.com/watch?list=PLESZpcGTq87HhUEP9SzvgktWJisd6Ql12&v=ZQpWy9acrlI
http://ucmic.blogspot.co.uk/2011/05/jqueryjquery-include-html.html
https://dotblogs.com.tw/jenhwa/archive/2012/03/19/70837.aspx
import html into html
https://www.google.co.uk/search?q=import+html+into+html
https://www.polymer-project.org/1.0/docs/tools/optimize-for-production
https://github.com/sindresorhus/gulp-vulcanize/blob/master/fixture/index.html
https://www.html5rocks.com/en/tutorials/webcomponents/imports/
How to Include a JavaScript Code in your HTML File
https://www.youtube.com/watch?v=XOgtEMSSF9E
Search Topics In Google:
import html file , include html file, embed html file
--------------------------------------------------------------------------------------------------------------------
0) NEED WAMPSERVER
1) WITHOUT LOCAL SERVER IT DOES NOT WORK
2) SAVE TWO HTML FILES IN WWW FOLDER IN WAMPSERVER
-------------------------------------------------------------------------------------------------------------------
CODE: MAIN.html
-------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
#Div2{
background-color: Green;
color: White;
/*
DIV AND DIV2 SAME CODE BUT THIS BLUE DIFFRENT PART */
width:auto;
line-height:35px;
border: 2px solid Red;
list-style-type: none;
text-align: center;
}
#Div2{
display:none;
}
#Div1{
background-color:Yellow;
height:20px;
width:130px;
border: 2px solid Red;
list-style-type: none;
text-align: center;
}
/* #Div2 USE NUMBER "# " SIGN
IN CSS CODE BECAUSE ITS ID */
#Div1:hover #Div2 {
display: block;
}
</style>
<!-- WE
USE JAVASCRIPT CODE TO IMPORT HTML FILE -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.get("MENU.html", function(data) {
$("BODY").html(data);
});
});
</script>
</head>
CODE: MENU.html
-------------------------------------------------------------------------------------------------------------------
<body>
<div id="Div1">BUTTON
<div id="Div2"> BUTTON</div>
</div>
</body>
-------------------------------------------------------------------------------------------------------------------
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment