Grow your CSS skills. Land your dream job.

Load Sidebar Content From External File?

  • # July 10, 2013 at 11:57 am

    Hello,

    I am wondering how I could load HTML content into a sidebar div on my website I am developing locally.

    I want to do this, so that if I need to make changes to the sidebar or other content on the site, I could just edit the external file once, and then all pages with the code would be updated. Instead of having to change each file manually.

    Codepen: http://codepen.io/npav/pen/BwoHh

    # July 10, 2013 at 12:13 pm

    Sounds like you need AJAX.

    Unfortunately, that’s not in my wheelhouse.

    # July 10, 2013 at 12:44 pm

    Ok, thanks for your comment, I’ll look into AJAX, I’ve heard a little bit about it, I thought this could possibly be done with JavaScript, but I guess not.

    # July 10, 2013 at 2:09 pm

    Does “Include” solve your problem? I have used that on a few of my sites.

    http://webdesign.about.com/od/ssi/a/aa052002a.htm

    # July 10, 2013 at 4:46 pm

    Yea, sounds like you need a simple include.

    # July 10, 2013 at 5:45 pm

    An include/require sounds good enough.

    # July 10, 2013 at 6:31 pm

    You will need a local development server in return, though. Use XAMPP or something similar for testing PHP locally.

    just create two files.

    Index.php with your normal code (but remove your Sidebar code).

    sidebar.php with your sidebar code.

    Then in index.php, use the following code in the sidebar wrapping div’s:



    <div class="wrapper">
    <?php include_once ('sidebar.php'); ?>
    </div>

    # July 10, 2013 at 6:52 pm

    Awesome! thanks alot guys I will test this out tomorrow and post how it went!

    # July 12, 2013 at 9:38 am

    This works perfect! thanks a lot guys! Just what I was looking for!

    # July 12, 2013 at 10:31 am

    Quick question, does the host file have to be php as well? or can it stay as HTML?

    Thanks.

    # July 12, 2013 at 11:30 am

    You mean the index.html file? It must be .php extension so it can be read properly. HTML is static – PHP is dynamic.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".