CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Leto
Leto

Reputation: 503

How to jQuery load one div onto page?

This probably has a simple solution, but I am new and can't figure it out. I am trying to just load some text from about.html onto my index page's #content div when I click on my link. The about.html doesn't have anything on it except a div called #content, containing a h2 and some text inside paragraph tags without any styling. Instead it ends up loading the entire index page inside my index's #content div. So far this is what I tried. The name of my index page is called cube2. I know the code is messy, but it's just an experiment and was too lazy to create a new stylesheet, put the CSS in the doc. I apologize for the mess.

Cube2.html Code:

<html xmlns="http://www.w3.org/1999/xhtml" class=" -webkit-">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Cube2</title>
<link href="./cube2_files/css" rel="stylesheet" type="text/css" data-inprogress="">
<script src="./cube2_files/jquery.min.js"></script>
<!-- <script src="js/cube-centered.js"></script> -->
<script type="text/javascript" src="./cube2_files/prefixfree.min.js"></script>


<style type="text/css">
body {
padding: 0;
margin: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
background-image: url(images/wallpaper-660816.jpg);
background-repeat: no-repeat;
background-position: center center;
}
.holoheader {
background-image: url(images/Header.png);
background-repeat: no-repeat;
height: 600px;
width: 700px;
position: relative;
margin-right: auto;
margin-left: auto;
color: #FFF;
-webkit-animation: holowrapper ease 2s infinte;
}

.holowrapper {
height: 600px;
width: 700px;
top: -110px;
margin-right: 60%;
margin-left: 40%;
position: relative;
/*-webkit-perspective: 1000px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(45deg); */
-webkit-animation: bounce ease 1.0s infinite alternate;
}
@-webkit-keyframes bounce {
    0% { top: -110px; }
    100% { top: -105px; }
}
.holoheader h2 {
font-family: 'Orbitron', sans-serif;
font-size: 24px;
color: #FFF;
text-align: center;
top: 23px;
position: relative;
}
.hologram {
font-family: 'Orbitron', sans-serif;
height: 400px;
width: 700px;
margin-right: auto;
margin-left: auto;
position: relative;
background-image: url(images/Filler.png);
background-repeat: repeat-y;
top: 68px;
}
.holofooter {
background-image: url(images/Footer.png);
height: 117px;
width: 700px;
position: relative;
top: 70px;
}
.hologram #content {
color: #FFF;
text-align: center;
overflow: scroll;
overflow-x: hidden;
height: 300px;
width: 650px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 25px;
}
::-webkit-scrollbar {
width: 12px;
}

::-webkit-scrollbar-track {
background-color: #004040;
opacity: 0.3;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-transition: background-color 0.5s ease 0s;
background-color: #2A6964;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);  
}
::-webkit-scrollbar-thumb:hover {
background-color: #B7EEF2;
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
.header {
height: 100%;
width: auto;
margin-left: auto;
margin-right: auto;
}
.header #innerheader {

}
.header #innerheader #logo {
margin-right: auto;
margin-left: auto;
height: 90px;
width: 600px;
margin-top: 10px;
-webkit-animation: slidein 2s 1 normal, fadein 2.5s 1 normal;
}
@-webkit-keyframes slidein {
    0% { margin-top: -100px; }
    100% { margin-top: 10px;; }
}
@-webkit-keyframes fadein {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#wrapper2 {
min-width: 600px;   
}
.navigationmenu {
text-decoration: none;
width: 250px;
margin-left: 15px;
padding: 5px;
height: 90px;
}
.navigationmenu ul {
font-family: 'Orbitron', sans-serif;
font-size: 36px;
list-style-type: none;
margin: 0;
padding: 0;
-webkit-animation: glow 1.5s infinite alternate;

}
/*@-webkit-keyframes glow {
    from { text-shadow: 0 0 0px #55A4AC; }
    to {
text-shadow: 0px 0px 25px #55A4AC;
}
} */
@-webkit-keyframes glow {
    0% { text-shadow: 0 0 15px #55A4AC; }
    100% { text-shadow: 0px 0px 25px #55A4AC; }
}
.navigationmenu ul:hover; {

}
.navigationmenu ul a {
text-decoration: none;
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;
}
a {
color: #fff9d6;
display: block;
width: 60px;
}
</style>

</head>

<body>

<div class="header">
<div id="innerheader">
<div id="logo"><img src="./cube2_files/Purelight.png" width="600" height="101"></div>
</div>
</div>

<div id="wrapper2">
<div class="navigationmenu">
<ul id="nav">
    <li><a href="about.html" class="home">Home</a></li>

     <li><a href="about.html" class="about">About</a></li>

    <li><a href="about.html" class="services">Services</a></li>

    <li><a href="about.html" class="portfolio">Portfolio</a></li>
</ul>
</div>
<div class="holowrapper">
<div class="holoheader"><h2>Project FreeSky</h2>
<div class="hologram">
<div id="content">
  <p>Home</p>
  <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p>
</div>

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/general.js"></script>
<div class="holofooter"></div>
        </div>
    </div>
</div>
</div>



</body>

</html>

About HTML.

<!-- about.html code -->    
<html>    
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>About</title>
</head>

<body>
<div id="content">
<h2>About</h2>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in    a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

    The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. </p> 
    </div>
</body>
</html>

Javascript

// JavaScript
$(document).ready(function() {
$('#content').load('content/cube2');



$('ul#nav li a').click(function() {
    var page = $(this).attr('href');
    $('#content').load('#content/' + page + '.html');
    return false;

});
});

Upvotes: 0

Views: 1530

Answers (2)

Jai
Jai

Reputation: 74738

You can use this:

$('ul#nav li a').click(function() {
   var page = $(this).attr('href'); // outputs = about.html
   $('#content').load(page + ' #content'); // <- targets the html page's div
   return false;
});

But my suggestion is to use a different id for parent page div something like #pageContent so that in the markup there would be just one #content div:

$('ul#nav li a').click(function() {
   var page = $(this).attr('href'); // outputs = about.html
   $('#pageContent').load(page + ' #content'); // <- targets the html page's div
   return false;
});

Upvotes: 1

Brian Mains
Brian Mains

Reputation: 50728

If the loaded HTML only should contain a subset, I think you can do:

$.get(page + '.html', function(d) {

  var content = $(d).find("#content");
  content.appendTo("appendselector");

});

You get the content from the server, parse it as a document fragment within jquery, then append the inner content to wherever you want it appended to.

Upvotes: 0

Related Questions