[HTML] In-page linking to the same section of the page

[79wjd]

I'm trying to design a product page and my current idea (I'm open to others) is to have a floating navigation bar on the left and then on the right side have a content box where all the products will be displayed. If you choose an item in the navigation bar then the right box will update to display just the selected products. What would be the best way to implement this with just html/css? Every solution I can think of would be kind of messy. There's probably some obvious solution and I'm just over complicating things in my head. 

 

IMPORTANT: There are a few hundred thousand products and they're constantly changing so this wouldn't be a product list like you would have on Amazon/Newegg/Bestbuy/etc... I'm basically stuck categorizing and then linking to the manufacturers site. So, using computer components as an example, I was thinking something like this (although I'm certainly open to ideas). There would also be a default "home" content page when the page is first opened. (p.s. the colors/fonts are fillers)

[Nuluvius]

You should use an MVVM approach with something like AngularJS,

[prolemur]

If you could use php and a database that would probably the way I'd handle. With just html and css angular like Nuluvius mentioned is good for single page apps/sites.

 

It could be done the ghetto way by having all the elements in the html but only displaying the one's with a certain id and changing the display: none; in the css

[vorticalbox]

4 minutes ago, prolemur said:

If you could use php and a database that would probably the way I'd handle. With just html and css angular like Nuluvius mentioned is good for single page apps/sites.

 

It could be done the ghetto way by having all the elements in the html but only displaying the one's with a certain id and changing the display: none; in the css

not true he could have different fuctions set up to call different parts of the DB have PHP return json angular JS can then use that data to make the layout. would bascially be a REST service.

[79wjd]

25 minutes ago, prolemur said:

If you could use php and a database that would probably the way I'd handle. With just html and css angular like Nuluvius mentioned is good for single page apps/sites.

 

It could be done the ghetto way by having all the elements in the html but only displaying the one's with a certain id and changing the display: none; in the css

That's actually the way I was thinking about doing it, although angular is easier. 

[Nuluvius]

37 minutes ago, vorticalbox said:

not true he could have different fuctions set up to call different parts of the DB have PHP return json angular JS can then use that data to make the layout. would bascially be a REST service.

17 minutes ago, djdwosk97 said:

That's actually the way I was thinking about doing it, although angular is easier. 

You can use AngularJS + HTML & CSS as your front end; it will act as your View and View Model with your Model being a resource that consumes JSON data issued from some RESTful web API. That API can be implemented in PHP, ASP Web API, whatever you like and it can talk to whatever database technology you like. The point is that you have a clearly defined asynchronous interface, what technology you choose to implement it in is up to you - that's just the implementation detail.

 

The end result should be a more pleasing, highly responsive web application.

 

Pluralsight has a great course by Deborah Kurata for beginners wanting to implement this kind of stack using AngularJS, have a look here. Any of her others are really good as well.

[prolemur]

32 minutes ago, vorticalbox said:

not true he could have different fuctions set up to call different parts of the DB have PHP return json angular JS can then use that data to make the layout. would bascially be a REST service.

what part was untrue?

[vorticalbox]

2 minutes ago, prolemur said:

what part was untrue?

that html css and angular is only good for a simple page. Angular us very power and can create very good web based application.

[prolemur]

1 minute ago, vorticalbox said:

that html css and angular is only good for a simple page. Angular us very power and can create very good web based application.

i said single page, not simple

[vorticalbox]

17 minutes ago, prolemur said:

i said single page, not simple

even as "single" i would disagree. AngularJS and ng-repeat is great for displaying products and the like.

[Hazy125]

/small thread hijack sorry... But why all the support for angular? Was there a new version released recently that is above and beyond even plain JS? This is the first time I've seen angular be a unanimous choice

[Nuluvius]

3 minutes ago, Hazy125 said:

/small thread hijack sorry... But why all the support for angular? This is the first time I've seen angular be a unanimous choice

Please read the posts thoroughly before jumping to assumptions:

6 hours ago, Nuluvius said:

You should use an MVVM approach with something like AngularJS,

One could achieve the same result using Knockout or JQuery.

 

I'm not sure what you mean by this:

3 minutes ago, Hazy125 said:

Was there a new version released recently that is above and beyond even plain JS?