jQuery adding style on element - not possible transforming it after with CSS

Question

I have a main panel hided at first, and sliding when the web runs. It has this style:

.contentPanel {    
    top: calc(40% - 1px);    
    height: 50%;  
    padding:10px;
    font-size:1.2em;
    overflow-y: scroll;
    overflow-x: hidden;
    left: 20%;
   width: 75%;
}

.contentPanel{

   transition: transform 5000ms cubic-bezier(0.095, 0.725, 0.020, 1.005); 
}

When the website runs, jQuery calculates window's width and hides it translating X out of the window:

  $('.contentPanel').css('left',window.innerWidth+"px");

And, theorically, CSS should bring it to it's correct position by adding the class .expanded:

$('.contentPanel').addClass('expanded');

Which takes it to it's 0% translate X position:

.expanded {
    transform: translate(0%);
}

Problem: CSS makes just nothing because jQuery styles .contentPanel on its HTML tag, like this:

<div class="contentPanel expanded" style="left: 1366px;">

And even thow a translateX(0%) is being added, nothing moves due to the fact that X px are given on HTML's opening tag atribute.

Michael · Accepted Answer · 2014-07-21 14:27:14Z

1

I would make a wrapper that is 100% width (which is default) that you can utilize to hide .contentPanel. This way you only need toggle the class and not mess with $.css() at all.

http://jsfiddle.net/M8PQR/

HTML

<div class="wrapper">
    <div class="contentPanel"></div>
</div>

<a class="toggle">show/hide</a>

JAVASCRIPT

var $wrapper = $('.wrapper');

$('a.toggle').on('click', function() {
    $wrapper.toggleClass('expanded');
});

CSS

.contentPanel {    
    top: calc(40% - 1px);    
    height: 50%;  
    padding:10px;
    font-size:1.2em;
    overflow-y: scroll;
    overflow-x: hidden;
    margin: auto;
   width: 75%;
    background: deepSkyBlue;
}

.wrapper{
    transform: translate(100%);
    transition: transform 5000ms cubic-bezier(0.095, 0.725, 0.020, 1.005);
}

.wrapper.expanded {
    transform: none;
}

.toggle {
    cursor: pointer;
}

answered Jul 21, 2014 at 14:27

Michael

7,4243 gold badges26 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Biomehanika Over a year ago

That is a good answer. I did that before asking, and there are two reasons why I'd like to make it in other way:

Biomehanika Over a year ago

- there are 7 elements under this situation, each one with a separate animation and div, and 7 fullscreen divs on screen are very hard to navigate trough Firebug, for example. - links and buttons on any screen not being the first one were invalid, as those could not be clicked because the last of all fullscreen divs was the only one that could intercat with the user

Michael Over a year ago

Well you could just use 7 wrappers?

Biomehanika Over a year ago

Yes. But when the 7 are loaded an positioned, just the links and buttons placed on the last one added will be clickable. All the rest will be on deeper wallpapers and interaction of those with the user (click on a link, for example) will not be possible. I am about to try your method anyway and tell you then.

Ivan Sivak · Accepted Answer · 2014-07-21 14:15:57Z

0

Inline style has a higher priority. Try setting the left property to blank before adding a class "expanded". Like so:

$('.contentPanel').css('left',''); 
$('.contentPanel').addClass('expanded');

answered Jul 21, 2014 at 14:15

Ivan Sivak

7,5484 gold badges39 silver badges43 bronze badges

1 Comment

Biomehanika Over a year ago

Hi Ivan. Nope. As it is hidden due to it's element style given by jQuery, when taking that style out it just appears on screen without the sliding effect (it goes from 1366px to 0 without transition animation). Then when adding .expanded, it was already on its place

Ryan Mitchell · Accepted Answer · 2014-07-21 15:12:18Z

0

Couldn't you set left to auto before adding the .expanded class?

$('.contentPanel').css('left', 'auto').addClass('expanded');

That said, I think Michael's solution is the best over all.

EDIT

Or you can set .contentPanel to transform: translateX(-100vw), as the poster seems to prefer.

VW has pretty good support now. I would avoid VH for the time being, though, because VH is buggy in mobile Safari.

edited Jul 21, 2014 at 15:12

answered Jul 21, 2014 at 14:38

Ryan Mitchell

7445 silver badges8 bronze badges

6 Comments

Biomehanika Over a year ago

Nope. Auto left makes it go to the left without any margin and without animation.

Ryan Mitchell Over a year ago

Why not take a different approach and have .contentPanel automatically translated offscreen. Set it to a sufficiently large value (e.g., 5000px) .contentPanel { transform: translateX(-5000px); } and then have .contentPanel.expanded set to { transform: initial; }. If you're worried about the animation not being smooth because of the distance, setting up a custom easing curve should mitigate that problem.

Biomehanika Over a year ago

Thats also a solution but I think that would bve last option to get this. A TV will have more that 5000 px, and if we have methods to have in mind all possible situations, those should be fist tried. But I am very grateful for your help.

Ryan Mitchell Over a year ago

You could also say transform: translateX(-100vw) if that's a concern.

Biomehanika Over a year ago

Ops... caniuse.com/viewport-units many people coming from a mobile device will not have needed broweser version.. maybe detectig if it's a mobile device and setting a -1000px translation for those, and -100vw for the rest would be the best solution

|

Collectives™ on Stack Overflow

jQuery adding style on element - not possible transforming it after with CSS

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related