I can't get transition to work with this code
Changing text-align for left to right. Very simple code.
<style>
/* Default State */
div {
background: green;
width: 1000px;
height: 100px;
line-height: 100px;
color: white;
text-align: left;
transition: all 10s;
-webkit-transition: all 10s;
}
/* Toggled State */
input[type=checkbox]:checked ~ div {
text-align: right;
}
</style>
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
Also what if i need to display none to block
The text-align property cannot be animated in CSS, as you can see here. Although this cannot be animated with plain CSS, you can use the jQuery library, as I do in the example below:
$("input[type=checkbox]").click(function (e) {
if ($(this).prop("checked")) {
var spanItem = document.getElementsByTagName("span").item(0).clientWidth;
alert(spanItem);
$("span").animate({
width: $(this).textWidth()
}, 500);
}
});
The code above is a sample from what I've written in this JSFiddle.
Text-align isn't supported by CSS Transition (like maximgladkov said). There are lots of alternatives though.
https://developer.mozilla.org/en-US/docs/CSS/CSS_animated_properties
On a small sidenote; you might want to wrap your labels around your input elements.
I think text-align property cannot be animated.
But you can add another element with position: absolute and animate it's left or right property.
Related
I have two elements: tooltip and tooltip-line.
There is common properties for each elements:
[tooltip]::after, [tooltip-line]::after {
position: absolute;
opacity: 0;
visibility: hidden;
/* Other common properties */
}
Next, I have different properties for each element.
[tooltip-line]::after { /* One line tooltip */
content: attr(tooltip-line);
white-space: nowrap;
}
[tooltip]::after { /* Multiline tooltip */
content: attr(tooltip);
width: 200px;
white-space: normal;
}
Is this a correct usage? Including similar classes. Or should I copy all properties to each declaration block?
Here's a different approach which might be slightly more scalable. Using CSS custom variables, we can override any default class values by resetting them in the multiline class. Finally, I would make the attributes containing the tooltip content identical—and valid data attributes—if possible.
.tooltip::after {
--tooltip-white-space: nowrap;
content: attr(data-tooltip-content);
white-space: var(--tooltip-white-space);
}
.tooltip.multiline::after {
--tooltip-white-space: normal;
}
.container {
width: 250px;
border: 1px solid red;
}
<div class="container">
<div class="tooltip" data-tooltip-content="my tooltip content should not wrap no matter what"></div>
<div class="tooltip multiline" data-tooltip-content="my multliline tooltip content should wrap"></div>
</div>
jsFiddle
It's absolutely right to divide the css in multiple blocks.
One of the first thing to know while writing code in any language is NOT to repeat yourself.
I am building a website with WordPress. On my homepage I want a picture grid (10 x 3) of different products, and when you hover over each picture, a caption with the product name will pop up.
I have managed to do 3/4 of it but there's this massive white space below each row. :(
I am using the SiteOrigin editor widget to insert the image, and using HTML and CSS to code the hover effects. See below for the current coding.
HTML:
<div id="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Hassaku.png" />
<p class="text">Summer Mikan</p>
</div>
CSS:
.text {
color: #000000;
font-size: 16px;
font-weight: bold;
text-align: center;
background: rgba(255, 255, 255, 0.5);
}
#pic .text {
position:relative;
bottom:80px;
left:0px;
visibility:hidden;
}
#pic:hover .text {
visibility:visible;
}
Here's the website so you can see what I've done: http://peacefruit.net
The top row has the captions, but also, the pesky gap. The bottom three rows are examples of how I want it to look (no borders or gaps between pics). All rows and individual widgets have no padding, margins or gutters and I've already adjusted the theme padding to 0 with CSS.
I'm sure it's a simple line of code I'm missing, but it's driving me crazy!
Please send help.
Try adding to your inline css for siteorigin-panels-stretch
overflow:hidden;
height:164.89px;
Hope this works.
Thanks!
In your case
the id should be unique.
So, it is better to change #pic to a class
Also, the <p> tag in your style contain padding-bottom and it will case the white space problem.
Change each pic to the following
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp- content/uploads/2016/11/Hassaku.png">
<div class="text">Summer Mikan</div>
</div>
CSS:
.pic{
position: relative;
}
.pic .text{
position: absolute;
top: 80px;
width: 100%;
visibility: hidden;
}
then it should be work.
Stylesheets for WordPress themes can have a lot of CSS bloat, so you're on the right track creating a custom stylesheet, to tackle the styling nuances you desire.
Since this is a responsive theme, it's best to begin solving this from a mobile-first perspective.
The first thing to prune is the bottom-margin: 30px; for .panel-grid-cell, like this:
.home #main .panel-grid-cell {
margin-bottom: 0;
}
The next thing is to correct your HTML mark-up. The value of pic is given to multiple id attributes. An id attribute is used to denote a unique element. The class attribute denotes a non-unique element. pic should be assigned to class attributes instead, since many elements in your layout utilize this hook value. Like this:
<div class="pic">
I'm noticing that img.hover and p.text are getting wrapped in an unnecessary <p> tag. Make sure that this does not happen in the SiteOrigin editor.
You should then prune the bottom-margin: 1.5em for paragraphs inside of the .pic divs (note the designation of pic as a class hook .pic, rather than an id hook, which would have been #pic):
.pic p {
margin-bottom: 0;
}
To get even closer, relative positioning should be used on the .pic div to ensure that the subsequent styling suggestion (position: absolute;) will take effect:
.pic {
position: relative;
}
And then, for the text that appears when hovering an image:
p.text {
position: absolute;
width: 100%;
}
The styles above will work for mobile, but your theme is responsive, and you might need to account for some styling variations with different screen sizes.
For tablets, you'd need a media query like this:
#media (min-width: 600px) {
.some-class {
some-property: some-value;
}
etc...
}
And finally, for desktop:
#media (min-width: 1000px) {
.some-class {
some-property: some-value;
}
etc....
}
Thanks everyone for your help :) After some fiddling around with the suggestions and a software update, there is no gap now!
I thought I'd post my final code in case anyone has a similar problem and it might be of some help. (Note: there are some minor style changes which differ from the original post but have no effect on how it works).
HTML:
<div class="pic">
<img class="hover" src="http://peacefruit.net/wp-content/uploads/2016/11/Summer-Mikan.png"/>
<div class="text">Summer Mikan</div>
</div>
WIDGET CLASS:
fade
CSS:
.fade {
-webkit-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
.fade:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.pic {
position: relative;
}
.text {
color: #FFFFFF;
font-size: 22px;
font-weight: bold;
text-align: center;
background: rgba(214, 187, 14, 0.85);
}
.pic .text {
position:absolute;
top: 0px;
width: 100%;
visibility:hidden;
}
.pic:hover .text {
visibility:visible;
}
.pic p {
margin-bottom: 0px;
}
So glad it finally works, much appreciation to everyone!
This question already has answers here:
Clear icon inside input text
(18 answers)
Closed 8 years ago.
This is not a duplicate. While I was basically looking for the same result as the other post, I wanted to go about it in a different way. They were using background image, and I wanted to use a <span>.
I am trying to make a textbox so that when the user types into it, a "X" shows up on the right. However, I do not want the "X" to show up when there is no text in the box, like it does now.
I tried to make the "X" white, and have it transition it's color when it slides, but you can still select in when you drag the mousedown over it.
I'm thinking that I need to put it inside the textbox (somehow), then slide it to the right and hide it using overflow: hidden. I did also try to do this, but I couldn't get anywhere with it.
http://jsfiddle.net/qgy8Ly5L/16/
The <span> should be "behind" the white background when it's not showing. Mid transition should look like this:
(source: googledrive.com)
Is this possible in CSS, and if so, how can I do it?
Wrap both your input and your span inside a container, position this container as relative, and the span as absolute. You can now do whatever you like with the span.
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.clearBtn {
position: absolute;
top: 0;
right: -15px;
transition: right 0.2s;
}
.show {
right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-container">
<input type="text" onkeyup="checkInput(this.value)" />
<span id="clearBtn1" class="clearBtn">X</span>
</div>
Hide the X by default and use the show class when needed
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
display: none;
}
.show {
display: inline;
}
JS
function checkInput(text) {
if (text != ""){
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
http://jsfiddle.net/qgy8Ly5L/18/
Check out this updated fiddle:
function checkInput(text) {
if (text) {
$("#clearBtn1").addClass("show");
} else {
$("#clearBtn1").removeClass("show");
}
}
.clearBtn {
position: relative;
left: 0;
transition: left 0.3s;
visibility: hidden;
}
.show {
left: -18px;
visibility: visible;
}
http://jsfiddle.net/qgy8Ly5L/19/
By using visibility you get to keep the element in the DOM. This will keep things smooth when it reappears. Notice the use of a "truthy" if statement.
On a number input it has a spinner which has several css properties but I can't seem to find a way to change the size of the spinner itself. I am talking about <input type='number'>. I tried finding something that would change the size but I haven't been able to find anything. The other issue I guess is that every browser on possibly every OS is going to have a potentially different implementation of the spinner itself. When I say spinner I am talking about the highlighted part of this image.
I cannot use the JQuery UI spinner because the large app I am developing uses JQuery UI 1.8 which did not include the spinner. Upgrading causes issues.
Not ideal, but try playing around with the CSS transform property:
For example,
input[type=number]
{
transform: scale(2);
}
This increases the size of the entire input, but maybe this (in conjunction with setting font-size, line-height, height, width) can produce a desired effect.
This CSS seems to work in Chrome by replacing the spinners with a static image (of a spinner) and then control the size and position of the image within the element and making it invisible by default until the user hovers over it:
* Spin Buttons modified */
input[type="number"].mod::-webkit-outer-spin-button,
input[type="number"].mod::-webkit-inner-spin-button {
-webkit-appearance: none;
background: #0F0 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVQYlWNgwAT/sYhhKPiPT+F/LJgEsHv37v+EMGkmkuImoh2NoQAANlcun/q4OoYAAAAASUVORK5CYII=) no-repeat center center;
width: 3em;
border-left: 1px solid #0f0;
opacity: 0; /* shows Spin Buttons per default (Chrome >= 39) */
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
input[type="number"].mod::-webkit-inner-spin-button:hover,
input[type="number"].mod::-webkit-inner-spin-button:active{
box-shadow: 0 0 2px #0CF;
opacity: .7;
}
Plain ole HTML...
No library or images required.
HTML
<!-- Score Control Container -->
<div class = "Score-Control">
<div class = "Score-Value-Container">
<div id="RoundScore" class="Score-Value">
10
</div>
</div>
<div class = "Score-UpDown">
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="IncrementScore();">
▲
</div>
</div>
<div class = "Score-Button-Container">
<div class = "Score-Button " onclick="DecrementScore();">
▼
</div>
</div>
</div>
</div>
CSS
.Score-Control {
width: 200px;
}
.Score-Value-Container{
position:relative;
display: table;
overflow: hidden;
height:80px;
background-color:#aaa;
width:66%;
float:left;
font-size: 44px;
vertical-align: middle;
text-align: center;
}
.Score-Value {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.Score-UpDown{
position:relative;
height:80px;
background-color: burlywood;
width:34%;
float:right;
}
.Score-Button-Container {
display: table;
height: 50%;
width: 100%;
overflow: hidden;
background-color:green;
}
.Score-Button {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 27px;
}
JavaScript
function IncrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore < 10) {
RoundScore++
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
function DecrementScore() {
var RoundScore = document.getElementById("RoundScore").innerHTML;
if (RoundScore > 1) {
RoundScore--
document.getElementById("RoundScore").innerHTML = RoundScore;
}
}
Code in JSFiddle
You could make an input field with two buttons for up and down and style them then the way you like.
<input type="text" name="something">
<span class="goUp"></span>
<span class="goDown"></span>
js:
var inputField = $('input[name="something"]');
$('.goUp').click(function() {
inputField.val(inputField.val() + 1);
});
$('.goDown').click(function() {
inputField.val(inputField.val() - 1);
});
you then should also check, that the input has only numbers inside, so that your +/- 1 really works.
The “size of the spinner” is a vague concept, but the <input type=number> element seems to obey at least width, height, and font property settings. Example:
<input type=number value=42 min=0 max=99
style="font: 24pt Courier; width: 3ch; height: 3em">
Whether such settings are useful and whether they should work is a different issue. It can be argued that the implementation of such elements is expected to be a browser-dependent nice, useable widget suitable for the browsing conditions, rather than something that authors should mess around with. But in practice, the widget is largely affected by CSS settings, and this might be a good thing in practice, e.g. because the input box tends to be too wide by default. (We could expect browsers to set it according to min and max values, but this just doesn’t happen at present.) The risk is that by setting the width, you might conflict with the implementation. The code above expects the up and down arrows to take a width of one character at most, but this guess might some day be wrong.
to change to
when mouse over.. like you can do with a:hover, how can i do this?
I tried
addFriend img:hover{
background: url(images/addFriend_hover.png);
}
Ditch the img tag, and do it without javascript
(off the top of my head, untested)
HTML
<div class="addFriend">Add Friend</div>
CSS
.addFriend { background: url(images/addFriend.png); }
.addFriend:hover { background: url(images/addFriend_hover.png); }
For it to work in all browsers with the least amount of code you can do it with CSS.
Add A Friend
.icon {
display: block;
width: (width of image);
height: (height of image);
text-indent: -9999px; /* hides the text 'Add A Friend' */
background: url(url of image) no-repeat center center;
padding-right: 55px;
}
.icon:hover {
background: url(url of new image) no-repeat center center;
}
You could also use jQuery.
$('img.addFriend').hover(function() {
$(this).attr('src','images/addFriend_hover.png');
}, function() {
$(this).attr('src','images/addFriend.png');
});
Edit
You could also do non-jQuery, I assume you don't want a background-image or an href
<img src='images/addFriend.png' onmouseover='this.src="images/addFriend_hover.png"' onmouseout='this.src="images/addFriend.png"' />
You have to use a container with a background image, e.g. a div with a specified height and width. Then you can use the background image and a :hover-pseudo-class.
This tutorial might be useful: http://www.w3schools.com/js/js_animation.asp
To see if it does what you want, scroll down to "The Entire Code" and click "Try it yourself".