-1

I tried to create a responsive app, so I need to get the width of a responsive div. I used Jquery width() method to get the value of width, However, the problem is when I click to swift to another page, the div became invisible and the Jquery width() returns negative value instead of real value.

The following is an example. When I go to menu 3 and resize the browser, console logs a negative value.

$(window).resize(function () {
  console.log($("#test").width());
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <div class="container">
          <div class="row">
            <div class="col-sm-4" id="test" style="height:100px; background:red"></div>
            <div class="col-sm-4" style="height:100px; background:green"></div>
            <div class="col-sm-4" style="height:100px; background:yellow"></div>
          </div>
        </div>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  </body>
</html>

I have tried suggestion in jQuery: Get height of hidden element in jQuery,

jQuery - Get Width of Element when Not Visible (Display: None)

but these solution don't work for my situation. Can anyone tell me how to fix it?

Duc Filan
  • 6,769
  • 3
  • 21
  • 26
Kevin
  • 272
  • 5
  • 21

1 Answers1

1

it works. to test check jsfiddle

it was getting width value from CSS. The problem was col-sm-4 is not visible. So it's not getting width value.

DEMO https://jsfiddle.net/princesodhi/v0gmge9r/

Results can be seen in console

//$(document).on("click",".nav-pills")
$(window).resize(function() {
  console.log($("#test").outerWidth());
});
.tab-content {
  position: relative;
}

#home:not(.in) {
  width: 100%;
  position: absolute;     
  display: block;
  visibility: hidden;
  opacity: 1;   
  z-index: 1; 
}

.tab-pane {
  position: relative;
  z-index: 2;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

  <div class="container">
    <h2>Dynamic Pills</h2>
    <p>To make the tabs toggleable, add the data-toggle="pill" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>
    <ul class="nav nav-pills">
      <li class="active"><a data-toggle="pill" href="#home">Home</a></li>
      <li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
      <li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
      <li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
    </ul>

    <div class="tab-content">
      <div id="home" class="tab-pane fade in active">
        <h3>HOME</h3>
        <div class="container">
          <div class="row">
            <div class="col-sm-4" id="test" style="height:100px; background:red"></div>
            <div class="col-sm-4" style="height:100px; background:green"></div>
            <div class="col-sm-4" style="height:100px; background:yellow"></div>
          </div>
        </div>
      </div>
      <div id="menu1" class="tab-pane fade">
        <h3>Menu 1</h3>
        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      <div id="menu2" class="tab-pane fade">
        <h3>Menu 2</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
      </div>
      <div id="menu3" class="tab-pane fade">
        <h3>Menu 3</h3>
        <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
      </div>
    </div>
  </div>
  </body>
</html>
Prince Sodhi
  • 2,845
  • 2
  • 21
  • 35
  • Excellent! It fixes my problem. But I still not quite sure how did you fix it? I guess in order to use JQuery width() to get the correct value, we need to apply the follow css styles when it is not display at the web page? IS it right? #home:not(.in) { width: 100%; position: absolute; display: block; visibility: hidden; opacity: 1; z-index: 1; } – Kevin Oct 04 '17 at 22:48
  • I just made element's visibility hidden and position absolute. so that user can switch between tabs. – Prince Sodhi Oct 05 '17 at 13:25