I would google this question and try to get it functional myself but expirecing A few internet issues and I'm hoping to learn it as soon as possible, This will be my last question for stackflow for A while.
Anyway,
I have created A feature where when A user clicks A certain link it will load it with jquery with out requiring A page refresh.
What I want to do is when the page loads I want content/main.html to be loaded how is possible?
I have tried adding in the (document).ready function but it seems to conflict with something and mess up.
Heres the JQuery
});
The index.html
The normal way of doing ti
Thanks Again,
Spudster
Anyway,
I have created A feature where when A user clicks A certain link it will load it with jquery with out requiring A page refresh.
What I want to do is when the page loads I want content/main.html to be loaded how is possible?
I have tried adding in the (document).ready function but it seems to conflict with something and mess up.
Heres the JQuery
Code:
$(document).ready(function () {
$(".clicked_content").show(function() {
$('.clicked_content').load('content/main.html');
});
$(".links").click(function (event) {
$(".clicked_content").hide();
event.preventDefault();
var page = $(this).attr('href')
$('.home_content').load(page);
});});
The index.html
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Class Web Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/mystyle.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/internal.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<h1 class='logo'>Nintnedo Central</h1>
</div>
</div>
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<ul class="links">
<a href="content/main.html" class="links"> Home </a>
<tr> <a href="content/forum.html" class="links"> Forum </a></tr>
<a href="content/blog.html" class="links"> Blog </a></tr>
<a href="content/contact.html" class="links"> Contact </a></tr>
</ul>
</ul>
<div class="container">
<a class="btn btn-navbar" data toggle = "collapse" data-target ".nav-collapse">
</a>
<div class="nav-collapse collapse">
</div>
</div>
</div>
</div>
<div id="main_content">
</div>
<div id="main_contentt">
<script type="text/javascript">
var $buoop = {vs:{i:9,f:10,o:11,s:4,n:9}}
$buoop.ol = window.onload;
window.onload=function(){
try {if ($buoop.ol) $buoop.ol();}catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "js/browser.js");
document.body.appendChild(e);
}
</script>
</div>
</div>
</div>
<div class="row">
<div class="span12">
<div class="hero-uni"> <!-- Contents Style-->
<div class="clicked_content"> <!--Contains ALL Content-->
</div>
<div class="home_content"> <!--Contains ALL Content-->
</div>
</div>
</div>
</div>
</body>
</html>The normal way of doing ti
Thanks Again,
Spudster
