Bonjour,<br/>
J'ai un problème avec le site dont je m'occupe actuellement,<br/>
Une balise script placée suite aux fichiers scripts contient mes fonctions pour définir la taille de certaines div etc...<br/>
Sur ordinateur, un coup sur dix, les div ont une hauteur de quelques pixels à peine contre beaucoup plus prévus,<br/>
Sur certains Androïd à coup tous les coups les div ont une hauteur de quelques pixels,<br/>
J'ai placé les scripts avant la fin du body comme prévu, et dans l'ordre logique, je ne comprends donc pas,<br/>
J'ai ensuite vu sur le net les histoires avec 'async' et 'defer' mais malgré différentes tentatives rien (en même temps je ne pense pas qu'il y ait à toucher à ça, d'après la console de dev les scripts chargent dans le bon ordre, chacun les uns après les autres.<br/><br/>
Ordre des scripts et scripts persos avant la fin du body:
<script src="../js/jquery-1.11.3.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-submenu.min.js"></script>
<script src="../js/bootstrap.offcanvas.min.js"></script>
<script src="../external/jquery/jquery.js"></script>
<script src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/tinymce/tinymce.min.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function() {
$(".rslides").responsiveSlides({
auto: true,
speed: 800,
timeout: 4000,
pager: true,
nav: true,
random: false,
pause: false,
pauseControls: false,
prevText: "Précédente",
nextText: "Suivante",
maxwidth: "",
navContainer: "",
manualControls: "",
namespace: "rslides",
before: function(){},
after: function(){}
});
windowwidth=window.innerWidth;
function heightoffres() {
height=$('.rslider').height();
if(windowwidth<768) {
$('div[class^=offre]').css('height', '200px');
$('.imgoffre').css('height', '200px');
}else {
$('div[class^=offre]').css('height', height/2+'px');
$('.imgoffre').css('height', height/2.10+'px');
$('.offre1, .offre2').css('height', height/1.25+'px');
$('.offre1>.imgoffre, .offre2>.imgoffre').css('height', height/1.35+'px');
}
}
heightoffres();
function widthoffres() {
if(windowwidth<768) {
$('.offre1').css('width', '100%');
$('.offre2').css('width', '100%');
$('.offre2').css('margin-left', '0');
}else {
$('.offre1').css('width', '100%');
$('.offre2').css('width', '100%');
$('.offre2').css('margin-left', '0');
width=$('.offre1').width();
$('.offre1').css('width', width+50+'px');
$('.offre2').css('width', width+50+'px');
$('.offre2').css('margin-left', -20+'px');
}
}
widthoffres();
function positionoffres() {
if(windowwidth<768){
$('.offre3>.imgoffre, .offre4>.imgoffre, .offre5>.imgoffre, .offre6>.imgoffre').css('position', 'relative');
$('.offre3>.imgoffre, .offre5>.imgoffre').css('top', 'auto');
$('.offre4>.imgoffre').css('bottom', 'auto');
$('.offre5>.imgoffre, .offre6>.imgoffre').css('right', 'auto');
$('div[class^=offre]').css('margin-bottom', '16px');
$('div[class^=offre]').parent().parent().parent().css('padding-right', '0px');
$('div[class^=offre]').parent().parent().parent().css('padding-left', '0px');
$('div[class^=offre]').parent().parent().css('padding-right', '0px');
$('div[class^=offre]').parent().parent().css('padding-left', '0px');
$('div[class^=offre]').parent().css('padding-right', '0px');
$('div[class^=offre]').parent().css('padding-left', '0px');
$('div[class^=offre]').css('padding-right', '0px');
$('div[class^=offre]').css('padding-left', '0px');
$('.imgoffre').css('padding-right', '0px');
$('.imgoffre').css('padding-left', '0px');
$('.overlayimgoffre').css('margin-left', 'auto');
}else{
$('.offre3>.imgoffre, .offre4>.imgoffre, .offre5>.imgoffre, .offre6>.imgoffre').css('position', 'absolute');
$('.offre3>.imgoffre, .offre5>.imgoffre').css('top', '0');
$('.offre4>.imgoffre, .offre6>.imgoffre').css('bottom', '0');
$('.offre5>.imgoffre, .offre6>.imgoffre').css('right', '16px');
$('div[class^=offre]').css('margin-bottom', 'auto');
$('div[class^=offre]').parent().parent().parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().parent().parent().css('padding-left', 'auto');
$('div[class^=offre]').parent().parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().parent().css('padding-left', 'auto');
$('div[class^=offre]').parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().css('padding-left', 'auto');
$('div[class^=offre]').css('padding-right', 'auto');
$('div[class^=offre]').css('padding-left', 'auto');
$('.imgoffre').css('padding-right', 'auto');
$('.imgoffre').css('padding-left', 'auto');
$('.overlayimgoffre').css('margin-left', '-15px');
}
}
positionoffres();
function widthblocsfooter() {
width=$('.offre1').width();
width=$('.offre2').width();
$('#bloclivredor').css('width', width+'px');
$('#blocactualite').css('width', width+'px');
$('#blocactualite').css('margin-left', -140+'px');
}
widthblocsfooter();
function heightlivredor() {
height=$('#blocactualite').height();
$('#bloclivredor').css('height', height+'px');
}
heightlivredor();
$('.rslides_tabs>li>a').html('<div></div>');
positionrsliderbullets();
exwindowwidth=window.innerWidth;
$(window).resize(function() {
windowwidth=window.innerWidth;
headerfixe();
if(windowwidth>=768) {
positionrsliderbullets();
}
heightoffres();
widthoffres();
positionoffres();
heightlivredor();
if(exwindowwidth<768) {
if(windowwidth>=768) {
location.reload();
}
}
exwindowwidth=window.innerWidth;
});
});
</script>
<br/>
Merci d'avance ;D
Bonjour,
J'ai refais la page, avec moins de javascript, davantage de mediaqueries, il n'y a apparement plus de problèmes,
Merci à tous d'avoir pris le temps de me répondre,
Salut,
C'est quoi cette horreur ??! oÔ
function positionoffres() {
if(windowwidth<768){
$('.offre3>.imgoffre, .offre4>.imgoffre, .offre5>.imgoffre, .offre6>.imgoffre').css('position', 'relative');
$('.offre3>.imgoffre, .offre5>.imgoffre').css('top', 'auto');
$('.offre4>.imgoffre').css('bottom', 'auto');
$('.offre5>.imgoffre, .offre6>.imgoffre').css('right', 'auto');
$('div[class^=offre]').css('margin-bottom', '16px');
$('div[class^=offre]').parent().parent().parent().css('padding-right', '0px');
$('div[class^=offre]').parent().parent().parent().css('padding-left', '0px');
$('div[class^=offre]').parent().parent().css('padding-right', '0px');
$('div[class^=offre]').parent().parent().css('padding-left', '0px');
$('div[class^=offre]').parent().css('padding-right', '0px');
$('div[class^=offre]').parent().css('padding-left', '0px');
$('div[class^=offre]').css('padding-right', '0px');
$('div[class^=offre]').css('padding-left', '0px');
$('.imgoffre').css('padding-right', '0px');
$('.imgoffre').css('padding-left', '0px');
$('.overlayimgoffre').css('margin-left', 'auto');
}else{
$('.offre3>.imgoffre, .offre4>.imgoffre, .offre5>.imgoffre, .offre6>.imgoffre').css('position', 'absolute');
$('.offre3>.imgoffre, .offre5>.imgoffre').css('top', '0');
$('.offre4>.imgoffre, .offre6>.imgoffre').css('bottom', '0');
$('.offre5>.imgoffre, .offre6>.imgoffre').css('right', '16px');
$('div[class^=offre]').css('margin-bottom', 'auto');
$('div[class^=offre]').parent().parent().parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().parent().parent().css('padding-left', 'auto');
$('div[class^=offre]').parent().parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().parent().css('padding-left', 'auto');
$('div[class^=offre]').parent().css('padding-right', 'auto');
$('div[class^=offre]').parent().css('padding-left', 'auto');
$('div[class^=offre]').css('padding-right', 'auto');
$('div[class^=offre]').css('padding-left', 'auto');
$('.imgoffre').css('padding-right', 'auto');
$('.imgoffre').css('padding-left', 'auto');
$('.overlayimgoffre').css('margin-left', '-15px');
}
}
Sinon pour ton soucis, tu as regardé du côté du CSS comment sont gérés les hauteurs ?
Je te conseils (si tu fais une app Cordova ou tu veux que ce soit rapide sur Android):
Retour d’expérience d’une migration Web to App (le plus utile)
Applications cross-plateformes WinJS/Cordova
Création d’apps mobiles JS avec Cordova et les apps universelles Windows