I'm new to Angular2, I have one problem, I have a sidebar if I select one menu list page will open and if I select role it will redirect to another page till this its working fine, but in child page, the parent menu is not active how to make it as active.
Please help me to find the solution.
app.routing.ts:
{
path: '',
component: LayoutComponent,
children: [
{ path: 'sp-list', loadChildren: './sp-list/sp-list.module#SpListModule'},
{ path: 'sp-details', loadChildren: './sp-list/sp-list.module#SpListModule'},
]}
app-routing.html:
<a [routerLink]="['/sp-list','/sp-details']" [routerLinkActive]="['router-link-active']" class="list-group-item">
<i class="fa fa-fw fa-bar-chart-o"></i> Page
</a>
//// I tired like this,its not working
I had the same issue for my admin panel, I had one left panel subcomponent that was being used at the top level component and will be appearing on each sub-routes.
Here are screenshots for handling such menu and submenu auto selection. Html code as well as the left panel code.
Thanks
Related
I was using routerLinkActive="active" inside the html file with routerLink=[myId] to highlight the active anchor in a ul.
Example:
<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
But when I remove the [routerlink]="[myId]" and replace it with a click listener (that does some calculation and then redirects the route using this.router.navigate(['/someURL', myId]) ) the routerLinkActive="active" no longer works/highlights.
Example:
<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
<div class="pull-left">
<h4 class="list-group-item-heading">{{someName}}</h4>
</div>
</a>
When inspecting the anchor elements using the routerLink=[myId], the style is set to:
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
z-index: 2;
color: #fff;
background-color: #337ab7;
border-color: #337ab7;
}
Is it possible to set the active anchor style in the .ts file in the onClick() function? Or is there a simpler way around this?
Highlighting a specific link in the navigation is a reflection of the current state of the app: link A is highlighted because the user is looking at page A.
You're asking how to highlight the link as the result of a click. This approach is less than ideal: you could end up highlighting the link before the new route/page is actually activated. Most importantly, if the user reloads the page or navigates to it directly because they bookmarked it, the link will NEVER be highlighted (because no one clicked it).
You need to find a way to highlight the link based on app state, NOT as the result of an action (the typical flow is: action => changes state => updates UI).
Maybe something like this:
#Component({
template: `
<a [class.active]="currentPath == 'home'">HomeComponent</a>
`
})
export class HomeComponent {
currentPath = '';
constructor(route: ActivatedRoute) {
// Retrieve current path.
this.currentPath = snapshot.url.join('');
}
}
The idea is to retrieve the current path and expose it to the template.
Like Günter suggested, you can probably find more robust code for testing the current path in routerLinkActive's source code.
So in my bootstrap 3.3.6 I have a menu that includes links.
In smaller sizes the menu becomes a dropdown menu and I want , when a menu item is clicked , the menu to go away.
I guess I can do something like
function closeMenu(){
//? uhm, what?
}
document.getElementByClass ("menuLink").addEventListener("closeMenu",findit,false);
but I dont have a clue what to set inside my function, so the dropdown will go back up again
Any help?
Thanks
I figured a way.
Inside the div with the links, I set a controller and ng-click for every link.
<ul class="nav navbar-nav navbar-right" ng-controller="navCtrl" >
<li><a ng-click="menuLinkClicked()" href="#/"> Home </a></li>
<li><a ng-click="menuLinkClicked()" href="#jake"> Jake</a></li>
<li><a ng-click="menuLinkClicked()" href="#amir"> Amir</a></li>
</ul>
and in my controller
app.controller('navCtrl',['$scope',
function ($scope) {
$scope.menuLinkClicked = function () {
document.getElementById("navbar").className="navbar-collapse collapse";
};
}
]);
navbar is the id of the menu that collapses in smaller screens. I use document.getElementById("navbar") to get it and then change its class to make it dissappear.
I am currently using the Flatiron Template in Squarespace 6. Each image in the gallery currently displays the image, a title, and -view- under it. I am looking to change -view- to a different name (a city to be specific) that is unique to each gallery item.
The source code for one of the grid items is this:
<script>
Y.use('squarespace-ui-base', function(Y) {
Y.one(".project-item .meta h1").plug(Y.Squarespace.TextShrink);
});
</script>
<!-- Main Grid -->
<div id="grid" data-collection-id="53ebab59e4b0c8271c405596">
<div class="item">
<a href="/diesel-pop-up-brooklyn-nyc/" data-dynamic-load data-dynamic-receiver="#detail_53ee8134e4b020d5c7faa7b3" >
<div class="wrapper">
<div class="project-title">
<h2>DIESEL POP-UP</h2>
<h3>— view —</h3>
</div>
</div>
<img class="thumbnail loading" data-src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg" data-image-dimensions="480x642" data-image-focal-point="0.5,0.5" alt="2.jpg" data-load="false" />
<noscript><img src="http://static.squarespace.com/static/52937e51e4b006a2894ed2fb/t/540e3941e4b0438c2051340c/1410218366032/2.jpg?format=original"></noscript>
</a>
</div>
I have tried using this in the custom CSS section (just to attempt at targeting one item) but it has only effected the page that the image links to, not the image itself.
.project-item[data-dynamic-href='/diesel-pop-up-brooklyn-nyc/'] {
background-color: red;
}
Is there a code that can target each individual element?
Go to:
Page > Settings > Advanced > Header injection (Index page)
Then paste the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".item:nth-child(1) h3").text("1st item");
$(".item:nth-child(2) h3").text("2nd item");
$(".item:nth-child(3) h3").text("3rd item");
$(".item:nth-child(4) h3").text("4th item");
});
</script>
Cool. Now you can change the text in the quotations (1st, 2nd, 3rd, 4th item) to whatever text you want to replace 'view'. If you have more than 4 galleries in the index, you can copy a line and paste it below, but just make sure to increase the nth-child item from (4) to (5).
Hope that helps!
Thanks for adding the additional data. Unfortunately you cannot do this. Changes in SquareSpace are global changes. You can make a cosmetic change to all galleries but you cannot target a specific gallery by ID. Squarespace object IDs are dynamic and session based. If you target a specific object ID in your CSS, once you refresh the page the ID will change and the CSS will no longer be valid.
However if there is a scenario where you have individual galleries on separate pages then you can work around the global change by inserting the CSS at the "page" level under settings and not a the site level that calls the object category (not the object ID).
Also changing the content of a label is not a css change. That is an HTML change. In Squarespace you cannot modify/hack the actual HTML in the templated versions.
Brain freeze here.
What I want to do is have the Suckerfish drop down menu link to be active on the current page in the drop down as well as the top item.
I.e. below, in the Articles menu item, I'd like to have the top item "Articles" active at the same time that either Categoryone or Categorytwo is active. (Archives is a single level menu item, included here just FYI.)
I have php set up to generate a body tag with the title of the page, so the body tag for the page Categoryone is <body id="Categoryone">
HTML:
<ul class="sf-menu">
<li id="Archives-menu" class="current">Archives</li>
<li id="Articles">Articles<ul>
<li id="Categoryone-menu" class="current">Categoryone</li>
<li id="Categorytwo-menu" class="current">Categorytwo</li></ul></li>
</ul>
CSS:
#Archives #Archives-menu a, #Categoryone-menu #Categoryone-menu a, #Categorytwo-menu #Categorytwo-menu a
{
color:#fff;
}
If I throw this in #Articles #Articles-menu a to try and make Articles active, then all the links in the drop down are active.
You have not given much info about that you are truing to do. But here is my guess: Your selector is off. Try this:
#Archives a , #Archives-menu a , .current
{
color:#fff;
}
Also remove the current class from those items and add it to the appropriate item dynamically when the user is on the right page. (Maybe Sukerfish does that for you?)
I got a problem like this (this is html/css menu):
Eshop | Another eshop | Another eshop
Client wants it work like this:
User comes to website, clicks on Eshop. Eshop changes to red color with red box outline. User decides to visit Another eshop, so Eshop will go back to normaln color without red box outline, and another eshop will do the red outline trick again..
I know there is A:visited but I don't want all visited menu links to be red with red box outline.
Thx for any help :)
The same that Joe Skora has written but more specific:
.red {
outline-color:red;
outline-width:10px;
}
Now you could use Javascript (in this example using jQuery) in the click-event-handler:
$('.red').removeClass('red'); // removes class red from all items with class red
$(this).addClass('red'); // adds class red to the clicked item
Another way of doing it is the use of the pseudo selector :target.
For informations about it: www.thinkvitamin.com
You can do this with plain CSS and HTML. A method we commonly use is to have a matching ID and class selector for each navigation item.
The benefit to this is that you don't have to modify your menu code per page, you modify the page itself, which you'll already be doing unless everything is fully dynamic.
It works like this:
<!-- ... head, etc ... -->
<body>
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
Then you set up some CSS like this:
#NAV-HOME .nav-home,
#NAV-ART .nav-art,
#NAV-CONTACT .nav-contact { color:red; }
To change the "current" menu item, you can just assign the corresponding ID to an element higher in the document's structure. Typically I add it to the <body> tag.
To highlight the "Art" page, all you have to do is this:
<!-- The "Art" item will stand out. -->
<body id="NAV-ART">
<ul class="nav">
<li>Home</li>
<li>Art</li>
<li>Contact</li>
</ul>
<!-- ... more page ... -->
</body>
You can do this with CSS classes. For example, a selected class could identify the current shop, changing the color and outline. Then you can change the selection by adding/removing the class from the menu item.
Take a look here, it walks through a tutorial on building CSS menus.
Basically, it can't be done with CSS alone, some scripting would have to take place (server or client side, preferably server). As the others have suggested, add a 'selected' class (or something similar) to the active link, and define the styles for it in CSS.
For example, the links:
Eshop | Another eshop | Another eshop
The styles:
.selected {
font-weight:bold;
color:#efefef;
}
The links would be generated dynamically, using PHP for example:
<?php
foreach(array('eshop' => '#','another eshop' => '#','yet another eshop' => '#') as $title => $url) {
echo '<a href="' . $url . '"'
. ($url == $_SERVER['REQUEST_URI'] ? ' class="selected"' : null)
. '>' . $title . '</a>';
}
If you are moving to a new page in the same browser window, Zack Mulgrew and Bobby Jack both have excellent answers.
If you are opening the eshop link in a new window, there is not much you can do with css alone, and gs has a reasonable answer except for the choice of class name of (red).
Which is it?
As far as I know you can do this only by generating different code for every page (setting a different class for the current page) or by using JavaScript to change the menu after the page is loaded.
you could use and attribute selector like this...
a[href^="http:\\www.EShop"]:visted { color: red; }
By doing that you are saying any link that has a href that starts with http:\Eshop.com and has been visted apply this style.
It depends on how your pages are constructed, but the classic CSS was of doing this is with an id on the body, as well as each navigational link, so you might have something like:
eshop.html
<body id="eshop">
<ul>
<li>Eshop</li>
<li>Another eshop</li>
<li>Another eshop</li>
</ul>
</body>
and corresponding CSS:
#eshop #link-eshop, #aeshop, #link-aeshop, #eshop-three #link-eshop-three
{
color: red;
outline: 1px solid red;
}
the navigation is consistent; only the id on the body changes from page to page.