Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 20
  1. #1
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Hi. I want to be able to load the contents of individual html pages from the main navigational menu located at (includes/navigation.shtml) from div ID "nav", into the main content area: div ID "main-content-window" on my index.shtml main template page. Can it be done using server side includes? Or is there a more efficient route?

    My page is http://www.danperceval.com

    Here is the HTML (simplified) on index.shtml:
    <div id='container'>
    <div id='lighting-bottom'></div>

    <!--Start Header -->
    <div id='header'>

    <div class='skater-left'></div>
    <div class='skater-right'></div>
    <div id='logo-top'></div>

    <div id='logo-small-container'>
    <div id='logo-small'></div>
    </div>

    <!--Navigation -->
    <div id='nav'>
    <!--#include file="includes/navigation.shtml"-->
    </div>
    <!--END Navigation -->

    </div>
    <!--END Header -->


    <!--Gray Bar below nav. -->
    <div id='container-menu-below'>
    <div id='menu-below'>
    <div id='menu-left'></div><div id='menu-middle'></div><div id='menu-right'></div>
    </div>

    <div id='railroad-spike-right'></div>
    <div id='railroad-spike-left'></div>
    </div>
    <!--END Gray Bar below nav. -->


    <!--Main content area -->
    <div id='main-content-container'>
    <div id='main-content-window'></div>
    </div>
    <!--END Main content area -->


    <!--Start Footer -->
    <div id='footer'>
    The sport Xtreme Ice Skating is an international sport founded by Dan Perceval in 2005.
    <br />
    <!--#include file="includes/copyright.txt"-->
    </div>
    <!--END Footer -->

    </div>

  2.  

  3. #2
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    Other than putting your navigation into a DB and then making a DB call, using server side includes to navigation, header,footer ( common info from all pages ), is about as efficient as it gets.

    Very common

  4. #3
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Quote Originally Posted by Webzarus, post: 246580
    Other than putting your navigation into a DB and then making a DB call, using server side includes to navigation, header,footer ( common info from all pages ), is about as efficient as it gets.

    Very common
    But how do I target an ID from another div (using the menu options) with server side includes? I can't find an example of this being used on the internet. What's the string? And how do I implement this?

    Maybe this is the answer?
    http://frinity.blogspot.com/2008/06/...v-element.html

  5. #4
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    I think that what you are looking for is just the jquery load function. So, when you click on a link, it loads the content from an html file into the main content div on the homepage?
    That would just be something like:
    $('#about').on("click", function(){$('#content').load("about.html")});
    Where "about" is the id of the nav link and "content" is the id of the div you want to load about.html into.
    Then, your about.html file would just have the html that you need (no head or body sections).
    See more details here:
    http://api.jquery.com/load/
    Ronald Roe likes this.
    Freelance Web Developer

  6. #5
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Quote Originally Posted by ekim941, post: 246595
    I think that what you are looking for is just the jquery load function. So, when you click on a link, it loads the content from an html file into the main content div on the homepage?
    That would just be something like:
    $('#about').on("click", function(){$('#content').load("about.html")});
    Where "about" is the id of the nav link and "content" is the id of the div you want to load about.html into.
    Then, your about.html file would just have the html that you need (no head or body sections).
    See more details here:
    http://api.jquery.com/load/
    I read the linked page above but I'm a total beginner. What is incorrect in my code?

    <div id='navigation'>
    <ul>
    <li class='dropdown' onmouseover="toggleUp();"><a href='#'><span>About</span></a>
    <ul>

    <li id='home-page'><a $('#home-page').on("click", function(){$('#main-content-window').load("home.shtml")});><span>Home page</span></a></li>
    <li><a href='biography.shtml'><span>Biography (Founding)</span></a></li>
    <li><a href='press.shtml'><span>Media/Press</span></a></li>
    <li><a href='exhibitions.shtml'><span>Exhibitions</span></a></li>
    <li><a href='timeline.shtml'><span>Timeline of Sport</span></a></li>
    <li><a href='links.shtml'><span>Links</span></a></li>
    </ul>

  7. #6
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    Okay, you'll want to put the script in the Head tag of your page and call it on ready with this function.

    $(document).ready(function() {


    // Handler for .ready() called.


    });
    find more info on ready here:[SIZE=15px]http://api.jquery.com/ready/[/SIZE]
    Freelance Web Developer

  8. #7
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Wow, this looks really fitting to what I'm trying to do and a lot easier to implement, at least for me:
    http://css-tricks.com/dynamic-page-replacing-content/

  9. #8
    Member
    Join Date
    Nov 2012
    Location
    Tampa. FL
    Posts
    59
    Member #
    33844
    Liked
    21 times
    That looks like a much better way to do it. Not because it works if javascript is disabled (who does that) but because it leaves the links for search engines to follow. The search engines won't follow through to a page called products.html if it's loaded with load("products.html)
    Freelance Web Developer

  10. #9
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Quote Originally Posted by ekim941, post: 246614
    That looks like a much better way to do it. Not because it works if javascript is disabled (who does that) but because it leaves the links for search engines to follow. The search engines won't follow through to a page called products.html if it's loaded with load("products.html)
    Yes, true. Thanks for that info and helping out. I resolved this issue. And for anybody who's having this similar 'content loading' problem, here's an easy resolution:
    http://css-tricks.com/dynamic-page-replacing-content/

  11. #10
    Junior Member
    Join Date
    Dec 2012
    Posts
    29
    Member #
    34228
    Ok, new problem: I can not use jquery with the dnynamic html script below or even the older version. However, I am able to load for example an image slider that uses jquery on the index page for pageLOAD event, but can not load any image slider or anything that requires jquery for the use of the dynamic html used in the menu here www.danperceval.com

    Dynamic html load contents into div:
    http://css-tricks.com/dynamic-page-replacing-content/

    I made sure the links were correct and the references were correct in the code. Does anyone know the limitations of the above script and why jquery does not work with the above script?

    THanks,
    Dan


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

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

Search tags for this page

html menu options load content

,

page2 result load html

Click on a term to search for related topics.
All times are GMT -6. The time now is 07:12 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com