Using below code, I am able to highlight the element with value 2 and 3 instead of element 3. I tried using last child and nth-last-type but didn't work as expected. Issue is with highlighting immediate next element of class - active and apply blink to both tick mark of 3 and value 3 and change of active class to change blink
No Jquery solution, as currently trying to implement using CSS3
I am trying to choose first element of class hightlight without active class using CSS only
HTML:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
<tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
CSS3:
.highlight{
color:white;
width:20px;
height:20px;
border-radius:50%;
background: rgb(234,116,0);
display: inline-block;
text-align: center;
}
.active{
background:green;
}
#keyframes blink {
to { background: rgb(234,116,0); }
}
.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 1: Jquery
You can do it using jquery like so
$(".active:last").next().addClass("blink")
And change your css to have blink class
.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Working Js fiddle
Method 2:
If you want to do it only using css , you need to book keep your last element
by adding a class to the last element say .last
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active last">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
and then do you css like
.last + .highlight {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 3:
change your css to
div.active + div:not(.active){
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Basically it finds the element which has class active before it and the next class which does not have the class active.
working jsfiddle
Instead of nth-last-type you may use:
.highlight + .highlight:not(.active):nth-of-type(3) {
The snippet:
.highlight {
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(234, 116, 0);
display: inline-block;
text-align: center;
}
.active {
background: green;
}
#keyframes blink {
to {
background: rgb(234, 116, 0);
}
}
.highlight + .highlight:not(.active):nth-of-type(3) {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>1.</td>
<td><span>one</span></td>
</tr>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>2.</td>
<td><span>two</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>three</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>four</span></td>
</tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
Related
i'm using Font Awesome in my Angular application and i'm trying to rotate a refresh icon when it's clicked.
<div class="col-5 d-flex justify-content-end">
<span class="mr-4 pr-3">
<fa-icon
style="color: white; font-size: large; top: 0;"
[icon]="faArrowAltCircleDown"
(click)="refreshTaskList()">
</fa-icon>
</span>
</div>
I've tried to add rotate="360" aswell as transform="rotate-90" but unfortunately all without any success.
I'm open for suggestions.
You can use CSS only for that, no Angular required:
button:focus i {
animation: rotate 1s ease-in-out 0s;
}
#keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class="btn btn-primary btn-sm" type="button"><i class="fa fa-play"></i></button>
You could use above code and convert it so it fulfills to your desired results.
Source: Angular Button click rotate icon
Related question (Temani Afif's comment): Font Awesome 5 How to arrange different icons?
I want to display some text inside a button but only when this one is hover using HTML or CSS.
When the button isn't hover, the main text it a title (I've already somthing working), and when you hover this with your mouse, the title slides to the top and some additionnal text appers like a description and a little "Visit >>" at the end.
I've putted my code and the thing that I need to have on a codepen page here (and at the end of this message) : https://codepen.io/floksyyt/pen/WNrVjJd
Thanks for your future help !
.btn {
opacity: 0.6;
border-radius: 8px;
background-color: #f4511e;
border: none;
color: #ffffff;
text-align: center;
font-size: 28px;
padding: 20px;
width: 100%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.btn span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.btn span:after {
content: "\00bb";
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.btn:hover span {
padding-right: 25px;
}
.btn:hover span:after {
opacity: 1;
right: 0;
}
.btn:hover {
opacity: 1;
}
<h1>Bienvenue chez Floksy !</h1>
<h2>Vous vous trouvez actuellement sur la plateforme de sélection de sous-site internet de Floksy.</h2>
<table width="100%">
<tr>
<td width="5%"></td>
<td width="25%">
<center>Pour venir voir mon profil professionnel ainsi que mes gros projets
</td>
<td width="2.5%"></td>
<td width="25%">
<center>Si vous souhaitez découvrir ou en apprendre plus sur mes aventures sur Youtube et Twitch
</td>
<td width="2.5%"></td>
<td width="25%">
<center>Si vous veniez à propos de mes services d'informatique et électronique
</td>
<td width="5%"></td>
</tr>
<tr>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Professionnel </span></button>
</td>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Création Web </span></button>
</td>
<td></td>
<td>
<center><button class="btn" onclick="window.location.href='somewhere';"><span>Espace Services </span></button>
</td>
<td></td>
</tr>
</table>
<p>Example for one button :<br /><br />
Title<br />(always visible)
<hr>
Description<br />(only visible by hover button)
<hr>
Visit >><br />(only visible by hover button)
</p>
There are several ways to accomplish your task (assuming I understand project goals).
One way to is use the 'onmouseover' and 'onmouseout' events on the button
A second way is to use JS to alter the class assignments of the hidden messages.
This is also accomplished with the same events a before except assigned to an element event listener via the 'addEventListener' function assigned to the button elements.
Here is an example of both methods.
<!DOCTYPE html><html lang="en"><head><title> Test Page </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=yes"/>
<!-- For: https://stackoverflow.com/questions/63200448/display-some-text-inside-a-button-when-hover -->
<style>
.hide { display: none; }
#btn1Msg { background-color: pink; width: 15em; }
#btn2Msg { background-color: lime; width: 15em; }
</style>
</head><body>
First button uses only HTML for effect<br>
<button id="btn0"
onmouseOver="document.getElementById('demo').classList.remove('hide')"
onmouseOut="document.getElementById('demo').classList.add('hide')"
>First Button Description</button>
<pre id='demo' class="hide">Message to be displayed on First button hover</pre>
<hr />
Second and Third buttons use JS to achieve effect
<p />
<input type="button" id="btn1" value="Second Button Description">
<div id='btn1Msg' class="hide">Message to be displayed on Second button hover</div>
<p />
<input type="button" id="btn2" value="Third Button Description">
<div id='btn2Msg' class="hide">Message to be displayed on Third button hover</div>
<script>
console.clear();
const hoverShow = (IDS) => { document.getElementById(IDS+'Msg').classList.remove('hide') };
const hoverHide = (IDS) => { document.getElementById(IDS+'Msg').classList.add('hide') };
function init() {
let sel = document.querySelectorAll('input[type=button]');
for (let el of sel) {
el.addEventListener('mouseover', function(event) { hoverShow(event.currentTarget.id) }, false );
el.addEventListener('mouseout', function(event) { hoverHide(event.currentTarget.id) }, false );
}
} init();
</script>
</body></html>
I am new to HTML and JS. My code produces the effect I want but it is repetitive. I used different IDs for the links (anchor tags) and wrote the JS code separately for each ID (which is exactly same for both of them). I am going to have ten more links like this in my web page so it would be really stupid to write the same piece of code again and again. I know there must be a way to avoid this repetition but I couldn't find it on internet.
My thought on this problem was like, storing the IDs in an array and then running 'for loop' over those IDs (mouseover and mouseout function would be inside the loop). If this is possible, how to do it? If not, please suggest some other way.
Here is the code (look at the 'script' tag inside the 'body').
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.name
{
color:black;
font-family:calibri light;
float:left;
}
.vertical
{
border-left:1px solid #a5a5a5;
height:20px;
margin-left:20px;
margin-right:25px;
float:left;
}
.statement
{
color:black;
font-family:calibri light;
}
</style>
</head>
<body>
<a href="link1.html" style="text-decoration: none">
<div id="link1">
<span id="name1" class="name">link1</span>
<span id="ver1" class="vertical"></span>
<span id="statement1" class="statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" style="text-decoration: none">
<div id="link2">
<span id="name2" class="name">link2</span>
<span id="ver2" class="vertical"></span>
<span id="statement2" class="statement">Put your mouse over here</span>
</div>
</a>
<script>
function mouseover1()
{
$('span#name1').css('font-family','calibri')
$('span#ver1').css('border-left','2px solid #a5a5a5')
$('span#statement1').css('font-family','calibri')
}
function mouseout1()
{
$('span#name1').css('font-family','calibri light')
$('span#ver1').css('border-left','1px solid #a5a5a5')
$('span#statement1').css('font-family','calibri light')
}
function mouseover2()
{
$('span#name2').css('font-family','calibri')
$('span#ver2').css('border-left','2px solid #a5a5a5')
$('span#statement2').css('font-family','calibri')
}
function mouseout2()
{
$('span#name2').css('font-family','calibri light')
$('span#ver2').css('border-left','1px solid #a5a5a5')
$('span#statement2').css('font-family','calibri light')
}
$('div#link1').mouseover(mouseover1);
$('div#link1').mouseout(mouseout1);
$('div#link2').mouseover(mouseover2);
$('div#link2').mouseout(mouseout2);
</script>
</body>
</html>
You can solve all this only with CSS. I would not use jQuery here, because of performance reasons.
.custom-link {
text-decoration: none;
}
.custom-link .contents {
margin-right: 20px;
color: #000;
font-family: 'Calibri', sans-serif;
font-weight: 300;
}
.custom-link .contents:not(:first-child) {
padding-left: 25px;
border-left: 1px solid #a5a5a5;
}
.custom-link:hover .contents {
font-weight: 500;
}
.custom-link:hover .contents:not(:first-child) {
padding-left: 25px;
border-left-width: 2px;
}
<a href="link1.html" class="custom-link">
<div id="link1">
<span id="name1" class="contents name">link1</span>
<span id="statement1" class="contents statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" class="custom-link">
<div id="link2">
<span id="name2" class="contents name">link2</span>
<span id="statement2" class="contents statement">Put your mouse over here</span>
</div>
</a>
This way you can keep adding element. Only thing you need to do is data-link params unique and should link to other class.
function mouseover() {
var link = $(this).data("link");
console.log(link);
$('span#name'+link).css('font-family', 'calibri')
$('span#ver'+link).css('border-left', '2px solid #a5a5a5')
$('span#statement'+link).css('font-family', 'calibri')
}
function mouseout() {
var link = $(this).data("link");
$('span#name'+link).css('font-family', 'calibri light')
$('span#ver'+link).css('border-left', '1px solid #a5a5a5')
$('span#statement'+link).css('font-family', 'calibri light')
}
$('.linkevent').mouseover(mouseover);
$('.linkevent').mouseout(mouseout);
{
color: black;
font-family: calibri light;
float: left;
}
.vertical {
border-left: 1px solid #a5a5a5;
height: 20px;
margin-left: 20px;
margin-right: 25px;
float: left;
}
.statement {
color: black;
font-family: calibri light;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<style>
.name
</style>
</head>
<body>
<a href="link1.html" style="text-decoration: none">
<div id="link1" data-link="1" class="linkevent">
<span id="name1" class="name">link1</span>
<span id="ver1" class="vertical"></span>
<span id="statement1" class="statement">Put your mouse over here</span>
</div>
</a>
<br>
<a href="link2.html" style="text-decoration: none">
<div id="link2" data-link="2" class="linkevent">
<span id="name2" class="name">link2</span>
<span id="ver2" class="vertical"></span>
<span id="statement2" class="statement">Put your mouse over here</span>
</div>
</a>
<script>
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
a.linkcss{
color: red;
}
</style>
<script>
$(document).ready(function(){
$(".link").hover(function(){
$("#"+this.id).addClass("linkcss");
},function(){
$("#"+this.id).removeClass("linkcss");
})
});
</script>
</head>
<body>
<a href="#" class="link" id="link1" >link1</a>
<a href="#" class="link" id="link2" >link2</a>
<a href="#" class="link" id="link3" >link3</a>
</body>
</html>
You can try with this it works.
I have button which has icon in it. I am trying to display text on the left and icon on the right using CSS float: right; but icon and text is still shown centered.
Here is HTML:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/button/index">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<h4>Basic Button</h4>
<p>
<button id="primaryTextButton" class="k-button" title="Example of tool tip!" >Primary Button
<span class="k-icon k-i-info">
</button>
</span>
</p>
</div>
<script>
$(document).ready(function () {
});
</script>
<style>
.demo-section p {
margin: 0 0 30px;
line-height: 50px;
}
.demo-section p .k-button {
margin: 0 10px 0 0;
}
.k-primary {
min-width: 150px;
}
.k-button {
min-width: 400px;
}
.k-icon{
padding: 10px;
font-size: 32px;
}
</style>
</div>
</body>
</html>
What I am missing here? What do you I need to change to the the icon show on the right?
Try wrapping a div around your button and apply overflow: auto to it.
<div style="overflow: auto;"><button id="reportBtn_33301" type="button" class="k-button k-button-icontext" title=" data-role="button" role="button" aria-disabled="false" tabindex="0">
<span class="k-icon k-i-info"></span>
Example
</button></div>
<span class="k-icon k-i-info"></span>
'span' tag default display property is inline element.
You need to change it to display inline-block to work. Then the float will work
Change it to display block with some small width, so that it fits in button, then try giving float property to it.
Read this : https://developer.mozilla.org/en-US/docs/Web/CSS/display
I'm trying to fix the top and bottom div bars on scroll with the text centred
Top bar is fixed but text align isn't working
Bottom bar isn't appearing at all
I can't see what is wrong with the css, I get no errors in the dev console in chrome
Thanks
<!DOCTYPE html>
<html>
<head>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
div{ margin-left: 20%;
padding-left: 20%
}
#headbar
{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<body>
</style>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
Something like this?
#headbar
{
display:inline-block;
text-align:center;
position:fixed;
width:100%;
}
#footbar
{
display:block;
text-align:center;
position:fixed;
width:100%;
bottom:0;
}
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<div id="footbar" style="background-color: #ffff66";>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
<title>
My test
</title>
<meta charset="UTF-8">
</head>
<style>
body{
margin:0;
padding:0;
}
.spacer{
height:1em;
width:100%;
}
#headbar{display:inline;text-align:center;position:fixed;width:100%;
}
#footbar
{display:block;text-align:center;position:fixed;width:100%;bottom:0;
}
#width: 80%
p:nth-child(3n) {width:80px; background: #e0ffff};
p:nth-child(3n+1) {background: #f5f5db};
p:nth-child(3n+2) {background: #ffe4e1};
</style>
<body>
<div id="headbar" style="background-color: #ffccff";>
<a href="http://www.bbc.co.uk/news" target=_blank>BBC news</a>
<a href="http://www.theguardian.com/uk" target=_blank>The Guardian</a>
</div>
<?php
for ($n=0; $n<101; $n++) {
$modulo = ($n%3);
if($modulo==0){
$bg_color = '#e0ffff';
}elseif($modulo==1){
$bg_color = '#f5f5db';
}elseif($modulo==2){
$bg_color = '#ffe4e1';
}
echo '<p style="margin-left:20px; margin-right:20px; background-color:'.$bg_color.';"> Paragraph...'.$n.'</p>';
}
?>
<div class="spacer"></div>
<div id="footbar" style="background-color: #ffff66";>
<form>
<input type="button" onclick="location.href='http://www.facebook.com';" value="Facebook" />
<input type="button" onclick="location.href='http://www.instagram.com';" value="Instagram" />
</div>
</form>
</body>
</html>
I try to correct some issues. your text align is not working because of <div> padding and margin. hope this helps.
here is a screenshot how it seems on my screen
http://prntscr.com/a794gf