Match media - Java script

Matth1 Messages postés 6 Statut Membre -  
 Matth -
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.
.

A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
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



0
Matth1 Messages postés 6 Statut Membre
 
Merci beaucoup de ta réponse,

mais je n'ai pas l'impression que ce code fonctionne sur IE et sur tablette en général?

En fait, j'aimerais trouver une solution pour annuler l'effet d'une fonction java/jquery (par exemple un .click(function(e) ou .hover(function(e) ) en fonction de la taille de la fenêtre. Donc, un système de media queries mais pour le Java script serait le mieux mais si d'autres solutions sont possibles sa me va aussi...

En faisant des recherches j'ai vu que le match media était une des solutions les plus adaptés même si elle n'est pas compatible avec tous les navigateurs.
0
Réponse 2 / 7
animostab Messages postés 3003 Statut Membre 738
 
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.
0
Matth1 Messages postés 6 Statut Membre
 
J'ai essayé ta proposition en écrivant ceci mais je ne suis pas très bon avec jquery donc sa ne marche pas mais il y a peut être plusieurs fautes:

var largeur = $(window).width();

if (largeur <= 600) {
//ta function pour les fenêtres inférieurs à 600px;

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 {
//ta function pour les fenêtres supéreurs à 600px;}
jQuery('.accordion-section-title').click(function(e) {
return false;
})
e.preventDefault();

}
0
Réponse 3 / 7
animostab Messages postés 3003 Statut Membre 738
 
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();
    });
}

})
0
Matth1 Messages postés 6 Statut Membre
 
Je viens d'essayer, mais sa ne fonctionne toujours pas, lorsque je clique sur l'un des titres du menu accordéon (qui sont en fait des thèmes de filtres de recherches) sa me renvoie sur la page d'accueil de mon site avec un #accordion-1 ou -2 selon sur lequel on clique qui correspond au lien que j'ai mis sur chaque titre

Pour faire ce menu j'ai repris le tuto du site inspirationalpixels.com
je mets l'adresse du tuto sa peut peut-être aider.
https://inspirationalpixels.com/accordion-html-css-jquery/

Mais en tout cas merci de m'aider, parce que je galère comme un ouf sur ce problème qui m'empêche de finaliser le responsive du site pour l'indexer après
0
animostab Messages postés 3003 Statut Membre 738
 
salut
j'ai été voir un peu le code de ton site
déjà tu as 2 js pour ce menu
ext/jquery/accordion-smartphone.js (dans le head)
ext/jquery/menu-responsive-smartphone.js (dans le menu)
il faudrait n'en avoir qu'un seul

ensuite le 1er (celui que tu poste ici) ne peux pas fonctionner car il fait appel à des class (.accordion .accordion-section-title .accordion-section-content) qui n'existent pas dans ton html du menu.
de plus ce script est un accordion de paragraphe et pas un menu dropdown donc ne marchera pas pour des ul imbriqués dans des li

le mieux serait de tout reprendre à zero pour ton menu avec un plugin jquery
ex celui ci ressemble au tient (respecter les class du html) et il est responsive
http://tympanus.net/codrops/2013/05/17/horizontal-slide-out-menu/
0
Réponse 4 / 7
Matth1 Messages postés 6 Statut Membre
 
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é.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
animostab Messages postés 3003 Statut Membre 738
 
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 };
})

@+
0
Réponse 6 / 7
Matth
 
Ok ba je vais voir si j'y arrive avec ce code et en regardant plusieurs tuto de jquery

Merci bien.
0
Réponse 7 / 7
Matth
 
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 :)
0

Discussions similaires

Snap média chargé
Tessfuen -
Lilith22h22 -

2 réponses
Jeux pour itel 5330
yewou -
MPMP10 -

1 réponse
Java : Jeux gratuits à télécharger !
undertaker3 -
neogenesis -

1 réponse
Comment envoyer un Snap violet avec ses vidéos ?
Nono -
Radinoz -

1 réponse