I have some links which I have styled using some Twitter Bootstrap CSS. The problem is that the links don't follow to the url specified in the href attribute. Please see this fiddle.
This is the normal behavior in JSFiddle: the page forbids opening links on the same frame. For testing purposes, however, you can add 'target="_blank"' to the 'a' tags to open the links in another window.
Related
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.
While I'm trying to switch between different sections of my webpage I am getting the following page as shown in the image. How can I solve this?
you need to provide context for your question for people being able to help you. I imagine you are trying to navigate between different html files, by clicking into an anchor tag, is that correct?
Go to next page
So in that case, you might be adding a wrong relative route, otherwise I think you should add more context to your question.
If you are trying to switch between sections on your webpage. Try adding section and giving them id. Then from any anchor tag you can reach the section by adding the following code.
Section 1
you can use jquery
$(".div").load("index.php .yoursection");
To switch between sections on your webpage,Use the id selector ,
Example:
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Now add the anchor tag to link,
Opening
"Opening" will be displayed as a link on the webpage. On clicking it, you will be switched on the same webpage where the id is "Opening".
In this example it is the paragraph tag.
If you trying to switch into another webpage,
Go to home page
I have two webpages, one is index.html and the other is shop.html.
I am trying to link from shop.html to a section with the Id of #contact in index.html. They both share the same navbar. They are both in the same folder called "Mobile".
This is the code that I am using.
This is the code for the contact link that is on the navbar shared by both pages, but I am trying to accesss it from the shop.html.
<li>CONTACT</li>
I have managed to get it to work once, but that was only by right clicking and opening the tab in a new window.
I'm not sure if this works, but you can try:
Contact
This will force it upon opening it in a new tab. However, it should be working only doing
Contact
Try this:
<li>CONTACT</li>
By default, your browser should have target="_blank" as shown in the Firefox documentation. It may just be an issue with having your list tags wrapped around the anchor tag. If you post the CSS and HTML you are linking to in index.html, I can make sure this works.
Thanks for the help, turns out it was a jquery smooth scrool animation messing with it.
I am trying to use anchor tags in wordpress on my main menu. I am creating the menu through the menu editor in wordpress. I have added my anchors to my page exactly how I want and have tested that the links for example mywebsite.com/about-us/#executive-team work correctly.
And they all work as I want them to when I paste the link in the browser address bar.
The links also work when I click on the menu item.
Here is my problem: the anchor links DO NOT work when I click on them from the actual page that has the anchor point on it. For example, if I click on mywebsite.com/about-us/#executive-team from mywebsite.com it works great. If I click on mywebsite.com/about-us/#executive-team from mywebsite.com/about-us the link does not go anywhere.
Any suggestions. I need the anchor links to work no matter what page they are being clicked from.
Remove the trailing slash from the URL:
mywebsite.com/about-us#executive-team
The trailing slash is looking for another page. It works fine from an external page, but on the page itself, the slash throws off the browser.
I am testing the following link:
Link
But, as expected, it reloads my current page. How can I prevent it from reloading the page, but maintaining the -a- tag assigned to it?
Thanks ;)
If you don't want it to behave like a link, then don't use a link tag. Doing so hurt accessibility of a page, and you don't want that. There are other ways of browsing a website than a browser (think about the screen readers), which relies on the semantics of the page elements. Use a span if you simply want to apply a style.
If you still want to use an anchor, you can use this -
Link
This will prevent your page reloading.
Just add javascript:void(0) in href you will get..
Link
I think javascript:; also works.
Link
Simply don't specify href attribute:
<a>Link</a>
A link without href...
does not reload a page on click
does not change cursor to pointer on hover
does not change text style to underlined
If you put # inside the href like then the link will not refresh or reload when clicked.