Animation js & checkbox

Bonjour,

Je viens vers vous pour m'éclairer sur un problème que je rencontre.

Objectif :
Agrandir mon header qui a une taille height de 15vh a 55vh au moment ou je coche une checkbox et si elle est décocher la taille height du header revient a 15vh.
je souhaite le faire en JS et voici ce dont j'ai mis.

var inputcheck = document.getElementById('checkbox').checked; // Variable qui récupère l'input checked.
var elmt = document.getElementById("home"); //Variable qui récupère le Header sous l'ID home

// Je vérifie que le input est bien checked et si oui, alors je passe le style height du Header a 55vh, sinon, je m'assure qu'il est a 15vh.
if (inputcheck == true) {
	document.getElementById("home").style.height = "55vh";
	console.log('Je suis check');
}else{
	document.getElementById("home").style.height = "15vh";
	console.log('Je suis pas check');
}

Voici mon problème :
Il prend bien en compte 55vh ou 15vh suivant la checkbox. Mais je vois le changement seulement si je recharge ma page. Je souhaite que la taille change au moment ou je check en live. Pouvez-vous m'aider ? Merci d'avance de vos réponse !
Modifié par stan182 (07 Mar 2018 - 22:25)

Salut,

Ce qu'il te faut c'est un EventListener
Un "écouteur d’événement" en franchouillard. Mais t'inquiète c'est assez simple. Voila la doc (ouais je vais pas tout te pondre direct c'est pas marrant ) : https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Du coup il faut que tu mette ton if/else dans une fonction et que tu apelle cette fonction à chaque fois que ton input change d'état (le mot clé à mettre pour le EventListener c'est 'change').

Je te laisse un peu mijoter et reviens ici si tu galère trop !

Bon courage

Salut _Laurent !

Merci pour ton aide. Je te propose mon code ( qui marche ^^) afin de savoir si cela est conforme et ce que tu en pense. Je pense que la piste que tu m'as donner était celle-ci :

$(function() {
  
  var checkbox = $("#checkbox");

  checkbox.change(function() {
    if (checkbox.is(':checked')) {
    	document.getElementById("home").style.height = "55vh";
    } else {
    	document.getElementById("home").style.height = "15vh";
    }
  });
});

ps: Moi aussi je me passionne pour les Licornes
Modifié par stan182 (08 Mar 2018 - 02:29)

Salut !

Alors 2 trucs a redire :

- JQuery. Tu l'avais déjà ou tu l'a mis pour ça ? Parceque si c'est juste pour ça je suis pro vanilla.js ! C'est assez simple à faire sans Jquery. Mais si tu l'as déjà autant l'utiliser tu as raison.

- J'ai tendance a faire une fonction à l'extérieur du change et à l'appeler dans le change. Ça permet une meilleur compréhension du code, un meilleure maintenabilité et surtout de pouvoir réutiliser la même fonction dans un autre bout du code si besoin.

element.addEventListener("click", myFunction);

function myFunction() {
    alert ("Hello World!");
}

Sinon c'est top.

PS : Les licornes c'est comme le fromage fondu et le gras, c'est la vie

Salut,

Alors oui j'utilisais déjà jquery ailleurs. Pour ce qui est de faire une fonction a l'extérieur c'est pas bête je vais jeter un œil sur ça. J'ai également chercher a faire un SlideDown sur l'agrandissement du "home" mais malgré que je vois très bien l'utilisation de la fonction slideDown() dans ce cas présent je ne vois pas comment l'utiliser au même moment que le passage a 55vh. Mon console debug me repousse comme un mal-propre =(

En tout cas, je te remercie du temps consacré a m'avoir permis de comprendre déjà une chose. ^^
J'aurai plus le faire en CSS ( avec des Hover, transition,etc) mais comme je remarque que j'ai de grosse lacune en JS je préfère me faire un peux de mal pour mon bien. ( Si toi aussi tu aime te faire du mal tape dans tes mains ! ).

Edite:
Pour résoudre mon problème j'ai rajouter ça :

document.getElementById("home").style.transition = "300ms";

Surment pas la meilleurs façon, mais déjà j'ai un résultat!
Modifié par stan182 (08 Mar 2018 - 12:13)