Develop Reference

Strange transition behavior for inline elements styles in certain places

This is a jsfiddle example file that replicates the problem: https://jsfiddle.net/Lhr0d6cw/11/
I wanted the element (when clicked) to expand for 6seconds from its original position but notice that when you click the red card (or any card), it doesn't start expanding from the originals position it used to be, but rather from the middle, I assume that its because transition of 6s to top and left is not being applied for some reason.
Only places I was able to make it work properly so far are stackoverflow editor below or by inserting a debugger in the code and doing it manually but when using my localhost or jsfiddle it doesn't transition properly.
This is the same example on stackoverflow which works as desired:
const productCards = document.querySelectorAll(".products__card");
productCards.forEach(c => {
// console.log("clicked1");
c.addEventListener("click", openCard)
});
function openCard(e) {
console.log("clicked");
console.dir(this);
let top = this.getBoundingClientRect().top;
let left = this.getBoundingClientRect().left;
// this.style.transition = "top 0.9s, left 0.9s";
this.style.top = top + "px";
this.style.left = left + "px";
this.style.position = "fixed";
console.log(`top: ${top}, left: ${left}`);
// debugger;
this.classList.add("open");
}
.products {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
min-width: 1000px;
max-width: 1500px;
margin-bottom: 300px;
}
.products .products__card {
display: flex;
flex-direction: column;
width: 150px;
height: 250px;
margin-bottom: 30px;
margin-right: 30px;
margin-left: 30px;
background-color: red;
transform: scale(1);
/* box-shadow: 3px 7px 55px -10px c(very-light); */
transition: width 0.9s, height 0.9s, z-index 0.9s, top 6s, left 6s;
}
.products .products__card.card-1 {
background-color: red;
}
.products .products__card.card-2 {
background-color: blue;
}
.products .products__card.card-3 {
background-color: green;
}
.products .products__card.card-4 {
background-color: yellow;
}
.products .products__card.card-5 {
background-color: pink;
}
.products .products__card.card-6 {
background-color: gray;
}
.products .products__card.open {
width: 550px;
height: 800px;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: 120;
box-shadow: 0 0 1000px 1000px c(box-overlay);
}
<div class="products">
<div class="products__card card-1">
</div>
<div class="products__card card-2">
</div>
<div class="products__card card-3">
</div>
<div class="products__card card-4">
</div>
<div class="products__card card-5">
</div>
<div class="products__card card-6">
</div>
</div>
works when debugging:
The strange thing as mentioned above is that my problem in the browser using localhost is also solved when I insert debugger in the code and manually skip through the last step of adding .open class. If you have the same problem in jsfiddle or your own editor, try adding debugger; before this.classList.add("open"); and then open the console and then click the card and go over the last step manually in the console. you will notice that the card expanded from its original place as desired taking 6s to finish which means the transition was applied in this case.
My questions:
Why is transition for top and left only working in certain environments? is it a browser problem? I'm using the latest chrome. does someone know of a better way to achieve the same results?
code comments:
-obviously, 6 seconds is not what I will be using in my code, its used here just to make the transition obvious.
-In my source code, you can see that because I can't transition from position static to position fixed I had to use Javascript to add position fixed style inline to the element before the .open class is added, that way transition can take place properly when .open is added.
-I also added top and left values inline to keep the card in its original place when position: fixed style is applied because as you might know fixed position takes the element out of its flow, so top and left keep it in place.
-I added !important in css .open class because without it I can't override inline css as you might also know.
Thank you

I was able to solve my problem just now by applying a little hack. It seems that in some environments (localhost, jsfiddle) the javascript engine is adding the .open class faster than expected and the fact that it is working fine when debugging (slow process) indicated that to me. so I added a setTimeout() to the last piece of code delayed it by 20. this solved my problem and now it works fine on JSfiddle and on my computer. here is the new edited sample that works:
https://jsfiddle.net/Lhr0d6cw/14/
setTimeout(() => {
this.classList.add("open");
}, 20);
I would still like to know if there is a better way of doing this animation if someone would like to share!

Anchor doesn't work in chrome and safari browsers

I have a problem: an html anchor doesn't work in chrome and safari. The page goes down instead of up.
I have this HTML:
<a id="to-top"></a>
<a class="button toTop" href="#" onclick="document.getElementById('to-top').scrollIntoView(true);return false;">Вверх</a>
And this JavaScript code:
var topScreen = window.pageYOffset ? window.pageYOffset : document.body.scrollTop;
var myScreen = screen.availHeight;
if(topScreen > (myScreen / 3)) {
$(".toTop").fadeTo(0, 1.0);
}
else {
$(".toTop").fadeTo(0, 0);
SCSS:
.toTop {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 999999;
transition: opacity 1s ease-out;
outline: none;
&:hover {
transition-delay:0s;
}
a {
color: #fff;
text-decoration: none;
&:hover {
color: #000;
}
}
}
What is wrong? Besides, this element stays focused after click.

Now, since you have not set up a JSFiddle, it's difficult for us to exactly figure out what is happening in your project and what is expected. However, I have made a small fiddle that, I think, solves your problem.
HTML
<div id="to-top"></div>
<a class="button toTop" href="#to-top">Вверх</a>
CSS
#to-top {
height: 200vh;
}
The problem in your project is probably that you are trying to jump to another <a>-tag, while the anchor-jump only seems to work with divs that contain an id. Please try the fiddle I've added and see if changing the element of to-top to div works for you.
In the future, you should really add your own fiddle to a question though.

How to change css background-image on click?

I'd like to change the css "background-image:" when someone clicks a button.
I'm not sure if I'm able to change it through css or if I would need to incorporate java script. Also, if I need java script what type of code would I need?
My current work around is with css and it looks like:
.hello-button {
background-image: url("hello.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
-webkit-transition: 2s ease-out;
-moz-transition: 2s ease-out;
-o-transition: 2s ease-out;
transition: 2s ease-out;
}
.hello-button:hover {
background-image: url("bye.png");
background-repeat: no-repeat;
background-attachment: inherit;
background-position: center;
transition-delay: .7s;
-webkit-transition-delay: .7s;
-moz-transition-delay: .7s;
-o-transition-delay: .7s;
}

I'd approach it like this. http://jsfiddle.net/darcher/6Ex7h/
jquery
$('.img').on({
click: function(){
$(this).addClass('new-bg').removeClass('bg') // changes background on click
},
mousedown: function() {
// :active state
},
mouseup: function() {
// on click release
},
mouseenter: function() {
// on hover
},
mouseleave: function() {
// hover exit
}
/*
, hover: function(){
// or hover instead of enter/leave
}
*/
})
With these varying states, you can do anything you need. There are also a variety of other states you can use http://api.jquery.com/category/events/mouse-events/
html
<div href="#" class="img bg"></div>
css
.img{
background-repeat:no-repeat;
background-size:cover;
background-position:center;
display:block;
height:200px;
}
.bg{
background-image:url(http://placehold.it/300x200/white/black);
}
.new-bg{
background-image:url(http://placehold.it/300x200/black/white);
}
there are css only alternatives, but they're not really great on support: http://tympanus.net/codrops/2012/12/17/css-click-events/

You could use javascript for change the background. The following website javascripter is an example of changing background color and manipulating CSS by Javascript. I hope this can help you.

1. CSS pseudo-class selector:active
If you didn't care about persistence you could always use the the pseudo-class ":active". The image will only be affected as long as your mouse is down. As soon as you mouse-up it'll revert. At this moment, that's about as close as you can get in CSS.
.hello-button:active {
background-image: url("image.jpg");
}
JSFiddle Example: http://jsfiddle.net/pkrWV/
2. Change Style Attribute with JavaScript
JavaScript is just about the only way you're going to be able to click on an object, mouse-up and the background is still changed. JavaScript gives you a couple ways to do it too.
You can use JavaScript to change the object's style attribute to update the 'background-image'.
obj.style.backgroundImage = 'url("image.jpg")';
JSFiddle: http://jsfiddle.net/pkrWV/1/
3. Change Class Attribute with JavaScript
Or similarly, you could create two classes in your CSS, and use JavaScript to update the object's class attribute.
/* JavaScript */
obj.className = 'imageOneClassName';
/* CSS */
.imageOneClassName {
background-image: url("image.jpg");
}
JSFiddle: http://jsfiddle.net/pkrWV/2/
My personal favorite method is the third option where you still use CSS to style your obj in different states, and then you use JavaScript to change the class name to update those states. It's less JavaScript, more CSS, and you're keeping everything in their appropriate places.

$(function() {
$('.home').click(function() {
$(this).css('background-image', 'url(images/hello.png)');
});
}):
you have to do like this, there was a relative question see this i hope i helped you...
jquery onclick change css background image

There's no way to do this in pure HTML/CSS, but in javascript you can do it like so:
var button = document.getElementsByClassName("hello-button")[0];
button.addEventListener("click", function(){
button.style.backgroundImage = "url(bye.png)";
});
You can either include this in a <script></script> tag or add it to a .js file and include that by adding <script src="scriptName.js"></script>

Here's a CSS-only solution: http://jsfiddle.net/VVj6w/
HTML
<input type = "checkbox" id = "backgroundToggle" />
<label for = "backgroundToggle">Switch Background</label>
<div id = "wrapper"></div>
CSS
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type = "checkbox"] {
display: none;
}
label {
position: absolute;
top: 10px;
left: 10px;
background-color: #eee;
border: 2px solid #ccc;
padding: 5px;
border-radius: 10px;
font-family: Arial, Sans-Serif;
cursor: pointer;
}
#wrapper {
background-color: hsla(0, 100%, 50%, 1);
height: 100%;
width: 100%;
}
input[type = "checkbox"]:checked ~ #wrapper {
background-color: hsla(0, 100%, 50%, 0.1);
}

If you only want it to change while you are clicking, you should be able to use
.hello-button:active {
background-image: url("bye.png");
...
}
If you want it to remain that way after the click (after the mouse button has been released), you will have to use javascript. Something like the following
document.getElementsByClassName("hello-button")[0].addEventListener("click", function(el) {
el.classList.add("clicked");
});
Then in the CSS, update your selector to
.hello-button.clicked

Fade in Title using JQuery

I have the following HTML:
<div id="header">
<div id="logo_title">
<p> What's Playing? </p>
</div>
</div>
I want to make this fade in slowly when a user first visits the website. I'm using the following javascript:
$(window).load(function () {
$("#header").fadeIn(10000);
});
Here's the CSS:
#logo_title, #logo_subtitle{
height: 45px;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
font-size: 80px;
z-index: 4;
text-align: center;
margin: 100px 0px 0 0;
line-height: 75px;
}
It doesn't seem to be working though. Any idea on what I'm doing wrong? I'm new at this!
Thanks!

All jQuery animations that change an element’s display to or from none don’t take effect if the element is already in that state. You’ll need to hide it first.
$("#header").hide().fadeIn(10000);
Use $(document).ready, not $(window).load. In fact, you may want to eschew the variety of events in favour of putting the <script> block directly beneath the header element to minimize FOUC. Of course, that’s not necessary when you can…
Accomplish this with CSS. (You might need to duplicate each of these with a -webkit- prefix, too.)
#keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
#header {
animation: fade-in 10s linear;
}
That seems like a bit of an annoying animation. Are you sure it’s necessary?
This is just a guess, but you could maybe use more descriptive HTML:
<header id="header">
<h1 id="title">What’s Playing?</h1>
</header>

Start off by setting your #header to display: none, i.e.
#header{display:none;}
then start the animation with
$(document).ready(function () {
$("#header").fadeIn(3000);
});
See jsFiddle.

How can I get nav links to animate when the mouse hovers over them?

Im trying to get each link to animate up when the user hovers over them, what is the best way to do this?
my code is
<ul class="nav">
<li>Batting</li>
<li>Bowling<li>
<img class="logo" src="images/logo.gif" width="125" height="125">
<li>Fielding</li>
<li>The Game</li>
</ul>
thanks.

Yes, this is possible to add hover animation on any element using purely HTML markup and CSS.
.animated
{
transition: prop;
prop: value1;
}
.animated:hover
{
prop: value2;
}
Where prop is the CSS property that you wan't to be animated. This works very well in most browsers. Also, it is possible to create this behavior with scripts as well.
With your markup, the best and easiest script-free solution to animate is to use :hover and transition. Here is a fiddle how to animate margin-left: http://jsfiddle.net/9kpfW/
You can animate any property with a numeric measure. (12px, 12em, 12% etc.) It is possible to add hover affects with non-numeric properties (i.e. text-align) as well, but you can't apply a transition. Also, it is possible to animate multiple properties on the same element using transition.
So, you can create very rich effects purely with CSS. No JavaScript is necessary. :hover effects work well in almost every browser, including ancient versions of Internet Explorer. However, if you need to support outdated browsers with the same animated transition effect, you need to use JavaScript, which is supported and enabled in almost every browser. I recommend using jQuery JavaScript library to simplify your scripts.
Based on luckyamit's answer, here is a trivial example of the same margin-left animation using jQuery. This works well in almost any web browser, including ancient versions.
$(".nav li").hover(
function()
{
$(this).find("a").stop().animate({"margin-left" : "40px"});
},
function()
{
$(this).find("a").stop().animate({"margin-left": "5px"});
}
);
Fiddle: http://jsfiddle.net/LxAva/1/
However, if you don't need to serve the same experience in those rare browsers, I recommend the pure-CSS solution, because of the principle of decoupling markup, style and logic. Rich transition effects are way more related to style than logic, so they should be solved with CSS instead of JavaScript. Also, in most cases CSS is easier and faster to implement.

You can try below one using jQuery.
$('.nav a').mouseover(function(){
//add animated changes here
}).mouseout(function(){
// add the default behavior here
})

just try this
//HTML
<ul class="nav">
<li>Batting</li>
<li>Bowling<li>
<img class="logo" src="images/logo.gif" width="125" height="125">
<li>Fielding</li>
<li>The Game</li>
</ul>
//SCRIPT
$(".nav").hover(function(){
$(this).stop().animate({"top" : "10px"});
}, function(){
$(this).stop().animate({"top": "0"});
});
//CSS
.nav
{
position: relative;
}
Here is the DEMO for you, just check it.

Here's a FIDDLE
<ul class="nav">
<li><img class="logo" src="images/logo.gif"/></li>
<li>Batting</li>
<li>Bowling</li>
<li>Fielding</li>
<li>The Game</li>
</ul>
ul {
list-style: none;
}
li {
background: #555;
float: left;
margin-right: 15px;
text-align: center;
border: 1px solid #333;
transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
li:hover {
margin-top: -22px;
}
li a {
display: block;
height: 25px;
width: 120px;
color: #fff;
letter-spacing: 1px;
text-decoration: none;
padding-top: 4px;
}
jQuery solution
$('li').hover(function() {
$(this).stop().animate({ marginTop: '-22px' }, 450);
},function() {
$(this).stop().animate({ marginTop: '0' }, 450);
});
Changes in CSS - transition property removed.
li {
background: #555;
float: left;
margin-right: 15px;
text-align: center;
border: 1px solid #333;
}
li:hover {
}