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>
Related
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.
I have to show a part of url link as ellipse and when I click the ellipse it should show the entire url. Using selected I'm only showing the final li and I'm not showing the 1st two li's. Not sure how to get the selectedClass url from below code.
That means the url "/home/digital/photos" should show like "/home/.../photos. And I'm only trying to do it in mobile.
<div class="url">
<ol>
<li>
Home
</li>
<li>
Components
</li>
<li>
photos
</li>
</ol>
</div>
You could do. Ive seen this done, a few times. But essentially if you want this for all your A hrefs you may need to set some sort of global click. But this should get you going.
Home
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.
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>
I've been trying and trying to get the scroll spy to work on my bootstrap site, but I'm unable to get it to work. The problem I'm having is, scrolling has no effect, wherever I scroll to. You can see what I'm doing here.
I've performed all the steps required i.e. below is the body tag
<body data-spy="scroll" data-target="#top-fixed-nav">
and nav is also there:
<ul class="nav" id="top-fixed-nav">
<li>
Home
</li>
<li class="">
About
</li>
<li class="">
How to Use?
</li>
<li class="">
Contact
</li>
</ul>
Have called the scrollspy as well.
$('#top-fixed-nav').scrollspy();
Can anyone please have a look and please point out what I'm overlooking or doing wrong here.
Docs say:
To easily add scrollspy behavior to your topbar navigation, add
data-spy="scroll" to the element you want to spy on ( most typically
this would be the <body>). Then add thedata-target attribute with the
ID or class of the parent element of any Bootstrap .nav component.
The code you posted wasn't working because you were spying on #top-fixed-nav (scroll events).
try this: jsfiddle
if Scrollspy highlight final element, you can add
height: 100%
to html and body tag