Problème avec le chargement des scripts

Par jonathanabout, il y a 11 ans


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

6 réponses

betaWeb, il y a 11 ans

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 ?

Lartak, il y a 11 ans

Bonjour.
Pourquoi tu n'utilises pas les media queries en css ?

betaWeb, il y a 11 ans

@Lartak: Je me suis posé exactement la même question en voyant cette bouillie de JS !

Huggy, il y a 11 ans

De quelle planète vient ce script ?
planète Scripton
Ca ne fait rire que moi, ok je sors
:)

jonathanabout, il y a 11 ans

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,