Match media - Java script Fermé

Question

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!!!  :), 


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code 

Merci d'y penser dans tes prochains messages.
.

Configuration: Mac OS X (10.9.5) / Chrome 43.0.2357.124

jordane45 · Answer

Bonjour,

Tu devrais pouvoir t"en sortir .. en testant si l'utilisateur est sur mobile ou non
à partir d'un code de ce genre:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))){
 isMobile = true;
}
 
 
=> Pris sur : https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device

animostab · Answer

Salut
en jquery

var largeur = $(window).width();
if (largeur <= 600) { ta function pour les fenêtres inférieurs à 600px;}
else { ta function pour les fenêtres supéreurs à 600px;}
 
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

animostab · Answer

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

})

Matth1 · Answer

Re :) ,
 
En fait je pense que tu as un peu confondus :
- ext/jquery/accordion-smartphone.js  correspond au filtre de recherche type "catégorie", "option", "formats"... 


Ce dernier est présent dans les pages catalogues d'objets, packs, logiciels


- ext/jquery/menu-responsive-smartphone.js correspond au menu hamburger avec un menu déroulant et des sous menus déroulants


Aussi, je tiens juste à dire que le site de base ce n'est pas moi qui l'ai fait et cette personne à utiliser le CMS OsCommerce pour faire le site c'est aussi pour sa que je rencontre quelque problème même si à la fin de la journée je pense avoir presque fini

j'essaye de retoucher seulement le css mais dans certaine situation sa devient limité.

animostab · Answer

le code que tu as posté ici c'est ext/jquery/accordion-smartphone.js en précisant que c'est le js du menu ???
pour résumer

si tu veux un script jquery qui ne s'execute qu'a partir d'une largeur précise c'est le code que j'avais donné

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

Matth · Answer

Ok ba je vais voir si j'y arrive avec ce code et en regardant plusieurs tuto de jquery 

Merci bien.

Matth · Answer

Salut,

Merci à toi animostab car après de multiples essai j'ai réussi ton code fonctionne correctement et sur tous les navigateurs, j'ai même pas à faire d'autres corrections.

Merci beaucoup :)

Match media - Java script

7 réponses

Discussions similaires