I'm using jQuery datepicker and I would like to be able to replace its prev and next icons with FontAwesome for better scalability and prettier UI. Has anyone managed to find a way to do it?
We can overwrite the icons using CSS, since the plugin doesn't allow it.
In the following snippet, we hide the regular buttons, and add a :before pseudo element with the Font Awesome Icon.
Please notice you have to use the icon's codepoint (i.e. \f100) and not its class name (i.e. fa-angle-double-left) .
$(function() {
$("#datepicker").datepicker();
});
.ui-datepicker-prev span,
.ui-datepicker-next span {
background-image: none !important;
}
.ui-datepicker-prev:before,
.ui-datepicker-next:before {
font-family: FontAwesome;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
font-weight: normal;
align-items: center;
justify-content: center;
}
.ui-datepicker-prev:before {
content: "\f100";
}
.ui-datepicker-next:before {
content: "\f101";
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>
Date:
<input type="text" id="datepicker">
</p>
JSFiddle
It is quite possible to modify the icons directly in the original jQuery UI code,
open the file jquery-ui.min.js
(you must work directly on the file without CDN of course!)
and modify the following lines :
in jquery-ui.min.js
1 - Find :
<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"e":"w")+"'>"+i+"</span></a>
Replace with :
<a class='ui-datepicker-prev ui-corner-all' data-handler='prev' data-event='click' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>":q?"":"<a class='ui-datepicker-prev ui-corner-all ui-state-disabled' title='"+i+"'><span class='fa fa-angle-left' aria-hidden='true'>"+i+"</span></a>
2 - Find :
<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>
Replace with :
<a class='ui-datepicker-next ui-corner-all' data-handler='next' data-event='click' title='"+n+"'><span class='fa fa-angle-right' aria-hidden='true'>"+n+"</span></a>":q?"":"<a class='ui-datepicker-next ui-corner-all ui-state-disabled' title='"+n+"'><span class='ui-icon ui-icon-circle-triangle-"+(Y?"w":"e")+"'>"+n+"</span></a>
I wrote an article on this method with a link to an example at the bottom of the page.
-> Article here : https://sns.pm/Article/Utiliser-les-icones-de-Font-Awesome-avec-Datepicker-jQuery-UI
-> sampl : https://sns.pm/DEMOS-ARTICLES/Article-DEMO-jQuery-ui-font-awsome/
Hoping to help a little...
Related
I have tried this. But It does not get filled on hovering.
.flag-icon
{
fill:white;
}
.flag-icon:hover
{
fill:red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">
<span class="material-icons flag-icon">outline_flag</span>
Use color instead of fill.
See the snippet bellow:
.flag-icon{
color:blue;
}
.flag-icon:hover{
color:red
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">
<span class="material-icons flag-icon">outline_flag</span>
Edit - Filled x outlined icons.
To have the outlined style one must add the class material-icons-outlined.
If you want to change from a outlined icon to a filled icon on hover, you may use the following code that relies on a simples jquery script:
$(document).ready(function(){
$('.flag-icon').hover(function(){
$(this).removeClass('material-icons-outlined');
}, function(){
$(this).addClass('material-icons-outlined');
});
});
.flag-icon:hover{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet">
<span class="flag-icon material-icons material-icons-outlined">flag</span>
Take a look at this question for more examples:
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
.flag-icon::before {
font-size: 18px;
margin-top: 5px;
font-family: "Material Icons";
transition: 0.1s ease;
content: 'outlined_flag';
}
.flag-icon:hover::before {
content: "flag";
color: red;
}
I've basically seen some answers where I can try to do something similar to what I need, but those examples are using text, about text. But in this case I need to achieve this with the element, I would like that when I pass the cursor over, a smooth animation is produced and it becomes a text ("add text"). How can I do it?
<i class="fa fa-users red" aria-hidden="true"></i>
https://jsfiddle.net/gp83bkuf/
You can handle the events in Javascript using Jquery for mouseenter and mouseleave in order to create you desired behavior. I have created an example using fadeIn fadeOut which renders a basic animation.
$('.myImage').mouseenter(function(){
var $image = $('.myImage');
$('.myImage').fadeOut(2000,function(){
$('.myText').fadeIn(2000);
});
});
$('.myText').mouseleave(function(){
$('.myText').fadeOut(2000,function(){
$('.myImage').fadeIn(2000);
});
})
.myImage {
font-size: 50px;
color: red;
}
.myText
{
font-size: 20px;
color: red;
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="myImage fa fa-users" aria-hidden="true"></i>
<p class="myText">add text</p>
I want put in the same line of the field the face icon. The code is this:
<i class="material-icons">face</i>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="sample3">
<label class="mdl-textfield__label" for="sample3">Text...</label>
</div>
and the result is this:
How to put in the same line the icon and the field?
Thanks
Using Email Address / Email Icon as example.
HTML
Add the icon as a child element of the textfield
<div class=
"mdl-textfield mdl-js-textfield mdl-textfield--floating-label is-upgraded"
data-upgraded=",MaterialTextfield">
<input class="mdl-textfield__input" id="textfield-EmailAddress" type=
"email">
<label class="mdl-textfield__label" for=
"textfield-EmailAddress">Email Address</label>
<span class="mdl-textfield__error">Please Enter Valid Email Address</span>
<i class="material-icons mdl-textfield__label__icon">mail</i>
</div>
CSS
.mdl-textfield__label__icon {
position: absolute;
right: 0;
top: 20px;
}
Required Resources
You need to load both the MDL CSS and the Material Design Icons
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
MDL JS will help with dynamic behavior
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"> </script>
For Example you can have your icon turn the same 'active' color as your input when focused
.mdl-textfield.is-focused .mdl-textfield__label__icon, .mdl-textfield.is-invalid.is-focused .mdl-textfield__label__icon {
color: rgb(63,81,181);
}
If you want the icon to be left-aligned you could adjust CSS above, but also need to adjust padding on the input to ensure that the input's text does not collide with the icon. Still possible with solution above, but with icon being right aligned its not as likely to happen
There's a solution by Jeremy Fily for left-aligned text-field icons.
The solution also includes js to colour the field and icon according to whether it's selected, but the part that inlines the icon to the left is this css
.mdl-textfield__icon {
width: 32px;
text-align: center;
position: absolute;
line-height: 1.5;
}
.mdl-textfield__icon ~ * {
margin-left: 48px;
width: calc(100% - 48px);
}
I have twelve <a href> links that lead to different categories. As a means of orientation for the user I would like to emphasise the very category (<a href>-button) that the user is in right now.
How can I achieve this in CSS? I read about selected and active, but I haven't been able to make it work yet.
This is one of the links/buttons:
<span class="category_item"></span><span class="category_description">Handy & Co.</span>
The corresponding CSS:
.category_item {
display:inline-block;
background:url(../img/category_item/ph.png) no-repeat;
width: 45px;
height: 45px;
margin-right: 11px;
margin-bottom: 20px;
}
.category_item:hover {
background:url(../img/category_item/hover.png);
}
.category_description {
position: absolute;
font-size: 11px;
color: #000;
margin-top: 43px;
margin-left: -62px;
z-index: 1;
opacity: 0;
}
Thank you in advance!
You can run some jquery code when you load the page that checks the link urls with the current page's url and setting a class on the links that match.
JSFiddle: http://jsfiddle.net/og4o1tdh/2/
something like this:
HTML:
<div id="categories">
<span class="category_description">Google</span>
<!-- jsfiddle code is apparently run on fiddle.jshell.net -->
<span class="category_description">JSFiddle</span>
</div>
JS:
$('#categories a').each(function (){
var link = $(this).attr('href');
if (window.location.href.indexOf(link) > -1) {
$(this).find('span').addClass('currentCategory');
}
});
CSS:
.currentCategory {
color: orange;
font-weight: bold;
}
To give a special class to an anchor when a user clicks you can use simple javascript and jQuery.
Give all the anchor's you want to be in the scope of this a class for instance:
HTML:
<a class="nav-link" href="http://www.google.com"> Google </a>
<a class="nav-link" href="http://www.yahoo.com"> Yahoo </a>
Javascript:
$(".nav-link").on("click", function() {
$(this).addClass("active");
});
To make sure you only have one anchor with "active" class I would do the following:
$(".nav-link").on("click", function() {
$(".nav-link").removeClass("active");
$(this).addClass("active")
});
There is no built-in way of knowing which link is the current one. The easiest way may be to use javascript to check the current URL by document.URL and add a CSS class to the link with an equal href attribute. Then, you may style this class in CSS.
CSS doesn't know what page you are on.
To do this you will have to change your HTML markup, for example: to add:
<a class="current-page" href="index.php?category=handy&location=&sort=" ...
on the relevant link which you can use to 'hook' an new CSS style onto:
.current-page { color: red; }
The alternative is to use Javascript to 'read' the URL and apply a style.
You could...
Simply add a unique classname to the body tag or (some element that wraps around the anchor tags). And then style your links accordingly. This option is quite easy if you have access to change the HTML in your pages:
HTML
<body class="category_handy">
...
<a href="..." class="category_handy">
<span class="category_item"></span>
<span class="category_description">Handy & Co.</span>
</a>
....
</body>
CSS
body.category_handy a.category_handy {
color:red;
}
body.category_dandy a.category_dandy {
color:yellow;
}
body.category_something a.category_something {
color: blue;
}
If you don't have access to directly edit each page, you may have to dynamically check the URL, and then add a classname (like "current") to the anchor tag who's href attribute matches.
Either way, the solution will not involve "css only".
I have just 3 words on my webpage that I want to have colored background: Red, Green and Blue. There are 2 components to my questions:
How should I do this? Put this in a style sheet or just hard code it in the webpage?
Either way, please show me how to do what I want each way so I can decide. I am an absolute beginner with css as you can tell.
BTW, I am doing this in an aspx page if it makes any difference.
For inline styles:
<span style="background-color:red;">Red Stuff...</span>
<span style="background-color:green;">Green Stuff...</span>
<span style="background-color:blue;">Blue Stuff...</span>
For Css File
.red{
background-color: red;
}
.green{
background-color: green;
}
.blue{
background-color: blue;
}
and in your html;
<span class="red">red stuff</span>
<span class="green">green stuff</span>
<span class="blue">blue stuff</span>
The choice should depend whether you want to use these properties on other places. If so go with a style sheet. (IMHO go with a seperate style sheet anyway)
You need to put each word in a tag, and give each tag a background color.
Something like this:
<span style="background-color: red;">Word 1</span>
<span style="background-color: green;">Word 2</span>
<span style="background-color: blue;">Word 3</span>
Method 1
HTML
<div>
<p id="red">Red</p>
<p id="green">Green</p>
<p id="blue">Blue</p>
</div>
CSS
p#red
{
background-color: red;
}
p#green
{
background-color: green;
}
p#blue
{
background-color: blue;
}
Method 2
HTML
<p><span>Red</span><span>Green</span><span>Blue</span></p>
CSS
p>span:nth-child(1)
{
background-color: red;
}
p>span:nth-child(2)
{
background-color: green;
}
p>span:nth-child(3)
{
background-color: blue;
}
Add this in you HTML inside the head
<link rel="stylsheet" type="text/css" href="#foo" />
Name you stylesheet CSS file and put the relative/absolute path in the above href
Can anyone tell me how to add syntax coloration to my post so I can add an answer to this question.I'll tell how to generate that code with c#.
So the code is :
string[] cols = { "red","green","blue"} // or any other color
string[] words = { "","","" } // Put your words inside quotes
string res = "";
for(int i = 0;i < 3;i++)
{
res+= "<span style=" + "\" + "background-color:"
+ cols[i] + "\" + " >" + words[i] + "</span>";
}
// the code till now should either be in script tags
// or in the code file linked with your web page
// If you are using visual studio that is the name of the pate.aspx.cs
// now use in the aspx page
<% Response.Write(res); %> // I am not sure if the semicolon is required here.
This is if you want to do it on the server side.
I suggest putting that in style sheet. I personally like to avoid having any "hard css" (not sure about the right word).
<head>
<style type="text/css">
span.textRed
{
background-color: red;
}
span.textGreen
{
background-color: green;
}
span.textBlue
{
background-color: blue;
}
</style>
</head>
<body>
<span class="textRed"> Red </span>
<span class="textGreen"> Red </span>
<span class="textBlue"> Red </span>
</body>