tout le temps gérer la taille d'écran

Sujet résolu

19 septembre 2017 à 12:00:53

Bonjour à tous

J'utilise BootStrap et grâce à ce merveilleux framework je peux gérer la taille des écrans assez facilement. Cependant j'aimerais afficher 4 images de la façon suivante :

+ de 776 px de large 2 images par lignes donc 2lignes 2colonnes (col-sm-6) => easy !

+ de 500px de large 1 image par ligne centrée donc 4 lignes 1 colonnes (col-xs-offset-3 col-xs-6) => exemple

- de 500px de large 1 image par ligne prenant plus de place que la ligne précédente (col-xs-offset-1 col-xs-10) => exemple

Si j'additionne mes conditions ça ne fonctionne pas :/

J'ai fait donc appel à SuperJavascript, mais je ne l'appel pas bien :'(

J'essaye donc de récupérer la taille de l'écran du client pour jouer entre les 3 conditions que j'ai cité plus haut.

Imaginons un programme avec 4 div comportant 1 image chacune :

<div class="col-xs-6" id="divImages_1">
						<img src="images/broche/photo_broche.jpg" class="photo_portfolio" alt="Nataly's Pins" title="Pins pictures" />
						<div class="photo_nataly_portfolio">
							<div>
								<img src="images/broche/broche.png" class="photo_portfolio" alt="Nataly's Pins" title="My pins creation" onclick="afficher_image_broche(this)" />
							</div>
						</div>
					</div>

et le mon JavaScript donne un truc comme ça même si c'est faux ça donne idée de ce que j'ai fait

<script type="text/javascript">
            var tailleDiv_1 = document.getElementById('divImages_1');
            var tailleDiv_2 = document.getElementById('divImages_2');
            var tailleDiv_3 = document.getElementById('divImages_3');
            var tailleDiv_4 = document.getElementById('divImages_4');
            // #taille_body est un id que j'ai mis dans le body... Why not
            if ($("#taille_body").offsetWidth  > "776")
            {
                tailleDiv_1.removeAttribute("class");
                tailleDiv_1.className = "col-sm-6";
                tailleDiv_2.removeAttribute("class");
                tailleDiv_2.className = "col-sm-6";
                tailleDiv_3.removeAttribute("class");
                tailleDiv_3.className = "col-sm-6 margin_photo_portfolio";
                tailleDiv_4.removeAttribute("class");
                tailleDiv_4.className = "col-sm-6 margin_photo_portfolio";
            }
            else if (($("#taille_body").offsetWidth  <= "776") && ($("#taille_body").offsetWidth  > "500"))
            {
                tailleDiv_1.removeAttribute("class");
                tailleDiv_1.className = "col-xs-offset-3 col-xs-6";
                tailleDiv_2.removeAttribute("class");
                tailleDiv_2.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio_top";
                tailleDiv_3.removeAttribute("class");
                tailleDiv_3.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio";
                tailleDiv_4.removeAttribute("class");
                tailleDiv_4.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio";
            }
            else if ($("#taille_body").offsetWidth  <= "500")
            {
                tailleDiv_1.removeAttribute("class");
                tailleDiv_1.className = "col-xs-offset-1 col-xs-10";
                tailleDiv_2.removeAttribute("class");
                tailleDiv_2.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio_top";
                tailleDiv_3.removeAttribute("class");
                tailleDiv_3.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio";
                tailleDiv_4.removeAttribute("class");
                tailleDiv_4.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio";
            }
        </script>

C'est pas encore très optimisé mais on s'en fiche pour l'instant car je cherche à le faire fonctionner pour l'instant

Merci par avance de vos réponse

Cordialement,

Panam

-
Edité par p@n@m 19 septembre 2017 à 12:03:09

MysteryDash

19 septembre 2017 à 12:20:16

Salut,

J'ai pas beaucoup utilisé bootstrap mais il me semble que tu peux mettre différents genre de column sur un même div, un peu dans ce style la: https://stackoverflow.com/questions/25736084/change-number-of-columns-depending-on-screen-size.

MysteryDash / 100 MPM / Développeur Freelance C#.NET / osu! / PS4 Offline Remote Play

p@n@m

19 septembre 2017 à 13:50:31

Hello,

Merci pour ta réponse

Oui cette technique d'additionner les class entre elles je connais entre autre additionner lg/md/sm/xs je connais sauf que pour BootStrap (par défault) xs = largeur inférieur à 776px et la class col-xs-offset-X s'applique pour lg/md/sm/xs hors ce n'est pas ce que je veux et je veux gérer 2 modes différents en dessous de 776 px

Edit :

Eureka !

Bon j'ai trouvé la fonction Javascript qui me permet de faire ce que je souhaite la solution était :

$(window).resize(function()
{ 
   //Ma fonction; 
   return false 
});

A l'occurence il s'agit de :

$(window).resize(function()
			{ 
				var tailleDiv_1 = document.getElementById('divImages_1');
				var tailleDiv_2 = document.getElementById('divImages_2');
				var tailleDiv_3 = document.getElementById('divImages_3');
				var tailleDiv_4 = document.getElementById('divImages_4');
				
				if (window.innerWidth > "776")
				{
					tailleDiv_1.removeAttribute("class");
					tailleDiv_1.className = "col-sm-6";
					tailleDiv_2.removeAttribute("class");
					tailleDiv_2.className = "col-sm-6";
					tailleDiv_3.removeAttribute("class");
					tailleDiv_3.className = "col-sm-6 margin_photo_portfolio";
					tailleDiv_4.removeAttribute("class");
					tailleDiv_4.className = "col-sm-6 margin_photo_portfolio";
				}
				else if ((window.innerWidth <= "776") && (window.innerWidth  > "500"))
				{
					tailleDiv_1.removeAttribute("class");
					tailleDiv_1.className = "col-xs-offset-3 col-xs-6";
					tailleDiv_2.removeAttribute("class");
					tailleDiv_2.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio_top";
					tailleDiv_3.removeAttribute("class");
					tailleDiv_3.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio";
					tailleDiv_4.removeAttribute("class");
					tailleDiv_4.className = "col-xs-offset-3 col-xs-6 margin_photo_portfolio";
				}
				else if (window.innerWidth <= "500")
				{
					tailleDiv_1.removeAttribute("class");
					tailleDiv_1.className = "col-xs-offset-1 col-xs-10";
					tailleDiv_2.removeAttribute("class");
					tailleDiv_2.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio_top";
					tailleDiv_3.removeAttribute("class");
					tailleDiv_3.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio";
					tailleDiv_4.removeAttribute("class");
					tailleDiv_4.className = "col-xs-offset-1 col-xs-10 margin_photo_portfolio";
				}
				return false
			});

Avec un code HTML comme suit (x4 avec les bons id :p) :

<div class="col-xs-6" id="divImages_1">
						<img src="images/broche/photo_broche.jpg" class="photo_portfolio" alt="Nataly's Pins" title="Pins pictures" />
						<div class="photo_nataly_portfolio">
							<div>
								<img src="images/broche/broche.png" class="photo_portfolio" alt="Nataly's Pins" title="My pins creation" onclick="afficher_image_broche(this)" />
							</div>
						</div>
					</div>

Cordialement,

Panam

-
Edité par p@n@m 20 septembre 2017 à 10:32:31

MarlburroW

20 septembre 2017 à 14:02:14

Salut, ça me parait être une mauvaise idée de faire ça en javascript, on peu toujours s'arranger avec CSS et les mediaqueries (enfin dans 90% des cas on va dire).

Si tu est un peu perfectionniste j'ai fait un jsfiddle pour que tu puisse reproduire ton problème: http://jsfiddle.net/x1hphsvb/136/, je pourrais ensuite te montrer comment faire ça plus proprement'.

-
Edité par MarlburroW 20 septembre 2017 à 14:02:30

p@n@m

20 septembre 2017 à 14:20:15

Hello,

Oui en effet ça fonctionne bien

Mais mon problème va plus loin en faite, je vais donc expliquer l'intégralité

largeur de + 776px :

entre 776 px et + 500 px :

largeur de 500px et moins :

Jusque là même si Bootstrap ne peut pas me permettre de gérer en dessous de 776px (à moins de modifier mes class directement dans BootStrap) je peux le faire assez facilement. MAIS quand je clique sur une des 4 images je fais pop un carrousel effet Facebook un peu exemple :

sauf que si je change la taille de l'écran à ce moment le fond noir avec une opacity 0.8 ne suit pas la largeur et la hauteur.

Donc gros travail de JS pour rendre ça responsive

Si ça t’intéresse je peux te joindre le code JS et CSS/HTML

MarlburroW

20 septembre 2017 à 17:13:06

Ok merci pour l'explication.

Mais je ne comprend pas l'histoire de l'overlay. Qu'entend tu par "ne suit pas la largeur et la hauteur" ? Il ne se redimensionne pas correctement quand tu resize le viewport c'est ça ?

p@n@m

21 septembre 2017 à 9:02:53

En fait entre une largeur de + de 766px et moins la hauteur de l'écran n'est pas la même, donc si quand je visionne le carrousel et que je passe de + de 776 px à moins de 776px le fond noir n'a pas la même dimension et je devais redimensionner, j'ai essayé de bloquer le scrolling pour éviter tous problèmes compliqués mais je n'ai pas réussi alors j'ai adapté le fond en fonction de la hauteur et la largeur.