Ratchet mobile framework uses a bottom button structure that looks like this:
<nav class="bar-tab">
<ul class="tab-inner">
<li class="tab-item active">
<a href="#">
<img class="tab-icon" src="img/icon-messages.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-hamburger.png">
<div class="tab-label">Label</div>
</a>
</li>
<li class="tab-item">
<a href="#">
<img class="tab-icon" src="img/icon-settings.png">
<div class="tab-label">Label</div>
</a>
</li>
I am trying to use JS to change the active tab to which ever one is clicked. The approach I am trying to take to is the following logic.
If the page that the site is on is the same as the href link then show that link active.
<script language="JavaScript">
var sPath=window.location.pathname;
var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$('.bar-tab li.tab-inner').click(function() {
$(".active").removeClass("active");
$(this).parent().toggleClass('active', $(this).attr('href') == sPage);
});
</script>
I don't want it to just be the last button clicked because there are other ways to navigate back to the major sections of the app and it will look weird to have a button showing active if the content they are looking at is completely unrelated.
Thanks for any help.
Take a look at emberJS
{{#link-to 'index' classNames='tab-item'}}
<span class="icon icon-list"></span>
<span class="tab-label">Oversigt</span>
{{/link-to}}
With this syntax, based on the routing the current tab is set to active
Related
I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>
You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color
You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.
Sorry if this has been answered previously; I've dug around but can't find it. I'm using the Materialize sidenav by calling M.AutoInit() which works for me until I try putting it in a separate Javascript file. I've been able to set up my footer this way so I don't have repeat code, but this doesn't seem to work for the sidenav. The sidenav shows up but the collapsible part will not open.
I think the problem is it doesn't like calling the collapsible part from HTML that is being inserted dynamically. But I tried separating out the collapsible portion (using 2 different querySelectors) which did not work either. If I were to put at least part of the sidenav back into my HTML page, it would defeat the purpose of me doing this.
Any thoughts or solutions? Thanks for looking at it!
document.addEventListener("DOMContentLoaded", () => {
M.AutoInit()
document.querySelector('header').insertAdjacentHTML('afterbegin',
`<ul id="slide-out" class="sidenav sidenav-fixed">
<li>
<a
href="https://www.greece.org/"
target="_blank"
rel="noopener noreferrer"
>HEC Main</a
>
</li>
<li>
<a href="index.html" class="sidenav-close" rel="noopener noreferrer"
>Home</a
>
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li>
<button class="collapsible-header">
History<i class="material-icons">arrow_drop_down</i>
</button>
<div class="collapsible-body">
<ul class="sidenav-close">
<li>
A Brief Review
</li>
<li>Philosophers List</li>
<li>Philosophers Map</li>
<li>The Beginning</li>
<li>Socrates</li>
<li>Plato</li>
<li>Aristotle</li>
<li>
<a href="bibliography-references.html"
>Bibliograpy / References</a
>
</li>
</ul>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
Media
</li>
<li>
Events
</li>
</ul>`)
document.querySelector('main').insertAdjacentHTML('afterend',
`<footer class="page-footer">
<div class="container">
<p class="center-align">
Philosophy is sponsored by
<a
href="https://www.greece.org"
target="_blank"
>
www.greece.org
</a> | © 2021 All Rights Reserved.
</p>
</div>
<div class="fixed-action-btn">
<a href="#top" class="btn-floating btn-large" style="background-color: silver;">
<i class="large material-icons">arrow_upward</i>
</a>
</div>
</footer>`)
})
Initialisation is a one time thing - it scans the document for the matching selector, and runs the initialisation on it. So, always run the initialisation AFTER any dynamic content is added. If you add stuff on the fly, just run the init again.
Codepen.
document.addEventListener('DOMContentLoaded', function() {
// Always add stuff to the page BEFORE running the init
// Anything hardcoded to the page will be fine if wrapped in a document ready.
M.AutoInit();
// Anything added after the init will NOT be initialised. It's a one time thing. Run the init at the end of any dynamic additions.
});
I have a sample login page which directs to a dashboard. The login page is set as the initial redirect page and this routes to the dashboard. The dashboard contains a dropdown menu with some links. Everytime a link is clicked it keeps redirecting to the login page. However, when the dashboard page is reloaded the dropdown menu works completely fine.
I am thinking of using the "event.preventDefault()" for the links but I hope there is a workaround.
Dashboard Menu - HTML
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
Lorem Ipsum
</li>
<li>
Lorem Ipsum
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
Edit: After getting some replies, I would like to clarify my main problem.The problem exists in the link being a null link and that Angular 2 takes it as a null link and causes it to redirect it. If I could find a workaround to tell Angular, don't take this link as a null link it will be ideal.
If you don't want any redirection when clicking on your link(s), check out these solutions:
Different methods to make a null link?
Or you can put <a> tag without href attribute.
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<i class="fa fa-calendar fa-fw"></i> Manage Events<span class="fa arrow"></span>
<ul class="nav nav-second-level collapse">
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']">Lorem Ipsum</a>
</li>
<li>
<a [routerLink]="['ManageEvents/LoremIpsum']>Lorem Ipsum</a>
</li>
</ul>
<!-- /.nav-second-level -->
</li>
</ul>
</div>
export const routes: Routes = [
{ path: 'ManageEvents/LoremIpsum', component: ManageEventsLoremIpsum }
];
This works for me!!
link
hope this helps link also working by this way
For me I used the routerLink and set it to empty:
<a [routerLink]="" (click)="onClickPage()">Click me</a>
try to remove href, setting cursor: pointer with css and handle click on th a element like <a (click)=yourFunction()></a>. it should work ;)
Just simply use <a href>Lorem Ipsum</a>.
I had a situation after parent received events from child component, it redirect to homepage. I solved the problem in parent
receiveMessage($event) { //do something this.router.navigateByUrl('/parent-route'); }
even the parent route are supposed to accept parameters.
For me it javascript:void(0); works. Angular 14
Last Page // HTML file
I have a side bar menu collapsible submenu in my Angular project. I used isActive comment for showing active state. When i refresh any page it should show the particular menu with active state. it works on when i refresh submenu's first link. If i click submenu's second link, it doesn't work.
I dont know how to declare active more than a link. ng-class="{show:isActive('/create-workorder')}"
My code is below
<ul>
<li>Work
<ul class="second_level" ng-class="{show:isActive('/create-workorder')}">
<li>
<a href="#/create-workorder" class="" ng-class="{active_sub:isActive('/create-workorder')}">
<div class="create_wo"></div>Create WO</a>
</li>
<li>
<a href="#/workorder-all" class="" ng-class="{active_sub:isActive('/workorder-all')}">
<div class="overall_queue"></div>Overall all</a>
</li>
</ul>
</li>
<li>Status
<ul class="second_level" ng-class="{show:isActive('/history')}">
<li>
<a href="#/history" class="" ng-class="{active_sub:isActive('/history')}">
<div class="status"></div>History</a>
</li>
<li>
<a href="#/recent" class="" ng-class="{active_sub:isActive('/recent')}">
<div class="recent"></div>Recent</a>
</li>
</ul>
</li>
</ul>
A common technique to use to determine active menu is to use the URL itself.
On page refresh you can check the URL and highlight corresponding menu.
For parent-child menu, you can choose to code the relationship, e.g. specify that you should also highlight "status" when you highlight "history".
Or you can use URL itself for the structure, e.g. #/status/history instead of #/history.
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex