#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2011
    Posts
    24
    Rep Power
    0

    User functions in other files


    I would like to know if it is possible to create a template in any language, HTML, CSS, jQuery, JavaScript, etc.

    where I could create a template for my site with a header (with an image), sidebar (for instance a selector, images, and somethingelse), footer(with links to other pages like about page, contact us, etc), and I central area where I introduce a different code an info to each HTML page.

    My idea is so I can modify only in one place the image of the header, the selector or the sidebar or any other element so it will change in all the HTML pages instead of having to have to change it in every single HTML page.

    IF it is possible, how could I do it with the following selector?

    Code:

    <select id="mySelect" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
    <option>Select an option</option>
    <option value="(site)">Orange</option>
    <option value="(site)">Pineapple</option>
    <option value="(site)">Banana</option>
    </select>



    Thanks so much
  2. #2
  3. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    This is best done server-side with server-side includes, using a language such as PHP.

    I hesitate to mention this.. as client-side includes are actively discouraged (for a number of reasons). Essentially, a JavaScript script is run on relevant pages that uses document.write() to write the same content to a page. But you asked a similar question on another forum so I'm guessing that you are persistent..

    Disclaimer: I am not encouraging CSI!
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,128
    Rep Power
    4304
    My idea is so I can modify only in one place the image of the header, the selector or the sidebar or any other element so it will change in all the HTML pages instead of having to have to change it in every single HTML page.
    Check out this tutorial on how to use PHP includes.

    Originally Posted by samuvk
    IF it is possible, how could I do it with the following selector?

    Code:

    <select id="mySelect" onchange="if(this.options[this.selectedIndex].value != ''){window.top.location.href=this.options[this.selectedIndex].value}">
    <option>Select an option</option>
    <option value="(site)">Orange</option>
    <option value="(site)">Pineapple</option>
    <option value="(site)">Banana</option>
    </select>
    Those are often called "jump boxes" or "jump menus". Are you aware that they cause problems for some users? I recommend you try to find an alternative.
    More information:
    Drop-Down Menus: Use Sparingly
    Creating Accessible Forms: JavaScript jump menus
    Accessible JavaScript onchange select menu
    WAC Tutorials: Jump Menu
    Unobtrusive Jump Menus Using JavaScript
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo