CODEWITHSUNDEEP
jqueryif-statement
user1953826
user1953826

Reputation: 41

How to determine if width size is 100% or 50%

I have button id=”buttons” that allow me to change div (id=”box”) width size.

I need to write in jquery, if the div width is 50%, when the button is clicked, change the div width to 100%. Or, if the div width is already 100%, change it to 50%.

How do I determine width using jquery? I'm a rookie on jquery. I just want to learn . Many thanks.

Upvotes: 0

Views: 2623

Answers (3)

Dekel
Dekel

Reputation: 62556

The problem is that when you check the width() of the div (using jQuery) you will get the value in px and not in %.
What you can do is check the width of the div and compare it to the width of it's parent element:

$(function() {
  $('button').click(function() {
    if ($('div').width() == $('div').parent().width()) {
      $('div').width('50%');
    } else {
      $('div').width('100%');
    }
  });
});
div {
  width: 100%;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change size</button>
<div>
  This is the div
</div>

Update

To support zooming (and probably some other margin/padding-pixels problem) you can change

if ($('div').width() == $('div').parent().width()) {

To

if ($('div').width()/$('div').parent().width() > 0.95) {

Here is a working version:

$(function() {
  $('button').click(function() {
    if ($('div').width() / $('div').parent().width() > 0.95) {
      $('div').width('50%');
    } else {
      $('div').width('100%');
    }
  });
});
div {
  width: 100%;
  border: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click to change size</button>
<div>
  This is the div
</div>

Upvotes: 3

Jerry Okafor
Jerry Okafor

Reputation: 4134

I have made a code snippet for this solution based on what I understand of the problem, tell us if it helps.

var button = $('#button');
var box = $('#box');
button.on('click',function(){
  var innerWidth = window.innerWidth; 
  var width =  parseInt(box.css('width'));
  
  //50% of the window.innerWidth or the box parent box will be
  var half = innerWidth/2; 
  
  //alert(innerWidth+" "+width+" "+innerWidth);
  if(width==half)
    {
      //the div with id box is actually 50%
      //so set it to 100%;
      box.css('width',innerWidth);
      }else{
        //the box with id has width of 100%
        //so set it to 100%
        box.css('width',half);
        }
})              
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" style="width:50%;">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi labore, amet iusto! Voluptatem rem, odit inventore alias mollitia aut possimus nostrum quaerat. Quaerat excepturi vitae eius, facere nobis dolores totam!</p>
</div>

<button id="button">Change</button>

Upvotes: 0

fdomn-m
fdomn-m

Reputation: 28611

Assuming the requirement is:

if width is 50%, and when click button it change width to 100%.

if div width is 100%, then change to 50% on click button.

(and not just "write an if statement")

then you can use css classes and .toggleClass.

Create two css classes:

.halfwidth { width:50%; }
.fullwidth { width:100%; }

and give your div one of them:

<div id="box" class="halfwidth"></div>

then when you click the button, remove or add the halfwidth class and add or remove the fullwidth class. You can do this with .toggleClass()

$("#box").toggleClass("halfwidth fullwidth");

(space separated list of classes to toggle)

Run code snippet to see this in action

$(".inner").click(function() {
  $(this).toggleClass("halfwidth fullwidth");
});
.container { border:1px solid black; width 200px; height: 50px;}
.inner { border:1px solid red; background:pink; height: 50px; cursor:pointer;}
.halfwidth { width:50%; }
.fullwidth { width:100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class='inner halfwidth'>
  </div>
</div>

Upvotes: 1

Related Questions