[RÉSOLU]Modifier le déplacement d'un menu du fait de la traduction.
Bonjour,
J'ai besoin d'un conseil concernant le meilleur outil pour réaliser la chose suivante.
Le site test.laumerid.org est disponible en anglais. Les sous-menus sont replacés dans le flux avec la propriété css 'left'. De plus, chaque sous-menu à une largeur différente. Le choix des valeurs a été fait en fonction de la langue française. Quand je bascule en anglais, les sous-menus apparaissent décalés.
Mon idée est la suivante et c'est là ou j'ai besoin de votre assistance car je ne voudrai pas utiliser un bazooka pour écraser un moustique !
Transmettre la valeur du code lang (variable php) au navigateur qui la récupère et qui change la propriété left de chaque sous-menu si le code est égale à "en".
Il me semble que pour réaliser cela j'ai besoin d'ajax.
Est-ce exact ?
Y aurait-il un moyen plus léger pour réaliser cela ?
Merci pour votre aide.
Cordialement.
3 réponses
Pourquoi ne pas donné une class afich_fr eet une autre affich_en et quand la langue est anglaise tu fais affich_en et l'autre serai affich_fr.
Vu que tu clique sur un bouton pour cet évennement ça doit être faisable de dire
$('button_en').click(function(){
$('.affich_fr').removeClass('affich_fr').AddClass('affich_en');
});
$('button_fr').click(function(){
$('.affich_en').removeClass('affich_en').AddClass('affich_fr');
});Ici je part du principe que tu as un bouton anglais et l'autre francais
Codrialement,
Bonjour et merci lofti pour ta réponse.
J'ai besoin d'un peu plus que cela car quand l'internaute se connecte pour la première fois au site l'affichage du menu doit également tenir compte de sa langue.
De plus, il s'agit bien de deux balises <button> toutes deux de type submit et je n'arrive pas à les différencier. Voici le code :
<form class="lang" action="<?php echo $pageCurrent; ?>" method="get">
<button title="FRançais" type="submit" class="fr" name="lang" value="fr"><img src="./image/fr_small.png" title="FRançais" alt="FRançais"></button>
<button title="ENglish" type="submit" class="en" name="lang" value="en"><img src="./image/uk_small.png" title="ENglish" alt="ENglish"></button>
</form>Le problème c'est que quelque soit le drapeau que je clique je n'arrive pas à différencier entre les deux <button>. Voici le code du jquery:
$('.lang').on('submit',function(){
var lang = $('button').attr('value');
alert(lang);
});Le contenu de la variable lang est toujours le même. Dans mon exemple, lang vaut toujours 'fr' car c'est la valeur du premier <button>.
Après l'idée, une fois que j'ai récupéré le code lang serait de faire du .css() dans le jquery pour différencier l'affichage du menu entre la version anglaise et la version française.
Qu'en pensez-vous ?
J'ai trouvé également cela pour récupérer le contenu d'une variable $_GET mais je me demande si cela est nécessaire de passer par là. Voici le code :
var $_GET = {};
document.location.search.replace(/\??(?:(^=]+)=(^&]*)&?)/g, function () {
function decode(s) {
return decodeURIComponent(s.split("+").join(" "));
}
$_GET[decode(arguments[1])] = decode(arguments[2]);
});
document.write($_GET"test"]);Qu'en pensez-vous ?
Cordialement.
Bonjour,
Avec ce code JQuery, je recupère la langue passé en variable $_GET puis je modifie la position du sous-menu pour tenir compte des écarts dus à la traduction.
function getQuerystring(key){
key = key.replace(/\]/,"\\\").replace(/\]]/,"\\\]");
var regex = new RegExp("\\?&]"+key+"=(^]*)");
var qs = regex.exec(window.location.href);
if(qs == null)
return "";
else
return qs[1];
}
$(document).ready(function(){
var lang = getQuerystring('lang');
if(lang=='fr'){
$('ul.culture').offset({left:868,top:197});
$('ul.vin').offset({left:892,top:197});
$('ul.commerce').offset({left:983,top:197});
}else{
$('ul.culture').offset({left:824,top:197});
$('ul.vin').offset({left:888,top:197});
$('ul.commerce').offset({left:983,top:197});
}
});