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.
Related
<a href='http://[e2pdf-view id="3"]'><button>Preview your form</button></a>
Hello, I have created this button through HTML for previewing application form designed in gravity form, Now I want it to open it in a new tab whenever I click on this button. Anyone, please help.
You can just add a target to the link:
<a href='http://[e2pdf-view id="3"]' target='_blank'><button>Preview your form</button></a>
You can use attribute target="_blank":
Preview your form
In addition you should use only <a> tag and style it to look like a button instead of using both <a> and <button> tags.
Use this:
<a type="button" href='http://[e2pdf-view id="3"]' target='_blank'>Preview your form</a>
<a href='http://[e2pdf-view id="3"]' target='_blank'> <button>Preview your form</button> </a>
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
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"
I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.
How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)
Current Button (Bootstrap):
<a class="btn btn-large btn-primary" href="">Democracy</a>
Try:
<button onclick="window.location.href='location'">Button Name</button
This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.
I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").
Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.
For the code to use to actually scroll to the corresponding element, check out this article:
How to go to a specific element on page?
Quick example without jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage"
onchange="scrollto(this);">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
function scrollto(element) {
// get the element on the page related to the button
var scrollToId = element.getAttribute("data-scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
}
</script>
With jQuery:
<a class="scrollbutton" data-scroll="#somethingonpage">something on page</a>
<div id="somethingonpage">scrolls to here when you click on the link above</a>
<script type="text/javascript">
$(".scrollbutton").click(function () {
// get the element on the page related to the button
var scrollToId = $(this).data("scroll");
var scrollToElement = document.getElementById(scrollToId);
// make the page scroll down to where you want
// ...
});
</script>
Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.:
<button class="scrollbutton" data-scroll="#somethingonpage">something on page</button>
hey try this : -
<button>Click Me</button>
then to which ever place you want to go in your site : -
u may just place the line below wherever you want,
<a name="A"></a>
hope it works for you
Bookmark your item on the same page that you want to redirect to by assigning it an id. Assume id="itemId", then use<a class="btn btn-large btn-primary" href="#itemId">Democracy</a>. When you click the button, you will be redirected to the part of the page containing that item.
Read More
<section id="sectionA">
<p>You will be directed to this section. You can use id inside div/section/p tags etc</p>
</section>
which section or div using same id in <a href="?">
Democracy
div or section eg:
<section id="democracy">
your content
</section>
try this method abosolutly work
This is the easy way to do it
<button type="button""> Click </button>
try this following code :
<button>Click Over Here</button>
then to which ever place you want to go in your site u may just place the line below wherever you want :
<a name="Link"></a>