Checking element width with Javascript

Question

I'm working with a website that someone did, and I'm having some difficulties with javascript.

I'm trying to get the current width of a div, and not what's in CSS. When I resize my window, I need to get the new div width (resize by jQuery).

I'm using this code:

if(document.getElementById("header").offsetWidth<1270){
    alert("Cheguei aqui");
}

I thought that if element width is lower than 1270, I would send an alert. But it isn't working.

This is the header div.

    <div id="header">
            <div class="container">
      <div class="two columns" id="logo-wrap"> <a href="index.html">
        <div id="logo2"></div>
        </a>
         <select id="header-mobile-menu">
          <option value="index.html">Home</option>
          <option value="Quem Somos.html">Quem Somos</option>
          <option value="Consulta.html">Consultas</option>
          <option value="Exame.html">Exames</option>
          <option value="Terapias.html">Terapias Alternativas</option>
          <option value="AcaoSocial.html">Ação Social</option>
          <option value="Contato.html">Contato </option>
        </select>
      </div>
      <div class="fourteen columns">
        <nav>
          <ul id="menu-header-menu" class="menu">
            <li><a href="index.html">Home</a></li>
            <li><a href="Quem Somos.html">Quem Somos</a></li>
            <li><a href="Consulta.html">Consultas</a></li>
            <li><a href="Exame.html">Exames</a></li>
            <li><a href="Parceiros.html">Parceiros</a></li>
            <li><a href="Contato.html">Contato</a> </li>
          </ul>
        </nav>  
      </div>
<!-- Place this tag where you want the search box to render -->
<div class="searchgoogle"><gcse:searchbox-only></gcse:searchbox-only></div>

      <br class="clear" />
    </div>
<div id="socialdiv">
    <div id="social-button"> 
            <a href="http://www.facebook.com/centralife" target="_blank">
            <div id="facebook-img"></div></a>
            <a href="https://twitter.com/CentralLife1" target="_blank">
            <div id="twitter-img"></div></a>    
        <a href="http://www.orkut.com.br/Main#Profile?uid=9858410708954250541" target="_blank">
            <div id="orkut-img"></div></a>    
            <a href="http://centralifesaude.blogspot.com.br/" target="_blank">
            <div id="blog-img"></div></a>
            <a href="http://www.youtube.com/watch?v=0Uhjl-ykpt8&feature=plcp" target="_blank">
            <div id="youtube-img"></div></a>
           </div>
</div>
</div>

CSS have a lot of "header" declarations, it's to hard to get'em. By the way, this javascript doesn't affect my CSS, does it?

What's wrong?

Could we see the HTML and CSS please? Maybe a jsfiddle? – Jeremy T Mar 01 '13 at 17:35 — Jeremy T, Mar 01 '13 at 17:35
have you got an id="header" in your html? – caramba Mar 01 '13 at 17:36 — caramba, Mar 01 '13 at 17:36
Values that are lower than 1270px crash my layout. – Ricardo Melo Mar 01 '13 at 17:44 — Ricardo Melo, Mar 01 '13 at 17:44

score 1 · Accepted Answer · answered Mar 01 '13 at 17:51

1

I don't know but my code is working well:

$(window).resize(function(){
   if($('#header').width() < 1270){
       alert('teste');
   }
})

answered Mar 01 '13 at 17:51

korogui

205
3
9

well, I said i was new in Javascript. Forget about event handler. Put $(window).resize(function(){ and it worked. Thanks, or Valeu hahaha – Ricardo Melo Mar 01 '13 at 17:55
So, this only work if I resize my windows. And if I started it with small size? Like a smarthphone? How can I check my window at start? – Ricardo Melo Mar 01 '13 at 17:59
$(function() { //Check function here }); – korogui Mar 01 '13 at 18:02

score 1 · Answer 2 · answered Mar 01 '13 at 17:52

1

Since you're apparently using jQuery:

$("#header").width()

will return the width of the header element

answered Mar 01 '13 at 17:52

Ben McCormick

25,260
12
52
71

score -1 · Answer 3 · edited May 23 '17 at 12:27

-1

see that topic

Total width of element (including padding and border) in jQuery

there is a explanation to take an element width and others attributes

edited May 23 '17 at 12:27

Community

1
1

answered Mar 01 '13 at 17:39

fromBrazL

22
4

score -1 · Answer 4 · answered Mar 01 '13 at 17:54

-1

To get the precise Div width, you can use getBoundingClientRect() and subtract Right from Left.

answered Mar 01 '13 at 17:54

Arie Livshin

865
1
12
26

Checking element width with Javascript

4 Answers4