I have a bootstrap 4 navbar that works well except for one link. The link to the "trainee-portal.php" does nothing on click. Here is the code.
<li class="nav-item dropdown" style="padding: 10px 15px;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false" id="trainees">Trainees</a>
<div class="dropdown-menu">
<ul>
<li><a id="authorRegistration" href="<?php echo site_path(); ?>author-registration.php" class="pseudologin dropdown-item">Become an author</a></li>
<li><a id="editUserRegistration" href="<?php echo site_path(); ?>user-registration.php" class="pseudologin dropdown-item">Edit my profile</a></li>
<li><a id="learnerProgress" href="#" class="pseudologin dropdown-item">Resume my cases</a></li>
<li><a id="learnerPortal" href="<?php echo site_path(); ?>trainee-portal.php" class="pseudologin dropdown-item">Trainee Portal</a></li>
</ul>
</div>
</li>
The href is correct because it works on all the other links in the unordered list and because I can right-click the item and open "trainee-portal.php" in another tab. I have tried removing the classes and even changed the class dropdown-item to nav-link. It looks different but nothing happens on click. I changed the position in the list. Nothing. I removed the php code in the href to make the link relative. Nothing. I retyped the link with another id. Nothing. BTW pseudologin is simply to open the login form if the user has not signed in. It works but I also tried removing it. Nothing. Am I missing something obvious?
While I am waiting for your input I will use javascript to navigate but that defeats the purpose of href.
Thanks in advance for your help.
Does it open if you put the "Resume my cases" link at the very bottom of your list? If so, I would go into the Inspect > Network section of my browser and see if there's something on my paging blocking it.
Related
I am using the code below to open a new tab upon clicking a bootstrap button in a razor .cshtml page currently. I have a button in the new tab opened which returns to the main menu, but I would like to know how to close this tab, to effectively return to where the user was previously.
<ul class="nav nav-sidebar">
<!-- Menu Item -->
<li class="menuItem">
<a asp-controller="New Tab Section Menu" asp-action="Index" target="_blank" class="menuItemLabel">
<i class="fas fa-book-reader fa-lg" style="padding-right: 5px"></i>
New Section Menu
</a>
</li>
You can't close browser tabs this simple.
I assume that you have a return button. What you can use target="_self" instead of target="_blank" so no tab will open and you can navigate back.
You could use window.close() in Javascript before, but this is mostly unavailable EXCEPT when you open a new tab with target="_blank" or by script.
In your case it might be worth a try.
Use a button with:
Return to base!
Browsers are very picky about this for security and useability reasons.
https://stackoverflow.com/a/66688958/6803592
I'm looking for a way to open a fancybox gallery just by double clicking for a grid of sortable images. The reason for this desirable behaviour is that I want to focus on one of the images with a single click so that it can be re-sorted with keyboard commands (and not just drag and drop).
I tried unsuccessfully to solve this problem with the onclick and ondbclick parameters within the <a> tag. On jsfiddle I give an example: For the first image (the bluish one) a single click focuses on the element, but a double click does not open the gallery. For the second image a single click opens the gallery, but I can't focus on the element without opening the gallery. (Image 3 and 4 are for reference only):
<ul id="sortable" class="sortable ui-sortable">
<li id="obj_01" class="ui-state-default" onclick="this.focus()">
<a tabindex="-1" data-fancybox="gallery" onclick="return false" ondblclick="location=this.href" href="http://fancyapps.com/fancybox/demo/2_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/2_s.jpg" />
</a>
</li>
<li id="obj_02" class="ui-state-default" onclick="this.focus()">
<a tabindex="-1" data-fancybox="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">
<img src="http://fancyapps.com/fancybox/demo/1_s.jpg" />
</a>
</li>
<li id="obj_03" class="ui-state-default" onclick="this.focus()">3</li>
<li id="obj_04" class="ui-state-default" onclick="this.focus()">4</li>
</ul>
I was also not able to get the accepted solution presented at fancybox open gallery with doubleclick to work.
Since I am new to JS/jquery and not very proficient in HTML is there an 'easy' way to make this work?
You have to detect double-click by yourself and then just start fancybox using API
Hi cant seem to get my Anchor links working in Safari...
<li class="nav-item"> <a class="nav-link" href="resources.html#copy" target="_top">Resources</a> </li>
<li class="nav-item"> <a class="nav-link" href="contact.html#copy" target="_top">Contact</a> </li>
I have a bunch of links that go to their respective pages and then should drop down to the "copy" anchor but this doesn't work in safari...
As you can see I've specified a target which i was told should help... I have tried changing my links to "page.html/#copy" but this doesn't work. i have also used ID as name is no longer used in html 5.
my anchor looks like this...
<h1 id="copy" class="-white">.</h1>
class just makes the text white so cant see the '.' on the page.
.-white{
color: #FFF;}
im assuming it's something simple and I've just been staring at this to long to see it...
Thank you
I have a page in that I have a table. There is one column named "Actions".
Action-menu is shown with Edit and Delete, once the user clicks on the action-column in any row. I redirect to another html page once the user clicks on edit.
Everything is working fine. But the menu does not disappear after redirecting to another page. If I go back and again click on a action-column, a new menu with edit and delete appears.
<p-dataTable #dataTable>
<p-column field="" header="{{l('Actions')}}" [sortable]="false" [style]="{'width':'25px'}">
<ng-template let-record="rowData" pTemplate="body">
<div class="btn-group dropdown" normalizePosition>
<button class="dropdown-toggle btn btn-xs btn-primary blue"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a (click)="onEditClick(record, $event)">{{ l('Edit') }}</a>
</li>
<li>
<a (click)="onDeleteClick(record, $event)">{{ l('Delete') }}</a>
</li>
</ul>
</div>
</ng-template>
</p-column>
</p-dataTable>
onEditClick(selectedValue: any): void {
this.router.navigate(['/app/xyz/pqr', selectedClassification.id]);
}
You are mixing angular with plain bootstrap JavaScript. Every time your DropDown gets clicked, the bootstrap-JavaScript creates the menu somewhere at the bottom of your html markup.
angular-router only updates the markup inside of your router-outlet, so the attached menu markup will not be removed on navigate.
Try to use a angular specific bootstrap version like this:
https://ng-bootstrap.github.io/#/components/dropdown/examples
They should already implemented a solution of your problem, and it will avoid more upcomming issues ;-)
I have a list of menus as below, every menu link is an anchor. I am experiencing a very strange behaviour from anchor tag i.e., when I click on any menu it opens the requested page correctly. But on second click system duplicates the directory hierarchy and looks for the requested page where hierarchy does not exist. For example there is a page on path "Pages/Contact/test.aspx", 1st click opens the page. When user clicks 2nd time browser tries to open a page at path "Pages/Contact/Pages/Contact/test.aspx" resulting in exception "The resource cannot be found" error is thrown.
<div id="menu">
<ul class="menu">
<li><span>About Us</span>
<div>
<ul>
<li><a href="Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
</div>
</li>
</ul>
</div>
The problem is because you are using relative paths to your pages.
It works the first time because (I assume) you are in the root directory. So clicking the link takes you to 'Pages/Contact/Phone.aspx'. When in phone.aspx, if you click the link again, it looks for this page: Pages/Contact/Pages/Contact/Phone.aspx.
You need to add a / to the beginning of your URL to make it relative to the root of the site:
<ul>
<li><a href="/Pages/Contact/Phone.aspx" ><span>Phone</span></a></li>
<li><a href="/Pages/Contact/Email.aspx" ><span>Email</span></a></li>
</ul>
Or alternatively, because you're using ASP.Net, you can use the ResolveUrl() function to ensure all your links are relative to the root of the solution:
<ul>
<li><span>Phone</span></li>
<li><span>Email</span></li>
</ul>
I believe href="" is your problem here.
Try href="#" or href="javascript:;"