There is a bootstrap popover already present. It need to display on hover.
Here is the result showing right now :
In red color button see light outline of red color, its done when button clicked. What i need is, when mouse hover on red or green button it should high light like screenshot of red button highlighted.
Here is the code i used:
<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle"
data-toggle="popover" data-placement="right" data-content="{{.Status}}">
<i class="glyphicon glyphicon-ok"></i>
</button>
.btn-circle.btn-lg::hover {
width: 50px;
height: 50px;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 25px;
}
.btn-circle:hover {
width: 30px;
height: 30px;
text-align: center;
padding: 6px 0;
font-size: 12px;
line-height: 1.428571429;
border-radius: 25px;
opacity: 1;
border-width: 3px;
}
In .statusButtonClass, I am getting value of color. Default.json file status is terminating ten red color, if its running then color is green. class="btn {{.Status | statusButtonClass}} btn-circle.
see code below:
.button {
position: relative;
border-radius: 50%;
background-color: red;
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid pink;
opacity:0.8;
}
<button class="button"></button>
For your comment
I use css variabels:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
And declare new pipe to border-color calls:statusButtonBorderColor
CSS:
.button {
position: relative;
border-radius: 50%;
background-color: var(--color);
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid var(--borderColor);
opacity:0.8;
}
Example for CSS variables:
.button {
position: relative;
border-radius: 50%;
background-color: var(--color);
height: 100px;
width: 100px;
border: none;
}
.button:hover {
border: 9px solid var(--borderColor);
opacity:0.8;
}
<button class="button" style="--color:red;--borderColor:pink"></button>
You can apply a box-shadow on hover and this will achieve the look you want.
.btn-circle {
width: 60px;
height: 60px;
border-radius: 50px;
}
.btn-danger{
background-color:red;
border-color: red;
}
.btn-danger:hover {
box-shadow: 0 0 1pt 4pt #f47f90;
}
You can apply .btn-danger via json (or whatever you wish to call it)
More details on box-shadow can be found here
I have also created a pen.
Related
I'm trying to build a page where people can select the colour and capacity of a product. Only one colour/capacity can be active at a given time and when one has been selected a border needs to appear around it.
You can see in my attempt below the problem of the other elements being displaced when the border is applied.
I thought about giving all the elements border: 2px solid rgba(0,0,0,0) to resolve the displacing issue then using javascript to change the border properties on click, but I think this is probably not an elegant solution.
Here is the HTML...
<ul>
<li onclick="changeName('Gold')"><div class="select-colour" id="gold"></div></li>
<li onclick="changeName('Silver')"><div class="select-colour" id="silver"></div></li>
<li onclick="changeName('Space Grey'); "><div class="select-colour" id="space-grey"></div></li>
</ul>
and the CSS...
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
}
.select-colour {
width: 45px;
height: 45px;
border-radius: 8px;
border: 1px solid #c2bebb;
-webkit-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
-moz-box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
box-shadow: inset 0px -99px 46px -86px rgba(0,0,0,0.42);
}
#gold {
background-color: #f5e7dc;
}
#silver {
background-color: #e2e2e2;
}
#space-grey {
background-color: #232323;
}
Does anyone have any ideas about the best way to approach this? Thanks.
Add box-sizing: border-box to the ul li selector like this:
ul li {
width: 47px;
height: 47px;
border-radius: 12px;
border: 2px solid rgba(0,0,0,0);
padding: 3px;
box-sizing: border-box;
}
Box sizing: border-box makes the element total width/height include the border and radius.
Edit:
Two links for documentation:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Here's a CSS only solution using radio buttons and labels. Hope this helps.
* {
box-sizing: border-box;
}
.container {
position: relative;
padding-top: 30px;
}
label {
color: transparent;
position: absolute;
top: 0;
left: 0;
}
input:checked+label {
color: black;
}
input[type="radio"] {
display: none;
}
#gold+label:after {
content: "";
width: 2rem;
height: 2rem;
background: gold;
position: absolute;
border-radius: 5px;
top: 30px;
left: 0;
}
#gold:checked+label:after, #silver:checked+label:after, #bronze:checked+label:after {
border: 2px solid red;
}
#silver+label:after {
content: "";
width: 2rem;
height: 2rem;
background: silver;
position: absolute;
border-radius: 5px;
top: 30px;
left: 40px;
}
#bronze+label:after {
content: "";
width: 2rem;
height: 2rem;
background: sandybrown;
position: absolute;
border-radius: 5px;
top: 30px;
left: 80px;
}
<div class="container colors">
<form name="colors">
<input type="radio" id="gold" name="color" />
<label for="gold">Gold</label>
<input type="radio" id="silver" name="color" />
<label for="silver">Silver</label>
<input type="radio" id="bronze" name="color" />
<label for="bronze">Bronze</label>
</form>
</div>
use
box-sizing: border-box;
Here is the link to MDN where you can find more details
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Simply keep the border-color: transparent if the div is not selected, and change the color of the border on selection. By the way, you may add a transition to it as well.
<style>
input[type="checkbox"]:checked ~ #hello{
box-shadow: 0 0 0 3px hotpink;
}
#hello{
width: 50px;
margin: 20px;
}
</style>
<input id="check" type="checkbox">
<label id="hello" for="check">Hello</label>
This is what you want a hidden check box
I cannot figure out a way to keep the tooltip inside the "main-content" container. Here's the code:
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
white-space: nowrap;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
Is there any way to push it back inside?
Or add an max-width to the tooltip somehow? I tried to add max-width, but it didn't work because of [data-tooltip]'s display:inline;.
(I know that replacing "inline" with "block" would solve the problem with max-width, but I can't do that because I need to keep the text inline...)
Don't know how to make it word responsive, don't know if is even possible with only css - tooltips are for short mesages.
But it's a start
.main-content {
background: #151418;
width: 500px;
min-height: 200px;
}
[data-tooltip] {
display: inline;
position: relative;
cursor: pointer;
}
[data-tooltip]:hover:after {
background: rgba(0, 0, 0, .9);
border-left: 5px solid #000;
border-right: 5px solid #000;
border-radius: 5px;
position: absolute;
bottom: 16px;
left: 0;
content: attr(data-tooltip);
font-family: Consolas, "courier new";
font-size: 12px;
color: #657b99;
padding: 5px 10px;
z-index: 98;
/* width: 250px; */
min-width: 200px;
/* max-width: 400px; */
height: 50px;
overflow: auto;
}
p {
color: white;
margin-left: 50px;
}
<div class="main-content">
<br>
<br>
<p>Hover mouse <span data-tooltip="Here goes a long text that does not stay inside main-content container">HERE</span></p>
</div>
When User clicks on any circle I want to show the below effect. Consider Pink color circle.
]1
OnClick on any circle then I want to draw as shown in the image.
I could draw the circle using below code snippet:
<div className="tableRow">
{this.paletteColors.map((paletteColor) => {
return (<li className="color-li">
<div className="circle"
style={{
"backgroundColor": paletteColor
}}
data-colorval={paletteColor}
onClick={this.paletteColorClick}
> </div>
</li>);
})}
</div>
.color-li {
display: inline-block;
position: relative;
}
.circle {
border-radius: 50%;
height: 40px;
text-align: center;
width: 40px;
margin: 0px 12px;
line-height: 40px;
z-index: 3;
position: relative;
}
A mixture of box-shadow, background-clip , box-sizing:border-box etc and a little Jquery can manage most of that:
(function($) {
$('.circle').click(function() {
$(this).toggleClass('open');
});
})(jQuery);
body {
background: lightgreen;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 0px solid transparent;
background-clip: padding-box;
margin: 3em;
display: inline-block;
transition: border-width .3s ease;
box-shadow: 0 0 0 2px;
}
.circle.red {
color: red;
background-color: red;
}
.blue {
background-color: blue;
color: blue;
}
.circle.open {
border-width: 15px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle red"></div>
<div class="circle blue"></div>
I have a dropdown menu. It consists of 3 buttons ontop of eachother so only the main button is visible. When you hover over the main button saying Raffles it will make the button move upwards. Then 1 of the other 3 buttons moves down and the last one stays still. This creates a compact dropdown menu. It works perfectly except for 1 problem. I have it set to that when you hover each one it will shift them into the positions the need to be. The problem is that when I start to hover over a different button (after they have shifted) they all start to shift again because I stop hovering over 1 button and start hovering over the next button. How can I prevent this from happening?
var dropdown = function() {
$('.inbutton, .dr1button, dr2button').hover(function() {
$('.inbutton').animate({
top: '-183px'
}, 200);
$('.dr2button').animate({
top: '0px'
}, 200);
}, function() {
$('.inbutton').animate({
top: '-122px'
}, 200);
$('.dr2button').animate({
top: '-61px'
}, 200);
});
};
$(document).ready(dropdown);
p.button {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.button:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.dbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
vertical-align: middle;
line-height: 30.5px;
text-align: center;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
transition: height 0.2s ease;
}
p.dbutton:hover {
height: 110%;
border-bottom: 0px;
cursor: pointer;
}
p.inbutton {
padding: 0px 13px 0px 13px;
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
height: 100%;
position: relative;
top: -122px;
z-index: 98;
}
p.inbutton:hover {
border-bottom: 0px;
cursor: pointer;
}
p.dr1button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
z-index: 97;
transition: background-color 0.2s ease;
}
p.dr1button:hover {
background-color: #585858;
cursor: pointer;
}
p.dr2button {
background-color: #333333;
float: left;
font-family: default_font;
font-size: 30;
color: white;
text-align: center;
line-height: 61px;
height: 100%;
width: 144px;
position: relative;
top: -61px;
z-index: 98;
transition: background-color 0.2s ease;
}
p.dr2button:hover {
background-color: #585858;
cursor: pointer;
}
div.navbardivider {
height: 61px;
width: 1px;
background-color: #424242;
border-bottom: 1px solid #1C1C1C;
box-sizing: border-box;
float: left;
}
div.dropdown {
width: 144px;
float: left;
}
div.divider:hover {
cursor: pointer;
<div id="buttons">
<!--Home button-->
<p class="button">- Home</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Raffles Button-->
<div class="dropdown">
<a href="/raffles.php">
<p class="dr1button">Open</p>
</a>
<a href="/clraffles.php">
<p class="dr2button">Closed</p>
</a>
<p class="inbutton">Raffles</p>
</div>
<!--Divider-->
<div class="navbardivider"></div>
<!--Get tokens Button-->
<p class="dbutton">Get<br>Tokens</p>
<!--Divider-->
<div class="navbardivider"></div>
<!--Token lotto Button-->
<p class="dbutton">Token<br>Lotto</p>
</div>
Your problem is here:
$('.inbutton, .dr1button, dr2button').hover
You have a couple of problems. By triggering on the button individually you mouse out of one, before mousing over the other. It triggers the close before the reopen. This causes the bouncing effect. Also you are missing the "." in front of dr2button so it's not triggering the hover effect at all.
I'd use the wrapper instead:
$('.dropdown').hover
This way once you mouse over the dropdown it stays open until you mouse out. check out this fiddle: http://jsfiddle.net/r5Lyga84/
I have written small piece of code where i have a div container and in that div has spans and forms textbox btns. when i click on btn1, container height increase and show an textbox but when i click on textbox div goes focus out. How is possible that when i click on btn1 and its stay focus in even i click on textbox(after click on btn1 and show blackbox) it shouldnt goes focusout and when i click out site of container it should goes focusout ? how can i do please help me ?
var tt = $.noConflict();
tt(document).ready(function($) {
$(".qta").focus(function() {
$(".gutt").css({
'display': 'inline-block'
});
$(".gutte").addClass('grandisciti');
});
$(".gutte").focusout(function() {
$(".gutt").css({
'display': 'none'
});
$(".gutte").removeClass('grandisciti');
});
});
body {
width: 100%;
height: 100%;
background-color: #c1c2c3;
}
.gutte {
box-sizing: border-box;
position: relative;
display: block;
width: 550px;
height: 50px;
background-color: #fff;
color: #000;
margin: 0px;
padding: 0px;
margin-left: 32%;
margin-top: 30px;
padding-top: 2.5px;
padding-left: 1px;
padding-bottom: 2px;
border-radius: 10px;
border-radius: 10px;
text-align: center;
}
.ati {
box-sizing: border-box;
position: static;
display: inline-block;
width: 105px;
height: 45px;
margin: 0px;
padding: 0px;
padding: 0px 10px;
border: none;
background-color: #ccc;
/*border:2px solid #ccc;*/
border-radius: 10px;
outline: none;
cursor: pointer;
transition: 0.8s all;
font-size: 120%;
color: #000;
}
.grandisciti {
width: 600;
height: 300px;
-webkit-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px 6px rgba(0, 0, 0, 0.5);
}
.gutt {
display: none;
width: 530px;
margin:10px;
background-color: #000;
}
.tref {
display: inline-block;
width: 80%;
height: 100px;
resize: none;
outline: none;
padding: 10px;
margin: 15px;
border: 5px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
body
<div tabindex="1" class="gutte">
<div class="irj fjr_p05gure rddre ">
<button class="ati qta ">btn1</button>
<button class="ati ">btn2</button>
<button class="ati ">bt3</button>
</div>
<span class="gutt">
<input type="text" class="tref"/>
</span>
</div>
Have a close look at the event passed to the focusout function, in particular the target attribute. Your gutte div will likely be catching a focusout event generated by the button. You will need to put in some conditions so that you don't collapse gutte when focus is moving around within gutte.