Bonjour,

pour gérer l'affichage en fonction du terminal utilisé (mobile, tablette, ordinateur) et gérer le redimensionnement de manière dynamique, j'utilise le code suivant :

if ( $(window).outerWidth() < 992 )
{
    
}
else
{
    
}

$(window).resize(function()
{
    if ( $(window).outerWidth() < 992 )
    {
        
    }
    else
    {
        
    }
});

Mais ça fait beaucoup de code. Est-ce qu'il y a un meilleur moyen, avec moins de code, d'obtenir le même résultat ?

Merci pour votre aide.

Personne n'a une idée ?

Bonjour,

je te conseille dans ce cas là de faire du CSS et passé par les "media query". Si je comprend bien ton code tu as 2 Breakpoints : avant 992px et après 992px. Ceci est exactement la manière dont fonctionne les media query en CSS.

Je te mets le lien du Cours :

https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries

Je connais parfaitement le css et les media queries (on ne commence pas le javascript avant de connaître html et css), ce que je veux faire n'est pas faisable en css (sinon, je l'aurais fait en css), il faut passer par du javascript.

Dans ce cas, il faut que tu expliques plus en détail ton problème. Il faudra nous dire ce que tu veux faire à l'intérieur de ton code pour qu'on puisse t'aider. Car en lisant ceci c'est les media query qui me viennent à l'esprit et il peuvent parfaitement faire le travail :

pour gérer l'affichage en fonction du terminal utilisé (mobile, tablette, ordinateur) et gérer le redimensionnement de manière dynamique, j'utilise le code suivant

D'ailleurs on peut très bien faire du Javascript sans connaitre les "media query". Certes, il faut connaitre le HTML, CSS mais il faut pas forcément connaitre tout les trucs avancés du HTML et du CSS pour faire du JS et autre langages. Les "media query" connu aujourd'hui ne sont apparu qu'avec le CSS3 et dans les versions anciennes  on pouvait pas faire du CSS qui dépend de la taille de l'écran. Donc, il a plein de gens qui peuvent maitrisier le CSS sans connaitre les "media query"

tu peux lire cet article pour en savoir plus

https://www.alsacreations.com/article/lire/930-css3-media-queries.html

Connaitre le HTML, CSS n'implique pas forcément la connaissance intégrale de ces derniers.

J'utilise l'accordéon en jqueryui

if ( $(window).outerWidth() < 992 )
{
    $("#accordeon").accordion({
        header: ".titre",
        collapsible: true
    });
}
else
{
    if ( $("#accordeon").accordion() )
    {
        $("#accordeon").accordion("destroy");
    }
}

$(window).resize(function()
{
    if ( $(window).outerWidth() < 992 )
    {
        $("#accordeon").accordion({
            header: ".titre",
            collapsible: true
        });
    }
    else
    {
        if ( $("#accordeon").accordion() )
        {
            $("#accordeon").accordion("destroy");
        }
    }
});

C'est vrai que dans ce cas là, ca fait du traitement en trop si on s'amuse à changer les dimensions de la page.

Moi je vois 2 solutions qui peuvent être 'probablement' meilleur :

1) Tu crées dans ta page un contenu sur lequel tu applique l'accordion et le même sans accordion. Ensuite à l'aide de class et de "media query" (oui je sais, j'y reviens ...) tu caches l'un et tu affiches l'autre suivant les dimensions. Le seul souci c'est que tu aura du contenu dupliqué ce qui n'est pas bon côté SEO sauf si c'est pour un petit projet sans envergure.

2) tu essaie d'optimiser ta solution avec d'autres variables (genre une variable booléen) et faire en sorte que lorsque cette variable est modifiée tu fais appel au code jQuery. Cela te permettra d'éviter d'appeler tout le temps la fonction 'accordion()'. 

Merci pour ta réponse. 

Comment je met en œuvre la deuxième solution ? Qu'est-ce que je met dans la variable ? 

Est-ce que je pourrais avoir un exemple de code qui illustre la deuxième solution parce que je ne vois pas quoi mettre dans la variable. merci.

tu peux faire un truc de ce genre ;

var test;

if ( $(window).outerWidth() < 992 )
{

	test = 1;
    $("#accordeon").accordion({
        header: ".titre",
        collapsible: true
    });
}
else
{
	test = 2;
    if ( $("#accordeon").accordion() )
    {
        $("#accordeon").accordion("destroy");
    }
}


$(window).resize(function()
{
    if ( $(window).outerWidth() < 992 && test ==2)
    {
        $("#accordeon").accordion({
            header: ".titre",
            collapsible: true
        });
		test = 1;
    }
    else if($(window).outerWidth() >= 992 && test==1)
    {
        if ( $("#accordeon").accordion() )
        {
            $("#accordeon").accordion("destroy");
        }
		test = 2;
    }
});

la variable test sera initialisé suivant la taille de l'écran. Supposons au départ la taille est < 992 on aura test = 1. par la suite si on reste toujours un inférieur à 992, test sera tjrs 1 et aucun code ne sera activé (donc gain de performance). Si maintenant on passe à >= 992, le code va être activé car on a bien (>=992 && test == 1). On active une fois et après on bloque, et ainsi de suite

Tu as rajouté une variable mais ça ne permet pas de factoriser le code et d'éviter les répétitions. Excepté la variable, le code est exactement le même. En fait, avec cette variable, il y a plus de code

-
Edité par me_moi 26 septembre 2017 à 19:57:28

la question n'est pas d'avoir plus de code ou pas, c'est une question de performance. Le code initial est très gourmand parce que tu exécute un traitement de manière répétitif mais en ajoutant une variable on limite l'exécution.

Si tu veux factoriser ton code tu peux créer des fonctions et y mettre les traitements qui se répète. Mais pour un code assez court comme celui là, je pense que tu y va gagner énormément en taille de code.