We Keep Coding

one html page or multiple for product info?

I couldn't find anything on this. I have a simple website done in Jquery, CSS and HTML. I have a list of hundreds of products stored in a local folder. Once a product is clicked, the user should be able to see a picture of the specification on another page. The page/pages have the same HTML structure, just name and pictures are different. What is the best way to go about it? Do I create a new HTML for each product? Or should I use the same Html page to render different names and pictures? If so, how does this page determine what product was clicked? Right now I am using href to direct to different html pages, but I dont think this is the optimal way of doing it. If I use a single page to gernerate different content, how do I pass in whats being clicked?
<ul id="denison-single-pump-menu" class="container collapse">
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v10_v20_series.html">V10-V20 Serires</a></li>
<li class="col">V10</li>
<li class="col">V20</li>
</div>
<div class="row">
<li class="active col-md-3"><a style="font-weight:bold;" href="/products/vickers/single%20vane%20pump/v_series.html">V Serires</a></li>
<li class="col">20V</li>
<li class="col">25V</li>
<li class="col">35V</li>
<li class="col">45V</li>
</div>
</ul>

hi i will try to solve your problem, you can make modal on the same html page. you can see here how to make modal https://www.w3schools.com/bootstrap/bootstrap_modal.asp. to differentiate you can replace the id of the modal and the data-target, by using looping or retrieving unique data from your data ex: id. hopefully this can solve your problem.

Angular2 RouterLinking Working in One Place, Not Another

I have my routerLinks working in my Angular2 application. From my main drop-menu, when I click on the links, they load the correct URL and the correspondingly correct component. However, I have these same links listed in another part of the application, and for some reason they don't work there. I click on them and nothing happens - no URL change, and no loading of a component. The only difference between the working and non-working instance is that the non-working instance includes links attached to "li" items within a "ul". First I'll list the code that IS working:
<div class="nav-menu-item indent"><a routerLink="about">About</a></div>
<div class="nav-menu-item indent"><a routerLink="contact">Contact</a></div>
And here's the ul instance where they are NOT working:
<ul class="sublist">
<li class="subitem"><a routerLink="about">About</a><span class="sub-item-count">68</span></li>
<li class="subitem"><a routerLink="contact">Contact</a><span class="sub-item-count">56</span></li>
</ul>

I think while your first component resolves those router links fine. The second one doesn't know what they are. Try this:
<ul class="sublist">
<li class="subitem"><a routerLink="/about">About</a><span class="sub-item-count">68</span></li>
<li class="subitem"><a routerLink="/contact">Contact</a><span class="sub-item-count">56</span></li>
</ul>

Partial View with ng-route vs ng-show/ng-hide which one should I use?

I have four to five tab views in my app. So clicking on each tab I'll show content based on the tab selection.
I tried two approach one is ng-route and another one is ng-show/ng-hide. I feel ng-show/ng-hide is good at performance level and I think I should follow the same. Here is what I tried
First Approach ng-route
main.php
var testApp = angular.module("testApp", ["ngRoute"]);
testApp.config(function ($routeProvider) {
$routeProvider.when("/tab1", {
templateUrl: "tab1.php"
});
$routeProvider.when("/tab2", {
templateUrl: "tab2.php"
});
$routeProvider.when("/tab3", {
templateUrl: "tab3.php"
});
$routeProvider.when("/tab4", {
templateUrl: "tab4.php"
});
$routeProvider.otherwise({
templateUrl: "tab1.php"
});
});
testApp.controller('testContr',function($scope){
//controller statements goes here
});
<ul class="nav nav-pills">
<li class="active" role="presentation">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 5</li>
<li role="presentation">Tab 4</li>
</ul>
tab1.php
<div>
tab1 content goes here
</div>
tab2.php
<div>
tab2 content goes here
</div>
tab3.php
<div>
tab3 content goes here
</div>
tab4.php
<div>
tab4 content goes here
</div>
Second approach ng-show/ng-hide
main.php
var testApp = angular.module("testApp", []);
testApp.controller('testContr',function($scope){
$scope.view = 'tab1'// tab1 by default
$scope.setView = function($newView){
$scope.view = $newView;
}
//controller statements goes here
});
<ul class="nav nav-pills">
<li class="active" role="presentation" ng-click="setView('tab1')">Tab 1</li>
<li role="presentation" ng-click="setView('tab2')">Tab 2</li>
<li role="presentation" ng-click="setView('tab3')">Tab 3</li>
<li role="presentation" ng-click="setView('tab4')">Tab 4</li>
</ul>
<?php require_once 'tab1.php';
require_once 'tab2.php';
require_once 'tab3.php';
require_once 'tab4.php'; ?>
Content in those are listed in the main.php but on condition with ng-show
tab1.php
<div ng-show="view == 'tab1'">
tab1 content goes here
</div>
tab2.php
<div ng-show="view == 'tab2'">
tab2 content goes here
</div>
tab3.php
<div ng-show="view == 'tab3'">
tab3 content goes here
</div>
tab4.php
<div ng-show="view == 'tab4'">
tab4 content goes here
</div>
I see the benefits of partial view with ng-route, which is manageable chunk of code. Which I can achieve php include file(each file with separate view and include them all in main file) and ng-show.
My app doesn't need to care about URL Navigation as of now.
When I try the above two approach I see ng-show is faster and I can avoid ng-route.js file as well(reduces file load time).
Is there anything am I thinking wrong. Any suggestion on which to use?

In addition to what #DilumN has said, using ng-route also allows you to do deep linking (of sorts) into your tabs i.e. you can provide a URL to someone and that would open into the exact tab you want to point at.
Also, ng-route is meant for this task, as opposed to ng-hide/show which is meant to display: none content.
Last but not least, ng-route allows for easier tests (you're writing tests right? wink).
You can also separate out concerns using ngRoute, and in the end, this will prevent spaghetti code. If you come from a jQuery background, the ng-show method might look more intuitive, but the ng-route method ironically, is the more Angular way of doing this.

For this approach ng-show have some disadvantages as well. Because you are using ng-show to show hide tabs, when you load the page initially all those views will be loaded into your DOM & ng-show uses css show/hide to show content accordingly. If your content get bigger & bigger the HTML will also grow bigger.
And also if you want to handle separate controllers for each tabs one day, the better way is using separate ui-views for each tab.
For a simple static tab content ng-show is fine, but if you have a feeling that it will be more complex in future, my suggestion is to go for separate routes & controllers.
So at the end of the day decision is yours by thinking about the future growth of the project.

How do detect current page to add an active class to corresponding menu button

I am trying to figure out how to detect what page I am on so I can add a selected class to my html with Jquery. I have tried a few bits of script but they have not worked. I am working on a local server and for now just need something that can somehow detect the page I am on and somehow link it to the li's. I'm not sure how to tackle it
HTML:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li><img src="img/small-icons/access-icon.png" width="17" height="16" alt=""/>Access</li>
<li>Fader Layout</li>
<li>Patching</li>
<li>Wild Controls</li>
<li>Buses & Outputs</li>
<li class="submenu">Contribution
<ul class="sub-section">
<li class="go-back"><a>I AM BACK BUTTON for contribti</a></li>
<li><a>test</a></li>
<li><a>test</a></li>
</ul>
</li>
<li>Oscillator</li>
<li>Talkback</li>
<li>Meters</li>
<li>Automixer</li>
<li>Audio Follow Video</li>
</li>
<li class="submenu selected">test-page
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
<li class="submenu">Control Surface
<ul class="sub-section">
<li class="go-back"><a>Back to Main Menu</a></li>
<li><a>IwhatN</a></li>
<li><a>IwhatN</a></li>
</ul>
</li>
</ul>
</div>

A solution would be to use get params with something like How to get query string params and form the URL's so that they append the param as ?page=mypage and then get the page name or ID with getParameterByName('page') and then check out where you handle your tabs and perform your desired stylings/actions.
This can also be handled from backend, depending on the backend technology you are using.
For example
if PHP, perhaps append the get params there or set specific $_SESSION['page'] variable and handle these clientside
if Django, it can be exported to context or, also appended to get params and handled in the template via javascript or template tags
...and many other possibilities.
If the question though refers to how to set a status based on what page you are on depends on where you want to set that status, for example you might write a script that when clicking a button/link it would first make an ajax POST request to your server sending the ID that you are interested in (setting it in the backend somewhere) and then redirect to wherever you need.

create external link to javascript filter link "created with Isotope"

I have a page on my website that has a JavaScript filter (called Isotope) to display specific items on a page when you click a link on that page.
I would like to create an external link that will go to that page AND select one of the filter items.
I was thinking it should be something like:
mysite.com/page.html#filter.3
I'm obviously way off however I'm not sure where to even start looking to find a solution.
The filter presets look like the code below.
<div id="filters">
<ul class="option-set" data-option-key="filter">
<li>All</li>
<li>/</li>
<li>Adults</li>
<li>/</li>
<li>Youth</li>
<li>/</li>
<li>Kids</li>
</ul>
</div>