Width caculum with jquery

Question

Hi I’m making a test site and I have a div of promotions with width of 100%, a ul with 100% width and 4 li with the products. When you are more than 4 li, I want my div promotions to overflow-x:scroll, and my ul to increase their width by 30%. I tried to do with jquery but I think my logic is wrong, some idea?

Jsfiddle: https://jsfiddle.net/Lm9n89xg/

Html:

Promotions

• Clock
  New York

  Of R$ 79,99

  For R$ 69,99

• Porta Livro
  Dragon

  Of R$ 69.99

  For R$ 49,99

• Porta Livro
  Dragon

  Of R$ 69.99

  For R$ 49,99

• Porta Livro
  Dragon

  Of R$ 69.99

  For R$ 49,99

• Porta Livro
  Dragon

  Of R$ 69.99

  For R$ 49,99

CSS:

    .promoçoes{
    width:100%;
    height:650px;
    margin:0;
    padding:0;
    background-color:#878787;
}

.promoçoes h1{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color:#000000;
    text-align:center;  
}

.promoçoes ul{
    width:100%;
    height:600px;
    position:relative;
    list-style:none;
    margin:0;
    padding:0;  
}

.promoçoes ul li{
    display:inline-block;
    width:300px;
    background-color:#494949;
    margin:0;
    margin-left:20px;
    padding:0;
    overflow:hidden;    
}

.imageproduct{
    width:300px;
    height:300px;   
}

.promoçoes ul li a{
    color:#ccc;
    text-decoration:none;
    margin:0;
    padding:0;      
}

.promoçoes ul li a:hover{
    color:#BFBE19;  
}

.promoçoes h2{
    text-align:center;
    font-size:25px;
}

.promoçoes h3{
    color:#000000;
    text-align:center;  
}

Jquery:

  $(document).ready(function(){
"use strict";

ScrollPromocao();

function ScrollPromocao(){
    var $promo = $(".promoçoes");
    var $ulPromo = $(".promoçoes ul");
    var $liPromo = $(".promoçoes ul li");
    var $ulPlus = "30%";

    if($ulPromo.width() > $promo.width() && $liPromo.length > 4){
        $promo.css('overflow-x', 'scroll');
        $ulPromo.css('width', $liPromo.width() * $ulPlus);
    }


}

Answer 1

Well, some considerations:

• Some attributes were accented as 'promotions'. This is not good and you may have future problems with it.
  The validation$ulPromo.width() > $promo.width()I don’t quite understand, ja that the ul will always be bigger than the lines I read in this case.
  Did not stay very clear to the problem, but even so I modified a little the code. Overflow and validations are working now.

    $(function(){
    ScrollPromocao();
    function ScrollPromocao(){
            var promo = $(".promocoes");
            var ulPromo = $(".promocoes ul");
            var liPromo = $(".promocoes ul li");
            var ulPlus = "133%";
            
            if(liPromo.length > 4){
                promo.css('overflow-x', 'scroll');
                ulPromo.css('width', ulPlus);
            }
        }
    });

.promocoes{
    width:100%;
    height:650px;
    margin:0;
    padding:0;
    background-color:#878787;
}

.promocoes h1{
    font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
    color:#000000;
    text-align:center;  
}

.promocoes ul{
    width:100%;
    height:600px;
    position:relative;
    list-style:none;
    margin:0;
    padding:0;  
}

.promocoes ul li{
    display:inline-block;
    width:300px;
    background-color:#494949;
    margin:0;
    margin-left:20px;
    padding:0;
    overflow:hidden;    
}

.imageproduct{
    width:300px;
    height:300px;   
}

.promocoes ul li a{
    color:#ccc;
    text-decoration:none;
    margin:0;
    padding:0;      
}

.promocoes ul li a:hover{
    color:#BFBE19;  
}

.promocoes h2{
    text-align:center;
    font-size:25px;
}

.promocoes h3{
    color:#000000;
    text-align:center;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="promocoes">
    <h1>Promoções</h1>
    <ul>
        <li>
            <img class="imageproduct" alt="produto" src="imagesprodutos/newoyorkrelogio.jpg">
            <a href="#"><h2>Relógio <br>New York</h2></a>
            <h3>De R$ <strike>79,99</strike></h3>
            <h3>Por R$ 69,99</h3>
        </li>
        <li>
            <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
            <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
            <h3>De R$ <strike>69,99</strike></h3>
            <h3>Por R$ 49,99</h3>
        </li>
        <li>
            <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
            <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
            <h3>De R$ <strike>69,99</strike></h3>
            <h3>Por R$ 49,99</h3>
        </li>
        <li>
            <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
            <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
            <h3>De R$ <strike>69,99</strike></h3>
            <h3>Por R$ 49,99</h3>
        </li>
        <li>
            <img class="imageproduct" alt="produto" src="imagesprodutos/portalivrodragao.jpg">
            <a href="#"><h2>Porta Livro <br>Dragão</h2></a>
            <h3>De R$ <strike>69,99</strike></h3>
            <h3>Por R$ 49,99</h3>
        </li>
    </ul>
</div>

In case you are not expected to detail better so you can help.