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


jonathanabout
Auteur
Réponse acceptée

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 ?

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

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

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