Tout ce que j'ai fait avec les media queries CSS se recharge normalement lorsque je change d'orientation ou de taille de media, mais pas mon script qui lui reste défini pour la taille / orientation pour lequel il a été chargé en début de page.
J'ai utilisé des requetes matchMedia en jQuery du type
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches)
Bien pratique, mais moins versatile que les mediaqueries CSS au changement de situation de la page, donc.
Comment dois-je m'y prendre pour que le matchMedia se comporte comme un mediaqueries CSS ? Ou bien, que le script correspond au bon matchmedia soit chargé lors d'un changement de situation, de manière dynamique ?
Pour le moment, je m'y prend comme ça
// Lancement script principal
principal();
// On recharge le script principal au changement d'orientation (cas ipad)
$(window).on('orientationchange', function () {
principal();
});
J'ai mis tous mon script dans la function principal() et essaye de la recharger lors du changement d'orientation (dans un premier temps)
Je ne comprends pas l'utilité de recharger un script selon un changement d'orientation.
Si un comportement doit changer dans ton script au changement d'orientation, c'est dans le script lui même que tu dois écouter l'évènement et effectuer les changements nécessaires.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.
l'utilité, c'est que ma page soit dynamique. j'ai effectué les changements avec matchmedia pour les différentes orientations, mais cela ne recharge pas dynamiquement si je change d'orientation, cela peut poser des problèmes pour les devices sautant ma valeur seuil pour les matchs media comme les ipads. de la meme manière, j'aimerais que ma page détecte le changement de taille et adapte le script si nécessaire.
voici mon script principal :
(function ($) {
$(function () {
/* Début du Script */
// Definition d'une fonction qui va mettre en majuscule la première lettre d'une chaine de caractère
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Definition du script principal dans une fonction
function menu() {
// Utilisation de matchMedia pour s'adapter aux Mediaqueries CSS
if (window.matchMedia("(max-width: 850px)").matches) {
// Détecter le changement d'orientation pour mettre le titre dans le liseret
// écouteur sur le changement d'orientation en small devices, pour modif de la mise en forme du titre de la galerie
$(window).on('orientationchange', function () {
var titrePageBrut = $('.titre h2').text().slice($('.titre h2').text().lastIndexOf(' ') + 1);
var titrePage = capitalizeFirstLetter(titrePageBrut);
// on ajoute le texte dans le liseret seulement si l'orientation est la bonne
if (window.matchMedia("(orientation: portrait)").matches) {
$('#portfolio p').append('<span> - ' + titrePage + '</span>');
} else {
$('#portfolio span').remove();
}
});
// adapter la position absolute de la section à la taille du liseret;
var hauteurLiseret = $('.liseret').height();
$('section').css('top', hauteurLiseret);
// de base, le menu est caché
$('.menuGauche').hide();
/* $('section .titre').hide(); */
//on cache la bordure du liseret pour éviter de surcharger
$('.liseret').css('border-bottom', '0');
//ecouteur le clic sur le liseret
$('.liseret').on('click', function () {
// Changement de l'icone avec les classes fontawesome - le changement de couleur se fait avec le CSS
$('i#icone').fadeOut(0)
.toggleClass('fas fa-times')
.fadeIn(500)
.toggleClass('fas fa-bars');
// Affichage / disparition du menu en lui-même
if (menuOuvert == false) {
$('.menuGauche').slideDown(500);
$('.liseret').css('border-bottom', '1px solid');
menuOuvert = true;
} else if (menuOuvert == true) {
//utilisation de promise pour enlever la bordure une fois le menu slidé
$('.menuGauche').slideUp(500).promise().done(function () {
$('.liseret').css('border-bottom', '0');
});
menuOuvert = false;
};
});
// Fermeture du menu lorsqu'on clique sur un lien du menu
$('a#accueil, .asie a, .europe a, .amsud a,a#street, a#portrait, a#architecture, a#mariage, a#moi, a#contact, a#livre').on('click', function () {
if (menuOuvert == true) {
$('i#icone').fadeOut(0)
.toggleClass('fas fa-times')
.fadeIn(500)
.toggleClass('fas fa-bars');
$('.menuGauche').slideUp(500).promise().done(function () {
$('.liseret').css('border-bottom', '0');
});
menuOuvert = false;
};
});
// Enlève les miniatures lorsqu'on est en full screen sur mobile
$(document).on('fotorama:fullscreenenter fotorama:fullscreenexit', function (e, fotorama) {
fotorama.setOptions({ nav: e.type === 'fotorama:fullscreenexit' && 'thumbs' });
});
}
// Réalisation d'un menu "coulissant" qui s'ouvre et se ferme via un bouton menu
// on fixe une valeur repère qui indique que le menu est fermé
if (window.matchMedia("(min-width: 851px)").matches) {
$('.liseret').on('click', function () {
// Changement de l'icone avec les classes fontawesome - le changement de couleur se fait avec le CSS
$('i#icone').fadeOut(0)
.toggleClass('fas fa-times')
.fadeIn(500)
.toggleClass('fas fa-bars');
// Affichage / disparition du menu en lui-même
if (menuOuvert == false) {
/* $('.menuGauche').css('display', 'flex'); */
/* $('header,section').css('transform', 'translate(0)'); */
/* $('.menuGauche').show(500); */
/* $('.menuGauche').toggle('slide'); */
/* $('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(0)'); */
$('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(0)');
/* $('section .titre').slideDown(); */
menuOuvert = true;
} else if (menuOuvert == true) {
/* $('.menuGauche').css('display', 'none'); */
/* $('header,section').css('transform', 'translate(-220px)'); */
/* $('.menuGauche').hide(500); */
/* $('.menuGauche').toggle('slide'); */
/* $('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(-240px)'); */
$('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(-240px)');
/* $('section .titre').slideUp(); */
menuOuvert = false;
};
});
// Fermeture du menu lorsqu'on clique sur certains liens
$('a#accueil, a#street, a#portrait, a#architecture, a#mariage').on('click', function () {
if (menuOuvert == true) {
$('i#icone').fadeOut(0)
.toggleClass('fas fa-times')
.fadeIn(500)
.toggleClass('fas fa-bars');
$('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(-240px)');
menuOuvert = false;
};
});
}
// Dans le menu, ajouter des catégories continents lorsqu'on clique sur Voyage
// + changer l'icone fleche haut/bas
var continentOuvert = false;
$('.continents').hide();
$('#voyages i.fas.fa-arrow-up').hide();
$('#voyages').on('click', function () {
if (continentOuvert == false) {
$('.continents').slideDown(500);
$('#voyages i.fas.fa-arrow-up').show(500);
$('#voyages i.fas.fa-arrow-down').hide();
continentOuvert = true;
} else if (continentOuvert == true) {
$('.continents').slideUp(500);
$('#voyages i.fas.fa-arrow-down').show(500);
$('#voyages i.fas.fa-arrow-up').hide();
continentOuvert = false;
};
});
// fermer voyage si on clique sur un autre lien (utile pour affichage smartphone)
$('#moi,#livre,#contact,#street,#architecture,#portrait,#mariage').on('click', function () {
if (continentOuvert == true) {
$('.continents').slideUp(500);
$('#voyages i.fas.fa-arrow-down').show(500);
$('#voyages i.fas.fa-arrow-up').hide();
continentOuvert = false;
};
});
// Faire de même avec les sous catégories pays
var asieOuvert = false;
$('.asie').hide();
$('#asie i.fas.fa-arrow-up').hide();
//$(document).on permet d'écouter les éléments rajoutés par jQuery
$(document).on('click', '#asie', function () {
if (asieOuvert == false) {
$('.asie').slideDown(500);
$('#asie i.fas.fa-arrow-up').show(500);
$('#asie i.fas.fa-arrow-down').hide();
asieOuvert = true;
} else if (asieOuvert == true) {
$('.asie').slideUp("normal");
$('#asie i.fas.fa-arrow-down').show(500);
$('#asie i.fas.fa-arrow-up').hide();
asieOuvert = false;
};
});
var europeOuvert = false;
$('.europe').hide();
$('#europe i.fas.fa-arrow-up').hide();
$(document).on('click', '#europe', function () {
if (europeOuvert == false) {
$('.europe').slideDown(500);
$('#europe i.fas.fa-arrow-up').show(500);
$('#europe i.fas.fa-arrow-down').hide();
europeOuvert = true;
} else if (europeOuvert == true) {
$('.europe').slideUp("normal");
$('#europe i.fas.fa-arrow-down').show(500);
$('#europe i.fas.fa-arrow-up').hide();
europeOuvert = false;
};
});
var amsudOuvert = false;
$('.amsud').hide();
$('#amsud i.fas.fa-arrow-up').hide();
$(document).on('click', '#amsud', function () {
if (amsudOuvert == false) {
$('.amsud').slideDown(500);
$('#amsud i.fas.fa-arrow-up').show(500);
$('#amsud i.fas.fa-arrow-down').hide();
amsudOuvert = true;
} else if (amsudOuvert == true) {
$('.amsud').slideUp(500);
$('#amsud i.fas.fa-arrow-down').show(500);
$('#amsud i.fas.fa-arrow-up').hide();
amsudOuvert = false;
};
});
// Lorsqu'on clique sur une autre catégorie que celle ouverte, on ferme la catégorie en cours
// et on change le sens de la flèche fas
// Pour le continent Asie
$(document).on('click', '#amsud,#europe', function () {
if (asieOuvert == true) {
$('.asie').slideUp("normal");
$('#asie i.fas.fa-arrow-down').show();
$('#asie i.fas.fa-arrow-up').hide();
asieOuvert = false;
};
});
// Pour le continent Europe
$(document).on('click', '#asie,#amsud', function () {
if (europeOuvert == true) {
$('.europe').slideUp("normal");
$('#europe i.fas.fa-arrow-down').show();
$('#europe i.fas.fa-arrow-up').hide();
europeOuvert = false;
};
});
// Pour le continent AmSud
$(document).on('click', '#asie,#europe', function () {
if (amsudOuvert == true) {
$('.amsud').slideUp("normal");
$('#amsud i.fas.fa-arrow-down').show();
$('#amsud i.fas.fa-arrow-up').hide();
amsudOuvert = false;
};
});
// Rendre le bouton + visible lorsqu'on survole la catégorie Voyages
$('#voyages').hover(function () {
$('#voyages i').animate({ opacity: 1 }, 500);
});
// Le rendre à nouveau invisible lorsqu'on ne survole plus Voyages
$('#voyages').mouseout(function () {
$('#voyages i').animate({ opacity: 0 }, 500);
});
// Faire de même avec les catégories continents
$(document).on('mouseenter', '#asie', function () {
$('.continents li:first-child i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#asie', function () {
$('.continents li:first-child i').animate({ opacity: 0 }, 500);
});
$(document).on('mouseenter', '#europe', function () {
$('.continents li:nth-child(2) i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#europe', function () {
$('.continents li:nth-child(2) i').animate({ opacity: 0 }, 500);
});
$(document).on('mouseenter', '#amsud', function () {
$('.continents li:nth-child(3) i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#amsud', function () {
$('.continents li:nth-child(3) i').animate({ opacity: 0 }, 500);
});
}
// definition de variable qui va nous servir dans le script
var menuOuvert = false
// Lancement script principal
menu();
// On recharge le script principal au changement d'orientation (cas ipad)
// Gérer la hauteur de la fenetre pour affichage du livre d'or
if (window.matchMedia("(min-width: 851px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section form').css('height', '' + hauteur + 'px');
$(window).resize(function () {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section #form_contact').css('height', '' + hauteur + 'px');
});
}
if (window.matchMedia("(max-width: 850px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
$(window).resize(function () {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
});
}
/* fin du script */
});
})(jQuery);
et le script qui procède à mes appels ajax :
(function ($) {
$(function () {
/* debut du script */
// fonction qui permet de faire passer une partie du titre dans le liseret en small devices mode paysage
function ajouterTitre() {
// On coupe le selecteur .titre h2 à partir ce qui vient après le dernier espace recensé
var titrePage = $('.titre h2').text().slice($('.titre h2').text().lastIndexOf(' ') + 1);
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
//on commence par retirer la span puis on ajoute la nouvelle span avec la var titrePage
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - ' + titrePage + '</span>');
});
//redimensionner la hauteur du caroussel pour ne pas dépasser l'overflow
$(document).on('fotorama:ready', function (e, fotorama) {
fotorama.resize({
maxheight: '85%'
});
});
}
}
// page chargée au lancement de la page index
/* $(document).ready(function () { */
$.ajax({
url: "pages/accueil.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
/* }); */
// ensuite, on charge les pages suite clic sur les liens correspondants (à peaufiner pour éviter répétition de code)
$('a#accueil').on('click', function () {
$.ajax({
url: "pages/accueil.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
});
$('a#street').on('click', function () {
$.ajax({
url: "pages/street.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
});
$('a#architecture').on('click', function () {
$.ajax({
url: "pages/architecture.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
});
$('a#portrait').on('click', function () {
$.ajax({
url: "pages/portrait.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
});
$('a#mariage').on('click', function () {
$.ajax({
url: "pages/mariage.html", success: function (result) {
$('section').html(result);
ajouterTitre();
}
});
});
// pour les liens de #about, je fais un translate(0) pour que le menu ne coulisse pas au clic
$('a#moi').on('click', function () {
$.ajax({
url: "pages/moi.html", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Sur moi </span>');
});
}
}
});
});
$('a#contact').on('click', function () {
$.ajax({
url: "pages/contact.html", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Contact</span>');
});
}
}
});
});
$('a#livre').on('click', function () {
$.ajax({
url: "pages/livre.php", success: function (result) {
$('section').html(result);
$('section .titre, section #caroussel').css('transform', 'translate(0)');
if (window.matchMedia("(max-width: 850px) and (orientation: landscape)").matches) {
$('#portfolio span').remove().promise().done(function () {
$('#portfolio p').append('<span> - Livre d\'or</span>');
});
}
// Gérer la hauteur de la fenetre pour affichage du livre d'or
if (window.matchMedia("(min-width: 851px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section form').css('height', '' + hauteur + 'px');
}
if (window.matchMedia("(max-width: 850px)").matches) {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
}
}
});
});
/* fin du script */
});
})(jQuery);
EDIT : j'ai essayé de faire un truc du genre, mettre tout mon script dans une fonction, puis recharger ce script lors d'un resize ou d'un changement d'orientation mais cela ne fonctionne pas vraiment ... Toujours à la recherche d'aide concernant ce soucis
// script chargée au lancement de la page index
appelAjax();
// script rechargé à chaque resize de l'écran
$(window).resize(function () {
appelAjax();
});
// script rechargé à chaque changement d'orientation
$(window).on('orientationchange', function () {
appelAjax();
});
Tu peux aussi éviter l'utilisation de media query en javascript. Tu cherche à éviter le css pour du javascript en utilisant du css dans le javascript, ça me parait un peu contradictoire...
il y a l'objet global screen en javascript qui permet d'obtenir des informations sur l'écran
C'est toujours pareil quel que soit le truc sur lequel tu attache le listener.
si je comprends bien, c'est pour afficher la liste des changements à chaque changement
Mostuf a écrit:
Tu peux aussi éviter l'utilisation de media query en javascript. Tu cherche à éviter le css pour du javascript en utilisant du css dans le javascript, ça me parait un peu contradictoire...
il y a l'objet global screen en javascript qui permet d'obtenir des informations sur l'écran
oui, je débute alors c possible que je fasse des choses pas très logiques encore
comme je vous disais, je connais mes listeners, ce sont
$(window).on('orientationchange', function () {
});
$(window).on('resize', function () {
});
Je ne sais juste pas comment les utiliser pour recharger mon script. Si vous allez voir mon site et que vous faites un resize small/big devices (850px), vous allez voir que mon script, qui est assez différent pour les deux devices, ne se recharge pas.
Justement, tu ne devrais pas "recharger" ton script, il devrait simplement s'adapter en fonction de la taille de l'écran qui a changé, donc utiliser des paramètres basé sur la taille de l'écran (objet screen)
Justement, tu ne devrais pas "recharger" ton script, il devrait simplement s'adapter en fonction de la taille de l'écran qui a changé, donc utiliser des paramètres basé sur la taille de l'écran (objet screen)
Ok, c'est ce que je pense avoir fait avec ces lignes de codes dont :
if (window.matchMedia("(min-width: 851px)").matches) {
J'ai intégré tout mon script dans la fonction menu()
Pour savoir si l'écran fais moins de 850px (à exécuter une fois à l'initialisation) :
function handleMqChange(mq) {
console.log(mq.matches);
}
const mq = window.matchMedia("(max-width: 850px)")
//on test une fois histoire de savoir quelle est la taille
//de l'écran à l'initialisation
handleMqChange(mq);
//a chaque fois que la taille de l'écran passe au dessus ou
//en dessous des 850px (ça peut être à cause d'un resize,
//d'un changement d'orientation, ...) on exécute
//handleMqChange avec la nouvelle mediaQueryList en
//paramètre, donc pas besoin de faire 10 000 test
mq.addEventListener("change", handleMqChange)
Pour l'orientation, même principe. Essaye de faire des choses précises en fonction des évènements. Ceci dit, c'est plus simple en css.
Concernant ton script : cela me renvoie une valeur true/false en fonction de la width, j'ai bien compris ça. Ma question est comment me servir de ça pour recharger le script ?
suite à ce script j'effectue ce test
if (mq) {
alert('OK1');
} else {
alert('OK2');
}
Et j'ai toujours OK1 affiché meme quand la valeur de mk est affichée comme false dans la console
Il faut que tu refasse ta fonction menu(). Au lieu de faire un truc général qui gère tout et n'importe quoi, fais des petits bouts. Par exemple pour la taille de l'écran, tu as juste besoin d'ajouter / retirer une classe, pas de refaire tous les liens du menu ni les animations.
Il faut que tu refasse ta fonction menu(). Au lieu de faire un truc général qui gère tout et n'importe quoi, fais des petits bouts. Par exemple pour la taille de l'écran, tu as juste besoin d'ajouter / retirer une classe, pas de refaire tous les liens du menu ni les animations.
Oui, j'en suis conscient, le code est largement améliorable. Mais en quoi cela m'empeche de recharger le script lors d'un resize/changeorientation ? Je suis un peu perdu.
En quoi cela peut m'aider pour arriver à mes fins ?
(function ($) {
/* ----------- Définitions des fonctions du script ------------- */
// Fonction qui met en majuscule la première lettre d'une chaine de caractère
function capitalizeFirstLetter(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
// Fonction qui gère le changement d'icone dans le liseret - Changement de l'icone avec les classes fontawesome
function iconeMenu() {
$('i#icone').fadeOut(0)
.toggleClass('fas fa-times')
.fadeIn(500)
.toggleClass('fas fa-bars');
}
// Fonction pour modif de la mise en forme du titre de la galerie
function titleChange() {
var titrePageBrut = $('.titre h2').text().slice($('.titre h2').text().lastIndexOf(' ') + 1);
var titrePage = capitalizeFirstLetter(titrePageBrut);
// on ajoute le texte dans le liseret seulement si l'orientation est la bonne
if (window.matchMedia("(orientation: portrait)").matches) {
var titreSection = $('section .titre').text().length;
if (titreSection == 16) {
$('#portfolio p').append('<span> - Livre d\'or </span>');
} else if (titreSection == 13) {
$('#portfolio p').append('<span> - Sur moi </span>');
} else {
$('#portfolio p').append('<span> - ' + titrePage + '</span>');
}
} else {
$('#portfolio span').remove();
}
}
// Fonction pour adapter la position absolute de la section à la taille du liseret;
function liseretHeight() {
var hauteurLiseret = $('.liseret').height();
$('section').css('top', hauteurLiseret);
}
// Fonction qui enlève les miniatures du caroussel en fullscreen
function fullscreenWithoutThumbnails() {
$(document).on('fotorama:fullscreenenter fotorama:fullscreenexit', function (e, fotorama) {
fotorama.setOptions({ nav: e.type === 'fotorama:fullscreenexit' && 'thumbs' });
});
}
// Fonctions d'ouverture et de fermeture du menu pour les small et large devices
function menuOpenSmall() {
$('.menuGauche').slideDown(500);
$('.liseret').css('border-bottom', '1px solid #3a3a3a');
menuOuvert = true;
}
function menuCloseSmall() {
//utilisation de promise pour enlever la bordure une fois le menu slidé
$('.menuGauche').slideUp(500).promise().done(function () {
$('.liseret').css('border-bottom', '0');
});
menuOuvert = false;
}
function menuOpenLarge() {
$('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(0)');
menuOuvert = true;
}
function menuCloseLarge() {
$('nav, #titre1, .menuGauche, .liseret, section .titre, section #caroussel').css('transform', 'translate(-240px)');
menuOuvert = false;
}
// Fonctions qui gèrent la hauteur de la fenetre pour affichage dans le livre d'or pour small et large devices
function sectionHeightLargeGold() {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section form').css('height', '' + hauteur + 'px');
$(window).resize(function () {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 50;
$('section #form_contact').css('height', '' + hauteur + 'px');
});
}
function sectionHeightSmallGold() {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
$(window).resize(function () {
var hauteurFenetre = $(window).height();
var hauteurTitre = $('section .titre').height();
var hauteur = hauteurFenetre - hauteurTitre - 100;
$('#myFrame').css('height', '' + hauteur + 'px');
});
}
// Fonctions définissant le comportement des flèches aidant à la navigation des menus
function arrowUp(id) {
$(id + ' i.fas.fa-arrow-up').show(500);
$(id + ' i.fas.fa-arrow-down').hide();
}
function arrowDown(id) {
$(id + ' i.fas.fa-arrow-down').show(500);
$(id + ' i.fas.fa-arrow-up').hide();
}
// Fonctions commandant l'ouverture des sous-catégories
function continentOpen() {
$('.continents').slideDown(500);
continentOuvert = true;
}
function continentClose() {
$('.continents').slideUp(500);
continentOuvert = false;
}
function asieOpen() {
$('.asie').slideDown(500);
asieOuvert = true;
}
function asieClose() {
$('.asie').slideUp(500);
asieOuvert = false;
}
function europeOpen() {
$('.europe').slideDown(500);
europeOuvert = true;
}
function europeClose() {
$('.europe').slideUp(500);
europeOuvert = false;
}
function amsudOpen() {
$('.amsud').slideDown(500);
amsudOuvert = true;
}
function amsudClose() {
$('.amsud').slideUp(500);
amsudOuvert = false;
}
function iconeHover() {
// Rendre l'icone visible lorsqu'on survole la catégorie Voyages
$('#voyages').hover(function () {
$('#voyages i').animate({ opacity: 1 }, 500);
});
// Le rendre à nouveau invisible lorsqu'on ne survole plus Voyages
$('#voyages').mouseout(function () {
$('#voyages i').animate({ opacity: 0 }, 500);
});
// Faire de même avec les catégories continents
$(document).on('mouseenter', '#asie', function () {
$('.continents li:first-child i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#asie', function () {
$('.continents li:first-child i').animate({ opacity: 0 }, 500);
});
$(document).on('mouseenter', '#europe', function () {
$('.continents li:nth-child(2) i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#europe', function () {
$('.continents li:nth-child(2) i').animate({ opacity: 0 }, 500);
});
$(document).on('mouseenter', '#amsud', function () {
$('.continents li:nth-child(3) i').animate({ opacity: 1 }, 500);
});
$(document).on('mouseleave', '#amsud', function () {
$('.continents li:nth-child(3) i').animate({ opacity: 0 }, 500);
});
}
/* --------- Début du Script --------------- */
// Utilisation de matchMedia pour s'adapter aux Mediaqueries CSS
// on fixe une valeur repère qui indique que le menu est fermé
var menuOuvert = false
/* ------- INFERIEUR à 850 px --------- */
if (window.matchMedia("(max-width: 850px)").matches) {
// Détecter le changement d'orientation pour mettre le titre dans le liseret
$(window).on('orientationchange', function () {
titleChange();
});
// adapter la position absolute de la section à la taille du liseret;
liseretHeight();
// de base, le menu est caché
$('.menuGauche').hide();
//on cache la bordure du liseret pour éviter de surcharger
$('.liseret').css('border-bottom', '0');
//ecouteur le clic sur le liseret
$('.liseret').on('click', function () {
// Changement de l'icone avec les classes fontawesome - le changement de couleur se fait avec le CSS
iconeMenu();
// Affichage / disparition du menu en lui-même
if (menuOuvert == false) {
menuOpenSmall();
} else if (menuOuvert == true) {
menuCloseSmall();
};
});
// Fermeture du menu lorsqu'on clique sur un lien du menu
$('a#accueil, .asie a, .europe a, .amsud a,a#street, a#portrait, a#architecture, a#mariage, a#moi, a#contact, a#livre').on('click', function () {
if (menuOuvert == true) {
iconeMenu();
menuCloseSmall();
};
});
// Enlève les miniatures lorsqu'on est en full screen sur mobile
fullscreenWithoutThumbnails();
}
/* ------- SUPERIEUR à 851 px ---------- */
if (window.matchMedia("(min-width: 851px)").matches) {
$('.liseret').on('click', function () {
// Changement de l'icone avec les classes fontawesome - le changement de couleur se fait avec le CSS
iconeMenu();
// Affichage / disparition du menu en lui-même
if (menuOuvert == false) {
menuOpenLarge();
} else if (menuOuvert == true) {
menuCloseLarge();
};
});
// Fermeture du menu lorsqu'on clique sur certains liens
$('a#accueil, a#street, a#portrait, a#architecture, a#mariage').on('click', function () {
if (menuOuvert == true) {
iconeMenu();
menuCloseLarge();
};
});
}
// Dans le menu, ajouter des catégories continents lorsqu'on clique sur Voyage + changer l'icone fleche haut/bas
// TODO: Code à refactoriser
// définition comportement de base
var continentOuvert = false;
$('.continents').hide();
$('#voyages i.fas.fa-arrow-up').hide();
$('#voyages').on('click', function () {
if (continentOuvert == false) {
continentOpen();
arrowUp('#' + $(this).attr('id'));
} else if (continentOuvert == true) {
continentClose();
arrowDown('#' + $(this).attr('id'));
};
});
// fermer voyage si on clique sur un autre lien (utile pour affichage smartphone)
$('#moi,#livre,#contact,#street,#architecture,#portrait,#mariage').on('click', function () {
if (continentOuvert == true) {
$('.continents').slideUp(500);
continentClose();
arrowDown('#' + $(this).attr('id'));
};
});
// Faire de même avec les sous catégories pays
var asieOuvert = false;
$('.asie').hide();
$('#asie i.fas.fa-arrow-up').hide();
//$(document).on permet d'écouter les éléments rajoutés par jQuery
$(document).on('click', '#asie', function () {
if (asieOuvert == false) {
asieOpen();
arrowUp('#' + $(this).attr('id'));
} else if (asieOuvert == true) {
asieClose();
arrowDown('#' + $(this).attr('id'));
};
});
var europeOuvert = false;
$('.europe').hide();
$('#europe i.fas.fa-arrow-up').hide();
$(document).on('click', '#europe', function () {
if (europeOuvert == false) {
europeOpen();
arrowUp('#' + $(this).attr('id'));
} else if (europeOuvert == true) {
europeClose();
arrowDown('#' + $(this).attr('id'));
};
});
var amsudOuvert = false;
$('.amsud').hide();
$('#amsud i.fas.fa-arrow-up').hide();
$(document).on('click', '#amsud', function () {
if (amsudOuvert == false) {
amsudOpen();
arrowUp('#' + $(this).attr('id'));
} else if (amsudOuvert == true) {
amsudClose();
arrowDown('#' + $(this).attr('id'));
};
});
// Lorsqu'on clique sur une autre catégorie que celle ouverte, on ferme la catégorie en cours
// et on change le sens de la flèche fas
// Pour le continent Asie
$(document).on('click', '#amsud,#europe', function () {
if (asieOuvert == true) {
asieClose();
arrowDown('#' + $(this).attr('id'));
};
});
// Pour le continent Europe
$(document).on('click', '#asie,#amsud', function () {
if (europeOuvert == true) {
europeClose();
arrowDown('#' + $(this).attr('id'));
};
});
// Pour le continent AmSud
$(document).on('click', '#asie,#europe', function () {
if (amsudOuvert == true) {
amsudClose();
arrowDown('#' + $(this).attr('id'));
};
});
// Gestion du hover de l'icone
iconeHover();
// Gérer la hauteur de la fenetre pour affichage du livre d'or
if (window.matchMedia("(min-width: 851px)").matches) {
sectionHeightLargeGold();
}
if (window.matchMedia("(max-width: 850px)").matches) {
sectionHeightSmallGold();
}
// Lancement script principal
// TODO: recharger le script principal au changement d'orientation (cas ipad)
/* window.addEventListener("orientationchange", function() {
alert('OK3');
});
window.addEventListener("resize", function() {
alert('OK2');
}); */
/* --------- Fin du script ------------ */
})(jQuery);
Personnellement je n'ai pas la motivation pour refaire ton code. C'est un bon début, maintenant pose toi les questions qu'es-ce qu'il faut faire quand je change de taille de l'écran ? Qu'es-ce qu'il faut faire quand je change d'orientation ? Il faut que tu créer des fonctions pour répondre à ces questions.
d'accord, je commence à comprendre, je pensais que recharger les fonctions qui se chargent au démarrage allait suffir, mais il faut faire du cas par cas ... regarder tout ce qui va pas, un par un et effectuer un correctif dans $(window).on('orientationchange' ...
voici ce que je fais, en gros, je dis quand je change d'orientation, on fait une verif avec les match media, et je change le code
$(window).on('orientationchange', function () {
alert('oK3');
if (window.matchMedia("(max-width: 850px)").matches) {
$(window).on('orientationchange', function () {
titleChange();
});
liseretHeight();
$('.menuGauche').hide();
$('.liseret').css('border-bottom', '0');
$('.liseret').on('click', function () {
iconeMenu();
if (menuOuvert == false) {
menuOpenSmall();
} else if (menuOuvert == true) {
menuCloseSmall();
};
});
$('a#accueil, .asie a, .europe a, .amsud a,a#street, a#portrait, a#architecture, a#mariage, a#moi, a#contact, a#livre').on('click', function () {
if (menuOuvert == true) {
iconeMenu();
menuCloseSmall();
};
});
fullscreenWithoutThumbnails();
sectionHeightLargeGold();
}
if (window.matchMedia("(min-width: 851px)").matches) {
$('.liseret').on('click', function () {
iconeMenu();
if (menuOuvert == false) {
menuOpenLarge();
} else if (menuOuvert == true) {
menuCloseLarge();
};
});
$('a#accueil, a#street, a#portrait, a#architecture, a#mariage').on('click', function () {
if (menuOuvert == true) {
iconeMenu();
menuCloseLarge();
};
});
}
});
/* window.addEventListener("resize", function() { */
$(window).on('resize', function () {
alert('OK2');
});
- Edité par Sebastien- 22 mai 2019 à 13:12:25
Recharger script page au changement d'orientation
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Face a quelqu'un pour qui l'on n'éprouve que de l'aversion et du mépris, les yeux d'un homme deviennent extrêmement froids et cruels.