What is the best way to reverse css styling on the second on click?
What I'd like to happen is when the user clicks on the button again, it will just reverse everything to the original position. I'm not sure what's the most efficient way to do this without re-declaring everything in reverse. Especially that there's not just one class that changes status.
HTML:
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>
CSS:
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
jQuery:
$(".available").click(function() {
$(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");
$(".available-img").css({
"left": 100
});
$(".available-img img").css({
"border" : "2px solid #CCC"
});
});
http://codepen.io/aguerrero/pen/ORKjya
The simplest way would be to toggle a class on the wrapper-available instead of adding inline styling and to also toggle the text() within the .available element. Try this:
$(".available").click(function() {
$(this).text(function(i, t) {
return t == 'Available' ? 'Away' : 'Available';
}).closest('.wrapper-available').toggleClass('away');
});
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.wrapper-available.away .available {
background-color: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.wrapper-available.away .available-img {
left: 70px; /* note 70px seems to work better than 100px here */
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
.wrapper-available.away .available-img img {
border: 2px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img">
<img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40">
</div>
</div>
I added three classes in your CSS document with the styling that you added in your jQuery snippet. Now, instead of updating the specific styling for each element via jQuery you can just specify the new styling in your three selectors with the .active class.
CSS:
.available.active {
background: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img.active {
left: 100px;
}
.available-img.active img {
border: 2px solid #CCC;
}
The jQuery snippet now toggles the .active class on your desired elements. These two:
<a class="available">Available</a>
<div class="available-img">
$(this).text() now toggles between Available and Away.
jQuery:
$('.available').click(function() {
$(this).toggleClass('active').siblings().toggleClass('active');
$(this).text(function(i, text) {
return (text === 'Available') ? 'Away' : 'Available';
});
});
Example: http://codepen.io/praktikdan/pen/wzVrGM
Related
I am trying to figure out how to make a 10px halo over the -slider-thumb attribute of my range input slider. I am using React, CSS and HTML and have found this difficult to do because of the overflow:hidden property. This property must stay, as basically none of the code works without it(This was part of a solution to editing the slider base css). I have tried using ::after and ::before with no avail. So I'm wondering what I'm doing wrong, or if this is even possible as I haven't found any documentation on it. Code and Codepen provided below. Thanks for any help/advice!
HTML:
<div id="root"></div>
CSS:
input[type='range'] {
-webkit-appearance: none;
background-color: #ddd;
height: 10px;
overflow: hidden;
width: 300px;
border-radius: 5px;
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
--slider-thumb-background-color: #000;
background: var(--slider-thumb-background-color);
border-radius: 50%;
--box-shadow-color: orange;
box-shadow: -205px 0 0 200px var(--box-shadow-color);
cursor: pointer;
height: 10px;
width: 10px;
--border-color: orange;
border: 3px solid var(--border-color);
}
input[type='range']::-webkit-slider-thumb:hover::after {
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
color: yellow;
}
input[type='range']::-webkit-slider-thumb:hover {
--slider-thumb-background-color: grey;
--box-shadow-color: red;
--border-color: red;
}
input[type='range']::-webkit-slider-thumb:active {
--slider-thumb-background-color: white;
--box-shadow-color: blue;
--border-color: blue;
}
input[type='range']::-webkit-slider-thumb:focus {
--slider-thumb-background-color: white;
--box-shadow-color: yellow;
--border-color: yellow;
}
input[type='range']::-webkit-slider-thumb:hover:after {
border: 10px solid rgb(111, 111, 0.4);
overflow: auto;
postion: fixed;
}
input[type='range']::-moz-range-thumb {
background: #333;
border-radius: 50%;
box-shadow: -1005px 0 0 1000px red;
cursor: pointer;
height: 10px;
width: 10px;
border: 0;
}
JS(Babel)
class VolumeSlider extends React.Component {
constructor() {
super();
this.state = {
value: 120.5
};
}
onUpdate(e) {
this.setState({
value: e.target.value
});
}
render() {
return (
<div>
<div className="mb1">
<input
className="c-input--range"
list="tickmarks"
max={1200}
onChange={(e) => this.onUpdate(e)}
step={0.1}
type="range"
value={this.state.value}
/>
<div>
<label className="c-label">{this.state.value}c</label>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<div>
<VolumeSlider />
</div>,
document.getElementById("root")
);
https://codepen.io/kcandle/pen/KKMrZKo
Look at this pen hope this is what you're looking for, explanation:
i've added the after with position absolute made the input relative position made the after 1px X 1px, made inset then translated X axis from 0 to whatever value i want.
input[type='range']::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
visibility: hidden;
width: 1px;
height: 1px;
box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff;
}
input[type='range']:hover::after{
visibility: visible;
animation: wave 2s forwards;
}#keyframes wave {
0% {
transform:translateX(0);
}
100% {
transform:translateX(500px);
}
}
https://codepen.io/headsick/pen/xxOMXqw
I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?
This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;
Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}
Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.
The main question I have concerns toggleClass(). Since I'm not the greatest with jQuery, I'm not sure what to search for. Here is my code:
JS
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery('.quickLinks').click(function() {
var options = {direction: 'right'};
var duration = 400;
jQuery('#quickLinks').slideToggle(options, duration);
jQuery('.quickLinks').toggleClass('sidebar-blue');
});
jQuery('.quickLinks').hover(function() {
jQuery(this).css({
'border-top-color': '#1C8BE6',
'color': '#1C8BE6'
});
}, function() {
jQuery(this).css({
'border-top-color': '#003663',
'color': '#fff'
});
});
});
CSS
/** Style for the button & div **/
.sidebar {
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
display: block;
}
.quickLinks, #quickLinks {
float: right;
margin-left: 100%;
width: 230px;
}
.quickLinks {
cursor: pointer;
padding: 10px 0px 5px;
background-color: #003663;
white-space: nowrap;
text-align: center;
font-family: 'Just Another Hand', Arial, Helvetica, sans-serif;
font-weight: 400;
font-size: 26px;
line-height: 26px;
color: #fff;
border-top: 3px solid #003663;
border-radius: 5px 5px 0px 0px;
}
.quickLinks.sidebar-blue {
line-height: 20px;
color: #1C8BE6 !important;
border-top: 3px solid #1C8BE6 !important;
}
#quickLinks {
position: relative;
display: none;
background-color: #003663;
right: 0px;
z-index: 100;
}
#quickLinks > ul {
list-style-type: none;
float: right;
margin: 5px 10px;
padding-left: 0px;
}
#quickLinks > ul > a > li {
color: #fff;
white-space: nowrap;
}
#quickLinks > ul > a > li:hover {
color: #1C8BE6;
}
When I expand the menu, the head text is blue. After clicking it again to slide down the menu, the "Quick Links" text remains blue until you move the mouse. I'd like it to change either right when it's clicked again or once the sliding transition is complete.
The other question I have is whenever clicking the second time, the menu jumps. It goes up a few pixels before returning down. It doesn't happen on the actual site I'm using this for, but it does in jsfiddle. I'd just like to know why.
Here's where I'm at so far :
Fiddle
So My code do when i click on name(class ='frnd'), then in result open one window and it is drag-able but when i again click on (class =frnd) then their open again new windows, for example if i click on Simon there popup new windows and after one click it is drag-able and than once more i click on name(class ='frnd' (Simon)) its popup one more window again. Problem: I dont want that if the window is already open, it wont open again same window Simon.
For avoid this problem i was trying this code in js
if(!($("#windows").hasClass('.5647383'+id))){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
I don't know why isnt working thiscondition if($("#windows").hasClass('.5647383'+id)).
$(document).ready(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
var usr=$(this).text();
var exst = document.getElementsByClassName('.5647383'+id);
if($("#windows").hasClass('.5647383'+id)){
$html = '<div class="mwindow "><div class="hwindow 5647383'+id+'">'+usr+'<span class="cls">x</span></div><div class="msgbody '+id+'"><div id="mstd"class= umsg'+id+'></div><div id="tarea"><form method="post"><textarea class="ctarea" name="'+id+'"></textarea></form></div></div></div>';
$('#windows').append($html);
}
});
$('#windows').on('click','.cls', function(){
$(this).parent().parent().hide();
});
$(function(){
$('.frnd').click(function(){
var id = $(this).attr("id");
$('#windows').on('click','.'+id,function(){
$(this).parent().draggable({
handle: ".hwindow",
containment:"body"
});
});
});
});
});
body {
margin: 0;
background-color: #999;
height: 700px;
}
.frnd {
text-align: center;
width: 50px;
height: 20px;
display: inline-block;
background-color: #9B59B6;
margin: 5px;
border: 4px solid #3498DB;
color: #F1C40F;
cursor: pointer;
float: right;
}
.mwindow {
position: fixed;
width: 220px;
height: 220px;
border: 5px solid #16a085;
background-color: #fff;
display: block;
margin: 5px;
border-radius: 10px;
}
.mwindow:hover {
z-index: 9999;
}
.hwindow {
width: 210px;
height: 25px;
background-color: #FF4500;
padding: 5px;
display: block;
margin: 0px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.cls {
display: inline-block;
float: right;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.msgbody {
position: relative;
height: 185px;
background-color: #FF4500;
//z-index:9999;
}
.ctarea {
position: absolute;
width: 210px;
resize: none;
outline: none;
top: 133px;
font-size: 15px;
padding: 5px;
min-height: 40px;
opacity: 0.9;
border: none;
border-top: 2px solid #ff0000;
}
#mstd {
position: absolute;
width: 220px;
height: 133px;
background-color: #bb4500;
opacity: 1;
overflow-x: hidden;
}
<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<li id="7" class="frnd">Maxi</li>
<li id="8" class="frnd">John</li>
<li id="9" class="frnd">Henry</li>
<li id="10" class="frnd">Max</li>
<li id="11" class="frnd">Simon</li>
<div id="windows"></div>
Elements by their ID attribute are selected using the hashmark symbol, so
'.' + id should be '#' + id.
The dot symbol (.) selects elements by their class name.
http://codepen.io/anon/pen/qdaXgX
EDIT
You had a number of other problems, look at the reviewed code:
http://codepen.io/anon/pen/bdwaWx
The problem is hasClass() doesn’t use a period prefix for classes — that’s selector syntax. So:
var hwindow_div = $('.5647383'+id) will find your .hwindow div,
hwindow_div.hasClass('5647383'+id) checks whether it has the class.
A simple example.
PS. while it’s a separate problem, #marekful is correct about the #id syntax.
I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.
You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/
You can use Jquery Tooltip:
Jquery Tooltip
Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}
* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html
Try this property it's asp but may work for your case
ErrorMessage="Your Message";