Match media - Java script

Bonjour à tous,

Je travaille sur le responsive du site http://www.3dlibrary.fr/index.php/fr/ j'ai déjà fait pas mal de choses, mais je bloc pour utiliser les match media.
J'aurais besoin d'aide pour faire fonctionner ou non des fonctions java script selon la taille de l'écran.
Par exemple, sur la version mobile de mon site dans n'importe quel rubrique de "catalogue d'objets" j'ai codé un menu accordéon avec jquery mais j'aimerais que le code java script ne s'applique pas sur la version ordinateur du site car cela créé quelque bug.

Voici le code jquery pour ce menu:

// JavaScript Document	
	jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
 
    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');
 
        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
 
        e.preventDefault();
    });
});

J'attends vos avis!!!

J'ai fait quelques recherches en attendant mais je n'ai pas beaucoup avancé j'ai essayé quelque chose qui me semble le plus proche de ce que je recherche mais sa ne fonctionne pas comme je le veux.

Peut -être cela pourra t-il vous aidé ?

if(window.matchMedia("(max-width: 600px)").matches){

	jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }
 
    jQuery('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = jQuery(this).attr('href');
 
        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
 
        e.preventDefault();
    });
});

	
	}else{ jQuery('.accordion-section-title').click(function(e) {
		return false;
	}) 
	}

Bonjour,

Je ne comprends pas bien : le menu est bien actionné par un bouton hamburger (.toggle-nav active) ? Il suffit donc de faire disparaitre ce bouton en responsive (ce qui est déjà le cas) pour que le menu ne puisse être activé. S'il y a conflit (avec quel autre script ?) il vaut mieux prendre le problème à la racine...

Bonjour,

Non, en fait je n'ai pas de problème avec le menu hamburger(voir image menu hamburger dans la barre du header)


J'ai un petit problème avec le menu accordéon dans les pages catalogues d'objets, packs, logiciels et est actionné avec le js que j'ai posté au premier poste, sur le site ce document java script se nomme ext/jquery/accordion-smartphone.js (voir image du menu accordéon )


http://www.3dlibrary.fr/fr/batiments-architecture-modeles-3d-c-28.html

en fait sa créer un petit bug et surtout j'aimerais faire quelque chose de propre au niveau du code, et activer ce menu accordéon que lorsque l'écran est = ou inférieur à 800px de large (càd uniquement sur smartphone)

Voilà, j'espère avoir réussi à vous expliquer le problème que j'ai et j'espère que vous pouvez m'aider à le résoudre car c'est le seule problème que j'ai sur la partie responsive.

OK. Alors moi j'imaginerais bien un truc de ce style (tiré de l'un de mes codes) :

var width = $('#conteneur-categories-listing-produits').outerWidth();
if ($(window).width() <= width){
	/* Le code */
}

On cherche donc à mesurer si la largeur de l'écran est supérieure ou égale à celle de la largeur du contenu du site (ici, via la div #conteneur-categories-listing-produits).

Merci beaucoup,

Mais j'ai réussi à trouver le code qu'il me fallait cet après midi,
il s'agit de :

[code][$(document).ready(function() {
var largeur = $(window).width();
if (largeur <= 600) { script pour inférieur égal a 800px }
else { script pour supérieur a 800px };
})/code]

Merci quand même de ton aide vu que tu es le seul à avoir répondu à ma question