Mauvais positionnement Opera 12.17 / div class = widget

[Pouzzler]

Salut, tout est dans le titre :

sous ce navigateur, la navigation sur le site bedetheque.com se retrouve gravement perturbée par le décalage à gauche des éléments div de classe widget. Ils en viennent à recouvrir environ la moitié du contenu principal.

PS : ce n'est pas un post pour faire la critique d'Opera 12.17. Oui je sais il est ancien. Oui je sais, il arrivera un jour ou plus rien ne sera compatible avec, et ou je devrai l'abandonner. En attendant, c'est lui qui a inventé les gestures (à l'époque ou les souris avaient 2 boutons point, c'était bien pratique d'aller à la page précédente/suivante d'un clic-glisser rapide, plutôt que d'aller chercher le bouton tout en haut de la page), il a une gestion des groupes de tabs supérieure (de loin) à celle de *tous* les autres navigateurs, sans compter les mails et l'IRC intégré pour qui n'aime pas la multiplication des fenêtres, juste celle des petits pains (au chocolat).

Si seulement l'Opera qu'ils font actuellement avait gardé tout ça au lieu de singer Chromefox

PS2 : vu le faible public utilisant ce navigateur, il est possible que ça représente trop de boulot pour pas grand chose. Puis-je chercher un hack CSS de mon côté, et sera-t-il employé, si fonctionnel?

A+,
Seb

[BDGest]

Si tu as un hack css, je suis preneur, ca m'évitera pas mal de taf.

[Pouzzler]

Ok je vais chercher. Sur quels navigateurs dois-je m'assurer que ça ne casse pas ce qui existe déjà? Les plus récents IE, Chrome, FF, ?

[Pouzzler]

De façon purement hallucinante, après avoir sauvé le contenu de la page d'accueil (y compris les scripts et css) en local, cette version locale a un affichage correct de ces div class = widget.

Ça va donc être compliqué de diagnostiquer pourquoi la version distante cause ce souci, et pas la version locale, et je ne promets pas de résultats rapides, rogntudju!

[Pouzzler]

J'ai ensuite mis en ligne sur un site perso free.fr la page sauvegardée, et la encore le positionnement est impeccable. Ce n'est que lorsque la page est chargée depuis bedetheque.com qu'il est erroné. J'avoue que le mystère commence à me dépasser

[Pouzzler]

Première hypothèse qui vaut quelque chose :

le site utilise jQuery hc-sticky pour faire en sorte que les éléments en question restent présents sur la page, que l'on scrolle pas, peu, beaucoup, à la folie, ou plus encore.

Sur le site de ce plugin, il est bien précisé :

Be sure to run it after DOM has been loaded.

jQuery(document).ready(function($){
$('#element').hcSticky();
});


On voit un reste de cette approche recommandée dans le script custom.js lignes 4 et 22-24 :

$(document).ready(function($) {
$('#sidebar').hcSticky({
top: 15
});

En revanche en cherchant un élément #sidebar dans l'html de la page, on fait chou-blanc, il n'y en pas, ce code est probablement un reste d'une version antérieure.

L'approche retenue a été d'entourer ces éléments en dur d'un div de classe "wrapper-sticky", le nom de classe retenu par l'auteur de hc-sticky pour créer un div qui va entourer les éléments auxquels on applique sa fonction hcSticky().

Vu qu'il est entouré en dur, il est possible que Opera ait lu la librairie hc-sticky auparavant, et celle-ci s'applique toute seule d'elle même a tout élément de classe "wrapper-sticky", qu'elle est censée avoir créée elle même, après que le DOM soit complètement chargé - mais il n'est peut être pas complètement chargé à ce moment là.

Au passage, je remarque que les scripts js, pour beaucoup, sont inclus dans le body, lignes 1523 à 1533. Les navigateurs sont libres d'interpréter ça comme ça leur chante, car ça ne respecte pas le standard qui est de les inclure dans la head.

La solution que je propose - mais pour que je puisse la tester moi même, il faudrait que je réussisse à répliquer le problème sur ma copie locale :

1) Ramener les script src = dans la head.
2) Modifier le div de la ligne 1194 de class="wrapper-sticky" à id="sidebar"

Du coup le reste de code présent dans custom.js va s'appliquer; il n'y a pas de conflit, vu que rien n'a l'id sidebar dans le code (sauf si je suis couillon et que je l'ai loupé)

Je parierais pas mal que c'est ça le problème, d'autant plus qu'en faisant un essai cache vidé pour voir, j'ai vu pendant une fraction de seconde la page s'afficher correctement, avant que cette barre latérale ne se décale à gauche, ce qui pourrait signifier une intervention d'un script js un peu en retard sur le reste.

[Pouzzler]

Bon, j'ai fait un test de hcsticky : pouzzler.free.fr/hcsticky

Ça marche pas du tout sous Opera 12.17, Firefox 43.0.1, et sous Chrome et IE, ça reste la ou il faut... tant qu'on scrolle pas jusqu'en bas de la page. Je demande à l'auteur de la librairie ce qu'il en pense.