0
J'ai réussi à réduire la taille des marges et à réduire la largeur du corps lors du redimensionnement du navigateur de la fenêtre. Le problème est '#content' clignote encore pendant une seconde.Jquery ne redimensionne pas correctement la fenêtre
Si vous testez le code ci-dessous, vous verrez ce que je veux dire. C'est difficile d'exprimer son comportement. Est-ce que quelqu'un sait comment résoudre ce problème? Cela a-t-il quelque chose à voir avec les fonctions de rappel et l'ordre des événements. Merci.
Voici le code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style>
html, body{
padding: 0;
margin: 0, auto;
}
body{
position:absolute;
margin: 0px;
padding: 0px;
}
#content{
background-color: green;
}
#mainContent{
background-color: orange;
}
aside{
background-color: blue;
}
.floatLeft{
float:left;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<section id="content" class="border">
<section id="mainContent" class="floatLeft" >
mainContent
</section>
<!-- End of main content -->
<aside class="floatLeft">
aside
</aside>
<!-- End of aside -->
<p class="clear"></p>
</section>
<!-- End of content -->
<script type="text/javascript">
$(document).ready(function(){
change_template();
});
change_template = function(){
var window_h, window_w, top, left_right, content_w, mcontent_w, aside_w, left_right2, last_width;
left_right = 180;
aux = left_right;
top = screen.height - (screen.height - 100);
left_right = left_right - (screen.width - $(window).width())/2;
resize_body(top, left_right, left_right);
last_width = $(window).width();
$(window).resize(
function(){
if($(window).width() > last_width){
left_right = left_right + ($(window).width() - last_width)/2;
}else if($(window).width() < last_width){
left_right = left_right - (last_width - $(window).width())/2;
}
resize_body(top, left_right, left_right);
last_width = $(window).width();
});
content_w = screen.width - 2*aux;
mcontent_w = content_w - 300;
$('#mainContent').css('width', mcontent_w);
aside_w = content_w - mcontent_w;
$('aside').css('width', aside_w);
}
resize_body = function(top, left, right){
$('body').css('top', top+'px');
$('body').css('left', left+'px');
$('body').css('right', right+'px');
}
</script>
</body>
</html>