<a class="button" target=_remotePage" href=" here give a link but it's getting error on ui page">
Daily unit values
</a>
You have malformed HTML code, try this:
<a class="button" target="_blank" href="#">my link</a>
Valid options for target are:
_blank
_self
_parent
_top
framename
Reference: https://www.w3schools.com/tags/att_a_target.asp
Related
I have an icon on a navigation bar which serves as a link to a admin route, I'd like this icon to change when I'm on that specific route, for this I can just replace the mdi-settings-outline class with mdi-settings, which will show a filled version of the same icon.
<li class="nav-item">
<a routerLink="/admin" routerLinkActive="mdi-settings" class="nav-link mdi mdi-settings-outline"></a>
</li>
However the regular routerLinkActive directive will only add the mdi-settings class to the link, which won't have the desired result. Can the routerLinkActive directive somehow replace the class instead of just adding it?
The routerLinkActive exports some properties that you can use in the template. You access the API by assigning the directive to a template variable. This is done by adding #link="routerLinkActive" where "link" is the name of the variable.
You can then use the properties of the directive, which are defined here in the API documentation.
https://angular.io/api/router/RouterLinkActive#properties
<li class="nav-item">
<a routerLink="/admin"
routerLinkActive="mdi-settings"
#link="routerLinkActive"
class="nav-link mdi"
[class.mdi-settings-outline]="!link.isActive"
></a>
</li>
Need to make the variable unique for each link
<a mat-list-item
[routerLinkActive]="['']"
[routerLinkActiveOptions]="{ exact: true }"
#reportsLink="routerLinkActive"
[ngClass]="reportsLink.isActive ? 'route-active': 'route-inactive'"
[routerLink]="['/reports']"
title="Reports">
</a>
<a mat-list-item
[routerLinkActive]="['']"
[routerLinkActiveOptions]="{ exact: true }"
#notificationsLink="routerLinkActive"
[ngClass]="notificationsLink.isActive ? 'route-active': 'route-inactive'"
[routerLink]="['/notifications']"
title="Notifications">
</a>
I am trying bind a razor variable to html attribute with vuejs.
The variable which i must use is "#culture". It is a string variable which gives me current culture information.
My code is:
<div class="dropdown-product-item" v-for="(item, index) in card.items">
<span class="dropdown-product-remove"><i class="icon-cross" v-bind:data-id="item.Id" v-on:click="removeFromCard"></i></span>
<a class="dropdown-product-thumb" v-bind:href="/#{Html.Raw(culture);}/item.Link">
<img v-bind:src="item.ResimUrl" v-bind:alt="item.Ad">
</a>
<div class="dropdown-product-info">
<a class="dropdown-product-title" v-bind:href="/#{Html.Raw(culture);}/item.Link">{{item.Ad}}</a>
<span class="dropdown-product-details" v-if="!item.IndirimliFiyat">{{pieces[index]}} x {{item.Fiyat.PriceString}}</span>
<span class="dropdown-product-details" v-else>{{pieces[index]}} x {{item.IndirimliFiyat.PriceString}}</span>
</div>
This code doesn't work. I only see white screen.
How to I do this? Could you help me?
i have a side bar, where in it remains active if im on the screens first tab, if i switch to second tab, the url changes and the sidebar label wont be active.
How can this be solved. Please help.
HTML:
Side bar Code:
<a routerLink="/my-health/my-health-history" [ngClass] = "{'active' : true}" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
TAbs code redirected to pages on click of side bar link:
<div class="myhealth mt7">
<ul class="nav nav-tabs menu">
<li>
<a class="active-link" routerLink="/my-health/my-health-history" routerLinkActive="active-link"
[routerLinkActiveOptions]="{exact: true}">myHealthHistory
</a>
</li>
<li>
<a routerLink="/my-health/my-lifestyle" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myLifeStyle
</a>
</li>
<li>
<a routerLink="/my-health/my-family-health-history" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">myFamilyHistory
</a>
</li>
</ul>
</div>
If i am in myHealth History tab, then side bar will be active, if i shift to other 2 tabs then side bar wont be active
Using [ngClass] = "{'active' : true}" in tag.
The condition are:
Differ your current URL based on tab change.
ex1: http://test.com/tab1 and http://test.com/tab2
ex2:http://test.com/#tab1 and http://test.com/#tab2
Read url and find string like "tab1 or tab2"
add "Active" class based on this condition
You can check for the current active link in the sidebar component.
Sidebar html
<a routerLinkActive="active-link" [ngClass]="{'active-link': isActive()}" class="list-group-item list-group-item-action justify-content-between"
id="nav-link-1" aria-haspopup="true" aria-expanded="false" aria-controls="nav-submenu-1">
<span><i class="icon-heart g-pos-rel g-top-1 g-mr-8"></i>{{ 'DashboardModule.MYHEALTH' | translate }}
</span>
</a>
Sidebar ts
constructor(private router:Router) {
}
isActive(){
return ["/my-health/my-health-history","/my-health/my-lifestyle","/my-health/my-family-health-history"].includes(this.router.url);
}
Note : the code is written directly to Stackoverflow editor so there could be typo or syntatical error. Please correct yourself.
I am trying to show on pagination buttons title="text", I got to show on the button when I hover the link to page from some pages
But, how can I implement title text to the current Page?
Here is my code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{data.root.currentPage hash.pageNr}} current page}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}"
>
{{hash.pageName}}
</a>
some correction to the Code:
<li class="files-overview__pagination-item{{#is data.root.currentPage hash.pageNr}} is-active{{/is}}">
<a class="files-overview__pagination-link"
data-js-item="files-overview__pagination-item"
data-pagination-page="{{hash.pageNr}}"
title="
{{#if data.root.currentPage hash.pageName}} current page{{else}}
jump to page {{hash.pageName}} of {{data.root.totalPages}}
{{/if}}
"
>
{{hash.pageName}}
</a>
When binding href tag from code behind it's not working. This is my aspx code. When I am directly putting <a> tag on aspx it's working whereas as soon as I doing it through Response.write it's reading ~ as such not as a root directory.
<% Response.Write("<a id=\"A1\" runat=\"server\" class=\"menuItem\" href=\"~/HR/Emp/EmpDetails.aspx?mid=167\">My PIPs</a> "); %>
<a id="A1" runat="server" class="menuItem" href="~/HR/Emp/EmpDetails.aspx?mid=167">My PIPs</a>
binding through literal also it's not working
Literal.text = "<a id=\"A1\" runat=\"server\" class=\"menuItem\" href=\"~/HR/Emp/EmpDetails.aspx?mid=167\">My PIPs</a> ";
Please help on this.
these are the HTML tags
<ul id="jMenu">
<li>
<a runat="server" class="fNiv" href="~\Default.aspx?mid=1&">Home</a>
</li>
<li>
<a runat="server" class="fNiv" href="">Human Resources</a>
<ul>
<li class="arrow" />
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\PIPWorkFlow.aspx?mid=166">Performance Improvement Plan (PIP)</a>
<ul>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\PIPWorkFlow.aspx?mid=171">Data Protection Statement</a>
</li>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\EmpPIPDetails.aspx?mid=167">My PIPs</a>
</li>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\PIPHome.aspx?mid=168">Team PIPs</a>
</li>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\HRPIPHistory.aspx?mid=169">Employee PIPs</a>
</li>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\AppraisalRatingUpload.aspx?mid=170">Upload Appraisal Ratings</a>
</li>
<li>
<a runat="server" class="menuItem" href="~\HR\EMP\PIPRoleAssignment.aspx?mid=472">PIP Spoc Role Assignment</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a runat="server" class="fNiv" href="~\ContactUs.aspx?mid=39">Contact Us</a>
</li>
</ul>
these are the html tags... if we are binding these tags with Literal or div or TD ... they are reading ~ sign as such...
if I am putting these tags directly in HTML its working perfectly fine
Response.Write and Literal.Text output whatever you give them with no processing.
This means whatever you give these methods/property will be output verbatim. No URL resolution will occur and the runat=server attribute is meaningless.
You can use the Control.ResolveClientUrl() method to generate the link yourself, or manipulate the link as a server control in the codebehind.
Option 1
// this line is fine
string url = ResolveClientUrl("~/some-url/foo.aspx");
// this line is quite ugly, but should work
var lit = new Literal { Text = "<a href='" + url + "'>a link</a>" };
// add it the page/control's control hierarchy
this.Controls.Add( lit );
Option 2
// instantiate the control dynamically
// URL resolution is done automatically
var lnk = new HtmlAnchor { HRef = "~/some-url/foo.aspx" };
// add it the page/control's control hierarchy
this.Controls.Add( lnk );
Option 3
Let's say that you must deal with a string, not the control hierarchy (as per the comments). This is not ideal, but it is possible if the URLs in the string are relative to the application root.
// resolve the application root
string root = ResolveClientUrl("~/");
// string of raw HTML
string html = "My PIPs";
// replace the urls with a resolved version
// this is very simplistic...a proper parser would be more reliable
html = html.Replace( "~/", root + "/" );
// output as desired
Response.Write( html );