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 13 of 13
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Keeping your nav from reloading when clicking your link(without using frames)

    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

  • #2
    New to the CF scene
    Join Date
    Nov 2010
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post
    Think you want php, specifically php includes. Tutorial is here. 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.

  • Users who have thanked mikeyherbert for this post:

    Zeke2 (11-02-2010)

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks for the info and link It's nice to be able to break down some of these things into the appropriate coding language

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.
    Last edited by teedoff; 11-02-2010 at 05:38 PM.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Zeke2 View Post
    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 is a good site for learning all about javascript, html/css, and serverside languages like php.

  • Users who have thanked teedoff for this post:

    Zeke2 (11-02-2010)

  • #7
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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

    I really appricate the information you've posted thanks again

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #9
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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?


    Code:
    <!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>

  • #10
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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. 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...lol

  • #11
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    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 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

  • #12
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    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.

  • #13
    New Coder
    Join Date
    Oct 2010
    Posts
    30
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks lol any progress is good progress at this point.


    Cheers Ill take a peak through the forum


  •  

    Posting Permissions

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