I'm very confused about how linking to an element within a page works. I'm learning the starter template for Twitter Bootstrap, and it contains the following code in the navbar:
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
I understand that within the list elements are anchor tags to #about and #contact, but where is the content defined for this? In the example site, the .starter-template div stays the same whenever I click the navbar buttons. What do I have to do to change the div whenever a navbar button is clicked? I tried doing this, but it just made a giant link as you would expect:
<a name="about">
<div class="container">
<div class="starter-template">
<h1>About.</h1>
<p class="lead">#about</p>
</div>
</div>
</a>
Thank you for any help!
~Carpetfizz
The links are placeholders. If you want to keep them the same, such as #about, you'd want to define an element in your page with that ID. For example, make a longer page, and include the following tag:
<h1 id="about">Here's the About Content</h1>
Clicking the link will jump to that spot in the page.
Wikipedia uses this approach to jump to sections in an article. For example, inspect the <span> tag containing the "See Also" text here:
http://en.wikipedia.org/wiki/Twitter_Bootstrap#See_also
However, since they are placeholders in the Bootstrap template, the idea is that you'll put in your own links as you see fit. For example, if you wanted to add a link to Yahoo, you'd enter your own HREF, like so:
Yahoo
Or target any other link in your site.
They're just placeholders. And if you want those targets to exist, you have to create the pages at the URLs they point to.
Such hash links can behave a little differently if you're developing a Single-page Application (SPA), but I think I've covered the simpler answer to what's confusing you. I.e., hash links attempt to jump to an ID within the page, but an element with that ID needs to exist for anything noticeable to occur.
This behavior is built into HTML; it's not something unique to using Bootstrap.
Related
This question already has answers here:
Anchor or Button in React SPA?
(3 answers)
Closed 9 months ago.
I see a lot of discussion on the internet about <a> tags that look like buttons, and rules that all links must obey. However, I am confused about <button> tags that are styled to look like links.
I am creating a single-page-app and my navigation component is responsible for rendering / hiding different sections of the website. Only one section would be visible at a time, so I'm treating each section as if it was a unique page with its own route.
My navigation controls are buttons, instead of links. I did this because there is nothing valid that I'm aware of, which I can put inside the hrefs (given that the hidden content is not present in the DOM).
I read on the internet that buttons must have styling to identify the priority of the button, for accessibility reasons. Ideally, I want the buttons to look like links since they behave similarly to links (although not identical).
Are there any accessibility concerns with styling buttons to look like links? Would it make more sense to style these buttons as buttons? If they should look like buttons then what should be the priority? Does it make more sense just to hide the hidden "pages" with css, so that I can turn the buttons into <a> tags and add an href?
Here is the typical markup for single page apps
<div>
<nav>
<ul>
<li>
<button data-name="Skills">Skills</button>
</li>
<li>
<button data-name="Projects">Projects</button>
</li>
<li>
<button data-name="History">History</button>
</li>
<li>
<button data-name="Employment">Employment</button>
</li>
<li>
<button data-name="Contact">Contact</button>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
The part at the bottom div#content-panel represents the Home page. It will be replaced with the other pages using JavaScript, which will contain the main content of the website.
For those who stumble across this, please don't use <a> without an href, it results in an element that is not longer focusable with the keyboard.
The following fiddle shows this. Try using Tab to focus the links.
You could obviously add tabindex="0" to add them back to the focus order, but this is an anti-pattern and if you ever find yourself doing this it is an indication that you have made a mistake with your HTML.
<div>
<nav>
<ul>
<li>
<a data-name="Skills">Skills</a>
</li>
<li>
<a data-name="Projects">Projects</a>
</li>
<li>
<a data-name="History">History</a>
</li>
<li>
<a data-name="Employment">Employment</a>
</li>
<li>
<a data-name="Contact">Contact</a>
</li>
</ul>
</nav>
<div id="content-panel">
Home
</div>
</div>
If you are building a SPA in a fashion similar to that described by the OP you should still be using anchors <a> for navigation.
There are a few things you should consider:
When each section is shown you should update the URL on the site via JavaScript.
If your site also has Server Side Rendering (SSR) and can function in a limited fashion without JavaScript (recommended as JavaScript does fail more often than you think due to network errors, JS errors for certain scenarios you missed etc. etc.) then the href of the anchors should point to the correct URL.
On SPA navigation it is recommended that once the new page is loaded you programatically set focus on that pages <h1>. You can do this by adding tabindex="-1" to the <h1> (which allows it to receive focus programatically without being added to the focus order of the page) and then using header1.focus()
For an even better experience for people who use a screen reader it may also be beneficial to add an aria-live section to the page with the value of assertive that announces "loading" once a link is clicked. <div aria-live="assertive"><!--add "loading" here programatically when the link is clicked, remove it once the page has loaded--></div>
I have a reasonably long answer with a bit more detail of this technique here that explains why.
To answer the original question finally!
You can style a button to look like a link. However consistency across a site is key.
So make sure that if that is the styling you use for buttons that the majority of buttons look the same.
Also if you make a button look like a standard link then really you should make your links look different to your buttons styled as links.
This avoids confusion as a button has the expectation it will change something on the current page or submit a form, a link has the expectation of changing the page / URL / navigation.
However the advice is not quite the same for a link styled like a button. It has become acceptable that links can be styled like buttons if they are a Call To Action for example. Yet again though, consistency across a site is key for a great user experience.
As stated on MDN Navigation expects to have a links as children. So if you want to prevent any accesibility issue, I suggest you to stick to them, just remove the href attribute and add a type="button" to your a tags.
Anything that looks like something else fools the user. This applies to a link looking like a button, a link looking like plain text, an h1 looking like an h2, a ul looking like an ol, etc. When the user is fooled, the user can get confused or be misled into errors. With a link that looks like a button, for example, the user may press Space to activate it and be surprised to find that it is not activated, but instead the page is scrolled.
I am having an issue where I believe Angular2 is interfering with how it handles normal anchor tags in HTML. I have several links within the page under "Content2" with attempts in referencing sections of that page.
<div id="navigation">
<a [routerLink]="['#section01']" fragment="section01" style=background:magenta>Section 1</a><br/>
<a [routerLink]="['#section02']" fragment="section02" style=background:cyan>Section 2</a><br/>
<a href="#section03" style=background:yellow>section 3</a><br/>
<a href="#section04" style=background:red>section 4</a><br/>
<a [routerLink]="['/content02']" fragment="section05" style=background:green>Section 5</a><br/>
</div>
My goal is to allow the navigation bar to serve as a navigation tool that sits outside of the HTML I am trying to call, but is still able to directly link sections within the HTML, in this case to Content2.
Here's the Plunker to my predicament:
https://next.plnkr.co/edit/MFtSgY0e57nAG6D5
I have even tried to reference the HTML with a direct routerLink from the navigation bar but it will not comply. I'm sure I am missing something very fundamental to Angular2 routing. Or perhaps I'm missing how the routes should have been structured in the first place.
I am playing around with an HTML template. I made a un-ordered list that enables the visitor to choose between two languages. Within it, i placed an anchor tag, and within the tag an image corresponding to chosen language, accompanied by some text. Though i have don't this before, for some reason, when i try to test the page on Firefox or Chrome the anchor tag won't work. Any suggestions? Thank you in advance for your time.
Code:
<div class="polyglot-language-switcher" style="margin-top:10px;float:right;">
<ul>
<li style="display:inline;margin-right:2px;"> English (US)</li>
<li style="display:inline;"><img src="images/gr.png" alt="Greek"> Ελληνικά</li>
</ul>
</div>
EDIT:
I do not know, if this has any value, but i initially copied the code from this site http://www.ixtendo.com/polyglot-language-switcher-2/. But i only copied the HTML bit.
Just Download the Zip file from this link
https://github.com/ixtendo/Polyglot-Language-Switcher/archive/master.zip
and extract it and open the index.html file.... that is what you want.
I am trying to create a set of links to specific sections in the page using the <a href="#..."> notation, but it doesn't seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:
<div>
<p>Contents</p>
<ul>
<li>Map</li>
<li>Timing</li>
<li>Timing Details</li>
</ul>
</div>
And they should be linking to:
<div id="map">[content]</div>
<div id="timing">[content]</div>
<div id="timingdetails">[content]</div>
Links to external webpages work fine. Placing the id="..." feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/. This is within a Python Django project.
Any idea why this isn't working?
Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,
Map
<a name="map">[content]</a>
An enclosing div is not necessary, if not used for other purposes.
Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn't associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:
1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:
Go to Map <!-- Link -->
----
<div id="map" name="map"></div> <!-- actual anchor -->
Demo: http://jsbin.com/feqeh/3/edit
2.Only use <a> tags with the name attribute as anchors.
This will allow the on-page links to work in all browsers.
what happened with me is that the href does not work second time and that because I should Remove hash value first,,
take look how I resolved it
go to Content 1
function resetHref() {
location.hash = '';
}
Just resurrecting this post because I had a similar problem and the reason was something else.
In my case it was because we had:
<base href="http://mywebsite.com/">
defined on the .
Obviously, don't just remove it, because you need it if you are using relative paths.
Read more here:
https://www.w3schools.com/tags/tag_base.asp
Content 1
Content 2
Content 3
....
<a name="1"></a>Text here for content 1
<a name="2"></a>Text here for content 2
<a name="3"></a>Text here for content 3
When clicking on "Content 1" it will take directly to "Text here for Content 1.
Guaranteed!
Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.
Same requirement: links that go to a section of the page.
It worked on my desktop's Chrome and Firefox, but not on my client's and neither on my Android's Chrome.
After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:
a container with an id, and
an anchor with a name property,
The most important part is that the anchor tag with a name, must have content inside of it.
So, you have your links
Go to section
<!-- more links -->
And you have the sections you want your links to go to
<div id="page-section">
<a name="page-section" class="collapse"> placeholder-content (important) </a>
<!-- your section content -->
</div>
Since you MUST have content inside the anchor with the name, you can then hide it in several ways.
My approach was to just set it's height to 0.
In order for the height to be effective, the anchor tag's display property should be set to block or inline-block for example.
.collapse {
height: 0px;
overflow: hidden;
display: block;
}
Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web...), and all the people who answer questions like this and share their knowledge.
This might help
JS:
function goto($hashtag){
document.location = "index.html#" + $hashtag;
}
HTML :
<li><a onclick="goto('aboutus')">ABOUT</a></li>
In my case The input tag was the problem. I implemented my tabs by input (radio buttons) which was preventing the anchor tag's behaviour.
It was like this at first (not working):
<a href="#name">
<li>
<label></label>
<input></input>
</li>
</a>
Then I removed the input tag and it worked:
<a href="#name">
<li>
<label></label>
// <input></input> <!-- removed it -->
</li>
</a>
Make sure you're not using preventDefault in javascript
Here is something that I finally got to work in IE, Chrome and Firefox.
Around any text create an anchor tag like this:
<a class="anchor" id="X" name="X">text</a>
Set "X" to whatever you want.
You must enclose something in the anchor tags such as text or an image. It will NOT work without these.
For the link, use this:
text
As for getting rid of the CSS for links using our anchor tag use something like this:
a.anchor {
color:#000;
text-decoration:none;
}
This seems to work well.
I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:
<div id="navbar-type">
<ul>
<li>BEAR SOUP</li>
<li>FIAT MOTORS</li>
<li>NEWSEUM</li>
<li>TEXAS PARKS</li>
<li>ZACH THEATRE</li>
<li>GUINNESS</li>
</ul>
</div>
How can I fix the code so that the items above the page-jump are visible?
Thanks
you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:
BEAR SOUP
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>
There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.
I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.
Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.
BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?