Passer de block à inline-block selon le media

Par Olmek, il y a 11 ans

Javascript

Bonsoir,

Est-ce que quelqu'un pourrait me dire qu'elle est l'expression js qui me permettrait de passer de display: block à display: inline-block s'il vous plait ?
Il me semblait qu'il s'agissait de toggle mais quand j'essai cela ne marche pas
J'ai également essayé avec un document.getElementsByClassName mais sans résultat. Pourtant j'ai réussi à changer des propriétés comme border.

Merci d'avance.

15 réponses

Lartak, il y a 11 ans

Bonsoir.

Passer de block à inline-block selon le media

Quand tu parles de media, tu veux parler de la taille/résolution de l'écran ?

Olmek, il y a 11 ans

Oui exactement ;)
Voici mon code JS

$(function(){ $('.sticky').each(function(){ var parent = $(this).parent(); var dTop = $(this).offset().top; var elem = $(this); var divTest = document.getElementById("essai"); parent.css('position','relative'); elem.css('position','absolute'); if(window.matchMedia("(min-width:800px)").matches) { $(window).scroll(function(){ if (scrollY()>dTop) { elem.stop().animate({top:scrollY()-parent.offset().top},500); }else{ elem.stop().animate({top:dTop-parent.offset().top},500) } }); if (scrollY()>dTop) { elem.stop().animate({top:scrollY()-parent.offset().top},500); } }else{ divTest.className = "petit"; $( "#listaside" ).toggleClass( "listessai", addOrRemove ); }; }); }); function scrollY(){ scrOfY = 0; if (typeof(window.pageYOffset) == 'number') { scrOfY = window.pageYOffset; }else if(document.body && (document.body.scrollTop)){ scrOfY = document.body.scrollTop; }else if (document.documentElement && (document.documentElement.scrollTop)) { scrOfY = document.documentElement.scrollTop; } return scrOfY; };
Lartak, il y a 11 ans

Si c'est pour changer des propriétés CSS selon la taille/résolution de l'écran de l'utilisateur, tu peux le faire tout simplement via les media queries en CSS, pas besoin de javascript pour ça.

Olmek, il y a 11 ans

Oui je sais mais c'est pour m'entrainer au JS ^^ j'ai trouvé la fonction qui permet de changer selon la taille du média mais je ne retrouve plus celle qui permet de modifier un display :/

1ud0v1c, il y a 11 ans

Ce que tu recherches c'est la fonction css de jquery

$("monElement").click(function() { $(this).css("display","inline-block"); });
Lartak, il y a 11 ans

Dans ce cas là, je préfère laisser quelqu'un d'autre te répondre, car je préfère largement passer par le CSS que par le javascript pour ce genre d'évènement, du coup, je ne m'y suis pas vraiment penché côté javascript.
Je n'utilise le javascript que pour ce que je ne peux pas faire uniquement avec le CSS.
Sur ce, bonne continuation et bonne soirée à toi. ;)

Olmek, il y a 11 ans

Merci Lartak11 :) bonne soirée à toi aussi

Oui Lud00 c'est ça mais sauf que ce n'est pas commandé au clic :/

Voici mon code html

<div class="col-xs-12 col-sm-2"> <div class="sticky" id="essai"> <ul id="asidegauche" class="list-unstyled"> <li class="aside"><a href="index.php"><img src="medias/broadsound.png" alt="lienaccueil"/></a></li> <li class="aside"><a href="rock.php"><img src="medias/rock1.png" alt="lienrock" onmouseover="this.src='medias/rock2.png'" onmouseout="this.src='medias/rock1.png'"/></a></li> <li class="aside"><a href="electro.php"><img src="medias/electro.png" alt="lienelectro"></a></li> <li class="aside"><a href="pop.php"><img src="medias/pop.png" alt="lienpop"/></a></li> </ul> </div> </div>
1ud0v1c, il y a 11 ans

Olmek, je te donnais juste un exemple d'utilisation pour la fonction ^^, je pensais que c'est ce que tu cherchais, tu n'as plus qu'a l'appliquer où tu veux ! Tu avais un autre soucis ? Tu arrives pourtant à détecter le changement de résolution non ?

Olmek, il y a 11 ans

J'ai essayé de l'appliquer mais sans résultat. Dans mon else j'ai mis

$("aside").css("display","inline-block");
1ud0v1c, il y a 11 ans

Tu es sur que ce que tu veux, c'est un display inline-block et pas plutôt un display: inline (question bête mais on ne sait jamais ^^) ? Tu rentres bien dans ta condition (console.log) ?

Olmek, il y a 11 ans

Oui un inline serait plus approprié effectivement mais quand je regarde avec l'inspecteur, la valeur de display n'a pas changé

Earhater: merci mais c'est le système que j'ai utilisé ;) joyeyx noel à toi aussi

1ud0v1c, il y a 11 ans

J'avais pas fait attention, mais tu as fait une erreur sur ton sélecteur, tu vises la classe aside des li non ? Du coup il te manque un point ;)

$(".aside").css("display","inline");
Olmek, il y a 11 ans

Ah oui ! Super ! Merci beaucoup LudOO !!

Bonne soirée, passez tous de bonnes fêtes ;)

1ud0v1c, il y a 11 ans

De rien et bonne fêtes à toi aussi !