I want to change the content of a button when clicked - specifically I want it to change to a "block" state where it can't be clicked, while I want to give it a Glyphicon.
What I want added:
<span class="glyphicon glyphicon-saved" aria-hidden="true"></span>
and the text "Downloaded" - I wish for this to erase the previous text and Glyph icon, and I've found this little peace of jQuery that changed the text on click.
<script>
$(document).ready(function(){
$('#download-btn').click(function() {
$("#download-btn").text('Downloaded');
})
});
</script>
but it wouldn't allow me to add any HTML code, it just outputted it as pure text.
And last, I want to add the following style btn-block to the button.
This is the button before being clicked;
<button id="download-btn" type="button" class="center btn btn-primary">
<span class="glyphicon glyphicon-save" aria-hidden="true"></span> Download
</button>
After click, the jQuery above changed the text to "Downloaded", but I can't seem to figure out how I add style, and code, to a tag.
With jQuery:
You can change an elements html with .html()
You can change an elements styles with .css()
For changing classes, you can use .addClass() and .removeClass()
There are many more jQuery functions for DOM manipulation.
I'd suggest taking a look. jQuery API
Use .html() to apply/override HTML that is inside the element you are selecting.
You can disable buttons in a few ways. I used .attr() or you can use .prop().
$('#download-btn').click(function() {
$(this).html('<span class="glyphicon glyphicon-ok"></span> Downloaded').attr('disabled', true);
});
jsFiddle Example
Related
....
....
Some data
<span popover-placement="top" popover="content1, content2" popover-trigger="mouseenter">
<span class="fas fa-info-circle" style="font-size: 12px;"></span>
</span>
....
I want to change the content1 and content2 into two lines using <br>
I tried data-html="true", it doesn't work, I do believe, that's because it only works in the case like this -> data-toggle="popover" data-content="content1 <br> content2"
so is there any way to add in the first method? please make your suggestions and help me
If you are using Bootstrap's popovers, you are missing an element property to make the HTML popover work. Add this property data-html="true" to your span element with the tooltip and if it still doesn't render properly, run this on DOM ready:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
})
In my Angular5 app , I have a datepicker library which is rendering a datepicker with some buttons
in those buttons , i want to inject some icons.
When inspecting the page ; the html structure would be something like this
<button>
<i class="glyphicon glyphicon-chevron-left"></i>
<button>
but as i'm not allowed to modify the html view , i cannot add this icon directly in the html :
<i class="glyphicon glyphicon-chevron-left"></i>
The solution is to do it with css.
Suggestions?
Glyphicon uses the pseudo classes :before & :after to inject the icons.
Use the :after pseudo class on this element and try adding the code of this specific icon. It should be something like this:
.glyphicon.glyphicon-chevron-left:after{
content:"\e079";
}
The content used in the code will vary. You can double check it in this link in "CSS rule". Also remember that you may want to style it properly to guarantee its visibility.
Best of luck!
By JS you can do this:
var elem = document.getElementsByTagName('button');
elem[0].innerHTML += "<i class='glyphicon glyphicon-chevron-left'></i>";
I have ian:accounts-ui-bootstrap-3 installed. I want a sign-in / sign-up button in the center of my home page.
Right now, {{> loginButtons}} gives the "Sign in / Sign up" dropdown, but it's a hyperlink. How do I make the link a button?
Embedding it in html tags doesn't work:
<button type="button" class="btn btn-info"> {{> loginButtons}} </button>
What I did was to remove the ian:accounts-ui-bootstrap-3 and use instead the default accounts-ui.
Then I add the following in my js files (on the client)
Template.loginButtons.rendered = function(){
Accounts._loginButtonsSession.set('dropdownVisible', true);
};
This should show all buttons and inputs without weird dropdowns. I would then style it by replicating bootstrap styles if needed.
Hope this helps.
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>
I have a <button> with a hyperlink tag inside, looks like this:
<button class="btn"></button>
This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).
What's wrong?
To make it work in all browser, Firefox too you have to change it to
<button class="btn"></button>
or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do
GO
Probably better to just do this:
Go!
This issue is happening in FF and IE(< 10).
The browser simply doesn't like the tag button when it's used as a link.
Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).
However, you can use in a form (submit button for instance) and you shouldn't have an issue.
You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:
<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>
In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag
<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>
Nesting an <a> tag inside a <button>, or vice versa, violates HTML rules and will not pass a code validator:
"The element <a> must not appear as a descendant of the <button> element."
If you want your button to behave like a link, or your link to look like a button, you can style your link to look like a button with CSS or Bootstrap, as shown by Billy Moat's answer,
OR
you can use location.href in the button tag:
<button onclick="location.href='http://www.example.com'" type="button"> www.example.com </button>
<button onclick="window.location.href='/css_page.html'">CSS page</button>
This worked for me to retain bookstrap btn-group stylings:
<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>