11487 sujets

JavaScript, DOM et API Web HTML5

Div à taille variable

Bonjour,

J'ai besoin de votre aide après avoir fait plusieurs fois le tour d'internet Smiley mur je suis en train de créer un site avec des div sous forme de colonnes qui changent de largeur grâce à une molette. De base j'ai 6 colonnes (qui contiennent chacunes des div qui contiennent des images), et en élargissant au maximum je n'ai plus que 2 colonnes, enfin les 4 autres se mettent les unes en dessous des autres un peu aléatoirement ce qui crée un truc informe et désorganisé au scroll. J'aimerai donc que les colonnes qui passent en dessous disparaissent, et donc que mes divs passent de colonne en colonne au fur et à mesure de l'agrandissement (ça fait beaucoup de fois le mot colonne Smiley lol ), je sais pas si c'est très clair. Je suis débutant (et novice en js), et ne sais pas vraiment si c'est possible.

Voici mon code:


<body>
   <div class="header">
      <p id="title">The Whispers Project</p>
      <div id="controller" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        <input type="range" class="control" min="200" max="650" value="100" oninput="adjustWidth(this)"/>
      </div>
    </div>
   <div id="content">
      
      <div id="one">
        <div class="box-img ab">
          <img src="img/ab.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img aa">
          <img src="img/aa.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>
      
      <div id="two">
        <div class="box-img bb">
          <img src="img/bb.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img ba">
          <img src="img/ba.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>
      
      <div id="three">
        <div class="box-img cb">
          <img src="img/cb.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img ca">
          <img src="img/ca.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>
      
      <div id="four">
        <div class="box-img db">
          <img src="img/db.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img da">
          <img src="img/da.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>
      
      <div id="five">
        <div class="box-img eb">
          <img src="img/eb.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img ea">
          <img src="img/ea.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>
      
      <div id="six">
        <div class="box-img fb">
          <img src="img/fb.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
        <div class="box-img fa">
          <img src="img/fa.jpg" style="border-radius: 70px;box-shadow: 1px 1px 12px #aaa;">
        </div>
      </div>

</div>
</body>




.header{
	background-color: #e7eaf5;
	position: fixed;
	width: 110vw;
	height: 7vh;
	left: -10px;
	top: -0px;
	font-size: 2vw;
	box-shadow: 1px 1px 12px #aaa;
	z-index: 10;
}

#title{
	margin-top: 15px;
	margin-left: 50px;
	float: left;
}

#controller{
	margin-top: 15px;
	margin-left: 63%;
 	float:left;
}

.control{
 	width:100px;
}

.content{
	background-color: red;
	width:100vw;
	height:auto;
	position: relative; 
	left: -10px;
	float: left;
}

#one{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 3vw;
	margin-top:3vw;
}

.ab{
	width: 100%;
	height: 34.2%;
	margin-top: 15%;
}

.aa{
	width: 100%;
	height: 34%;
	margin-top: 15%;
}

#two{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 5vw;
	margin-top:3vw;
}

.bb{
	width: 100%;
	height: 34.2%;
	margin-top: 15%;
}

.ba{
	width: 100%;
	height: 14.5%;
	margin-top: 15%;
}

#three{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 7vw;
	margin-top:3vw;
}

.cb{
	width: 100%;
	height: 19%;
	margin-top: 15%;
}

.ca{
	width: 100%;
	height: 19%;
	margin-top: 15%;
}

#four{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 9vw;
	margin-top:3vw;
}

.db{
	width: 100%;
	height: 34%;
	margin-top: 15%;
}

.da{
	width: 100%;
	height: 34.5%;
	margin-top: 15%;
}

#five{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 11vw;
	margin-top:3vw;
}

.eb{
	width: 100%;
	height: 34%;
	margin-top: 15%;
}

.ea{
	width: 100%;
	height: 34%;
	margin-top: 15%;
}

#six{
	background-color: yellow;
	position: relative;
	width: 200px;
	float: left;
	left: 13vw;
	margin-top:3vw;
}

.fb{
	width: 100%;
	height: 34%;
	margin-top: 15%;
}

.fa{
	width: 100%;
	height: 40%;
	margin-top: 15%;
}

img{
	width: 100%;
}




function adjustWidth(e){
  var rangeValue = $(e).val();
  var textWidth = $("#box-img").width();
  if(rangeValue < textWidth){
    return;   
  }
  $("#one").css("width",rangeValue);
  $("#two").css("width",rangeValue);
  $("#three").css("width",rangeValue);
  $("#four").css("width",rangeValue);
  $("#five").css("width",rangeValue);
  $("#six").css("width",rangeValue);
}


Merci d’avance pour votre aide !!
Ça fonctionne en soi, maintenant mes images n'ont pas toutes la même taille ce qui crée des trous horizontaux entre chaque image, vu que la hauteur de la ligne s'adapte à la plus grande image de la ligne.. J'ai trouvé un moyen manuel de régler ce problème ce site https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Placement_automatique_sur_une_grille_CSS mais étant donné le nombre d'images que je dois placer j'ai peur de perdre beaucoup de temps. Une idée?
Modifié par oleely (05 May 2019 - 11:23)
Sujet clos
Aller à