[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