Change CSS div style (conditional?)

Question

Got a centered fullscreen main at the very middle of the webpage:

<div id="main"></div>

The main opens a default web:

<script>
$("#main").html('<object data="http://www.myweb.com"/>');
</script>

And two hidden sidenavs (one at the left and one at the right) showable through two buttons and with a list of links inside them. sidenavLeft pushes the main to the right when appears, and sidenavRight pushes the main to the left. The default main page can be changed just by clicking on the links inside the sidenav menus.

I can't figure out how to say to the #main, move to the right when the sidebarLeft is shown and to the left when the sidebarRight is shown. I think I need a CSS conditionals to do this, but as far as I know there is no conditional support in CSS.

/* if the sidebarRight is shown, push the page content to the left */
#main {

   transition: margin-right .5s;

}


/* if the sidebarLeft is shown, push the page content to the right */
#main {

   transition: margin-left .5s;

}

How can I do this with CSS/Jquery/javascript?

One possible way: handle visibility changes for left/right sidebar and add right CSS class... — Adriano Repetti
– Adriano Repetti, Commented Apr 5, 2016 at 11:08
You should always provide your full code in a snippet or a jsfiddle — jonny
– jonny, Commented Apr 5, 2016 at 11:08

Tinmar · Accepted Answer · 2016-04-05 11:13:45Z

2

In JQuery:

if ($("#sidebarLeft").is(':visible')) {
   $("#main").css("transition", "margin-right .5s");
}

Or better:

.transition-right {
   transition: margin-right .5s;
 }

if ($("#sidebarLeft").is(':visible')) {
   $("#main").addClass("transition-right");
}

Also, you should put that code on your button click handlers. So when button triggers show/hide to do something else too (change margins)

answered Apr 5, 2016 at 11:13

Tinmar

3704 silver badges23 bronze badges

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

2 Comments

user3321425 Over a year ago

Thank you very much, It's almost done, but all goes crazy because when sidebarLeft is open and I open the sidebarRight , then the #main lost the sidebarLeft transition and vice versa. This affects the transition on menu closure.

Tinmar Over a year ago

Glad I helped. If you want me to help you further, I'll need more of your code, with JSFiddle snippet. ;)

Collectives™ on Stack Overflow

Change CSS div style (conditional?)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related