Width cube with jquery

Navigation
4

Hi I'm doing a test site and I have a promotion div with 100% width, one ul with 100% width and 4 li with the products. When it's over 4 li, I want my promo div to have overflow-x: scroll, and my ul will increase its width by 30%. I tried to do with jquery else I think my logic is wrong, any ideas?

JSFiddle: link

Html:                                    

Promotions

                
  •                                                  

    New York Clock

                            

    From R $ 79.99

                            

    For R $ 69,99

                        
    •                     
  •                                                  

    Dragon Book Door

                            

    From R $ 69.99

                            

    For $ 49.99

                        
    •                     
  •                                                  

    Dragon Book Door

                            

    From R $ 69.99

                            

    For $ 49.99

                        
    •                     
  •                                                  

    Dragon Book Door

                            

    From R $ 69.99

                            

    For $ 49.99

                        
    •                     
  •                                                  

    Dragon Book Door

                            

    From R $ 69.99

                            

    For $ 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);
    }


}
    
asked by anonymous 08.07.2016 / 01:30

1 answer

2

Well, some considerations:

  • Some attributes were accented as 'promotions'. This is not good    and you may have future problems with that. %% Validation did not quite understand, ha that    ul will always be larger than the queues I read in this case. Did not stay    very clear to the problem, but even so I modified the    code. Overflow and validations are working right 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><divclass="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>

If it is not expected to detail better so you can help.

    
08.07.2016 / 14:51
List comprehension vs cycle for Correct way to make one-to-many relationship using C # and MongoDB