Javascript to change div width dynamically

Question

Can anyone help me out to create a javascript?

Let me explain, i have 2 divs

1) left div width 85%
2) right div width 15%

so there is what i want to change width for left div. like, if i remove or hide right div, left div width should 100% dynamically with javascrpt.

Without code in here, people don't find easy to answer your question. Create Demo — divy3993
– divy3993, Commented May 18, 2015 at 15:15
you guys also can see what i am trying to do client-acumenadagency.com/sed — HMS Designz
– HMS Designz, Commented May 18, 2015 at 15:17
this div need to be full width if the other div hide <div id="Resize" class="content-left"></div> and the other div is <div id="button" class="navbar right"></div> — HMS Designz
– HMS Designz, Commented May 18, 2015 at 15:20
I would recommend you don't do this with JavaScript. Do it with CSS instead. Only use JavaScript to set the classes. — Halcyon
– Halcyon, Commented May 18, 2015 at 15:21

divy3993 · Accepted Answer · 2015-06-04 06:52:41Z

3

I have done it using JavaScript:

WORKING : Demo 1

UPDATED : Demo 2

UPDATED : Demo 3 : Animate slide in/out with CSS transitions.

HTML

<div class="wrapper">
<span class="div1"></span><span class="div2"></span>

</div>
<button>Remove</button>

CSS : UPDATED

html, body {
    width:100%;
    margin:0;
}
.wrapper {
    width:100%;
    display:inline-block;
    height:auto;
    float:left;
}
.div1 {
    display:inline-block;
    width:85%;
    height:40px;
    background:#333;
}
.div2 {
    display:inline-block;
    width:15%;
    height:40px;
    background:green;
}
 /*ADDED BELOW LINES*/

 .div1, .div2
 {
  /* Change Seconds(here it's 0.5s) as per your requirement */
  -webkit-transition: all 0.5s ease-in-out; 
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }

 .addRemoveContent
 {
   width:100%;
 }

 .addRemoveMenu
 {
   width:0;
 }

JS

$("button").click(function () {
    $(".div2").hide(10);
    $(".div1").css("width", "100%");

});

JS:UPDATED - Bringing right div back

$("button").click(function () {
    $(".div2").toggleClass("addRemoveMenu");
    $(".div1").toggleClass("addRemoveContent");

});

edited Jun 4, 2015 at 6:52

answered May 18, 2015 at 15:28

divy3993

5,8202 gold badges30 silver badges44 bronze badges

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

14 Comments

HMS Designz Over a year ago

you did a nice job but can you please make it more useable for me on click to button, right side will come show again. Can you help me out?

divy3993 Over a year ago

If still any issues feel free to ask!

divy3993 Over a year ago

Great that it worked for you! If this answer was helpful you could accept this answer. Thanks

HMS Designz Over a year ago

Yeah it damn working now and it's only you to resolve my issue

divy3993 Over a year ago

Sorry for asking again and again, but if you find this answer helpful, i request you to accept this answer(only if helpful). See Here, as you new in here.

|

Halcyon · Accepted Answer · 2015-05-18 15:40:31Z

1

Here is a demo for the CSS solution: http://jsfiddle.net/yf3e5bhv/

The advantage of this approach is that your template is declarative. You could make a plain HTML page of each state of your application. In my opinion this greatly aids development and maintenance.

HTML

<input type="button" value="toggle" id="button" /><br /><br />
<div id="left"></div><div id="right"></div>

CSS

#left, #right {
    width: 50%;
    background-color: #ff0000;
    height: 50px;
    float: left;
}
#right {
    background-color: #00ff00;
}
body.hide-right #right {
    display: none;
}
body.hide-right #left {
    width: 100%;
}

JS

var state = false;
document.getElementById("button").addEventListener("click", function () {
    var classname = "";
    if (state === false) {
        classname = "hide-right";
    }
    document.body.className = classname;
    state = !state;
});

You can significantly reduce this code if you use a library like jQuery:

$("#button").on("click", function () {
    $(document.body).toggleClass("hide-right");
});

edited May 18, 2015 at 15:40

answered May 18, 2015 at 15:34

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

2 Comments

HMS Designz Over a year ago

Hello Dear @Halcyon, Thanks a lot to help me but there is a problem like as you divided left and right div in 50% but i need left div 85% and left 15% so how can i do it with your code?

Halcyon Over a year ago

Just change the values in the CSS.

Glen Despaux Jr · Accepted Answer · 2015-05-18 15:32:40Z

0

You can do this using CSS and JavaScript. Quick and dirty way:

.dynamic {
     margin-right: 0;
}

Set your divs to have a margin-right, then use JavaScript to apply this class whenever the div is hidden.

function hideDiv(id, outerdiv) {
  document.getElementById(id).style.display = 'none'; //hide the right div
  $("#outdiv").addClass("dynamic"); //make the other div fill the space
}

answered May 18, 2015 at 15:32

Glen Despaux Jr

1,1147 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript to change div width dynamically

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related