CSS Transitions Not working after toggleClass()

Question 1

85Ryan’s Question:

I created a toggle-menu, like the DEMO.

I add a css transition effect for div.nav-menu , and i used max-height:0; to max-height:480px; .

When click the menu toggle to show the menu, the transition was working good. But when I click the menu toggle to hide the menu again the transition didn’t work now.

What did I did wrong?

Answer

Starx

You are wrong about CSS Transitions. They do not animate when you add or remove class, It will only animate when you change the CSS properties. And You are directly adding and removing classes.

Here is your solution:

$( '.menu-toggle' ).on( 'click', function() {       
    if(nav.hasClass('toggled-on')) { 
         menu.css('maxHeight', 0); 
       //^ Here is changed the 'max-height` first so that the 
       //  Transition animation will trigger first
    } 
    nav.toggleClass( 'toggled-on' ); //Then only I toggled the class
} );

Updated Fiddle

Question 2

LimitBreaker15’s Question:

LimitBreaker15

What am I doing wrong here?
I’m trying to get the id of the hovered div through the class, then add the string ‘-slide’ to activate the supposedly sliding transition for each .content.

<html>
<head>

<script>
$('.try').hover(function() {
    $(this.id + '-slide').css('right','0px');
});
</script>

<style>
.try {
    width: 50px;
    height: 50px;
    border: 1px black solid;
    margin-bottom: 5px;
 }

.content {
    width: 100px;
    height: 100%;
    background-color: grey;
    position: fixed;
    top: 0;
    right: -50px;
    transition: all 1s ease;
}
</style>

</head>
<body>
<div id="one" class="try"></div>
<div id="two" class="try"></div>
<div id="three" class="try"></div>
<div id="one-slide" class="content"></div>
<div id="two-slide" class="content"></div>
<div id="three-slide" class="content"></div>
</body>
</html>

Answer

Palash Mondal

Try this:

$(".try").hover(
  function () {
    $('#' + this.id + '-slide').css('right','0px');
  },
  function () {
    $('#' + this.id + '-slide').css('right','-50px');
  }
);

FIDDLE DEMO

Answer

Starx

To select a particular element in jQuery you need # for id and . for classes just like css.

You probably need this

$("#" + this.id + '-slide').css('right','0px');

Question 3

Derek Henderson’s Question:

Derek Henderson

I know there is a CSS fallback for calc() for IE6-7. Likewise, I know there is a jQuery alternative.

However, is there a CSS-only fallback for calc() for IE8? If so, what is it?

Answer

Starx

There is no support dynamic properties above IE 8

Dynamic properties (also called “CSS expressions”) are no longer supported in Internet Explorer 8 and later, in IE8 Standards mode and higher.

Source: Read this

Question 4

Question by Mishkat Islam

Mishkat Islam

I want to show Gotham-Light on the web with css codding but I can’t code. I have two fonts named Gotham-Light.eot, Gotham-Light.ttf. Now How can I use on the browser? Please help me.

Answer

Answer by Starx

Starx

Define your font like this:

@font-face{
   font-family: gotham-light;
   src: url('gotham-light.ttf') url('gotham-light.eot');
}

And use it as you would normally

#someelement {
    font-family: gotham-light;
}

Question 5

Question by Wanny Miarelli

Wanny Miarelli

I ran into a little problem with CSS.
I’m following a book to learn CSS3 and I just discovered the function Transition.
So I decided to make an attempt to try and I can not figure out where I’m wrong, I hope you can help me.

This is my Index.html file

<html>
<head>
    <title>My Test</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

<div class="box"></div>
<div class="ssin"></div>

</body>
</html>

nothing special ! and this is the main.css

.box{
    height: 200px;
    width: 200px;
    background-color: #333333;
}

.ssin{
    height: 200px;
    width: 200px;
    background-color: red;
}

.box:hover .ssin{
    width: 500
}

i think the problem is around here …

.box:hover .ssin{
    width: 500;
}

if I go with the mouse. box does not happen anything, but instead should, theoretically, change the width of ssin

Can you help me ( i know its stupid, but am learning )

Sorry for my bad eng.

Thank you

Answer

Answer by Jeremy T

Jeremy T

In the HTML you have posted there, ssin is not inside box. .box:hover .ssin selects something with the class ssin inside box. I believe what you want here is the adjacent sibling selector: .box:hover + .ssin

Answer

Answer by Starx

Starx

Since you are trying to look into CSS3 Transition, I will assume you are trying to increase the size of the box. SO, your markup is slightly wrong. The ssin should be inside the .box

<div class="box">
    <div class="ssin"></div>
</div>

And add the transition css to your code

.ssin {
    -webkit-transition: all 0.5s linear;
       -moz-transition: all 0.5s linear;
            transition: all 0.5s linear;
}

Question 6

Question by Asmastas Maz

Asmastas Maz

http://asifslab.com
I want to lighten the area behind and near the logo on which the logo is located. The purpose for this is because the border of the logo is mixed with the background. Please help

Answer

Answer by Starx

Starx

You can add a background with rgba property to give a fake light background.

Try this

#logo {
   background-color: rgba(255,255,255, 0.5);
   /* Then other css */
}

In your case, modify your .head to this

.head {
  padding-left: 5%;
  background-color: rgba(255,255,255,0.5);
}

Question 7

Question by Zettam

Zettam

I’ve been searching about CSS lately, trying to teach myself the tricks.
One another issue I’ve encountered is directly related to the display: attribute.

I’ve been trying to get the width of the background element for my “menu buttons” as wide as the text they contain. The buttons are simply <div> elements.

When I use display:block; all of their width appear as wide as the longest item, and when I set it to display:inline; or display:inline-block they simply appear on the same line, just like how an inline element works.

Now, what I’m wondering is, how can I make them appear like a list, but still make the background color only as long as the text it contains?

Answer

Answer by Starx

Starx

Use a markup structure like this

<ul id="menu">
<!-- By the use of UL you can have the menu displayed as list -->
    <li><a href="#">Home</a></li>
    ...
</ul>

And apply the background CSS on the #menu li a

#menu li a {
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */

    background: url("../src/to/img.jpg");
}

Question 8

Question by Rahul TS

Rahul TS

I will start with an example

I have something like this. Same id name with different ending numbers.

#samplelist_1 { color: #fff; }
#samplelist_2 { color: #fff; }
#samplelist_3 { color: #fff; }
#samplelist_4 { color: #fff; }

and these css are automatically generated. So I want to declare and define a css for #samplelist_.. which will affect all the #ids generally. So any #ids generated say: _15, _86 or anything like that can be styled.

Is that possible.

Please let me know, if the explaination make sense

Thanks in advance.
Rahul TS

Answer

Answer by Blender

Blender

You can use the attribute starts-with selector:

[id^="samplelist_"] {
    color: white;
}

Better yet, give them a class.

Answer

Answer by Starx

Starx

Don’t generate such redundant styles, instead use class to apply same style to multiple element at once. Thus, eliminating the need to go look for such stupid solution on first place.

If not going for cross-browser compatible CSS then you can do something like

[id^="samplelist_"] {
    color: #FFF;
}

Let me explain this selector in detail

[id]: means it is going to match the id attribute of the element
^=: means if the value starts with ....

Combined it says “if id starts with samplelist_” then apply this style.

Question 9

Question by Lasse Dahl Ebert

Lasse Dahl Ebert

In CSS, is it possible to recursively select all :last-child from body?

Given this markup:

<body>
  <div id="_1">
    <div id="_2"></div>
  </div>
  <div id="_3">
    <div id="_4">
      <div id="_5"></div>
      <div id="_6"></div>
    </div>
  </div>
</body>

I am looking for div no. 3, 4 and 6

Another way to put it is this:

body > :last-child,
body > :last-child > :last-child,
body > :last-child > :last-child > :last-child,
body > :last-child > :last-child > :last-child > :last-child {
  /* My stuff here */
}

But obviously this is not a good approach.

Answer

Answer by BoltClock

BoltClock

No, unfortunately that’s just about the only way to do it without modifying the HTML.

There has been at least one request for recursive versions of the :first-child and :last-child pseudo-classes, but it doesn’t seem to have gained much favor. Notice it suggests nesting and repeating the pseudo-classes in the same way as in your question:

Currently, AFAIK, we can only match children up to some exact nesting level known in advance (3 in the example below):
.container > :first-child,
.container > :first-child > :first-child,
.container > :first-child > :first-child > :first-child {}
We cannot use just :first-child context selector since it would also select first children of blocks that are not first children themselves.

So we need a sort of recursive selector that matches not just first of last child, but recursively matches all first-most and last-most elements regardless of their nesting level.

Answer

Answer by Starx

Starx

No need to chain all the way. It would be simply like this

div:last-child {
   /* Your GREAT css */
}

Demo

Update: On that case, give the div2 a typical class and use :not() to push out of the selection

div:last-child:not(.nolist) {
    border: 1px solid red;
}

Demo

Question 10

Question by Diwash Regmi

Diwash Regmi

I am getting problems on using multiple images in the background of my web pages. I used the following codes for it:

body{
background-image: url(images/img1.png), url(images/img2.png); }

The code I used gives me two images on background but I want to keep one of the image exactly on the center. How can it do so using CSS?

Answer

Answer by Starx

Starx

Yeah, you can do it like this

body {
    background-image: url(images/img1.png), url(images/img2.png);
    background-repeat: no-repeat, repeat-x;
    background-position: center, top left;
}

Check a demo here.

Tag: css3

CSS Transitions Not working after toggleClass()

85Ryan’s Question:

Get id + additional string through jQuery to activate CSS3 transition

LimitBreaker15’s Question:

Is there a CSS-only fallback for calc() for IE8

Derek Henderson’s Question:

How can I use @font-face with Gotham-Light font?

Question by Mishkat Islam

Answer by Starx

CSS3 – Transition

Question by Wanny Miarelli

Answer by Jeremy T

Answer by Starx

Lighten an area using css

Question by Asmastas Maz

Answer by Starx

Inline-block, Inline, Block

Question by Zettam

Answer by Starx

General CSS for #id ending with numbers

Question by Rahul TS

Answer by Blender

Answer by Starx

Select recursive :last-child. Possible?

Question by Lasse Dahl Ebert

Answer by BoltClock

Answer by Starx

Demo

using multiple image on background

Question by Diwash Regmi

Answer by Starx

Please fill the form - I will response as fast as I can!