In my Thymeleaf + Spring Boot project, I have a sidebar that has href link to part of sidebar (see code below). The problem it wouldn't 'uncollapse' when click on it. If I change it to href to outside (ie. www.yahoo.com) it works. With thymeleaf, how do I get the href link to part of page to work? Appreciate the help!
<li>
<a data-toggle="collapse" href="#myLinks">
<i class="material-icons">image</i>
<p> Pages
<b class="caret"></b>
</p>
</a>
<div class="collapse" id="myLinks">
<ul class="nav">
<li>
<a th:href="#{http://www.yahoo.com}">
<span class="sidebar-mini"> Y </span>
<span class="sidebar-normal"> Yahoo </span>
</a>
</li>
</ul>
</div>
</li>
Related
I am using a sidebar using HTMLTemplateProcessor
<nav id="sidebar">
<h1>Side</h1>
<ul class="list-unstyled components mb-5">
<li class="active">
<span class="fa fa-home"></span> Home
</li>
<li>
<span class="fa fa-user"></span>
{%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}
</li>
<li>
<span class="fa fa-sticky-note"></span> Reports
</li>
<li>
<span class="fa fa-cogs"></span> Tools
</li>
<li>
<span class="fa fa-paper-plane"></span> Contacts
</li>
</ul>
</nav>
The {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%} is the TIWLink reference part, but how do I put the span class (for the logo of link) correctly like the sidebar template.
Now it look something like this because can't put the span class into the rendered <a> tag for {%IWFrameRegion_FRAME_Menu.lnkBF_FRAME_Menu%}.
I have downloaded a template for my app. I have to replace the menu links of this template with my project url links.
Code block of the menu link in template page::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Item 2
</span>
</a>
I have to use this with::
#Html.ActionLink("Program", "Index", "karyakramModels")
I tried with the code ::
<a href="#" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
#Html.ActionLink("Program", "Index", "karyakramModels")
</span>
</a>
I am not getting the CSS design with this code. Thank You!!!
As you have icon () inside the anchor tag, I would suggest #Url.Action() to use
<a href="#Url.Action('actionName', 'controllerName')" class="list-group-item d-inline-block collapsed" data-parent="#sidebar">
<i class="fa fa-film"></i> <span class="d-none d-md-inline">
Program
</span>
</a>
A user can click tabs, filtering the jobs on my page by category.
When a user clicks the tab, the page hits a search (I use the pg_search gem).
Problem: when clicking the tab, the page reloads and scrolls to the top. This is very bad for my UX. How do I prevent scrolling to top and keep on the height of the tabs-banner instead?
Here is my html.erb file:
<div class="tabs-banner">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=developer">
<h2><br>Developer</h2>
</a>
<a class="tab" href="/vacancies?utf8=✓&query=marketing">
<h2><br>Marketing</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=design">
<h2><br>Design</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=finance">
<h2><br>Finance</h2>
</a>
<a class="tab hidden-xs" href="/vacancies?utf8=✓&query=internships">
<h2><br>Internships</h2>
</a>
</div>
</div>
As max said, you can use anchors as a quick fix. Add id to tabs-banner div and use it in the links
<div class="tabs-banner" id="category-tabs">
<div class="tabs">
<a class="tab active" href="/vacancies?utf8=✓&query=#category-tabs"">
<h2 style="color:white;"><br>All Jobs</h2>
</a>
# all other tabs
</div>
</div>
I am trying to figure out the best way to use authentication to control which ul tag is displayed
Curent html
//wrap all this is authentication razor code?
<!-- START Profile button menu -logged in -->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Profile</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-envelope-open pull-right"></i>
<span class="badge badge-primary pull-right">3</span>Inbox
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Manage" asp-action="Index">
<i class="si si-user pull-right"></i>
<span class="badge badge-success pull-right">1</span>Profile
</a>
</li>
<li>
<a tabindex="-1" href="javascript:void(0)">
<i class="si si-settings pull-right"></i>Settings
</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Lockout">
<i class="si si-lock pull-right"></i>Lock Account
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Logout">
<i class="si si-logout pull-right"></i>Log out
</a>
</li>
</ul>
<!-- END Profile button menu -logged in-->
<!-- START Profile button menu - not logged in-->
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-header">Actions</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Account" asp-action="Login">
<i class="si si-logout pull-right"></i>Login
</a>
</li>
<li>
<a tabindex="-1" asp-area="" asp-controller="Register" asp-action="Register">
<i class="si si-lock pull-right"></i>Register
</a>
</li>
</ul>
<!-- END Profile button menu - not logged in -->
I found a blog post by Dave Paquette on custom tag helpers to accomplish this, but I couldn't get it to work. This html is in my partial view of my header navigation so I can't (or don't know how to check for this in the controller) so I opted to test for logged in user using Razor.
I don't see any blogs or tuorials on simple logged in user check. They all have to do with policy's, claims, etc. I just simply want to know if the user is logged in or not and display the ul dependent on that.
I think you need to use SignInManager to see if there is any user logged in. This will use Claims. If you are using the AplicationUser model you can do the following.
On your razor page use:
inject SignInManager<ApplicationUser> SignInManager
And then:
#if (SignInManager.IsSignedIn(User))
{
//some html...
}
I use a lot of anchor links in my webpage because its only one page that scrolls down by clicking the menu.
Also I made al my pages in sections.
Now I'm busy with making my sitemap.xml for google but i'm not sure if i need to put in all the sections/anchor-links.
my menu is like:
<nav id="nav" role="navigation">
<ul class="clearfix">
<li>
<a class="selected firstnav" href="#home" tabindex="-1">
Home
</a>
</li>
<li>
<a href="#watdoenwij" tabindex="-1">
Wat doen wij
</a>
</li>
<li>
<a href="#portfolio" tabindex="-1">
Portfolio
</a>
</li>
<li>
<a href="#werkwijze" tabindex="-1">
Werkwijze
</a>
</li>
<li>
<a href="#uwwebsite" tabindex="-1">
De Website
</a>
</li>
<li>
<a class="lastnav" href="#contact" tabindex="-1">
Offerte & Contact
</a>
</li>
</ul>
</nav>
as you can see I only use links to #contact/#portfolio etc etc.
Do i have to put all the links in my sitemap?
http://www.domain.com/index.php#contact
http://www.domain.com/index.php#uwwebsite
http://www.domain.com/index.php#portfolio
Doesn't seem right to me?
Maybe google is seeing it as double content...
And if I have to add it to my sitemap what link do i have to use?
http://www.domain.com/index.php#contact
http://www.domain.com/#contact
No, you shouldn't include anchor links. They refer to the same page and the sitemap specifies how often that content changes, but it's all one page.