I noticed that on Iphone my button states are acting a little funny.
here's what's set up:
<button class="button follow">follow</button>
<button class="button unfollow" style>unfollow</button>
css:
.button {
background: green;
}
.button:hover, .button:active {
red;
}
when the buttons are clicked they perform an ajax function and alternate. I.E. if follow is showing and i click follow the ajax call is made and follow is hidden and unfollow is shown and vice versa.
My conundrum:
In mobile when I click a button the buttons swap, but the new button is rendered in it's active state (i.e. the background is red).
any idea on how to make sure the button does not get rendered in it's hovered/active state?
Related
This is a simple website that consists of finding some objects, when you click on each one of them a sweetalert pops up. What I want is to disable onclick when clicked once. There is a counter that tells you how many objects you have found but it won't work properly until I disable doble click. This is the link to replit: https://replit.com/#IzanLabrado/buscandoobjetos#index.html
You can unbind an onclick event as outlined in this stackoverflow question in your callback.
function general1() {
alert("I'll only be clicked once");
document.getElementById('image1').onclick=null;
}
#image1 {
background: lightblue;
width: 250px;
height: 50px;
border: 1px solid black;
cursor: pointer;
}
<button id="image1" onclick="general1()">Clicking me works once</button>
Setting onclick to null as part of your callback will prevent the function being called through a click event.
The more maintainable way to code this though would be to have a "state" object of some kind. Like a list of ids that starts empty and you add to each time the item gets clicked. This would allow you to only need to write one function, and you would call it from your html with a different id. Instead of list, you could simplify it further by using set so that duplicate ids can be added without increasing the size of your set.
const foundImages = new Set();
function foundImage(id) {
if (!foundImages.has(id)) {
alert("Congratulations you clicked a new one");
}
foundImages.add(id);
document.getElementById("count").innerHTML=foundImages.size;
}
<div id="1" onclick="foundImage(1)">Item1</div>
<div id="2" onclick="foundImage(2)">Item2</div>
<div id="3" onclick="foundImage(3)">Item3</div>
<p>You have found <span id="count">0</span> images </p>
I've got to create our own buttons using Bootstrap's btn class. I need to override default colors for the button text in particular. I know about .button-variant but I cannot use it (the corresponding LESS file is not included in project build and I can't make such changes). Here is my LESS:
.some-company-control(#text-color, #hover-text-color) {
color: #text-color;
&:hover,
&:active {
color: #hover-text-color;
}
}
The problem is after a button is clicked it gets the default Bootstrap button text color. When I add &:focus it overrides Bootstrap's defaults but after it is clicked and not hovered it still remains as if it is clicked. I would like to disable the styling when a button is still focused but not hovered anymore.
Thanks everyone for any suggestions!
Try to add this rule:
&:focus:not(:hover) {
color: #text-color;
}
is there any way that a bootstrap success button will look like same as a success button but it will be inactive.
The problem is when i make the success button inactive it change the color of a success button, looks fade, so it doesn't fullfill the requirement of a success button.
Anyone knows how make an success button inactive.
Your button :
<button type="submit" class="btn btn-success" disabled>Save changes</button>
Your css :
.btn[disabled]{
opacity: .65; //Comment this
}
You can do this by overriding the Bootstrap CSS:
.btn-success.disabled, .btn-success[disabled] {
opacity: 1;
}
The original value is .65, which makes the button greyed out.
But this way, all success buttons will look the same. Which is confusing for the user, and this is bad from an UX standpoint.
I would like to style my selected button.
I would like to display a light-blue border around the image of my selected button to show which page the user is on. (or just use the same hover image as the selected button image when the button is pushed.)
I didn't have success with the css link selectors :visited, :focus, or :selected.
Does this require a javascript solution?
thanks for any pointers!
i usually just a extra class name called selected
<div class="button selected">Button 1</div>
<div class="button">Button 2</div>
.selected {
border: 1px solid #0000ff;
}
It depends on how you display your page (using ajax or refresh on every click). If you are using javascript to load the page content than you just put an extra classname using javascript when the button is clicked.
you should use :active pseudo class in css to achieve what you want.
jQuery Solution with your CSS
You would probably want to check first if it is selected, that way this solution works with things like Twitter Bootstrap, where you can make any element act like a button:
$(function () {
$('div.button').click(function(){
if ($(this).hasClass('selected') {
$(this).removeClass('selected');
//Insert logic if you want a type of optional click/off click code
}
else
{
$(this).addClass('selected');
//Insert event handling logic
}
})
});
You will, in fact, need to use javascript. I did this in a project a while back, by iterating through the links in the navbar, and setting a class called "selected" on the one the user is currently visiting.
If you use jQuery, you can accomplish it like this:
$(function() {
$('#navbar li').each(function() {
if ($(this).children('a').attr('href') == window.location.pathname)
{
$(this).addClass('active');
}
});
})
The CSS Pseudo-selector :active won't still be active after a pagereload.
I have a web user control where I have ten asp buttons.
I want that when I hover on these buttons the cursor should change to hand cursor, I am able to do that.
Now I want that when I press a button it should change it's back and fore colors so that it looks selected.
I tried to do that by code but it's not working. Following is my css file content:
.buttonclass
{
background-color: Olive;
cursor: pointer;
}
.selectedItemClass
{
background-color: Blue;
color: White;
}
and on the button click I have written like:
Button btn = sender as Button;
btn.CssClass = "selectedItemClass";
but it's not working any idea or another way to achieve the required behavior.
Your code will only work after post-back, and then the button will remain with the selectedItemClass.
You will need to use client-side code to change the class of your button.
One option would be to use a javascript/jquery solution like:
$(".buttonclass").mousedown(function(){
$(this).addClass("selectedItemClass")
});
$(".buttonclass").mouseup(function(){
$(this).removeClass("selectedItemClass")
});
Have you checked if the class is added or replaced? or you can do:
.selectedItemClass
{
background-color: Blue!important;
color: White!important;
}
to check if the order of your css is ignoring the fact there are two different background-color and the priority of them.