...

View Full Version : Keeping your nav from reloading when clicking your link(without using frames)



Zeke2
11-01-2010, 10:38 PM
Is there a way to keep the majority of your site from being reloaded as you navigate through it?

For example I would like it that when someone clicks the nav that only the content section loads the corresponding data, but doesn't reload the nav and everything around it.

:S sorry if i am wording this dodgy. Anyhow, thanks for reading :)

mikeyherbert
11-01-2010, 11:03 PM
Think you want php, specifically php includes. Tutorial is here (http://www.w3schools.com/php/php_includes.asp). Basically you put everything that doesn't change in a header and footer called "header.php" and "footer.php" and then call those files from the bit that does change, which will be another php file.

PS. I'm not an expert, but that should point you in the right direction.

Zeke2
11-02-2010, 06:32 PM
Thanks for the info and link :D It's nice to be able to break down some of these things into the appropriate coding language :D

teedoff
11-02-2010, 06:36 PM
Server side anything will reload the whole page when a user hits a nav button, a link, or refresh. To have a page load content witout having the page itself reload or refresh, you would need to call content using javascript. Javascript is a client-side language. The name itself suggests that its called by the client and handled by script that is already in the requested page file, therefore doesnt need to make a request to the web server.

Server-side include are just a way to include a section of code that might be used throughout a website, such as a header or footer or navigation section. Saves alot of coding if you need to change say a tab or link. You change the one file and the include updates all the files that utilize the include function.

Zeke2
11-02-2010, 06:47 PM
Oh man don't take this the wrong way if my question has been answered in your statement.

So when you load a website, your sending a request to the server which then send the relevant data. (the coding), and then the coding sends the request to the server for the relevant data/images to be put into the coding
??

So with the use of javascript, it enables the coding that was initally loaded to be isolated into certain areas of the code and secure them in position?

Then when someone clicks a link(sends a new request to the server(, the isolated javascript codeing stays while the none isolated code is replaced with the new sent coding(then data) from the server. ?

Or is it that the javascript simply redirects the codeing from the server to your cached images/data that was originally sent from the server?

teedoff
11-02-2010, 07:02 PM
Oh man don't take this the wrong way if my question has been answered in your statement.

So when you load a website, your sending a request to the server which then send the relevant data. (the coding), and then the coding sends the request to the server for the relevant data/images to be put into the coding
??

So with the use of javascript, it enables the coding that was initally loaded to be isolated into certain areas of the code and secure them in position?

Then when someone clicks a link(sends a new request to the server(, the isolated javascript codeing stays while the none isolated code is replaced with the new sent coding(then data) from the server. ?

Or is it that the javascript simply redirects the codeing from the server to your cached images/data that was originally sent from the server?

When a user loads a website, the browser sends the request to the webserver. This is all done behind the scenes by use of the URL(Uniform Resource Locator), similar to a physical address the post office uses to get your mail to you.

Each time a page is "requested" the web server reads the page first to find out the extension. If its simply a static page(html) then the web server reads the html code(and CSS) and translates that code into plain text and graphics so that a user can view it.

Server-side includes are just a short cut used to do less coding and less editing of repeated sections of code. If the webserver sees an include statement, whether its PHP or Coldfusion, and that the file extension is .php or .cfm respectively, then this type of page gets sent to an application server. This server translates all php or CF code back into html which of course then the webserver translates back into plain text.

Javascript is different. Its usually created to let the user do something on the site WITHOUT having to send a new requesto back to the web server. You have seen many examples of javascript, probably without realizing it. If you have ever played movies on youtube, and pause and restart the movie, this is most likely javascript. WHen you click pause, the page doesnt reload does it. Thats the difference. Wish I could explain it better, but Im a novice with javascript. Hope that helps!


You should really do some learning and research on your own. Here (http://www.w3schools.com)is a good site for learning all about javascript, html/css, and serverside languages like php.

Zeke2
11-02-2010, 07:08 PM
cheers for the info. Im still a bit hazed on how, but I get the jist of what you are saying.

Ive been looking at w3schools recently. It's alot of information to grasp with the coding. Im more of a designer than a coder, so switching my mindset to coding is a challenge, but fun to say the least.

My question is defiantly beyond my current understanding, as I still trying to understand the best approach at structural design for a website. Because right now I am using div tags to produce a layout for my website then referencing data/images to the appropriate div. My real problem is that I am not sure this is the "mainstream" or best approach at designing a website, and trying to find an answer to this question is becoming a challenge in itself :D

I really appricate the information you've posted thanks again

teedoff
11-02-2010, 07:13 PM
Div layouts are definately the current standard for web design. Just get a good text editor, walk through the tutorials at w3schools, beginning with the basics(html) and have fun. Create some sites/pages locally and play around. What can you hurt? nothing. It's all a trial and erro type of learning curve anyway.

You shouldn't expect to fully grasp server-side languages or javascript at this point anway. Its a step building process.

Zeke2
11-02-2010, 07:18 PM
Since we're talking here lol. I posted this in another thread, perhaps if you have some time tell me if this is completely wrong.


basically this is one crude example of using a div box layout. It's better to actually see it displayed in a browser as each div has it's own unique colour border for the most part.

Is this basically how people approach their webdeisgn?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<style type="text/css">

body {
background-color:black;
color:#ffffff;
}




div.box1 {
float:left;
width:100px;
height:100px;
border:1px solid blue;
}

div.box2 {
float:right;
width:100px;
height:100px;
border:1px solid green;
position:relatitive;}

div.box3 {
border:1px solid red;
overflow:auto;
min-height:10px;
height:100px;
}


div.box4 {
margin-left:auto;
margin-right:auto;
width:900px;
height:1000px;
border:1px solid orange;
}

div.box5 {
width:100px;
height:100px;
border:1px solid purple;

}

div.box6 {
float:left;
width:100px;
height:100px;
border:1px solid yellow;
}

div.box7 {

width:100px;
height:100px;
border:1px solid pink;
position:relative;
top:0px;
left:0px;
}

div.box8 {
width:100px;
height:100px;
border:1px solid gold;
position:relative;
top:0px;
left:0px;
}

div.box9 {
width:100px;
height:100px;
border:1px solid blue;
position:relative;
top:0px;
left:0px;
}

div.box10 {
border:1px solid red;
overflow:auto;
min-height:100px;
height:100px;
}

div.box11 {
float:left;
border:1px solid green;
min-height:800px;
width:100px;
}


div.box12 {
border:1px solid orange;
overflow:auto;
min-height:100px;
}

div.box13 {
float:right;
border:1px solid yellow;
width:100px;
height:200px;
}


div.box14 {
float:right;
width:200px;
height:700px;
border:1px solid pink;
}
</style>
</head>





<body>
<div class="box4">

<div class="box1">
</div><div class="box1">
</div><div class="box1">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box2">
</div>
<div class="box3">
This is test textThis is test textThis is test textThis isThis is test

textThis is test textThis is test textThis is test textThis is test textThis

is test textThis is test textThis is test textThis is test textThis is test

text test textThis is test textThis is test textThis is test textThis is

test textThis is test text</div>
<div class="box2">
</div>

<div class="box2">


</div>


<div class="box10">
</div>

<div class="box11">
</div>
<div class="box2">
</div><div class="box2">
</div>

<div class="box12">
</div>
<div class="box14">
</div>
</div>
</body>
</html>

teedoff
11-02-2010, 07:29 PM
Without seeing the page in a browser, its hard to tell what your desired outcome might be. Rememeber, divs are for defining a section of the page you want to manipulate and "place" in a certain area. For layout is what I mean. Think of a div as a box that you can put things it, in this case it may be a paragraph, or a nav bar, or even an image. You should read about the box model here (http://www.w3schools.com/css/css_boxmodel.asp). I think that will help.

As far as your approach, you are indeed right in wanting to layout your page with divs. Just be careful to not contract divitis (http://csscreator.com/divitis)...lol

Zeke2
11-02-2010, 07:39 PM
I think ive got it sussed. I wish there was a place I could upload what Im doing, Ive only got the code to show you unfortunatly. It seems to work, ive coded in a site and all my divs seem to me to be needed.

lol im still new, but :D it's working. still unclear on what divits is. Sounds basically like useing redundant coding and irregur use of divs that produce improper results on various browsers.

believe me, I spent an entire night trying to create that bloody box code I posted. Took me forever to understand how to play with them, but now I can create that in 10 minutes. But I spent bloody hours being screwed over by divs :p

teedoff
11-02-2010, 07:53 PM
Google free hosting. There are some sites that let you upload site files for free for testing purposes. Somewhere in this forum I know several have been mentioned, just cant recall the site names. Glad you got it working! Making headway slowly but surely.

Zeke2
11-02-2010, 08:01 PM
Thanks lol any progress is good progress at this point.


Cheers Ill take a peak through the forum :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum