I am trying to develop a rating site which is a part of Frontend Mentor Challenge(https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI) in which I am facing the following problems:-
On clicking submit button it gives a null error. Why is it happening and how can I fix this?
Should I use a modal box for thank you page or is it ok to make a different HTML page to handle the thank you page?
How can I access the 'numbers' class and use it on the 'thank you.html' page?
const numberClicked = document.querySelectorAll(".number")
const submitBtn = document.getElementById("submit-btn")
numberClicked.forEach(function(oneNumbreClicked) {
oneNumbreClicked.addEventListener('click', function() {
console.log(oneNumbreClicked.innerText)
})
})
submitBtn.addEventListener('click', function() {
document.getElementById("final-rating").innerText = `You selected ${oneNumbreClicked.innerText} out of 5`
})
*,
*::after,
*::before {
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
background-color: hsl(216, 12%, 8%);
}
.container {
color: white;
width: 35%;
background-color: hsl(213, 19%, 18%);
border-radius: 10px;
box-shadow: 0 10px hsl(216, 12%, 8%);
margin: 3em auto;
padding: 2em;
}
.thank-you-container {
text-align: center;
}
.star {
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
padding: 10px;
}
.numbers {
margin: 0 auto;
}
.number {
display: inline-block;
background-color: hsl(229.4, 14.3%, 23.3%);
border-radius: 50%;
text-align: center;
padding: 10px;
width: 40px;
font-size: 1em;
margin: 0 0.423em;
opacity: 0.5;
border: none;
color: inherit;
}
.submit-btn {
background-color: hsl(25, 97%, 53%);
color: white;
padding: .8em 2em;
width: 100%;
border-radius: 1.5em;
border: none;
margin-top: 1.5em;
font-weight: 400;
font-size: 1.1em;
}
.number:hover {
opacity: 1;
background-color: hsl(217, 12%, 63%);
}
.submit-btn:hover {
opacity: 0.5;
}
.submit-btn:focus,
.number:focus {
opacity: 1;
background-color: white;
color: hsl(25, 97%, 53%);
}
.final-rating {
background-color: hsl(229.4, 14.3%, 23.3%);
color: hsl(25, 97%, 53%);
border-radius: 1.5em;
padding: 0.4em;
margin: 1.3em auto;
width: 12.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component | Rating Page</title>
<style>
.attribution {
font-size: 11px;
text-align: center;
color: white;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<main>
<!-- Rating state start -->
<section class="container">
<img class="star" src="images/icon-star.svg" alt="">
<h2>How did we do?</h2>
<p>
Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!
</p>
<div class="numbers" id="numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
</div>
<a href="thank.html" target="_self">
<button class="submit-btn" id="submit-btn">Submit</button>
</a>
</section>
<!-- Rating state end -->
<div class="attribution">
Challenge by Frontend Mentor. Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
<!--This is the linked HTML file(thank.html) which activates on clicking upon Submit button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Overpass:wght#400;700&display=swap" rel="stylesheet">
<title>Frontend Mentor | Interactive rating component |Thank You Page</title>
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<main>
<section class="container thank-you-container">
<img src="images/illustration-thank-you.svg" alt="">
<p class= "final-rating" id="final-rating"></p>
<h2>Thank you!</h2>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</section>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Raunak Raj.
</div>
</main>
<script src="script.js"></script>
</body>
</html>
-->
So first it would be better if you could write the whole error, so we have more info of what is causing it.
Issue: But of what I've seen is that, the submit button is wrapped in anchor tags, which is redirecting us to "thank.html" as: <button>Submit</button>, and in the thank.html (the commented code below) you are loading the very same script. <script src="script.js"></script> which causes the problem/error. Why is it causing a problem, is simply because in this script you are accessing the DOM elements which does not exist in thank.html. For example in script.js you access the elements with class query selector .numbers, but when thank.html is loaded this elements are not existing. =)
Solution:
You could create a new unique js file for the purpose of thank.html. And add an event listener on load as: window.addEventListener("load", () => {../logic here}), but with this approach you will have to think of how would you pass the parameter of the value oneNumbreClicked.innerText so you can use and print it. As a starter you could share the information through the sessionStorage or the localeStorage. (There are way more ways)
Other easy and straight forward approach to have only one html file. Have the both <section></section> (section with class container and thank-you-container). Initially the section with class thank-you-container would have css property: display: "none". When clicking on submit button, firstly you will change the display property of the section with class thank-you-container to "flex or block", and change the display prop of the section with class container to "none, and print the text. On a way you will simulate "single page applicaton" :D. And do not forget to remove the <a> </a> tags from the submit button, so you won't redirect.
Dummy demo solution:
const container = document.getElementById("container")
const containerTwo = document.getElementById("thank-you-container")
const myBtn = document.getElementById("myBtn");
myBtn.addEventListener("click", ()=> {
container.style.display = "none";
containerTwo.style.display = "flex";
// your additional logic here
})
.thank-you-container {
display: none}
<div class="container" id="container">
<h1>Container one</h1>
</div>
<div class="thank-you-container" id="thank-you-container">
<h1>Container two</h1>
</div>
<button id="myBtn">Submit</button>
Related
I have some HTML and JavaScript, but this error appears:
I'm building a timer. This is my code:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>Timer</title>
</head>
<body>
<div class="timer">
</div>
<script src="appCT.js" type="module"></script>
</body>
</html>
JavaScript File1
export default class Timer {
constructor(root){
console.log(root);
root.innerHTML = Timer.getHTML();
this.el = {
minutes: root.querySelector(".timer__part--minutes");
seconds: root.querySelector(".timer__part--seconds");
control: root.querySelector(".timer__btn--control");
reset: root.querySelector(".timer__btn--reset");
}
console.log(this.el);
}
static getHTML(){
return `
<span class="timer__part timer__part--minutes">00</span>
<span class="timer__part timer__part">:</span>
<span class="timer__part timer__part--seconds">00</span>
<button type="button" class="timer__btn timer__btn--control timer__btn--start">
<span class="material-icons">play_circle_filled</span>
</button>
<button type="button" class="timer__btn timer__btn--reset">
<span class="material-icons">timer</span>
</button>`
}
}
JavaScript File 2
import Timer from "Timer.js";
new Timer{
document.querySelector(".timer");
}
Css code
body{
background: #dddd;
margin: 24px;
}
.timer{
font-family: sans-serif;
display: inline-block;
padding: 24px 32px;
border-radius: 30px;
background: white;
}
.timer__part{
font-size: 40px;
font-weight: bold;
}
.timer__btn{
width: 50px;
height: 50px;
margin-left: 16px;
border-radius: 50%;
border: none;
background: gray;
}
.timer__btn--control{
background: steelblue;
}
.timer__btn--reset{
background: red;
}
The code should be able to display the timer, and each HTML element should be linked with its respective part in the design. I've tried to change the type "attribute" of my script element to text/javascript, but it has not yielded fruits.
Thank you
Your browser will not redirect to such an address.
1- I would recommend trying to work with localhost.
2- VSCode Live Server
And I found something maybe useful to you.
"Cross origin requests are only supported for HTTP." error when loading a local file
I am following a web development tutorial to create a landing page. I'm using a combination of CSS, HTML, and JS. My site will not detect a navigation bar that I have attempted to draw with SCSS. It's meant to be dark blue and sit on the top right. Below is the code for the project this far.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:wght#300;400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/dist/style.css">
<title>Frontend Mentor | Easybank landing page</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<header class="header">
<nav class="flex flex-jc-sb">
<a href="/" class="header__logo">
<img src="images/logo.svg" alt="Easybank" />
</a>
<a href="#" class="header__menu">
<span></span>
<span></span>
<span></span>
</a>
</nav>
</header>
<div class="attribution">
Challenge by Frontend Mentor.
Coded by Your Name Here.
</div>
<script src="/app/js/script.js"></script>
</body>
</html>
style.scss
#import "variables";
#import "globals";
#import "header";
_globals.scss
hmtl {
font-size: 100%;
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
font-family: 'Public Sans', sans-serif;
line-height: 1.3;
}
/// Flexbox
.flex {
display: flex;
&-jc-sb {
justify-content: space-between;
}
&-jc-c {
justify-content: center;
}
&-ai-c {
align-items: center;
}
}
_headers.scss
.header {
nav {
padding: 24px;
}
&__menu { // Mobile Menu
> span {
display: block;
width: 26px;
height: 2px;
background-color: $darkBlue;
&:not(:last-child){
margin-bottom: 3px;
}
}
}
}
This is my code here:
I want to hide the image when the mouse rolls over and only display text.Then again, when the mouse moves away, the image should be visible.
The text property is working just fine but image is having issues.
It completely disappears after clicking.
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
#d1 {
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section id="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p>WEB DEVELOPMENT
<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
</div>
</div>
</body>
</html>
LINK TO MY CODE ON CODEPEN IS HERE
when you set innerHTML you are wiping out your image
function updated1(element){
document.getElementById("d1").innerHTML = "web deveopment and designing, html css js and bootstrap";
document.getElementById("d1").style.borderRadius = "4.5%";
document.getElementById("imgd1").style.visibility = 'hidden';
}
function undod1(){
document.getElementById("d1").innerHTML = "WEB DEVELOPMENT";
document.getElementById("d1").style.borderRadius = "0%";
document.getElementById("imgd1").style.visibility = 'visible';
}
.d1{
border: 1px solid;
padding-top: 7px;
text-align: center;
box-shadow: 5px 10px #DBE0E3;
margin-top: 3%;
color: #FFFFFF;
width: 350px;
height: 350px;
font-size: 40px;
font-weight: bold;
line-height: 70px;
background-color: #DC3D3D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title> js</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<section class="d1" class="col-md-4 col-md-push-4 col-xs-12" onmouseover="updated1(this)" onmouseleave="undod1()">
<p id='d1'>WEB DEVELOPMENT</p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" width="90%">
</section>
</div>
</div>
</body>
</html>
Your problem is this part
document.getElementById("d1").innerHTML = "...";
Because this code removes all the children from the parent and inserts the text. So basically, when your mouse leaves, there is no image there to make it visible. You don't need that much Javasctipt to create the effect you desire. Better HML, more CSS and less JS:
<section
id="d1"
class="col-md-4 col-md-push-4 col-xs-12"
onmouseover="updated1(this)"
onmouseleave="undod1()"
>
<p class="message">WEB DEVELOPMENT<p>
<img id="imgd1" src="https://miro.medium.com/max/1200/1*pE2fOVDikEUwiQJlh4ggzg.jpeg" height="90%" width="90%">
</section>
#d1:hover {
border-radius: 4.5%;
}
img {
opacity: 1
}
#d1:hover img {
opacity: 0
}
let message = "WEB DEVELOPMENT";
let parent = document.querySelector("#d1");
let item = document.querySelector(".message");
function updated1(element){
item.innerText = "web deveopment and designing, html css js and bootstrap";
}
function undod1(){
item.innerText = message;
}
If you try doing something more complex than you asked, try to add/remove classes to change style instead of adding styles in Javascript. This is an easier and cleaner way to change styles.
I'm trying to make a cross change to minus and pop up some text.
I have a example but I don't understand how it works with ::after.
It is made with ::after but I don't understand how to use it. Or is it made with a JavaScript?
My code
h2 {
text-transform: uppercase;
letter-spacing: 3px;
font-family: ProximaNovaT-Thin;
font-weight: 400;
font-size: 34px;
line-height: 44px;
}
h5 {
cursor: pointer;
line-height: 24px;
border-top: 1px solid #777;
border-bottom: 1px solid #777;
position: relative;
padding: 20px 75px 20px 0;
}
h5::before {
content: "";
position: absolute;
background: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/plus-icon1.png) scroll no-repeat center center;
background-size: auto;
top: 0;
right: 0;
width: 70px;
height: 100%;
background-size: 45px 45px;
}
.opencont h5::after {
content: url(https://d2311lpn2eqzan.cloudfront.net/villarealestate/images/minus.png) scroll no-repeat center center !important;
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<!-- COSTUM STYLE.CSS -->
<link href="Classes/Model/Contact.css" rel="stylesheet" type="text/css"/>
<title>ThemeBuild B.V.B.A</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h2 style="padding-top: 50px; padding-bottom: 40px; font-weight: 400; font-family: ProximaNovaT-Thin;">Contact gegevens</h2>
<div class="locatie-dropdown">
<div class="topc text-left">
<h5 style="font-size: 16px;">WOODSTOCK LOCATIONS</h5>
</div>
</div>
</div>
</div>
</div>
</body>
<!-- BOOTSTRAP SCRIPTS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</html>
I'll answer what I can with the information you've given.
First, ::after is a pseudo element. You can read about it here: https://www.w3schools.com/cssref/sel_after.asp.
This means that the "cross" (+) and (-) are positioned after a selected element (in this case h5).
Second, this functionality is most likely accomplished with some javascript. It would involve using an event listener (or in-line javascript onClick) to catch the onClick event of an element (in this case likely the parent of the h5 or the h5 itself), and change a css property that says whether the content is expanded (shown) or not. The content to be shown would be toggled on/off probably using display:none or visibility:hidden. The "cross" (+) or (-) would be changed appropriately within the same onClick event.
In pseudo-code:
If clicked, and content is hidden, then show content and change + to -.
If clicked, and content is shown, then hide content and change - to +.
I have two separate HTML files (index.html and home.html) and a javascript (bodyswapscript.js) file. I'm trying to figure out how to swap the body of home.html (only) into the body of the index.html by using java script. Basically replacing body tags between HTML files.
I have posted my html code and java script below. The html is quick and dirty, so I'm only interested in swapping out the body information from index.html with home.html
1.) index.html
<head>
<meta name="generator" content=
"HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<header>
<hgroup>
<center><h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<body>
<article>
<div id='swapcontent'>
index page
</div>
</article>
</body>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
2.) home.html
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<body>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</body>
3.) bodyswapscript.js
$(document).ready(function()
{
$( 'li>a[id$="Container"]' ).click(function(event)
{
event.preventDefault();
var href = $(this).attr('href');
alert("Loading " + href);
$('#swapcontent').load(href);
return false;
});
});
4.) Supporting CSS
* {
font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}
body {
width: 720px;
margin: 0px auto;
}
header h1 {
font-size: 36px;
margin: 0px;
}
header h2 {
font-size: 18px;
margin: 0px;
color: #888;
font-style: italic;
}
nav ul {
list-style: none;
padding: 0px;
display: block;
clear: right;
background-color: #2B60DE;
padding-left: 4px;
height: 24px;
}
nav ul li {
display: inline;
padding: 0px 20px 5px 10px;
height: 24px;
border-right: 1px solid #ccc;
}
nav ul li a {
color: #EFD3D3;
text-decoration: none;
font-size: 13px;
font-weight: bold;
}
nav ul li a:hover {
color: #fff;
}
article > header time {
font-size: 14px;
display: block;
width: 26px;
padding: 2px;
text-align: center;
background-color: #993333;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
float: left;
margin-bottom: 10px;
}
article > header time span {
font-size: 10px;
font-weight: normal;
text-transform: uppercase;
}
article > header h1 {
font-size: 20px;
float: left;
margin-left: 14px;
text-shadow: 2px 2px 5px #333;
}
article > header h1 a {
color: #993333;
}
article > section header h1 {
font-size: 16px;
}
article p {
clear: both;
}
footer p {
text-align: center;
font-size: 12px;
color: #888;
margin-top: 24px;
}
This code was pulled from the following URL: http://jsfiddle.net/Christophe/hj9ry/1/
Correct invalid html, include wrapper parent element for content of <body> at home.html; call .load() with fragment identifier referencing wrapper element within home.html; use .unwrap() to remove wrapper element at index.html at complete function of .load()
index.html
<!doctype html>
<html>
<head>
<meta name="generator" content="HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
<meta charset="utf-8">
<title> My Profile</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<header>
<hgroup>
<center>
<h1>Index</h1>
<h4>index page</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="bodyswapscript.js"></script>
<nav>
<div id="wrapper">
<div id="header">
<ul>
<li><a id="homeContainer" href="home.html">Home</a></li>
<!-- <li><a id="testContainer" href='test.html'>test</a></li>
<li><a id="pageContainer" href="page.html">page</a></li> -->
</ul>
</div>
</div>
</nav>
</header>
<article>
<div id='swapcontent'>
index page
</div>
</article>
<footer>
<p>© copy right, all rights reserved.</p>
</footer>
</body>
</html>
home.html
<!doctype html>
<html>
<head></head>
<body>
<div id="body">
<header>
<hgroup>
<center><h1>home.html</h1>
<h4>text</h4></center>
</hgroup>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
</header>
<article>
<div id='swapcontent'>
This is my home page
</div>
</article>
</div>
</body>
</html>
bodyswapscript.js
$(document).ready(function() {
$('li>a[id$="Container"]').click(function(event) {
event.preventDefault();
var href = $(this).attr('href');
// alert("Loading " + href);
$('body').load(href + " #body", function() {
$("#body *:first").unwrap()
});
return false;
});
});
plnkr http://plnkr.co/edit/r8WTsQ9Xm3ZLsRp8nwLr?p=preview
You can use IFrames in html to show your contents of index.html in homw.html
Or
You can use
in your home file