First here is my Plunker code: http://plnkr.co/edit/NAH3ePyZdQePbB9EdOzW?p=preview
I'm trying to change the icon from icon-refresh to icon-spinner when the button is clicked but for some reason it's not working. I am pretty new to HTML so I believe there might be a syntax error somewhere but I'm stumped.
Your document.getElementById("something").innerText = "Loading..."; command is replacing all the contents of the tag, including the i tag. You can wrap your text in a span and then target the innerText of the span:
<a href='#' onclick="load()" id="something" class="buttonLink">
<i id="changeThis" class="icon-refresh"></i> <span id="button-text">Button</span>
</a>
javascript:
document.getElementById("button-text").innerText = "Loading...";
Related
I am new to stackoverflow and I want some quick help here. Actually I am in learning phase now and I want to know how to visit a new page on button click. Like <a href='mypage'></a> That means, if I am on page 1 I want to go to page 2.
FOR EXAMPLE:
if we use anchor tag and add href value it will redirect us to new page
<a href='mypage'>Click ME</a>
But i need to know if we use button how can i redirect to specific page like anchor tag!
How can I achieve this?
Sorry if this requirement is too low for you, but its kind of first step to me.
Any help would be appreciable.
Thanks!
Way 1 :
<button onclick="location.href = 'www.example.com';">www.example.com</button>
Way 2 :
<button id="button">www.example.com</button>
<script type="text/javascript">
document.getElementById("button").onclick = function () {
location.href = "www.example.com";
};
</script>
Try in this way.
<input type='button' value='redirect' class="btn" onclick="document.location.href='www.google.com';"/>
You can either:
Wrap button tags with <a href>
<a href='mypage'><button>Click ME</button></a>
Wrap <a href> with button tags
<button><a href='mypage'>Click ME</a></button>
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
The html structure looks like this
<div>
<a href="#"> some info
<div role="button" tabindex ="0"
aria-label = "close"
/>
</a>
</div>
When using screen reader the a tag get read "some info close" and then on focus on button it again read "close". All I want a tag to read is "some info" and button to read "close". What change should I make? I cannot change the HTML structure.
jsfiddle https://jsfiddle.net/5c1oywzg/1/
You can't have a focusable element inside another focusable element.
What change should I make? I cannot change the HTML structure.
Being given an HTML code, it's difficult to make a change without changing the code.
you're using a a[href] link for what seems to be a button
you have to separate the focusable elements
If you could have changed the HTML structure, this would be a better code:
<div>
<button> some info</button>
<button aria-label="close" />
</div>
Unfortunately, we can't change anything if you can't change the HTML structure as your structure is by nature malformed.
We can still use some hacks (using javascript for instance) like adding role=description and tabindex=-1 to the a[href] element and replace "some info" with an html button, but that would be against the second rule of ARIA :
Do not change native semantics, unless you really have to.
1.) The fiddle is different from the code you posted above. For my answer I used the fiddle code (and added a missing " for the href attribute...)
2.) The button is part of the link, so its content is read as part of the link. Do you really want the (same) link to work both when the button is clicked AND when "some info" is clicked. Looks like "some info" is supposed to be a label/comment for the link?
depending on what you want, I would either close the a tag before the button or only wrap the button into the a tag, labeling it wth the full text and hiding the text before that with aria-hidden = "true":
<div>
<a href="#">
some info
</a>
<button aria-label = "close">close</button>
</div>
OR
<div>
<span aria-hidden="true">some info</span>
<a href="#">
<button aria-label = "some info, close">close</button>
</a>
</div>
If you can only add attributes and not change the HTML structure at all you could do this:
<div>
<a href="#" tabindex="-1">
<div tabindex="0">some info</div>
<button>
close
</button>
</a>
</div>
Setting tabindex to -1 removes an element from the tab order while setting it to 0 adds an item. Generally on other values should be used. More info here.
Removing the a tag from the tab order and adding the div in instead will make the keyboard skip over the a tag and focus on both the div and button tags separately.
🎻 Fiddle
I'm making a list app and I'm and trying to add a remove button, so that you can remove lists and list items.
My question is, how do I add this button within a list item? I want the whole list item to be clickable, but when I press the span element i don't want the anchor tag to activate, only the ng-click event.
<div class="list-group">
<a href="#/list" class="list-group-item">
{{listName}}
<span class="glyphicon glyphicon-remove pull-right" ng-click="delete()"></span>
</a>
</div>
I'm using bootstrap, feel free to suggest other ways to add this remove button.
You Can add this JQuery code:
$(a).click(function(){ return false;});
Hi I would like to know how bootstrap can add role="button" to there a href link.
<a href="" role="button">
I can not see the role button anywhere in the css
I am trying to make my own version.
What exactly do you want the link/button to do?
If you are just looking at styling the link to look like a bootstrap button you can just add the button classes to it:
A Link
if you want it to function like a button (ie submit a form or something) then you will need javascript or jQuery would be better in order to do that:
A Link
<script>
$(document).ready(function(){
$("#myButton").click(function(){
$("#myFormID").submit();
});
});
</script>
Then just combine the two and the anchor link will appear and act like a button.