I have set up a chart with a lot of links and it really bugs me when it shows where the link goes in the bottom left hand side of the browser whenever you hover on a link, like so:
Is it possible to remove this? any method will do as long as I can hide/remove it (HTML, CSS, JS etc..)
The status bar highlighting happens only when you use an <a> element with a set href.
If you use pure JavaScript to open your link, and don't assign a href attribute, nothing will turn up in the status bar.
I don't know how much control you have over the chart html, but if it renders <a> tags there's not much you can do.
You could try running javascript after the chart is renderred to attach onclick event handlers manually to all <a> tags and set href = '#'.
I had a similar problem that led me to this thread. I figured I'd post my solution here rather than start a new thread about it.
I have a WordPress site with complex menus, and those menus had subheadings which the theme rendered as <a> links with empty href values. The site manager didn't want the bottom corner to display as a link if those were hovered over, since they didn't work has a link anyway.
<a href="#" class=" no_link" style="cursor: default;" onclick="Javascript: return false;">
I tried removing the "#" under href but it still showed the site's root url on hover.
Since the anchor tag's class list already included no_link as a class, I simply added the following jQuery to the global JavaScript file:
$("a.no_link").removeAttr("href");
Note that the intention was to simply remove a link's address on hover if it wasn't supposed to be a functional link anyway.
Refer this link here :
http://www.experts-exchange.com/Web_Development/Miscellaneous/Q_21278295.html
However , if the chart is not under your control, then this may not nbe the way
As suggested in the link :
Pink Floyd
You can also use jQuery to bind the mouseover event on these anchor links without editing individual <a>
Related
I am trying to design a website. I decided to work with this template from templatemo.
I am currently trying to add a reference to a specific part of the website (e.g. Contact) in the "normal text area". I tried to just add a href in the text, like this:
Contact me via the <a href="#contact_form" >Contact Form</a>
This does not work properly. If I click on the reference, the whole layout is somehow messed up. I assume this is because the click on the link does not trigger the javascript function for the "changing the slide" properly.
My question is now:
How can I trigger the javascript functions, for "changing the slide" to a specific part of the page in regular text areas?
This animation is already implemented and works properly (e.g. it is triggered when clicking on the buttons in the navigation bar). However, I have no clue how to use the same animation for jumping to a part of the page outside of the navigation bar.
I hope you understand my problem.
Thank you in advance for your support!
Ideally, you would have to modify the page contents in the respective location in the HTML file. The way this file is constructed is that you have a ul list with li elements that indicate each page, and each li element is given a numerical value that represents its position in the list (e.g. 1, 2, 3, ...). Make sure to edit and add any new pages in this part of the markup. If you want to adjust or trigger any page transitions, edit the data-no value in the <a> tag in #tmNavbar to the position of the page in the list.
If you want to trigger the transition from elsewhere in the website, I would recommend just clicking on the respective nav-item using Javascript. For example,
$('.nav-item').get(i).click() /* i is the data-no value` */
Is it possible to target anchor link via JS entered into href? I need to kill the cursor style on a SPECIFIC link. I cannot do it any other way - so no css, jQuery, etc. It has to go into a CMS via an insert js link on a link.
Example of input: javascript:void(0);targetThisLink.style.cursor='default'
Example of output inserted into the page/DOM: Link
I tried this.style.cursor='default'. It failed. I am not sure this is possible, but if it is let me know.
Try this
Link
Note two things:
Style is only applied after user clicks on the link
You have to have a way to target that specific link via querySelector. Class or ID would be ideal. I used a tag but that would apply same style to all other links on the page. If nothing else possible try using a[href^=javascript:]
Are you able to use mouseover in your CMS?
See example below:
Click Me
I'm mainly interested in the a11y aspects
So as you might be aware, sometimes you might wish to have a button that acts as an anchor.
These are 4 ways (I can think of) of approaching this issue:
1. Button inside an anchor element
<button>Button</button>
2. Anchor inside button element
<button>Button</button>
<!-- Also should it be a href or button onclick (?) -->
3. Anchor styled as a button (without a button element)
<a class="buttonLike" href="//redirection">Button</a>
4. Button acting as a redirection (without an anchor element):
const button = document.getElementById('button')
button.addEventListener('click', () => {
window.location.href = "//redirection"
})
<button id="button">Button</button>
I've tried to find an answer to this myself. Closest I could find was this excerpt:
According to the MDN anchor spec, which states the following:
Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .
These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.
Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.
Unfortunately this doesn't help me too much. Basically all it states is you should not use the third approach (anchor styled as a button) if you don't mean to provide a real link to it, which is not what this question is about.
Is there any official WCAG on this subject matter that I was unable to find or?
Option 1 is not valid HTML.
Option 2 is not valid HTML.
Option 3 is the correct choice here.
Option 4 is semantically incorrect.
Semantics are one of if not the most important aspects of accessibility.
There are two things at play which dictate option 3.
The first is that an anchor should be used only to jump to sections and to navigate between pages.
The second is that a button should perform actions on the same page.
Now if you want to style a call to action link to look like a button that is fine but make sure you use the correct semantics, but make sure that CTA leads to a new page or it isn't semantically correct.
And although it is swearing on StackOverflow to mention SEO, a hyperlink rather than a JavaScript redirection will be far better.
The first and second rules of ARIA say:
1st rule : If you can use a native HTML element [...] then do so
2nd rule : Do not change native semantics, unless you really have to.
Interactive elements like a and button can't contain other interactive elements:
The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).
So, as what you want to do is linking to a page, your third solution is obviously the only one correct.
I think you might have confused the "bogus" stagement which refers to your 4th example.
From my little experience with Accessibility and semantics there is no "one size fits all". It really depends on your priorities and the user experience you are aiming for.
A <button> gets all the accessibility goodies from the browser automatically: Being selected or pressed using the tab or spacebar/enter keys.
A <a> element is a link, links are meant to be used as links or anchors within a page.
Anchors are not as important in comparison to a button within a page. From a user experience point of view; a button is used by people to interact with a UI, either to confirm or make the UI do something. Pressing a button provides a different feedback compared to a link. Anchor links on the other hand help a user with finding content within a page.
Again, it really depends on what you are trying to do:
Is this a terms page or an article? Then list your anchor links without any button-like styling
Does this a link that has to look as a button so users find it easier to spot or interact? Then style it as a button without it being actually a <button>.
I'm using a Javascript, Jquery , Backbone.js page. I have all the code in the same file, so I don't want to change between HTML files. I don't use Backbone.js routes. I want to change the URL dynamically and I used history.pushState() function, and it works correctly. But when I click to some parts of the website, the URL returns to the inital one. I don't know why...
I found the problem!!
My code has a hidden . Clicking an anchor with href="#" will move the scroll position to the top. But in my case it causes an unwanted behavior.
I'm building something similar to this - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher.html
I wondered if anyone had any ideas as to how I can show the current panel in the navigation WITHOUT using JavaScript - pure CSS.
I'm fairly confidant it's not possible but I thought I'd ask anyway.
Just to clarify...
You'll notice that when you click a link on this page - http://www.impressivewebs.com/demo-files/content-switcher/content-switcher-javascript.html the link you just clicked on highlights to inform the user which panel they're looking at. That's what I want to do in CSS.
It's possible, believe it or not, it's just really tricky. This should get you started: http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ The key bit is captured in this quote:
I'm sure you are all aware of linking to an an element on the same page with the use of the ID attribute and how it works. However, you may not have known that linking to an element that is hidden off the page causes the element to be "pulled" into view as opposed to the window jumping down to that element.
So basically, you'd put all of your slides off-page and then have the numbered links use anchors to pull those into view. Your use case should be a bit simpler than the one she's doing, since you don't have to dim out the rest of the page.
What you need to do is to put what you need to slide inside a container with fixed size and "overflow" property set to hidden.
Then, inside this container, you put your "slidable" contents inside a list of anchor elements with "display" set to block and size the same of the container.
If, from a link on the page, you call one of the anchors in the list, the element with the correspondent anchor name will automgically show up..
simple as that.