Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    70
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Loading A Page as main page

    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?

    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>  &nbsp;
    													<tr> <a href="content/forum.html" class="links"> Forum </a></tr>  &nbsp; 
    													<a href="content/blog.html" class="links"> Blog </a></tr>  &nbsp; 
    												<a href="content/contact.html" class="links"> Contact </a></tr>  &nbsp;                 
    														 </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

  • #2
    New Coder
    Join Date
    Jul 2012
    Posts
    70
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Need help


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •