I wanted to change the background of Google Chrome auto-suggestion options!
I have tried the below code sniped and I change everything regarding suggestion, but I can not change the background of the options.
/* Browser autofill options */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:active,
select:-webkit-autofill:focus {
-webkit-text-fill-color: black;
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
-webkit-transition: background-color 5000s ease-in-out 0s;
-moz-transition: background-color 5000s ease-in-out 0s;
-ms-transition: background-color 5000s ease-in-out 0s;
-o-transition: background-color 5000s ease-in-out 0s;
}
From the image I think this is bit clear that i want to change the background of the option for example here ["Mithun","Admin"].
I'm basically trying to make popups appear from the element they were clicked, similar to Angular Material Dialogs here. I know how to do transitions by adding and removing classes but what about when you want to work with styles that are calculated dynamically and need to be set through javascript. This doesn't seem to work.
See plunkr
$(document).ready(function(){
$(document).on("click", ".heading" , function(ev){
var el = $(this);
var offset = el.offset();
$(".popup").css("top", offset.top);
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
});
$(".close").on("click", function(ev){
$(".popup").removeClass("visible");
});
});
.heading{ width:100px; height:40px; background-color:grey; margin:50px 0 150px 0; padding:10px; }
.popup{
background-color:grey;
position:absolute;
height:0
width:0; opacity:0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s
ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition:
opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top
0.3s ease-out, left 0.3s ease-out; -ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s
ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out,
width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left
0.3s ease-out; }
.popup.visible{ opacity:1; height:250px; width:400px;
top:400px !important; left:200px !important; }
.close:hover{cursor:pointer;}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="heading">click me 1st </div>
<div class="heading">click me 2nd</div>
<div class="heading">click me 3rd</div>
<div class="popup">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttt
<div style="margin:40px" class="close">close</div>
</div>
</body>
</html>
The way it should be is it transitions from the div you clicked on, ends on the center and when you close it transitions back the div you clicked on.
The way it actually is is: clicking the first div makes the popup appear where it's supposed to end. After this point the transition (top and bottom ones) always seem to be one step behind. If you click the 2nd div the transition starts from where it ended before i.e the previous div(which is wrong, it should start from the div you clicked) and ends in the middle, which is also correct. When you hit close it goes back to the correct div.
Is there some way around this? Tell the engine to update values manually or may be edit classes through javascritp? Any help would be appreciated.
Thanks
Transition according to google is:
the process or a period of changing from one state or condition to
another.
To have a transition you have to start with one state, and change it to another state. However, the state needs to be gradual, which means that you've got to wait a bit after setting the 1st state.
When you do this, you set the start top and left and then override them immediately using the visible class.
Note - I've changed the dimensions a bit, to fit the SO examples area. You can find the example with original dimensions here.
$(".popup").css("left", offset.left);
$(".popup").addClass("visible");
To prevent that, use a delay. I've used requestAnimationFrame.
I've also added cleanup for the top and left settings, after the popup closes.
$(document).on("click", ".heading", function(ev) {
var offset = $(this).offset();
var $popup = $(".popup");
//set the starting point
$popup.css({
top: offset.top,
left: offset.left,
visibility: 'visible'
});
//wait and start the show animation
requestAnimationFrame(function() {
$popup.addClass("visible");
});
});
$(".close").on("click", function(ev) {
var $popup = $(".popup");
$popup
//only when the hide animation ends we reset the popup
.one('transitionend', function() {
$popup.css({
top: '',
left: '',
visibility: 'hidden'
});
})
//start the hide animation
.removeClass("visible");
});
h1 {
color: red;
}
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 150px;
width: 200px;
top: calc(50% - 75px) !important;
left: calc(50% - 100px) !important;
}
.close:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="heading">heading 1</div>
<div class="heading">heading 2</div>
<div class="heading">heading 3</div>
<div class="popup">
rghe;roigegrh'ragjh oewighe ergj ergj rrgj ger[
<div style="margin:40px" class="close">close</div>
</div>
use below mentioned CSS code
.heading {
width: 100px;
height: 40px;
background-color: grey;
margin: 50px 0 150px 0;
padding: 10px;
}
.popup {
background-color: grey;
position: absolute;
height: 0;
width: 0;
opacity: 0;
-webkit-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-moz-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-ms-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
-o-transition: opacity 0.5s ease-out, width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out;
}
.popup.visible {
opacity: 1;
height: 250px;
width: 400px;
top: 400px !important;
left: 200px !important;
}
.close:hover {
cursor: pointer;
}
i have a logo image in sticky topbar menu so when scrolling down i'm trying to change the image width using css transition but it is not working with jquery window scroll when i add the css class to logo image but when i hover on the logo image it work
my code css
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.transition , .logo img:hover{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
js code
$j = jQuery.noConflict();
$j(function(){
$j(window).on("scroll", function () {
if ($j(this).scrollTop() > 100) {
$j('.logo img').addClass('transition');
console.log($j(this).scrollTop());
} else {
$j('.logo img').removeClass('transition');
console.log('cvc');
}
});
});
please any help and many thanks in advance.
You wants something like this ?
Just changed your selectors a bit. Because of the inheritance of .logo img, .transition wasn't suffisant to erase .logo img properties.
.logo img
{
width: 100%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
.logo .transition{
width: 50%;
transition:width 1s ease;
-moz-transition: width 1s ease;
-ms-transition: width 1s ease;
-webkit-transition: width 1s ease;
-o-transition: width 1s ease;
}
Using flickity carousel I've created the following example here in codepen.io link. Here is CSS code I've implemented:
CSS
.image-hoover {
overflow: hidden;
}
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
.image-hoover:hover img {
-moz-transform: scale(1.06);
-webkit-transform: scale(1.06);
transform: scale(1.06);
-webkit-transition: all 10s linear;
-moz-transition: all 10s linear;
-o-transition: all 10s linear;
-ms-transition: all 10s linear;
transition: all 10s linear;
}
The issue I can't figure out is that images loose responsive behavior only until I turn off this part:
.image-hoover img {
-moz-transform: scale(1.02);
-webkit-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
}
But in this case when you unhover the image returns back to it size very fast loosing the transition effect, can you please suggest how to figure out this issue?
1. Here the responsive behavior of image is present, but zoom effect on hoover loose transition.
2. In this example you can notice that transition works great, but if you resize the window images loose their responsive behaviour.
It happens because you said for the transition to apply on all actions, so the 10s transition happens also when the images change thier when the screen changes width.
You will need to change
-webkit-transition: all 10s ease;
-moz-transition: all 10s ease;
-o-transition: all 10s ease;
-ms-transition: all 10s ease;
transition: all 10s ease;
to
-webkit-transition: -webkit-transform: 10s ease;
-moz-transition: -moz-transform 10s ease;
-o-transition: transform 10s ease;
-ms-transition: transform 10s ease;
transition: transform 10s ease;
And remove the transition from the :hover.
This will now work.
Fiddle-http://codepen.io/anon/pen/eJWQRq?editors=110
I have:
<div class="button" id="button1">Click</div>
<div class="button" id="button2">Click</div>
and the JS
$('.button').click(function(){
$('.button').removeClass('selected');
$(this).addClass('selected');
});
CSS
.selected {
background-color: green;
}
Can I 'animate' the applying of the class 'selected'? I.e on a click of the div, the background slides in from the right or fades in for example? Is there a decent plugin available that could achieve this? Is there are a CSS workaround/method?
Simply use CSS3
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
Example
http://jsfiddle.net/tw16/JfK6N/
if you don't want to use CSS3 to support older Browsers use the done() callback of animate
$('.button').click(function() {
$('.button').removeClass('selected');
$(this).animate({
backgroundColor: green
}, 1000, "linear", function() {
$(this).addClass('selected');
});
});
You can use css3 for that. Use transition to background color change.
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
Here is the example with your code:
http://jsfiddle.net/mm9mV/