Modifying the style of an element with jQuery makes it difficult to change it later using CSS

Question

Modifying the style of an element with jQuery makes it difficult to change it later using CSS

Initially, I have a main panel hidden and set to slide out when the website is running. The CSS styling for this panel is as follows:

.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); 
}

As the website starts running, jQuery calculates the window's width and hides the panel by translating it out of view on the X-axis:

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

Then, in theory, CSS is supposed to move the panel back to its correct position by adding the .expanded class:

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

This should translate the panel back to its original position at 0% on the X-axis:

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

However, there is a problem where CSS does not take effect because jQuery styles the .contentPanel directly on its HTML tag, like so:

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

Even though a translateX(0%) is added in the CSS, nothing appears to happen since the pixel value is given in the HTML attribute.

jquery html css transform

Answer 1

Answer №1

To simplify the process, I suggest creating a wrapper with 100% width by default that can be used to hide the .contentPanel effortlessly. With this approach, you will only need to toggle the class without having to deal with $.css() at all.

For a visual representation and code demonstration, please check out the following link:http://jsfiddle.net/M8PQR/

Here is an example of how you can implement this:

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

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

In terms of JavaScript, you can use the following snippet:

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

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

And for the CSS styling:

.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;
}

Answer 2

To simplify the process, I suggest creating a wrapper with 100% width by default that can be used to hide the .contentPanel effortlessly. With this approach, you will only need to toggle the class without having to deal with $.css() at all.

For a visual representation and code demonstration, please check out the following link:http://jsfiddle.net/M8PQR/

Here is an example of how you can implement this:

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

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

In terms of JavaScript, you can use the following snippet:

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

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

And for the CSS styling:

.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;
}

Answer 3

Answer №2

In the world of CSS, inline style reigns supreme. To ensure that a class called "expanded" takes priority over any existing left property, clear out the left property before adding the class:

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

Answer 4

In the world of CSS, inline style reigns supreme. To ensure that a class called "expanded" takes priority over any existing left property, clear out the left property before adding the class:

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

Answer 5

Answer №3

Have you considered changing left to auto before applying the .expanded class?

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

Although, I must say, Michael's solution seems to be the most effective.

UPDATE

Another option is to set .contentPanel with transform: translateX(-100vw), which the original poster appears to prefer.

Viewport Width (VW) units are now widely supported according to current data. However, it's best to avoid using VH for now since it causes issues on mobile Safari.

Answer 6

Have you considered changing left to auto before applying the .expanded class?

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

Although, I must say, Michael's solution seems to be the most effective.

UPDATE

Another option is to set .contentPanel with transform: translateX(-100vw), which the original poster appears to prefer.

Viewport Width (VW) units are now widely supported according to current data. However, it's best to avoid using VH for now since it causes issues on mobile Safari.

Modifying the style of an element with jQuery makes it difficult to change it later using CSS

Answer №1

Answer №2

Answer №3

Similar questions

The border should not start at the left of the page; instead, I would like it to begin at the letter "T" in "Tech."

Changing the font family for Bootstrap Glyphicons on a button

Retrieving the title property with the power of JavaScript

There is zero gutter in Bootstrap

Switching effortlessly between Fixed and Relative positioning

How can I access a child div in the parent element that I am

Error in Google Translate API AttributeError

Connect the scroll wheel and then proceed to scroll in the usual way

Animation unveiling of text slides

Searching with jQuery autocomplete and displaying the results within a div

Having trouble passing variables via URL when using PHP and AJAX

Instructions for altering the hue of a canvas square when the cursor hovers over it

Problem with IE8 compatibility in CSS

Ways to sort data based on dropdown selection in MVC Razor

Bootstrap does not have the capability to add additional background layers

What methods can be used to center a Google map on a specific location?

Eliminating padding from columns results in the appearance of a horizontal scrollbar

Guide to setting the ng-selected value within AngularJS

Combining and consolidating JSON attributes

JS Code from a JS Fiddle failing to run in a web browser examination