I'd like to have a different FA icon in the before and after state of the same button. In other words I display a button and it shows a FA "plus"icon. Then when I click the button a new screen comes up but the same button remains on the screen but now I want is to display a "close" FA icon. In my CSS I have this:
.shape:before {
content: "\f234";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
.shape:after {
content: "\f00d";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
However what happens in that the button shows both button before and after states. How do I only show the plus icon before the button is used and then the close icon once the button has to close the new screen?
:before and :after refer to positions in the DOM relative to the defined classes, not events.
You just need to:
rename your classes without the pseudo elements (:before and :after), something like .shape and .shape-opened and remove everything from .shape-opened except the content property
add some JavaScript to toggle these classes
Something like:
<html>
<head>
<!-- ... -->
<style>
.shape {
content: "\f234";
font-family: FontAwesome;
color:#fff;
position: absolute;
font-size: 30px;
top: 50%;
left: 50%;
}
.shape-opened {
content: "\f00d";
}
</style>
<script>
toggleClass = () => {
// this assumes there's only one element with the class shape or that you only want the first one
// You could also use the javascript `event` object to get the current
var shape = document.getElementsByClassName('shape')[0];
console.log(shape);
if (shape.classList.contains('shape-opened')) {
shape.classList.remove('shape-opened');
} else {
shape.classList.add('shape-opened');
}
}
</script>
</head>
<body>
<!-- ... -->
<div class="shape" onClick="toggleClass()"></div>
<!-- ... -->
</body>
</html>
(I threw the console.log in there so you could see the classes toggle in the console even if the content changes weren't working because of e.g. a dependency problem with FA.)
Related
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
I'm using Google Map Javascript Api to put a map on my website.
I created a button on the top right corner of the map just so the user could close it
This is my CSS button code:
#close-map {
position: absolute;
top: 0;
right: 0;
background: #ffc300;
color: #000;
font-size: 16px;
padding: 10px 20px;
text-align: center;
cursor: pointer;
z-index: 400;
}
I used jQuery to put it inside the #map div
$(window).load(function() {
$('#map').prepend('<div id="close-map">close map</div>');
});
and I have jQuery code to hide the map when I'm clicking on it
So I can see the button on the corner but it's not clickable
you need to put that clickable button out of the #map div. for that you can wrap it on another div (testing-div) and put button into it.
<div class="testing-div" style="position:relative;">
<div id="close-map">close map</div>
<div id="map" style="height: 580px"></div>
</div>
now you can add some jquery to close the testing-div
$("#close-map").click(function(){
$(".testing-div").slideUp();
});
I was working on an HTML form today and needed to create a color selector when I discovered (on accident) that input type 'color' actually creates a color selector in chrome (as well as firefox
http://caniuse.com/#feat=input-color).
<input type="color" value="#333" />
Are there any examples of using the color input type with gracefully fail over to other selectors?
Also it would be nice to show the hex value generated. In chrome it just shows a button box with the background of the selected color.
Is there a way to style an HTML color input to show the selected color's hex value?
Here is what I ended up using:
$("input.color").each(function() {
var that = this;
$(this).parent().prepend($("<i class='fa fa-paint-brush color-icon'></i>").click(function() {
that.type = (that.type == "color") ? "text" : "color";
}));
}).change(function() {
$(this).attr("data-value", this.value);
this.type = "text";
});
label {
font-family: sans-serif;
width: 300px;
display: block;
position: relative;
}
input {
padding: 5px 15px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
input[type=color] {
padding: 0;
border: 0;
height: 40px;
}
input[type=color]:after {
content: attr(data-value);
position: absolute;
bottom: 10px;
text-align: center;
color: #fffff5;
display: block;
width: 100%;
}
.color-icon {
position: absolute;
bottom: 10px;
right: 10px;
color: #666;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
Color:
<br />
<input class="color" placeholder="#XXXXXX" data-value="#xxxxxx" />
</label>
Are there any examples of using the color input type with gracefully fail over to other selectors?
You could find ways to gracefully fallback to another color picker if color input is not available. For example, https://github.com/bgrins/spectrum. (Try searching for "input color polyfill" for other options).
Is there a way to style an HTML color input to show the selected color's hex value?
For my Chrome (45.0.2454.93), it does show the hex value in the color selector while selecting. If you want to show it after selecting, the value of the input appears to be in hex.
document.querySelector('input[type=color]').value
If you want to display that to a user, you could populate another element with that value when onchange is fired for the input element.
I want to place two font icons one above the other. So I can use it as:
<span class="icon1-on-icon2" />
Is it possible to define CSS class(es) to achieve this? It's not permitted to use another elements inside a span i.e. something like that:
<span class="stack">
<span class="icon1"/>
<span class="icon2" />
</span>
Sure, why not use :after and :before pseudo-selectors?
CSS
.font-icon {
height: 40px;
width: 20px;
}
.font-icon:after, .font-icon:before {
color: white;
content: '';
display: block;
font-family: 'your-font-icon';
height: 20px;
position: relative;
width: 20px;
}
.font-icon:before {
background: red;
content: 'h';
}
.font-icon:after {
background: blue;
content: 'g';
}
HTML
<span class='font-icon'></span>
Codepen sketch here: http://cdpn.io/lehzr
UPDATE
To place them on top of each other, simply change the position to absolute, put a relative on the container element, and set top and left to 0 for both the after and before.
Example: http://cdpn.io/lehzr
Hope that helps!
I am trying to change jQuery UI dialog's default styles to something similar to this -
I got it to close changing some CSS in jQuery UI.
.ui-widget {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
.ui-widget-content {
background: #F9F9F9;
border: 1px solid #90d93f;
color: #222222;
}
.ui-dialog {
left: 0;
outline: 0 none;
padding: 0 !important;
position: absolute;
top: 0;
}
#success {
padding: 0;
margin: 0;
}
.ui-dialog .ui-dialog-content {
background: none repeat scroll 0 0 transparent;
border: 0 none;
overflow: auto;
position: relative;
padding: 0 !important;
}
.ui-widget-header {
background: #b0de78;
border: 0;
color: #fff;
font-weight: normal;
}
.ui-dialog .ui-dialog-titlebar {
padding: 0.1em .5em;
position: relative;
font-size: 1em;
}
HTML :
<div id="popup-msg">
<div id="loading">
<h2>Loading...</h2>
<h3>Please wait a few seconds.</h3>
</div>
<div id="success" title="Hurray,">
<p>User table is updated.</p>
</div>
</div>
THIS IS FIDDLE
But when I add this style its apply to all my dialogs. Can anybody tell me how can I avoid from this problem.
Thank you.
See https://jsfiddle.net/qP8DY/24/
You can add a class (such as "success-dialog" in my example) to div#success, either directly in your HTML, or in your JavaScript by adding to the dialogClass option, as I've done.
$('#success').dialog({
height: 50,
width: 350,
modal: true,
resizable: true,
dialogClass: 'no-close success-dialog'
});
Then just add the success-dialog class to your CSS rules as appropriate. To indicate an element with two (or more) classes applied to it, just write them all together, with no spaces in between. For example:
.ui-dialog.success-dialog {
font-family: Verdana,Arial,sans-serif;
font-size: .8em;
}
You can specify a custom class to the top element of the dialog via the option dialogClass
$("#success").dialog({
...
dialogClass:"myClass",
...
});
Then you can target this class in CSS via .myClass.ui-dialog.
The solution only solves part of the problem, it may let you style the container and contents but doesn't let you change the titlebar. I developed a workaround of sorts but adding an id to the dialog div, then using jQuery .prev to change the style of the div which is the previous sibling of the dialog's div. This works because when jQueryUI creates the dialog, your original div becomes a sibling of the new container, but the title div is a the immediately previous sibling to your original div but neither the container not the title div has an id to simplify selecting the div.
HTML
<button id="dialog1" class="btn btn-danger">Warning</button>
<div title="Nothing here, really" id="nonmodal1">
Nothing here
</div>
You can use CSS to style the main section of the dialog but not the title
.custom-ui-widget-header-warning {
background: #EBCCCC;
font-size: 1em;
}
You need some JS to style the title
$(function() {
$("#nonmodal1").dialog({
minWidth: 400,
minHeight: 'auto',
autoOpen: false,
dialogClass: 'custom-ui-widget-header-warning',
position: {
my: 'center',
at: 'left'
}
});
$("#dialog1").click(function() {
if ($("#nonmodal1").dialog("isOpen") === true) {
$("#nonmodal1").dialog("close");
} else {
$("#nonmodal1").dialog("open").prev().css('background','#D9534F');
}
});
});
The example only shows simple styling (background) but you can make it as complex as you wish.
You can see it in action here:
https://codepen.io/chris-hore/pen/OVMPay