Multi page website in single html file

Dev Zone Web Development
1

So this will be the first in a series of stupid questions as I try to build a web interface for some of the server side scripts.

I want to make a pretty web UI (with lots of glitter and sparkles for management) for where I work (disclaimer next to no web dev experience)

to start I have a basic bootstrap page with a nav bar (stock, home, about, contact) and I want to jump to a differnet div when I hit the about button.

so in the nav bar I have some things to click with href="#about" etc
and I want to be able to jump to div id="about" and have the page ONLY show the nav bar and that div.

2

Depending on how mature your web UI needs to be, there are multiple solutions to that.

Here is an easy one - quick and dirty:

Disclaimer: I didn't test that code - too little time. No warranty. Hopefully helpful.

  1. create a CSS class like that:

    .page {
    display:none;
    }

  2. add it to your content divs (not the navbar entries!)

  3. create a JavaScript function like that:

    function selectPage(page) {
    $(".page").hide();
    $("#" + page).show();
    }

  4. call the function using e.g. onclick="selectPage('about')" in your menu entries

3

If you are up for trying to increase your knowledge in web development, you might want to take a look at Single-page applications.

You can read a bit about it here: https://en.wikipedia.org/wiki/Single-page_application

4

thats essentially my goal, I know in my "mobile app development" class aka web dev for phones taught in a horrible manner, that you can do this all through html, jquerry and bootstrap. (which I'm currently trying to use)

but all the courses sample code does is use href="#sectionName" and poof shows the div you want.

5

OK, I totally missed the part, that you are using Bootstrap.

Maybe consider learning React JS or AngularJS if you want to go deeper into UIs.
http://facebook.github.io/react/
https://www.angularjs.org/

6

thanks, any good tutorial on those?

please keep in mind I have next to no experience with web dev

7

If you already have Bootstrap, try learning it correctly. React and Angular are way more advanced and require JavaScript skills. Maybe start here: http://getbootstrap.com/getting-started/ and build some good Bootstrap pages, mix in some JavaScript if needed and when you feel comfortable, try React or Angular. I guess, they have tutorials on their websites.

8

thanks!

9

https://www.codeschool.com
Also have some rather good toturials to get you started with basic JavaScript, Angular JS, CSS and a whole lot of other stuff.

1 Like
10

I am not sure, if those are the best entry to web development. Once you build complex applications, you won't get around such a framework. But for beginning, it's better to learn some basics about web development.

React is a really bad choice to start, imho. It's more of a library, and you'll need to patch together several other libs.
Angular can be an ok entrypoint, and you'll see results fast and many developers use it, so support won't be an issue. However, it lacks reactive data in version <2, and somethings are really not that pretty.

I personally would recommend to try to build some basic things with jQuery to get an idea about what is possible, and then dive into something like Vue.js or Ember.js.
Vue.js is simple, and a lot more beautiful than angular.
Ember.js is the full blown, opinionated version of a MVC frontend library. It is elegant, it has two-way-databinding (or reactive components, meaning data will update everywhere once you change it somewhere), and it has by far the best command-line tools for easy boilerplate.
However, with ember.js the learning curve is very steep. You'll be learning tools and concepts a while. But once you know how, you'll love it.

I don't think there is a wrong choice, but imho Vue.js and Ember.js are the better choice.

https://vuejs.org/
http://emberjs.com/

11

so I guess I can update with my solution.

so it turns out jquerry mobile has a method for doing this. (which was being used in my mobile app class)

so using jq mobile I accomplished it by adding a "data-role="page"" to my main content divs, and thus would only show one at a time, which can be switched using href="#div-name"

12

I know.

14

I can give you some code for reference if you're interested.