I am working on a project in Angular 6, where I have used (click)="actionNavigateAway()" to direct page to a new Url. This works perfectly fine on the left click. But on the right click, it shows up a context menu having options like Back, Reload, etc (as shown in the 1st photo).
Instead, what I want to show is the default context menu that we usually find on right clicking a link (figure 2). I have searched the web and found ways to make a custom contextmenu, but nothing for the default. Can you please help me with that? Thanks.
Take a look at this
If the a element has an href attribute, then it represents a hyperlink
(a hypertext anchor) labeled by its contents.
If the a element has no href attribute, then the element represents a
placeholder for where a link might otherwise have been placed, if it
had been relevant, consisting of just the element’s contents.
So it's not considered as a hyperlink.
Just add an empty href attribute. Like this,
<a (click)="actionNavigateAway()">Not Working</a>
<br/>
Working
If you need to use JS to route your link, but want the href context menu -you can use both. You can add a blank href or any href, and then pass the event to prevent default on a function. like so
This link has both
Now the page won't try to route you to "/somepath" when you click that href link. You can either add more code to the function, or use a JS SPA router to handle the routing. You now have javascript handling your links, and a normal context menu. Since the context menu has an actual route -it will actually open if and only if you select to open in new tab. not an actual click
The default context menu is normally working on link, it's normal that nobody tried to reproduce it ^^
In your case, the only possible problem is that you're not aiming correctly the link
But you can also create a custom contextmenu like this : Angular 2: Implement a custom context menu
The context menu should work when right clicking a link with a href attribute.
<a>This is a A tag without attributes</a><br>
This A tag has a href attribute<br>
<a onclick="hi()">This A tag has a onclick attribute</a><br>
So that means that you should use the href attribute instead of a click handler.
Try and run the snippet and right click on the different 'links' to see what I mean.
Related
I know that one type of link you can have is to a place within the page, using <a href="#id_here">.
I recently came across a carrd website, where clicking any of the links appears to take you to a new page, but I believe it's actually linking to an id (after clicking a link, you can see it's /#id rather than /someaddress). But it appears like a separate page, because you can't just scroll back up like usual when you use a link to an id.
I'm wondering how this works; I haven't been able to find anything on Google.
(edit: grammar)
Go to the site, click on the Who can use item in the menu on the 'front page' and have a look at the code through your browser's dev tools (not the source, the elements).
You'll see there are several sections looking like this sort of thing:
<section id="sources-section" class="inactive" style="display: none;">
but the one you clicked looks like this:
<section id="who-section" class="active" style="">
and in that section you'll see the text you can see on the screen.
Basically what they are doing is listening for clicks, and when they get one, use Javascript to set all sections to inactive class and display none style (I don't know why they need both) and set the one clicked to active class and remove the display none.
If you use your dev tools to unset the display none/inactive in another section you'll see that section's text displayed.
They're listening for the navigation to the bookmark in JS. From there, they dynamically set the display value on the other section tags on the page. In other words, this is done with JS and isn't a normal function of the bookmarks feature. If you want to do this, you'd need to make a JS script that hides the rest of the page when you jump to a bookmark.
I have an iframe which simply displays a slideshow of our different products. It's hosted on the same server, it was just easier to use an iFrame.
Each slide contains a link to the current product on the slide, i couldn't use an href on the anchors, so instead i used " onclick='window.top.location.href =...' ". (This also prevents right clicks for the links.)
So my question is can i enable middle mouse clicks (and right clicks) for the links so that we can open them in a new tab, or would i have to go back to using an href.
Note - The reason i used onclick instead of href, was because with href the link would open inside the iframe instead of changing the top page. Is there another way to circumvent this and still keep normal clickability? Thanks in advance guys :)
Why you are not using a tag with target attribute?it will open link in new window.
add target="_blank"
In the application I am working on we use GWT and there is a widget which contains list of items. Each item row is represented by an anchor <a> element. I would like to add functionality when clicking the row/element while holding Ctrl key would do something else as when clicked without any key pressed (sort of like selection).
This works as expected in Chrome. However Mozilla and maybe IE (I don't know I use Linux) always opens a new tab and I cannot get rid of it.
This is the html code:
<a class="list-group-item" href="javascript:;">... content ...</a>
Setting href to empty string does not seem to work.It just opens the ULR of the current page in new tab.
What can I do to prevent this annoying behaviour?
I found a solution inside GWT code.
ClickEvent.preventDefault()
seems to stop the event from being propagated to the browser.
href="javascript:;"
If it's not a link, don't use a link (<a>).
If it's a widget, use a FocusWidget (e.g. InlineLabel or InlineHTML) instead of an Anchor; if you're using event delegation, then just use a <span> instead of the <a> (and add styling to make it look like a link if you like confusing your users).
How to create a button that show an url (at browser status bar) on mouse hover on that is different from the url on clicking the button. Please refer to http://www.polyvore.com/bags/shop?category_id=35 for example.
Thanks.
You can not do this on button tag.
Instead use anchor link and gave some awesome css so link will look like button. If you will see view source or see in firebug you will see they use anchor link and applied some style so it look like button and that is not a big deal in today time.
OR
you need to write javascript that enable you to set status bar across browser.
Edit: solution changed after author clarified his question.
This link will display 'yahoo.com' on hover, but it'll open 'google.com' when clicked.
Link
The key is to return false from 'onclick' callback - it prevents browser from further processing event.
I want there to be anchor links on a webpage where when I click on the link, it brings me to a certain part of the webpage.
However, when the user click the back page button, it is now bringing the user to the previous part of the page, instead of the previous page.
How should I implement the link so that it does bring the user to the previous page instead of the previous part of a page?
link
I wonder if you could do something like what is described in the top answer of this post. Put the following into the 'onclick' of your anchor, and it'll scroll to your div of choice, without changing the URL (and hence preserving back-button functionality).
document.getElementById('youridhere').scrollIntoView();
Don't forget to take out the "href=#somepart".
That is how the anchor tags work. Your best bet is to read here and use it to remove your anchor jumps from browser history.
https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history