User experience er omkring de små detaljer

At udvikle dit indhold til altid at se ens ud i alle browsere kan være svært, men jeg er selv stødt på noget som for mig var lige så svært.
Nemlig det at dit indhold kan skifte position alt efter om du har scroll på din side eller ikke.
Hvis din side bruger procentvise bredder så vil din side tilpasse sig til brugerens skærm, men problemet er så at hvis fx din menu skal stå 80% til højre - altså næsten helt til højre men ikke helt.
Dette er et problem hvis du fx på din forside har en side med ikke specielt meget indhold, og denne laver ikke vertikal scroll og det ser fint ud med din menu, men så trykker du på det næste link og her er der masser af indhold som gør at din side får scroll på. Det i sig selv gør ikke noget, men fordi du bruger procentvise angivelser  så bliver browseren lige pludseligt mindre - fordi det viste område er nu browserens bredde minus den bredde som scrollbaren fylder.

På grund af dette så skifter din menu nu pludselig position og det vil derfor ligne den "hopper" når du skifter i mellem de to sider.

Det er ikke nemt at løse, og de fleste ville nok også være ligeglad men fordi jeg er så skide perfektionistisk så blev jeg simpelthen nød til at gøre noget ved det.
Derfor satte jeg mig for at uanset om der er scroll, eller ikke på min side skulle dens positioner være ens således at min top-menu ikke ville "hoppe".

Dette kunne så løses såre simpelt, men hvis man ikke lige ved det så er det nemlig ikke så nemt at finde ud af, men det jeg gjorde var at tænke logisk.
Det gode er at din skærm har en højde, og du har et body-element hvor alt dit html markup ligger indeni - altså dit indhold og din side.
Hvis dit indhold er større (læs: højere) end skærmens højde vil dette give dig en scrollbar ude i siden.
Egentligt ret simpelt, men de færreste tænker over det.

Dermed kan du tilpasse hvor bred din side skal være når der kommer scrollbar på således at for brugeren ser det ud som om at din menu ikke flytter sig, selvom den faktisk netop der flytter sig mere til højre for at stå på "samme position" som den gjorde inden der kom scrollbar på din side.

Jeg har nu fået det til at virke nogenlunde godt, men er ikke hundrede procent perfekt - men nu er det godt nok til jeg ikke tror de fleste vil ligge mærke til det, og jeg gider ikke spilde mit krudt på at få det pixelpræcist for der er andre sjovere ting at tage fat på.

Nedenstående kode gjorde det for mig, jeg har ikke lige haft tid til at gøre den "produktionsklar" så der er meget debug data, men den løste mit problem og kan være det kan være inspiration for andre. Det med at gøre nedenstående kode lækker må vente til jeg får bedre tid.



function FixMenuWidth() {
            //alert("Fix menu fix");

            var myval = getVerticalOverflow("ThisIsBody");
            var obj = document.getElementById("ThisIsBody");
            var contentHeight = obj.clientHeight;
            var screenHeight = $(window).height();
            //    alert("content: " + contentHeight + " - screen: " + screenHeight);

            if (contentHeight >= screenHeight) {
                $("#header").css("padding-right", "0px");
                $(".center-box").css("width", "90.7%");
            }
            //alert("done");

        }

function getVerticalOverflow(id) {
            var obj = document.getElementById(id);
            if (obj.innerHTML.length == 0) return 0;
            var overflow = obj.scrollHeight / obj.clientHeight;
            //alert(obj.scrollHeight + " " + obj.clientHeight);
            return overflow;
        }

        /**
        * Gets the horizontal overflow ratio for a div, if there is overflow.
        * If there is no overflow, this value will be 1.
        */
        function getHorizontalOverflow(id) {
            var obj = document.getElementById(id);
            if (obj.innerHTML.length == 0) return 0;
            return obj.scrollWidth / obj.clientWidth;
        }