This question already has answers here:
What is the easiest way to disable/enable buttons and links (jQuery + Bootstrap)
(16 answers)
Closed 6 years ago.
I created a button that open a modal window on click.
Connect
For some reason the data-role="disabled" doesn't work good.
How can I disable it?
You can use CSS to accomplish this:
.disabled {
pointer-events: none;
cursor: default;
}
Some link
Or you can use JavaScript to prevent the default action like this:
$('.disabled').click(function(e){
e.preventDefault();
})
I created a button...
This is where you've gone wrong. You haven't created a button, you've created an anchor element. If you had used a button element instead, you wouldn't have this problem:
<button type="button" data-toggle="modal" data-target="#myModal" data-role="disabled">
Connect
</button>
If you are going to continue using an a element instead, at the very least you should give it a role attribute set to "button" and drop the href attribute altogether:
<a role="button" ...>
Once you've done that you can introduce a piece of JavaScript which calls event.preventDefault() - here with event being your click event.
.disabledLink.disabled {pointer-events:none;}
That should do it hope I helped!
<script>
$(document).ready(function(){
$('#connectBtn').click(function(e){
e.preventDefault();
})
});
</script>
This will prevent the default action.
Related
This question already has answers here:
Add link to button HTML
(6 answers)
Closed 3 years ago.
I have a button, when you click the button it will take you to one of my sub-sites.
The button is a child element of a a tag. Is there a better way?
<a target='_blank' href='example.com/sub-site.html'>
<button name='link' style="cursor:pointer" class='example-style' value='example.com/sub-site'
title='Example Title>Example</button></a>
If possible, I'll prefer not to use the form tag.
Thanks!
Use JavaScript to redirect.
An example is shown here:
<button id="button1">Example</button>
<script>
document.getElementById('button1').onclick = function() {
window.location.href = "example.com/sub-site";
}
</script>
if your question is what is better "a href..." or "button...: I will tell you that for me it is the "a href" because the redirection is explicit.
You can add the href directly inside the <button> tag:
<button onclick="window.location.href = 'example.com/sub-site.html';">Example</button>
I hope this helps!
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.
I use bootstrap 3 popover.
And now I would like link on text popvover.
Code:
<a href="#"
role="button"
class="btn popovers"
data-toggle="popover"
title=""
data-content="test content link on content"
data-original-title="test title"
>
test link
</a>
But when I start code in html I see:
link on content
"
data-original-title="test title"
>
test link
I know that problem in symbol " but i don't know have add link in link...
Tell me please how will be aright code?
P.S.: if question already exist please give me link.
You'll need to pass html option with value true while initializing popover like following.
Demo
JS:
$("[data-toggle=popover]")
.popover({html:true})
HTML:
test link
Simply use the attribute data-html="true".
<button
data-toggle="popover"
data-content="Link: <a href='xyz.com'>XYZ</a>"
data-html="true">
CLICK
</button>
I used data-trigger="focus" and had an issue with a link in content of popover. If mouse button is clicked on the link and hold for a while then the popover disappears and the link 'doesn't work'. Some clients complained about that.
HTML
test link
JS
$("[data-toggle=popover]").popover({html:true})
You can reproduce the problem here.
I used the folowing code to fix the issue:
data-trigger="manual" in html and
$("[data-toggle=popover]")
.popover({ html: true})
.on("focus", function () {
$(this).popover("show");
}).on("focusout", function () {
var _this = this;
if (!$(".popover:hover").length) {
$(this).popover("hide");
}
else {
$('.popover').mouseleave(function() {
$(_this).popover("hide");
$(this).off('mouseleave');
});
}
});
If you want to use focus and a link inside the popup you need to prevent the popup to close when clicking inside. The cleanest solution I found was to preventDefault clicks inside a Popup which has the .popover class
$('body')
.on('mousedown', '.popover', function(e) {
e.preventDefault()
});
});
<i class="glyphicon glyphicon-info-sign"></i>
By simply adding data-html="true" is working with link attribute :)
Its worth noting that whilst the answers given are correct - a link will cause problems when the data-trigger="focus" is applied. As I found out from a client if the click occurs quickly on a popover the link will be actioned, should a user hold down their mousebutton then unfortunately the trigger kicks in and the popover occurs. So in short consider whether a link is necessary and plan for slooow clicks.
$("body").on("mousedown",".my-popover-content a",function(e){
document.location = e.target.href;
});
does it for me: basically, take matters into your own hands. Again, this is with popover options html: true, sanitize: false, and trigger : "focus"
This question already has an answer here:
Why are buttons discouraged from navigation?
(1 answer)
Closed last year.
What element should I use for JavaScript actions?
Actions that does something like play/pause/stop/new/open/save/print/close, etc.
<a id="play" href="#">Play</a>
Play
<button id="play" tabindex="0">Play</button>
<div id="play" role="button" tabindex="0">Play</div>
I see many people use anchors <a> with a href="#" but that doesn't feel very semantic, it feels like anchors are for hyperlinks that point to a resource, not for actions that does stuff. Then you have to hack it around with event.preventDefault (i.e. return false).
I rarely see people use the <button> element, but isn't it what is supposed to be used?
TLDR; you can open an anchor link in a new Tab/Window but not a button.
Here is a rule of thumb:
For navigation just use anchor it's alright to style it as a
button and let it use it's href attribute well.
For quick actions (play,pause,stop,+1 like) just use button it
doesn't have href for a reason!
Consider this code.
const [anchor] = document.getElementsByTagName('a')
const [button] = document.getElementsByTagName('button')
anchor.addEventListener('click', e => {
console.log('anchor clicked')
e.preventDefault()
}, false)
button.addEventListener('click', e => {
console.log('button clicked')
})
a {
text-decoration: none;
padding: 2px;
}
button {
background: none;
border: none;
font-size: 16px;
}
.btn {
background-color: blue;
color: white;
display: inline-block;
text-align: center;
}
<a class="btn" href="#">
Anchor
</a>
<hr/>
<button class="btn" type="button">
Button
</button>
Styling
They both look almost alike (with minimal justifications) the only problem is that you'll have to undo some stylings that come with button like border & background but with anchor you don't get the clicking popping animation that you'd get with button.
Functionality
But since the anchors <a> need <a href="some/path"> to work even if it's just #, unless you need to navigate after clicking the anchor you'll have to use e.preventDefault() in your javascript to prevent it.
The best way to decide which element has the best semantics for a JS based user interaction is to ask what you want to happen if the JS fails (which it will.
Think progressive enhancement. Think unobtrusive JavaScript.
Should the user just go to another page? Use a link. The href will be the fallback from when the JS fails.
Should the user go to another page while sending some data or making a POST request? Use a button, put it in a form.
Is it impossible to have any kind of server fallback? Use a <button type="button"> and consider generating it from JS/DOM instead of HTML.
Then you have to hack it around with event.preventDefault
You could set the href to javascript:void(0) rather than #, which would prevent execution without having to use event.preventDefault()
But buttons are probably better for this sort of thing
This is more of a preference thing.
Personally, I prefer to either use the <button> tag or make my own.
If it makes more sense to you to use the <button> tag, use it. If it works, it's not wrong. =)
For my curiosity, given a CSS-only button markup like this one: http://www.cssbutton.me/ryanjohnson_me/4fea99463f2df0f605000043, one can create a button visually using:
<div class="button">Click</div>
But how can we actually make it functional? For example, make it link to some other page, so when user clicks on it, she gets redirected.
I've tried wrapping a <a href> inside the <div>, but the button text shows up as a link, which is undesirable. I also tried the opposite - wrapping the <div> inside a <a href>, which seems to work but I was told this is not valid html code.
Any other suggestion?
P.S. The targeted browsers would be IE8+, chrome 14+, Firefox 11+, Safari 5+ and Opera 11+, if this makes any difference.
Have you tried changing the
<div class="button">Click</div>
into <a class="button" href="#your_link">Click</a>?
It should work as a normal link, and have the css buttons stylings and expected behavior.
Use JavaScript to bind an action to the button.
function addEventHandler(elem,eventType,handler) {
if (elem.addEventListener)
elem.addEventListener (eventType,handler,false);
else if (elem.attachEvent)
elem.attachEvent ('on'+eventType,handler);
}
addEventHandler(document.getElementById('yourButton'), 'click', function(e) {
document.location.href = "newpage.html";
});
Add to the css:
a.button { text-decoration: none; }
To create button links:
<a class="button" href="/somewhere.html">Somewhere</a>
Using JavaScript, specifically jQuery, you can do
<div class="button" id="myButton">Click</div>
$("#myButton").click(function()
{
location.href = "mypage.htm";
});