Change the content of a style class - javascript

I use css to have animation (using transition) in a div. The content of the div is dynamical (can be 1 line or multiple lines).
I have 2 classes I switch to get the animation effect:
.class1{
max-height: 200px;
}
.class2{
max-height: 0;
}
My problem occurs when the I have only 1 line in the div, so there's "delay" until the 1 line disappears (because the height changes from 200px to 0 while the actual size is only 30px).
I tried to use element.style.maxHeight = elem.offsetHeight + "px" to set the max-height size but it didn't work so I want to change max-height in the class (class1 or class2) to fit the actual size.
How can I change the content of a class (I don't want to have: "style = max-height: 100px" in my div)?

You could use the transition in combination with the transform.
Not only because solve your problem, but also because has better performance then change the height.
Doesn't make sense changing the height and using CSS, in terms of performance you can use JS, it is the same.
I did an example for you on jsfiddle because on here seems to do not work.
jQuery(document).ready(function() {
jQuery('.click-me').on('click', function() {
var $this = jQuery(this);
if ($this.hasClass('show')) {
jQuery(this).removeClass('show').addClass('hide');
}
});
});
.hide {
transform: translateY(-100%);
z-index: -1;
}
.show {
transform: translateX(0);
z-index: 0;
}
.animate {
transition: transform 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parent">
<div class="click-me animate show">
<div>one line</div>
</div>
</div>

Related

JavaScript media query vs CSS media query

I've noticed that the JavaScript media query seems to take effect after the CSS equivalent ones.
I've created two examples demonstrating what I'm talking about:
First example
HTML:
<div class="foo">
bar
</div>
CSS:
.foo {
background-color: orange;
}
#media(max-width: 300px) {
.foo {
background-color: blue;
transform: translateY(100px);
transition: all 300ms ease-out;
}
}
jsbin link is: here
Here transition happens, when screen width becomes 300px or less from something bigger.
But when creating responsive design such transition can be annoying. I'm trying to get rid of them. The following Javascript and CSS solves the problem, but I'm not sure that is it reliable or not.
2nd example
HTML
<div class="foo">
bar
</div>
<button>toggle translateY to 200px</button>
CSS
.transition {
transition: all 300ms ease-out;
}
.foo {
background-color: orange;
}
#media(max-width: 300px) {
.foo {
background-color: blue;
transform: translateY(100px);
}
}
.translateY {
transform: translateY(200px);
}
JavaScript:
const w = window.matchMedia("(max-width: 300px)");
const div = document.querySelector(".foo");
const button = document.querySelector('button');
function fun(e) {
if (e.matches) {
div.classList.add('transition');
} else {
div.classList.remove('transition');
}
}
// for initial screen width change detection
fun(w);
w.addEventListener('change', fun);
button.onclick = function() {
div.classList.toggle('translateY');
}
jsbin link is here
Here it seems the following thing happens in order when screen width becomes 300px or less from something bigger:
CSS transform: translateY(100px) is rendered in a flash.
transition class is added to div by JavaScript.
By clicking the button, it makes sure that the transition class is working.
This example doesn't cause any unwanted transition as screen size becomes 300px or less from something bigger.
So it seems that any CSS media query is rendered before JavaScript equivalent media queries. I think it's a good thing. But I'm not sure, is it the standard well supported behavior? Is it safe to build logic based on this behavior?
This is part of the CSS specificity
Inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
The javascript code you posted will add inline styles (through the style property of the element) and thus has the highest specificity. (it has nothing to do with the js media query, it just has to do with how you apply the style in the JS to the element)
Update after the comments/update in question
Again it depends on when you load the CSS and the JS. If you first include the CSS file, since it is a render blocking resource, it will be applied first.
I am not sure though, why don't you apply all the rules through CSS media queries ?
const div = document.querySelector(".foo");
const button = document.querySelector('button');
button.onclick = function() {
div.classList.toggle('translateY');
}
.foo {
background-color: orange;
}
#media(max-width: 300px) {
.foo {
background-color: blue;
transform: translateY(100px);
transition: all 300ms ease-out;
}
}
.translateY {
transform: translateY(200px);
}
<div class="foo">
bar
</div>
<button>toggle translateY to 200px</button>

How can I make this Jquery animate() with css3 animations?

This is my jfiddle
And this is my actual code
$card.animate({
left: "1000px"
}, 500, function(){
$card.hide(500);
});
(I dont know why 'left' didnt work on jfiddle) Basically ive got a container with 5 $cards there. When user swipes the card (already implemented) the animate() is triggered and the card slides to the rightand then disappears. How can I implement such thing in CSS animations instead of using Jquery? Ive read that CSS animations run faster (and I proved it on my mobile device, the hide() runs really slow)... Any help or advice will be appreciated
First of all, create a class that you can trigger via jQuery that will have the animation.
Then, using you have two options: transition or animation. Transitions are simpler and more direct, but you can do more with animations.
Here is how I would suggest to do it: a transition for the movement, and an animation to recreate the hide() function.
#keyframes hide {
99% { display: auto; }
100%{ display: none; opacity: 0; }
}
.myelement {
transition: all .5s;
position: absolute;
left: 0;
}
.myelement.toLeft {
left: 2000px;
animation: hide .5s 1 forwards;
}
To trigger it, simply do this:
$(".myelement").addClass("toLeft");
Here is a working JSFiddle.
And like #MohitBhardwaj said, it is necessary for you to set position to absolute, relative, or static in order for positioning (i.e., the left property) to work.
It's also important to note that a transition needs an initial value. I added left: 0 to do this. Otherwise, (with a CSS transition) it would simply jump to 2000px because there is no starting point.
Also, because 2000px as a left value is very large, I suggest you change the parent element's scroll to overflow: hidden, so that the extraneous scroll bar doesn't appear.
Your left didn't work, because you need to set position to a value other than static (which is default) for it to work.
As for using CSS, you can add a class instead of animating in jQuery. This class can change the transition which you can set in css as per your requirements.
var my_div = $('.myelement');
my_div.on('click', function() {
var $this = $(this);
$this.addClass("gone");
setTimeout(function(){
$this.hide();
}, 600 );
})
#mywrapper
{
overflow: hidden;
}
.myelement {
height: 200px;
width: 200px;
background-color: red;
opacity: 1;
position: relative;
transition: all 0.5s ease;
opacity: 1;
left: 0px;
}
.myelement.gone
{
left: 500px;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mywrapper">
<div class="myelement">
Click me please
</div>
</div>

How to add delay in css hover on a div that was displayed none?

My first div is a simple blue square, my second div is a simple red square with display:none;. when hover the first one (the blue one) the second appears with text and image etc.. but what i want is a simple effect of delay or sliding (if possible, but if not a simple delay would be cool) i'm working on it from 2hours without any success, please any help ?
This is the jsffidle example here
this is my code :
<div class="first">
<div class="second">
<h1 class="hover-title">Hello ! </h1>
</div>
CSS :
.first{
transition-delay:2s;
width:100px;
height:100px;
background-color:blue;
}
h1{
color:gold;
}
.second{
display:none;
background-color:red;
}
.first:hover .second{
display:inline-block;
width:100%;
height:100%;
}
Thank you all.
CSS only solution
I didn't start with your example because you were missing some notions that are important to have in mind when trying to create a sliding div upon an initial one. Let me explain :
JSFiddle
HTML
<div class="content-container">
<div class="content-teaser">
Catchy teaser here
</div>
<div class="content-description">
Description that might be longer than the catchy teaser sentence <button>see more</button>
</div>
</div>
CSS
.content-container {
width : 100px;
height : 140px;
position : relative;
overflow : hidden;
}
.content-teaser {
width : 100px;
height : 140px;
background : blue;
position : absolute;
color : white;
}
.content-description {
width : 100px;
height : 140px;
background : red;
position : absolute;
margin-top : 140px;
transition : .25s;
}
.content-description:hover {
margin-top : 0px;
}
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Explaination
You see 3 <div></div> :
The parent, this is the one which will help us hide the "hidden" div that is in fact marged, but you don't see it because of the property overflow : hidden
The "teaser" div that is the one which is displayed by default
The "hidden" div that is marged and so hidden because of the property right above
So the trick is to use this famous overflow : hidden. You first set all your divs, parent and children, the same width and height. Then, you want to use a special position property to put the "hidden" div on top of the "teaser" div using position : absolute for each one. So the parent will naturally have the position : relative to tell your children div to be position relatively to this div, because by default <body> is in position : relative.
Then, you applyied overflow : hidden to the parent, so when marging the future "hidden" div you will not see it.
Finally, you can use some CSS to alter an element according to the event of an other using + selector. So the following CSS :
.content-teaser:hover + .content-description {
margin-top : 0px;
}
Means :
Put a margin on the div that have the class .content-description when the div with the class .content-teaser is :hovered.
This CSS code may help you to find the solution.
.second{
display:inline-block;
height: 100%;
width: 100%;
background-color:red;
opacity: 0;
transition: opacity 0.5s ease;
}
jsfiddle
You can use css transitions like
#my_div:hover{
/*Your styles placed here*/
-moz-transition:all 1s linear;
-webkit-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
In my case 1s is the delay time, you can change that to any value you like

Can you fix a div and make it change opacity, size and position as you scroll with CSS3

I'm not even sure how to search this question. But effectively I'm trying to figure out how this website is achieving this fixed opacity/size changing effect on their table: http://sqlzoo.net/wiki/SELECT_within_SELECT_Tutorial . If you scroll down you'll see the effect on the table. When you hover over it it pops out having the data more visible.
The only thing I can think of is using a fixed div that when scrolled past a certain point triggers a jquery UI event that shrinks while decreasing opacity and then an on hover event that reverses this effect.
Achieving this animation in the way I described above seems inefficient and I'm not sure if more (or all) can be done with CSS3. So basically can you achieve the effect shown on the page provided completely or almost completely in CSS3.
Also i looked at the source of the page and couldn't fish it out of the css and scripts they include.
Here's a fiddle of what I have so far. Haven't started on scrolling yet:
HTML
<div id="stuff">Blahblah</div>
CSS
div {
width:250px;
height:250px;
border:2px solid #a1a1a1;
}
JavaScript
$( "#stuff" ).click(function() {
$( "#stuff" ).animate({
width: "20%",
height:"20px",
opacity: 0.4
}, 1500 );
});
http://jsfiddle.net/thed0ctor/1kx5jg1e/
You could do this easily with a combination of CSS3 transform and a bit of Javascript / jQuery:
Demo Fiddle: http://jsfiddle.net/abhitalks/hcwyth8n/2/
Relevant CSS:
#hanger {
width: 200px; height: 200px;
background-color: #00f;
position: fixed; /* Position fixed important */
top: 10px; right: 10px;
opacity: 1;
transition: 0.5s all; /* Animate transitions */
}
#hanger.dim { /* Style to make it appear dimmed */
transform: scale(.75); /* Make it smaller */
opacity: 0.5; /* Make it dimmer */
}
#hanger.dim:hover { /* To change back on hover only when it is dimmed */
transform: scale(1); /* Back to original size */
opacity: 1; /* Back to original opacity */
}
Relevant jQuery Code:
$(window).on("scroll", function() { /* When window scrolls, */
if ($(window).scrollTop() > 50) { /* Check if it scrolls more than 50 pixels */
$("#hanger").addClass("dim"); /* Apply class dim */
} else {
$("#hanger").removeClass("dim"); /* Otherwise remove class dim */
}
});
Hope that helps.
.
Pseudo code only:
window.scroll(function(){
if (window.scrolltop > selectedElement.offset().top){
selectedElement.animate({
transform: scale(.75),
opacity: .5
position: fixed
});
}else{
selectElement.animate({
transform: scale(.75),
opacity: 1
position: static
});
}
});
The links provided in the he pseudo code should point you in the right direction.

Fade background image in and out with jQuery?

So far, I've tried a bunch of things to the effect of the following, without success:
<script type="text/javascript">
var x = 0;
while (true) {
/* change background-image of #slide using some variation
of animate or fadeIn/fadeOut with or without setTimeout */
x++;
}
</script>
Any ideas?
You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.
Here's a quick example of images fading one after the other.
HTML
<img src=".." />
<img src=".." />
CSS
img{
position:absolute;
z-index:-1;
display:none;
}
jQuery
function test() {
$("img").each(function(index) {
$(this).hide();
$(this).delay(3000* index).fadeIn(3000).fadeOut();
});
}
test();
Check working example at http://jsfiddle.net/RyGKV/
You can fade backgound-images!
in and out!
jQuery:
$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);
Edit:
This will fade the whole div not onley the background-image.
Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...
Here's an example
I got here because I was looking for a solution to fading background images based on a <select> option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.
This initially stacks two identical images on top of each other. When the <select> is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none" which needs to be removed at the beginning of the operation, otherwise it doesn't work.)
Hope this is useful to someone else and not too irrelevant to be included here!
Here a demo to fade background-image by using the opacity and transition CSS properties with javascript/jQuery:
$( document ).ready(function() {
$( "#textarea" ).focusin(function(){
$( "#blur" ).css({
"opacity" : "1.0",
"transition" : "opacity 600ms ease-in-out"
});
}).focusout(function(){
$( "#blur" ).css({
"opacity" : "0",
"transition" : "opacity 600ms ease-in-out"
});
});
});
body {
background-size: cover;
background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg");
}
#textarea {
width: 50%;
}
#blur {
position: absolute;
height: 100%;
width: 100%;
background-size: cover;
background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5");
top: 0;
left: 0;
opacity: 0;
z-index: -1;
}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="textarea" type="text" placeholder="Focus here to trigger the transition...">
<div id="blur"></div>

Categories