[RÉSOLU]Déplacement en jquery en pourcentage.

Par philippe.idlas@free.fr, il y a 12 ans

Javascript

Bonjour,

Pour réajuster le positionnement d'un menu en tenant compte de la langue j'ai développé ce petit script :

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});
    }
});

Cependant, sur des petits écrans ce positionnement pose problème car il se crée un décalage. J'ai donc voulu essayé d'utiliser les pourcentages mais il semble que les propriétés left et top n'acceptent que les pixels.

Si c'est le cas comment puis-je faire ?

Le site est ici

Merci pour votre assistance.

Cordialement.

4 réponses

Lotfi Berrahal, il y a 12 ans

Bonjour,

Pourquoi avoir fait ça en jquery si le css le gère bien ?
Tu donne juste une class fr ou en selon la langue à ton menu et tu peux tout gérer en css plus facilement.

Admettons que tu donne une class fr à ton body
à ce moment le css pour la version fr sera

body.fr ul.culture{}

et en en 

body.en ul.culture{}

Qu'en penses tu ?

philippe.idlas@free.fr, il y a 12 ans

Bonjour et merci Lotfi pour ta réponse.

OK pour cela et il est vrai que c'est préférable. Cependant j'ai également un question plus essentielle liée à cela et qui concerne la résolution des écrans, en fait plutôt la taille des écrans. La méthode .offset() que j'utilise n'est pas générique et selon la résolution de l'écran je me retrouve avec des sous-menus complètement décalés. Je regarde donc comment régler cela avec jquery et les méthodes .offset(), .position() et screen.width.

Ma question est donc la suivante : comment adapter l'affichage des sous-menus en tenant compte de la langue ET de la résolution de l'écran ? Sous-entendu quand tu traduis un texte la longueur du texte est très rarement la même et cela crée automatiquement un décalage dans la version traduite ou dans la version originale.

Merci pour ce premier élément de réponse. Peux-tu compléter ta précédente réponse en tenant compte de ce contexte ?

Au fait, au vu de ton aide et de la période, je me permets de te souhaiter une bonne et belle année 2014.

Cordialement.

Lotfi Berrahal, il y a 12 ans

Merci et heureuse année à toi également !

Pour la résolution c'est le même principe tout dépend de ce que tu utilise pour gérer les différents affichages.

Personnellement j'utilise les media queries du coup c'est toujours pareil

ton css en résolution normal va donner :

body.fr ul.culture{
    ton css
}
body.en ul.culture{
    ton css
}

ensuite avec les media queries tu fais 

@media screen and (max-width: 640px) { /* ce css sera applicable dès que la résolution sera inférieure à 640px */
    body.fr ul.culture{
        ton css
    }
    body.en ul.culture{
        ton css
    }
}
philippe.idlas@free.fr, il y a 12 ans

Bonsoir,

Finalement j'ai adopté le principe que tu m'as proposé. De plus, cela m'évite à gérer les media queries enfin pour l'instant. J'ai en effet un petit notebook (1024x600) et les menus étaient décalés lorsque mon site s'affichait dessus. Avec simplement du html et du css ceci n'arrive plus.

Voici le css qui me permet de gérer le positionnement différencié des sous-menus en tenant compte de la langue :

.menud.fr li:hover ul.culture{visibility:visible;position:absolute;left:6.63em;}
.menud.fr li:hover ul.vin{visibility:visible;position:absolute;left:8.18em;}
.menud.fr li:hover ul.commerce{visibility:visible;position:absolute;left:14.15em;}
.menud.en li:hover ul.culture{visibility:visible;position:absolute;left:7.08em;}
.menud.en li:hover ul.vin{visibility:visible;position:absolute;left:11.25em;}
.menud.en li:hover ul.commerce{visibility:visible;position:absolute;left:17.4em;}

Au niveau du html, j'ai ajouté la classe en php comme ceci : 

<ul id="menud" class="menud <?php echo lang; ?>">

Merci Lotfi pour ton aide et ta persistance dans le choix de la solution.

Cordialement.