gestique-VHS - Site du webmaster de LLanada viLLa
Publicité
[l'article suivant n'est destiné qu'aux professionnels du web]
I recently found a good method in using both javascript and php to give the website I did for Fred Morvan a fixed and resizable background under Intrernet Explorer.
First because this website use a resizable image enclosed inside a <div> tag with a special DHTML scrollbar (http://www.fredmorvan.net/1 , sorry those pages are not yet translated, even if it's useful to be able to speak in French and not only to understand the slang words that people from Quebec use with people from Ontario ;-) ) which looks like a seahorse (that is, really...), I didn't notice the importance of the lack of support from Microsoft about the well-known 'position:fixed' in the background element. But, because of personal wishes, I decide to integrate another navigation mode (passing thru $_SESSION) for the users who don't want to use the 'hippocampus' scrollbar but a standard one which is more interactive considering the use of the mousewheel. Under Mozilla, the scrollbar go up 'n down so the <div> with background is still (because of the fixed option well-supported since the implementation of CSS2.1) but NOT UNDER IE...
Aaaaaaaaaaaaarrrrrrrrrgggggggggggggghhhhhhhhhhhhhh !!! Then... then I tried to do my best not to give up. A few days ago, I first tried to use a special trick in using Microsoft JScript for the IE case, but if it change the behavior of the background <div> or real background (I tested it both), it destroy the aesthetics becoz of the shakes from the background to go to the next scroll position. So bad! Then I tried to develop another strategy. I filled up my Emacs editor and.. damned it: I was trying to create a simple fixed non-resizable background. Actually I thought because the background is loadable by javascript I could also change the size: but background-size is a CSS3 tag and not yet supported too (I think that if this tag is supported by MS thus the 'position:fixed' one will too). Then I tried, and I tried and I cried ( :-) ) and I found...
Let us assume the work around that fabulous <div> tag with resizable background I made. It works only and only if there is no classical f*** scrollbar. So if I load inside a body or frame without scrollbar my 100%-sized <div> with background and a IFRAME which is loading the rest of the code of the page, I see one beautiful thing:
The superposition of the <div> and the <iframe> which both fit the page size (so no <body> scrollbar) with, in the first, a resizable fixed background (like in seahorse mode), and, in the second one, the content attached with an internal scrollbar which don't touch the <body> and the <div> but only (and it's normal) scrolls the iframe body content only. I certainly am not the first guy who found such an issue but I read during 7 months a lot of javascript::forum and everybody seems to give up !
So I will do a special tutorial on the next month to explain this (In fact I have to find simple example because the complex PHP structure of this website isn't a good start to learn a tip like that. So keep in touch, I am coming soon. I won't tell you all my secrets coz I must earn money too, but I can assure you that you will learn to do a good job with fixed resizable background using two layers: one for background; one for scrollable content...
CU
Commentaires
Calendrier
| Novembre 2009 | ||||||||||
| L | M | M | J | V | S | D | ||||
| 1 | ||||||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 | ||||
| 9 | 10 | 11 | 12 | 13 | 14 | 15 | ||||
| 16 | 17 | 18 | 19 | 20 | 21 | 22 | ||||
| 23 | 24 | 25 | 26 | 27 | 28 | 29 | ||||
| 30 | ||||||||||
|
||||||||||
Articles récents
Commentaires
Recherche
Recommander
Concours
* Les deux modes de navigation fonctionnent sous OPERA7&8: techniquement bug des lectures CSS réglés dans le mode hippocampe;
* Les deux modes fonctionnent sous Internet Explorer 5+: techniquement le mode classique (quand IE est détecté) scindent la page en deux; avec, d'un côté, le background resizable et fixe tel que IE ne peut le gèrer avec du contenu et, de l'autre, le contenu dans une 'iframe' avec scrollbar; plus une fonction onmousewheel pour passer la roulette du background à l'iframe;
* Tout marche parfaitement sous Mozilla;
* Musique d'intro sur le site.
* Le bloc 'Perdu?' correspond à un vrai mode d'emploi avec le même système de navigation que les bas de pages, à savoir, accès au basculement entre le mode hippocampe et le mode classique (en toutes circonstances); Visualisation avant "l'impression optimisée" (sauf pour la première page); icône de sortie neutre (même si le fait de cliquer n'importe où est identique); relooking avec:
* image de fond;
* taille fixe;
* centrer en page (sauf dans le mode classique hormis Internet Explorer 6+);
* explication sommaire mais efficace de l'existence des deux modes de navigation;
* lien sur la page 'A propos' du site.
De plus, gel du paragraphe LLanada viLLa dans la page musique en prévision de la 0.98.5; la 0.98.6 suivra de près avec le téléchargement sécurisé de la musique...
* création d'une section discographie (résolvant ou évitant de résoudre le bug de l'iframe);
* adaptation de l'hippocampe à chaque changement de hauteur dans le texte (par exemple: lorsque l'on voudra voir plus d'album de Fred (2 pour l'instant), le bloc s'ajoutera et l'hippocampe "resizera".
Visitez mon petit site a moi counter strike
@ tres bientot !
position: fixed peut être emulé de plusieurs façons:
- celle qui donne le meilleur résultat :
html { _overflow: hidden }
body { _overflow: auto }
ajouter un div dans body et y appliquer
width : 100%;
height: 100%;
margin: 0;
ajouter _position: absolute après position:fixed;
Evidament ça peut poser des problème avec les éléments qui étaient déja en position: absolute, je crois qu'ils retrouvent un comportement normal en ajoutant _position:static après position:absolute mais c'est à vérifier...
L'inconvegnant principal est qu'on est obligé de modifier la structure du document pour ajouter le div, ce qui peut ce faire à l'aide de javascript après le chargement de la page (onload) :
var newdiv = document.createElement('div');
newdiv.innerHTML = document.body.innerHTML;
document.body.innerHTML = '';
document.body.appendChild(newdiv);
- l'autre solution est un peut plus simple à mettre en oeuvre car on a seulement besoin de modifier la feuille de style :
après le position: fixed, on ajoute :
_position:absolute;
_top: expression( document.getElementsByTagName('html')[0].scrollTop);
L'inconvegnant de celle ci est que l'élément "sautille" lors du scroll. Bien que la premiès paraissait meilleur à ce niveau là, elle pose en réalité le problème inverse c.a.d que ce n'est pas l'élément fix qui "sautille" mais le scroll qui est saccadé (ce problème existe avec à peu près tous les navigateurs quand on utilise le positionnement fix ou une image de fond fixe.
A propos d'image de fond fixe background-attachment: fixed fonctionne parfaitement sous IE, si l'élément fix n'est pas trop compexe (un simple logo avec un lien par exemple) on peut très bien imaginer une troisième méthode en mettant le logo en image de fond fixe et en y supperposant un lien vide positionné grace à la seconde méthode, le lien sautillera mais ça ne se vera pas ;-).
Pour ce qui est des images de fond redimentionnables il y a aussi une solution css proprio sous IE :
_background-image: none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://url/chemin/image.png', sizingMethod='scale');
normalement ce filtre directX est fait pour charger des images comportant une couche alpha (png) mais il fonctionne aussi avec des jpeg ! étonant non ?
Au passage je vous recommande d'utiliser un chemin absolut avec ce filtre dans les feuilles de style externes car si vous utilisez un chemin relatif, il sera relatif non pas à la feuille de style mais au fichier html sur lequel vous l'appliquerez se qui peut poser des problèmes si vous appliquez cette feuille de style sur des page se trouvant à une profondeur différente dans l'arboressance.
A noter que si on utilise ce filtre pour charger des images avec des zones transparentes dans un lien, les zones transparentes ne seront pas cliquables. On peut éviter ce comportement en utilisant un pixel transparent gif comme image de fond.
Quand on l'utilise sur une image png, il faut virer l'image sinon ça se superpose, il faut spécifier les dimentions de celle-ci dans la feuille de style, il faut aussi utiliser un pixel transparent gif à la place de l'image originale si on veut que le text alternatif apparaisse en info-bul.
Rendez vous à tous sur : referencement blog annuaire blog
c'est gratuit ! Ca ne vous coutera que 10 secondes ;) SOYEZ LES PREMIERS !
_______________
buy dissertation