11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour
j'utilise un script qui me permets de redimentionner tous les éléments de la fenetre en fonction de la résolution.
Le script
<!-- Custom Scripts -->
        <script type="text/javascript">
            var windowSize = {
                height: 0,
                width: 0,
                headersHeight: 0,
                mainHeight: 0,
                contentBodyHeight: 0,
                contentBodyWidth: 0,
                leftNavHeight: 0,
                contentDetailsWidth: 0,
                setDimensions: function(){
                    windowSize.height = $('body').height();
                    windowSize.width = $('body').width();
                    windowSize.headersHeight = $('#header').height();
                    windowSize.mainHeight = windowSize.height - windowSize.headersHeight;
                    windowSize.contentBodyHeight = windowSize.mainHeight - ($('.contentHead').height() + $('#footer').height());
                    windowSize.contentBodyWidth = $('.content-main').width();
                    windowSize.leftNavHeight = windowSize.mainHeight;
                    windowSize.updateSizes();
                },
                updateSizes: function(){
                    $('#content').css('height',windowSize.mainHeight+'px');
                    $('.content-main').css('height',(windowSize.contentBodyHeight)+'px');
                    $('#sidebar_right2').css('height',windowSize.leftNavHeight+'px');
                },
                init: function(){
                    if($('#content').length){
                        windowSize.setDimensions();
                        $(window).resize(function() {
                            windowSize.setDimensions();                
                        });
                    }
                }
            };
            [code=javascript]$(document).ready(function(){
                windowSize.init();
            });


</script>[/code]
Cela marche nickel sous Firefox mais pas du tout sous IE ni Safari. Mon footer se retrouve totalement décalé et notamment le menu flash s'y trouvant. J'ai regardé sous ie le debogueur me dit "au niveau de
$(document).ready(function(){
                windowSize.init();
            });

Cet objet ne gère pas cette propriété ou cette méthode. J'ai beau regarder partout je ne trouver pas par quoi il faut le modifier.
S vous pouviez m'aider ce serait sympa
Salut

Alors si je teste avec firefox, j'ai aussi une erreur qui est...$ n'est pas défini. Je le défini et je reviens.

Intéressant comme source, c'est de toi?
Modifié par keran (22 Mar 2011 - 20:26)
Il y à bien une erreur avec firefox avec la barre dévellopeur.

Avertissement : Token inattendu dans un sélecteur d'attribut : « ! ».
Modifié par keran (22 Mar 2011 - 21:31)
Merci de tes réponses.Non ce n'est pas de moi j'ai trouvé ça alors que je cherchais à caller les différents éléments du site pour qu'il se redimentionne en fonction du navigateur et ça marche très bien. bon en fait mon probleme venait de mon flash en footer que j'avais mal intégré, il me semble, car depuis que j'ai révisé ma copie je n'ai plus ce probleme avec ie. Mais n'empeche que j'ai toujours le probleme avec safari et chrome (sais pas si y'a beaucoup d'utilisateurs mais bon, on ne sait jamais). mon footer apparait bien et mon flash au lieu d'être calé dessus est placé bien au dessous! tu as déjà vu ça ? j'ai fait des recherches un peu partout et n'ai rien trouvé.
résolu au moins avec ie, en tout cas l'erreur disparait avec outerHeight/outerWidth


(function($) {
	$(document).ready(function(){ 
		var windowSize = {                 
				height: 0,                 
				width: 0,                 
				headersHeight: 0,                 
				mainHeight: 0,                 
				contentBodyHeight: 0,                 
				contentBodyWidth: 0,                 
				leftNavHeight: 0,                 
				contentDetailsWidth: 0,                
				setDimensions: function(){                     
					windowSize.height = $('body').outerHeight();                     
					windowSize.width = $('body').outerWidth();                     
					windowSize.headersHeight = $('#header').outerHeight();                     
					windowSize.mainHeight = windowSize.height - windowSize.headersHeight;                     
					windowSize.contentBodyHeight = windowSize.mainHeight - ($('.contentHead').outerHeight() + $('#footer').outerHeight);                     
					windowSize.contentBodyWidth = $('.content-main').outerWidth();                     
					windowSize.leftNavHeight = windowSize.mainHeight;                     
					windowSize.updateSizes();                 
			   },                 
				updateSizes: function(){                     
					$('#content').css('height',windowSize.mainHeight+'px');                     
					$('.content-main').css('height',(windowSize.contentBodyHeight)+'px');                     
					$('#sidebar_right2').css('height',windowSize.leftNavHeight+'px');                 
				},
				init: function(){                     
					if($('#content').length){                         
						windowSize.setDimensions();                         
						$(window).resize(function() {                             
							windowSize.setDimensions();                                         
						});                     
					}                 
				}             
			 };
		  windowSize.init();             
		});
})(jQuery)


a écrit :
au lieu d'être calé dessus est placé bien au dessous


ccs? clear: both sur le footer? il y est?
Modifié par keran (22 Mar 2011 - 22:08)
oui ça y est !
et merci pour la solution outerHeight pour ie.

En fait c'était tout bête comme souvent dans ces cas là : j'avais mis dans mon footer l'animation flash avec un height "100%". J'ai mis la bonne dimention de l'animation et tout est rentré dans l'ordre.

Merci en tout cas de ton aide
Modifié par loladc (23 Mar 2011 - 09:19)