Error when giving spaces between Ivs

Asked

Viewed 89 times

0

I’m having a problem for space on some Divs, follow code below:

HTML:

<div id="feira"> 
     <div class="barraca"></div> 
     <div class="barraca"></div> 
     <div class="barraca"></div>
</div>

CSS:

#feira{
   position: fixed;
   right: 0;
   bottom: 0;
   z-index: 55;
   width: 80%;
}

.barraca{
   position: absolute;
   right: 0;
   bottom: 0;
   background: #AAA;
   width: 250px;
   height: 200px;
}

Now to leave the tents separate I’m using this algorithm in Jquery, but it’s not working, because the 2nd booth he says has the left: 0; and one of the tents is behind the other.

Jquery:

function organizar(){
   qtdJanela = $(".barraca").size();
   if(qtdJanela > 1){
      for(c = 0; c < qtdJanela; c++){
          janela = $(".barraca").eq(c);
          posJanela = janela.position();
          distancia = posJanela.left;
          alert(distancia);
          $(".barraca").eq(c+1).css({'right':distancia+'px'});
      }
   }
}

There’s a time he shows 0 in the distance.

http://jsfiddle.net/zohx8s6y/

javascript jquery html css

  • But why are you using an algorithm in jQuery ? you can do this with pure css.

  • because I need it to be fixed at the bottom, chat style of the face, because I will minimize the window and only the title will be displayed. Relative position is not fixed at the bottom.

  • 1

    But if you want to do the same as facebook chat you will have to use position: fixed; nay relative;.

  • Yes I know, the main div is Fixed, but the windows need to look like Absolute to stay with the bottom 0.

  • 1

    Of course not, if you define the bottom: 0px in div father who is fixed will stay on the footer. Take a look at this example I did on jsFiddle. You can also choose the specification Flexible box

  • It looks like in what I want to use http://jsfiddle.net/f5x2tqad/. If I leave without absotute, see what happens when minimizing the window!

  • I get it, in case someone can’t find an answer to your problem, when I have time, I’ll develop a lean, performative solution.

  • Okay, thank you! ^^

  • @Romariopires, is this what you want? https://jsfiddle.net/TobyMosque/17sj3oxp/

  • made an update to the script: https://jsfiddle.net/TobyMosque/17sj3oxp/1/

  • Vlw guy I managed to solve already. What I needed is to stay fixed at the bottom of the screen, can not leave even giving scroll.

Show 6 more comments

2 answers

1

To perform this activity, follow the code below:

HTML code: 

<!DOCTYPE HTML>
<html>
    <head>
        <title>Teste</title>
        <link rel="stylesheet" type="text/css" href="layout.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script type="text/javascript" src="func.js"></script>
    </head>
<body>

<div id="feira"></div>
<button>Organizar</button>

</body>
</html>

CSS code:

#feira{
    position: absolute;
    right: 0px;
    bottom: 0px;
    width: 150px;
    border:3px solid #73AD21;
    padding: 10px;
}

.barraca {
   display: inline-block;
   background-color: #AAA;
   position: relative;
   width: 100px;
   height: 150px;
   right: 0px;
   border: 3px solid #73AD21;
   margin-left: 5px;
}

Code jQuery:

$(document).ready(function() {
    $("button").click(function() {
        var aumentarLargura = $("#feira").width();
        aumentarLargura += $(".barraca").width() + 10;
        $("#feira").width(aumentarLargura + "px");
        $("#feira").append("<div class=\"barraca\"></div>");
    });
});

To view, follow the link below:

Spacing between Ivs via jQuery

  • 1

    Vlw guy I managed to solve already. What I needed is to stay fixed at the bottom of the screen, can not leave even giving scroll.

  • I get it, quiet. :)

0

Although you can use jQuery, it is better in this case to use css. To give the spacing just use the margin property. It would look like this: 

.barraca{
margin: 15px; // junto com as propriedades que você usou
}

With this css above, you would have a spacing of 15 pixels in all directions.

  • But it doesn’t work with position:Bsolute, and right: 0;

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.