I have an input button element which I would like to include the words "Take me there >" but I want to make the angle bracket a different color from the rest of the text.
Is this possible? I'm happy to use a javascript or jquery fix if necessary.
How about this: http://jsfiddle.net/w3KHd/1/
Use a button with a span inside which sets the font color to whatever color you want. E.g.:
<button>Take me there <span style="color: red"> > </span></button>
Update:
If you want to use the button as a submit button use:
<button type="submit">Take me there <span style="color: red"> > </span></button>
If you can use <button> instead of <input type="button"> you can use "first-letter" Pseudo Class as below.
Your style class:
<style>
button:first-letter {
color:red;
}</style>
Button:
<button type="submit"><Take me there ></button>
Related
I'm trying to get a submit button to change to a loading spinner with the text "Loading..." using JavaScript like the image below.
I'm able to update the innerHTML for the button, but I'm having trouble changing the span class, which controls the actual spinner.
Here is my html for the button:
<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
<span id="button_span"></span>
Submit
</button>
And here is the JavaScript:
function loading() {
var button = document.getElementById("submit");
button.innerHTML = "Loading...";
var span = document.getElementById("button_span");
span.classList.add("spinner-grow");
span.classList.add("spinner-grow-sm");
}
Any help would be greatly appreciated. Thanks.
Here you have a working pen:
https://codepen.io/cbrown___/pen/dyMKQQb
Using Jquery and Font-awesome.
THere are many ways of doing this, but this is one of them.
HTML
<button class="btn btn-primary mx-3" id="submit" onclick="loading()" type="submit">
<i class="fas fa-spinner fa-spin" style="display:none;"></i>
<span class="btn-text">Submit</span>
</button>
.JS
function loading() {
$(".btn .fa-spinner").show();
$(".btn .btn-text").html("Loading");
}
Recommend also this solution:
Bootstrap 4 Loading Spinner in button
I don't think you should be changing the inner HTML or class of the button. Create a new span that is the loading animation but hidden by default with css prop display: none.
When the button get clicked hide the button by dynamically changing the css and show the span the same way. Then whenever the loading is done just flip it back.
I try to click a button named .red and the problem is that there are two buttons with same name so Cypress does not know which of them to click with command cy.get('.red').click()
Originally I thought I have to access my class before trying to click the button.
How can I use below code to click "red trash icon"?
<div class="one wide column">
<div class="ui vertical right floated buttons">
<a class="ui basic button" role="button" href="/admin/assignments/edit/37">
<i aria-hidden="true" class="cog icon"></i>
</a>
<button class="ui basic button">
<i aria-hidden="true" class="red trash icon"></i>
</button>
</div>
</div>
The Cypress .get() command accepts complex selector arguments. So if you wanted to trigger a click on an element that has red, trash and icon classes, you could do the following:
cy.get('.red.trash.icon').click()
The red trash icon is the <i> element of inside the button, not the button itself.
You should perform click on the button itself:
cy.get('.button').click()
And if there is more than one button with the selector you have set you can give it a specific class or a specific id:
<button id="whatever">...
cy.get('#whatever').click()
Notice the use of # for ids instead of the dot . as a class selector.
The problem is you're using a too broad CSS selector.
You could either set a unique ID html attribute to your button and find it with cy.get('#your-id') or you could make a more specific CSS selector.
For example you could select the last button with .red class like this
cy.get('button.red:last-of-type')
or the first one line this
cy.get('button.red:first-of-type')
or the X element using something like button.red:nth-of-type() { ... }
As recommended in the Cypress documentation, you should add a custom data-cy attribute instead of using generic selectors
I have this code.
<li class="active">
Weekly Payment
</li>
<li>
Advance Payment
</li>
<li>
Expenses
</li>
My question is that can I use <button> instead of <a> to achieve this? I changed it to buttons but they are not working.
Yes. Use <button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>
You can't use href in button but you can use data-href attribute to do this work. When button clicked get value of data-href and use window.location.hash to going to target id.
$("button").click(function(){
window.location.hash = $(this).data("href");
});
#first, #second, #third {
height: 200px;
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
You can try to take a look at this
Or you can create a button with a <a href> inside of it. I dont know wat you are trying to achieve with changing it into a button?
<button type="button">
hello
</button>
if it is for the style you can just apply a style to the a tag like this Go to Google
Goodluck!
Whenever you use #something in an anchor tag's href attribute it actually take you to an element in same page who's id is 'something'. You can use it like this as well:
click
In this case it will take you to the anotherpage.aspx page's element who's id is 'something'.
Now the purpose of button is completely different, but there are some ways to satisfy your requirement but that is not recommended. You should use anchor tag in this situation.
Here is a great link to show the difference between anchor and button tag. Check it.
Thanks.
Button does not have href functionality, so unless you use some JS functions to simulate this - No, you can't
You can use the styles over <a class="your-btn-style"> to show your anchor like a button.
If you are using bootstrap, you can simply add class="btn btn-primary" in your anchor for example :
Advance Payment
I also used this approach in my project :
if ($('.add-to-cart').hasClass("disabled"))
{
if ($('.tooltip').hasClass("show"))
{
$(this).mouseout(function(){
$('.tooltip').removeClass('show');
});
}
else
{
$(this).mouseover(function(){
$('.tooltip').addClass('show');
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="purchase">
<span class="tooltip">This is some information for our tooltip.</span>
<input type="submit" value="Add to basket" class="add-to-cart disabled" id="submit-table" />
</div>
I have found some solutions for my issue but none of them seem to be working for me.
I'm trying to show a span when you hover over a button and I'd like to also hide the span when you are NOT hovering over the button. A simple hide/show feature that I'd like implemented only when the button has a class of disabled, here's the JS that only shows the span but doesn't hide it.
You can use jQuery's .hover() which takes two parameters - one to run when you start hovering, and one to run when you stop. Pass it the function to show your tooltip and then the function to hide it and you should be sorted.
The general gist is $button.hover(showTooltip, hideTooltip). You could write anonymous functions in there if you prefer.
I've done a quick jsfiddle (https://jsfiddle.net/fv6ar05k/1/) demonstrating this with your HTML. I swapped the tooltip and button so that the tooltip didn't push the button out the way.
$('#submit-table').mouseover(function() {
$('.tooltip').toggle('slow');
});
$('#submit-table1').mouseover(function() {
$("#submit-table1").attr('title', 'This is the hover-over text');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="purchase">
<span class="tooltip">This is some information for our tooltip.</span>
<input type="button" value="Add to basket" class="add-to-cart disabled" id="submit-table" />
<input type="button" value="Add to basket 1" class="add-to-cart disabled" id="submit-table1" />
</div>
try like this. Using .toggle() to show or hide the span if the button is hovered
You actually don't need javascript to achieve this. Here is a pure css solution. First, rearrange your markup so that the span is after the button, like so:
<div class="purchase">
<input type="submit" value="Add to basket" class="add-to-cart disabled" id="submit-table"/>
<span class="tooltip">This is some information for our tooltip.</span>
</div>
And then add the following CSS:
.tooltip {
display:none;
}
.add-to-cart.disabled:hover+.tooltip {
display:block
}
Here is a fiddle showing it in action.
The "+" is the key point here - this is the "next sibling" selector. So the css selector is looking for a class of "tooltip" on an element that is immediately after an element that is in the hover state and has both the "add-to-cart" and "disabled" classes.
You can also use the "~" selector instead of the "+" to look for any element that follows the button, but is not necessarily the very next sibling (it still has to be a sibling, however). Both selectors are supported in all modern browsers.
I have a button right this:
<button type="submit" class="btn blue pull-right" id="RequestNewPwd">
Submit <i class="m-icon-swapright m-icon-white"></i>
</button>
With a text and an icon. I'm trying to change the text and the icon like via javascript like this:
$("#RequestNewPwd").button({
label: "Sent",
icons: {
primary: "m-icon-swapleft m-icon-white",
}
})
But it does not work. I also tried:
$("#RequestNewPwd").text('Submit <i class="m-icon-swapright m-icon-white"></i>');
And it prints the html code like text. This works:
$("#RequestNewPwd").text('Submit');
But I need to show also the icon. Could someone help me? Thank you!
As you are appending html,you need to use .html() instead of .text():
$("#RequestNewPwd").html('Submit <i class="m-icon-swapright m-icon-white"></i>');
You have to use .html() to render the string into html elements.
Try,
$("#RequestNewPwd").html('Submit <i class="m-icon-swapright m-icon-white"></i>');