I have a vaadin app which renders raw html into a vaadin layout.
The html includes a anchor and a href that points to the anchor.
The problem is that my page includes a path and a query:
https://onepub.dev/Blog?id=zhhnoflygz
This above link is to a live page so you can see it in action.
The target is written as:
<h1 id="how-to-resolve-the-problem">How to resolve the problem</h1>
The anchor is written as:
How to resolve the problem
When I hover over the anchor the browser shows:
http://onepub.dev/#how-to-resolve-the-problem
Looking at html documentation and examples it's my understanding that the anchor should show as:
https://onepub.dev/Blog?id=zhhnoflygz#how-to-resolve-the-problem
As it stands, when I click on the anchor it takes me to the sites home page rather than scrolling down to the section the anchor links to.
Is this a vaadin SPA problem or have I just mis-understood how anchors work?
The anchor works find in a html editor.
Edit:
After some research I've found that vaadin intercepts clicks to anchors.
You can surpress this by adding the 'router-ignore' attribute to the a tag.
hi
This however didn't solve my problem.
I then did a comparison by setting up a test using the w3schools tryit page.
There is a clear difference.
When I open the dev tools in chrome and hover over the 'a' link on my vaadin site it shows
When I look at a similar tag in w3schools:
The key difference is that w3schools shows the complete url which appears to be taken from 'window.location.href'
The vaadin page however seems to take the url form 'window.location.origin' even though window.location.href has the correct url including the path and query params.
I have been running a localhost website with react.js while I am building a website and when I am trying to link to an external site (e.g. youtube) it ends up going to a link like this:
http://localhost:3000/www.youtube.com
while I am trying to go to:
https://www.youtube.com
I am using this to get my link:
<a href='youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
You need to specify the protocol, or put // at the start of the href attribute. For example:
Try using a protocol like http:// or // to external links like this :
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
See this good answer on SO : https://stackoverflow.com/a/8951636/6028607
Try this:
<a href='https://youtube.com' target='_blank' rel='noreferrer'>YouTube</a>
It's easy to use HTML to open a link in a new tab. You just need an anchor () element with three important attributes:
The href attribute set to the URL of the page you want to link to.
The targetattribute set to _blank, which tells the browser to open the link in a new tab/window, depending on the browser's settings.
The rel attribute set to noreferrer noopener to prevent possible malicious attacks from the pages you link to
try using this
youtube
This is my navbar.html
<ul class="white">
<li>Signup</li>
<li>Create Challange</li>
<li>News Feed</li>
</ul>
This is my app.component.html
<app-navbar></app-navbar>
<router-outlet></router-outlet>
Click on an each menu link its feel as loading an entire page even i run this code in localhost. But, I seen many angular project page is not loading entirely just change that url only.
My question, this problem is arrive from href?
shall I use roouterLink to overcome this issue?
routerLink:
It is a directive in angular2+
Navigates to New Url and the component is rendered in place of routeroutlet without reloading the page
href:
Its an attribute of a tag
html anchor tag attribute to navigate to another page and reload the entire app
In angular you can define different states and then route to/render those states (using ui-sref as compared to href in simple html) without reloading page. Only url gets changes. Read more about ui-router here and here
Check this fiddle for demo code
I'm wondering if someone could advise me... I am not very familiar with AngularJS but I am currently working on a site that uses it. I have several scenarios where I have to link to an anchor link on a different page/different url and if I was to simply put it as this for example:
Click here to view this link
It causes a 404. I have found several solutions for anchor links within the same page but nothing that works with AngularJS to link to an anchor link on a different page/url.
Can anyone help? Thank you.
Angularjs parses href's for redirection. It attempts to go to a view with anchorlink
Try setting this in your routes
// use the HTML5 History API
$locationProvider.html5Mode(true);
And om your html header, set a base location of your site with <base href="/">
This should make angularjs stop interfering with anchor tags in your urls.
EDIT
#Sabarish Senthilnathan's comment works also, probably the best way too.
I have inspected some sites and they have a pound(#) sign in the url. What does it do?
<a href="#" >Link name</a>
It's a "fragment" or "named anchor". You can you use to link to part of a document. Typically when you link to a page, the browser opens it up at the top of the page. But you link to a section half-way down, you can use the fragment to link to that heading (or whatever).
If there is no <a name="whatever"/> tag within the page, then the browser will just link to the top of the page. If the fragment is empty, then it will also just link to the top of the page.
For a fragment only Link name, then that's just a link to the top of the current page.
You often see that kind of link used in conjuction with javascript. Standards compliant HTML requires a href attribute, but if you're planning to handle the request with javascript then "#" serves as a reasonable place holder.
... just to add a few extra useful tips.
You can access and change it with document.location.hash in JavaScript.
It can point to a named anchor (e.g. <a name="top"></a>) or to an element with a corresponding id (e.g. <div id="top"></div>).
Seeing one on its own (e.g. popup) generally means a link is being used to run JavaScript exclusively. This is bad practice.
Any a element should have a href that points to a valid resource. If one does not exist, consider using another element, such as button.
The pound sign (#) indicates to locate an anchor on the page. For example, if you include this somewhere on the page:
<a name="foo"></a>
or, more recently:
<div id="foo">*part of page*</div>
and then you click on a link on the page that has the href #foo, it will navigate to the anchor with the name or div with the id foo.
However, if you just have the href #, it will lead to the top of the page.
# indicates a link to an anchor.
I thougt I'd also mention something else:
Using '#' as the href for a link that activates JavaScript is bad because it scrolls the page to the top - which is probably not what you want. Instead, use javascript:void(0).
This links back to the page itself. It's often used with links which actually run some JavaScript.
I think most of the posters here forgot how to use Internal Links.
A typical <a> element uses an href attribute to link to an external URL/URI (website). But most new developers do not realize you can also link to internal sections of your web page by using a "#" and an identifier instead. The easiest way to do this cross-browser, is using the following HTML:
This page link...
Go to Section 1
...goes to this page location.
<a id="section1" name="section1"></a>
The "#section1" href value is called a "fragment identifier" and will appear in your browser's url when you click the link. Your page will then look for this identifier in your HTML page and automatically scroll down the page to it.
Notice I have used the anchor <a> tag as my receiver to the link. Traditionally this is how most web pages used to use these types of page links. Using anchors you avoid having to rename existing elements. It is also semantically correct and a better way to manage these types of bookmarks. But....it's ok practice to use a <div> or other HTML element with an id and name matching attribute assigned as the bookmark for the fragment identifier.
I like to use both id and name attributes with the fragment identifier, as HTML5 often does not support the name attribute on some elements, while id may not be recognized for the page marker identifier in older browsers.
This shortened, nameless version below is often used by developers as a default URL "stub" for an unknown URL added later to an anchor, to trigger a page refresh, or enable a link but let a Javascipt method capture the click event and route off somewhere else. This makes the "#" a nice fallback should the Javascript piece fail. It then becomes a nice Javascript-free refresh link. The "#" can also be a useful URL "filler for the "href" value when a missing or blank URL on an element might otherwise trigger some problem or style:
Go to the Top
The specific question was "I have inspected some sites and they have a pound(#) sign in the url. What does it do?"
An example is then given:
<a href="#" >Link name</a>
A consistent valid answer is given for jumplinks (whatever you want to call them) however the CSS :target psuedoselector would absolutely makes use of the hash in a URL as well.
It doesn't change the answers. However gives another use case I thought would be valuable, to not belabor, see the below excellent link which explains:
However, https://css-tricks.com/on-target/