Gularu.fr
Cueillir l'actu, l'insolite du web et d'autres trucs
Mot-clé ‘firefox’
Je viens de me prendre le chou sur une découpe CSS un peu spéciale. En effet, mon client voulait une sorte de chrono qui ne bouge pas sur la page. Le chrono était présent sur la colonne gauche (float) de la page, elle même centrée avec un margin: 0 auto.
Les propriétés vicieuses du position fixed
Lorsque l’on lit les propriétés officielles du W3C, on peut lire cela sur cette propriété :
Comme dans un positionnement absolu, le contenu concerné est retiré totalement du flux. Mais il est cette fois positionné uniquement par rapport aux limites de la zone de visualisation, autrement dit la fenêtre du navigateur. Le défilement de la page n’a aucun effet sur un contenu en position fixe.
Ainsi, si tu veux fixer un div par rapport à un autre div, tu l’as dans le c**. Enfin du premier abord car j’ai trouvé comment faire en voyant le truc sur un autre site et en réglant également le problème d’IE6 (faut toujours qu’il nous les brise celui-là).
Première partie, pour les navigateurs récents
Déjà, le div que vous voulez fixer sur la page sans qu’il soit affecté par le défilement vertical, mettez lui la propriété fixe mais sans top et left. Avec ces deux propriétés d’inscrites, le div va bien être fixé mais par rapport aux bord gauche et haut de l’écran du navigateur et donc si l’utilisateur à une taille de navigateur différent du mien, le div va chevaucher les autres parties du site. Bref, voilà le code :
#chrono { //C'est mon exemple de chrono
position: fixed;
}
Ainsi, en ne spécifiant pas le top et le left, les navigateurs safari, firefox et ie7 vont fixer le div sur l’écran mais également par rapport à ses div parents ! Bref, voilà l’histoire réglée pour nos navigateurs les plus récents.
Deuxième partie, pour IE6 (vivement qu’il disparaisse…)
Pour IE6, nous allons utilisé un hack. Hein ? En gros, un bout de code qui ne sera lu que par IE6. Moi, je l’ai mis dans la feuille de style dédiée à IE6. Rappel pour appeler des feuilles de style pour chaque navigateur :
<!-- Feuille de tous les navigateurs -->
<link rel="stylesheet" type="text/css" media="screen" href="css/structure.css" />
<!-- Feuille de IE7 -->
<!--[if gt IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/structure_ie7.css" /><![endif]-->
<!-- Feuille de IE6 -->
<!--[if lte IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/structure_ie6.css" /><![endif]-->
C’est donc dans la feuille de style structure_ie6.css que nous allons travailler.
Il faut entourer votre div que vous voulez fixer d’une autre div avec une classe appelée fixe :
<div class="fixe>
<div id="chrono">
</div>
</div>
Dans la feuille de style de IE6, mettez ceci :
.fixe {
position: fixed;
z-index: 2;
}
*html .fixe { /* only ie6 : hack position fixe */
position: absolute;
top: expression((document.documentElement.scrollTop || document.body.scrollTop) +
this.offsetHeight+225);
left: -206px;
}
La propriété top que vous voyez contient donc un code interprété uniquement par IE6. Modifiez le chiffre 225 pour descendre ou monter votre div fixé. Modifiez le left: -206px; pour rapprocher ou éloigner de la bordure gauche.
Tout ceci est validé par le W3C validator.
Voilà, c’est tout ! Enfin, quand même bien deux heures de galère… Ciao !
Publié dans Informatique
Ajax : les erreurs js, prototype et scriptaculous les plus courantes, fréquentes et les problèmes d’affichage Google MapsLe 05 nov 2008
Partager TweetAujourd’hui, un petit post sur les erreurs les plus courantes ou fréquentes qui peuvent vous laisser patois devant votre ordinateur parfois pendant des heures alors que c’est souvent facile à résoudre :
Google maps :
- Fonctionne, marche sous [shal]Firefox[/shal] mais pas sous [shal]IE[/shal] : attention aux noms de variables pour le nom de la maps ou des markers ou marker manager. En effet, certains noms sont déjà utilisé par IE donc ça plante.
- Carte à moitié [shal]visible[/shal], carré gris à la place de la carte, ou [shal]carte[/shal] décalée. Revoyez toutes vos div, p ou span et fermeture de balise.
Ou (merci Fabien)
Ne pas instancier la gmap dans une fonction de type :
Event.observe(window, ‘load’, function() {
carte = new GMap2(document.getElementById(”carte”));
});
Mais plutot placer un fragment de js directement sous l’élément qui va contenir la carte (ou en bas de body); Comme ceci :
//gMap carte = new GMap2(document.getElementById(”carte”));
- Marker qui n’apparaît pas sur la carte avec le marker manager : attention, lors de la création du groupe, vous devez spécifier sur quel zoom les markers vont apparaître. J’ai perdu énormément de temps sur deux points. Trompé de zoom, du coup ils étaient bien créés mais je ne les voyais pas. Second point, problème de latitude et longitude, du coup ils étaient à un autre endroit.
Prototype :
- example is not defined : erreurs lorsque l’[shal]objet[/shal] ou variable, ici example, que vous ciblez n’existe pas.
- $(« example ») is null : erreurs lorsque l’objet, ici example, que vous ciblez n’existe pas.
- missing ) after argument list : Vous avez oublié de fermer une parenthèse, généralement pour le observe.
- missing } after property list : Vous avez oublié de fermer une parenthèse ou généralement vous avez oublié de mettre une virgule entre des paramètres. Exemple :
new Ajax.Updater("tableEditeur", "xhr/xhr_editeur_tri.php", {
method: 'post',
parameters: "modeTri="+modeTri+"&triSur="+triSur,
evalScripts: true
});
- The requested URL /example/xhr/xr_menu.php was not found on this server. : l’url que vous avez spécifié n’existe pas. Le fichier n’a donc pas été importé en appel Ajax.
Scriptaculous :
- missing ) after argument list : oublie des crochets pour des options d’effets. Exemple :
new Effect.Appear('menu_cote', {from:0.0, to:0.45});
- element is null : l’élément spécifié pour l’effet n’existe pas.
- $(« .example ») is null : attention, pour cibler les classes, vous devez utiliser les doubles dollars $$. Ici cela donnera :
$$(".example").each(function(el) {
});
D’autres erreurs seront rajoutées au fur et à mesure et n’hésitez pas à me les donner pour que je debbug votre code. Mettez l’erreur en commentaire de ce billet.
Publié dans Ajax, Informatique
Catégories
—
Liens
—
À propos de Gularu.fr
—
Dans ce blog vous trouverez votre bonheur si vous êtes webmaster, web-designer, web tout court. Mais parfois je lance des petits coups de gueule politiques et donne mon avis sur des sujets souvent inutiles mais drôles...