I have two links on my home-page. They point to two different anchor tags (anchor1, anchor2) on the about-page.
When I click on link two, it jumps to anchor2 on the about page. If I go back and then click on link one, it still jumps to anchor2 on the about page.
I can confirm that the link in the address bar always stays the same as the first clicked link. A simple reload does not solve the problem. What does seem to reset the situation is if I open the home-page in a new window or tab.
This is only happening on Safari and Safari Mobile. Firefox and Chrome redirect to the correct anchor tag.
Thos are the two links:
Anchor1
Anchor2
Any help would be greatly appreciated.
Turns out that for the anchor-links to work in this context, they have to be written as full URL, not relative to the folder structure.
This
href="https://website.com/about#anchor1"
Instead of this
href="../about.html#anchor1"
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.
I have code what make some text-link opening when the mouse point to the link
example
what code to make this mouseover open new tab, if just code like that, it will open in the same tab.
From a usability perspective this seems like a bad idea to open a new tab on mouse over.
Is there a reason you can open the link on click and use target="_blank" to open in a new tab?
For example:
example
To open a hyperlink 'on mouse over' use the HTML attribute:
onmouseover
'onmouseover' captures the moment that a cursor crosses the boundary of an element, moving from outside to inside the element to which the attribute is applied.
You will also need to use the:
window.open
JavaScript method.
Combine the two into a hyperlink and you get the following:
This hyperlink to Web Design CT opens via onmouseover
Reference, Code Sample, and Live Demo: How to open a hyperlink 'on mouse over'
Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.
The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?
If the hover element is triggered by JS (if triggered by CSS :hover, see gmo's answer), you can inspect it if you pause script execution. This is a much simpler way of freezing the DOM than the other answers suggest. You can pause script execution without losing the hover element as follows:
1. Via a keyboard shortcut
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
2. Via a delayed debugger statement
Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a debugger statement while the hover is open:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Trigger the hover and wait for the debugger statement to execute.
If the hover effect is given with CSS then yes, I normally use two options to get this:
One, to see the hover effect when the mouse leave the hover area:
Open the inspector in docked window and increase the width until reach your HTML element, then right click and the popup menu must be over the inspector zone... then when you move the mouse over the inspector view, the hover effect keep activated in the document.
Two, to keep the hover effect even if the mouse is not over the HTML element, open the inspector, go to Styles TAB and click in the upper right icon that says Toggle Element State...(dotted rectangle with an arrow) There you can manually activate the Hover Event (among others) with the checkbox provided.
If it's not clear at all, let me know and I can add a few screenshots.
Edited: screenshot added.
And finally and as I say at the begining, I only be able to do this if the hover is set with CSS:HOVER... when you control the hover state with jQuery.onMouseOver for example, only works (sometimes), the method One.
Hope it helps.
What worked for me is selecting the specific a tag I wanted to inspect and configure it to break on attribute modification:
After doing the above, I would again normally select that a tag then the dropdown will automatically stay as-is even when I mouseover to other places like Inspect Element, etc.
You can just refresh the browser when doing inspecting the menu dropdown elements to go back to normal state.
Hope this helps. :)
You can also do this in the javascript console:
$('#foo').trigger('mouseover');
An that will "freeze" the element in the "hover" state.
Here's how I do it with no CSS changes or JS pausing in Chrome (I am on a Mac and do not have a PC in front of me if you are running on Win):
have your developer console open.
do not enable the hover inspection tool yet, but instead open up your desired sub menu by moving your mouse over it.
hit Command+Shift+C (Mac) or Ctrl+Shift+C (Win/Linux)
now the hover inspection tool will apply to the elements you have opened in your sub-nav.
Open Inspect element
Now go to elements now on right side and select hover
It will show all hover effects
Not sure if it was present in previous browser revisions, but I just found out this extremely simple method.
Open the inspector in chrome or Firefox, right click on the element you are interested in, and select the appropriate option (in this case: hover).
This will trigger the associated CSS.
Screenshots from Firefox 55 and chromium 61.
I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.
So here's what I did:
Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).
Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.
I found a very simple way to do this if for some reason you have problems with script pausing:
Open Dev Tools on "inspect"-tab.Hover to make the pop-up appear.Right-click on the desired element in your pop-up and press 'Q' (in Firefox) to inspect that element.Use keyboard to navigate: Arrow Up/Down: Move between elementsArrow Left/Right: Collapse/ExpandTab/Shift+Tab: Move between inspector and CSS rules and inside CSS RulesEnter: Edit CSS Rule
Excellent stuff!
Thank you to gmo for that advice. I did not know about those attribute settings massively helpful.
As a small revision to the wording I would explain that process as follows:
Right Click on the element you would like to style
Open 'Inspect' tool
On right hand side, navigate to the small Styles tab
Found above CSS stylesheet contents
Select the .hov option - This will give you all the settings
available for the selected HTML element
Click and Change all options to be inactive
Now Select the state that you would like to tweak - On activation of any of these, your Stylesheet will jump you directly to those settings:
Styles - Tweaking Filters - Interactive elements
This information was a lifesaver for me, cannot believe I have just heard about it!
Change the CSS so that the property which hides the menu isn't applied while you work on it is what I do.
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