Archive for tag: Kompatibilitet

Graciøs tilbagefald på websider

Når man laver websider er det en god idé at tænke på, hvilke behov og forudsætninger slutbrugeren har. Herunder hvilken opsætning brugeren ser din side med (javascript til/fra, stylesheets til/fra, browser type og - version osv.).

Målet er er så mange som muligt kan se indholdet på siden.

Mange sider er styret og drevet med en høj grad af scripting, således funktioner kun er tilgængelige, hvis scripting er slået til. Der kan være mange årsager til at man ønsker denne afhængighed af scripting, men man bør som udgangspunkt sikre sig at relevant indhold også kan ses og bruges uden scripting slået til.

Dette kan opnås ved at sætte siden op uden scripting i første omgang og derefter så tilføje de effekter man måtte have behov for efterfølgende. Med jQuery er det overkommeligt at tilføje f.eks. effekter, som kræver scripting når siden loader. Dette vil jeg demonstrere nedenfor.

Eksemplet implementerer en ramme med info under et billede. Når scripting er slået til skjules info som udgangspunkt og bliver i stedet til en slideUp når musen føres over.

<style type="text/css">
   .boks {
   }
   .info {
   }
   .info.dynamic { bottom: 0px; position: absolute; }
</style>
<script>
   $(function() {
$(".boks .info").addClass("dynamic"); $(".boks").hover( function() { $(".info", this).slideUp(); }, function() { $(".info", this).slideDown(); }); }); </script>

Følgende html afspejler html:

<div class="boks">
   <div class="basis">
      <img src="billede.jpg"/>
   </div>

   <div class="info">
      <p>
         Slideup info eller fast, hvis scripting
         ikke understøttes.
      </p>
   </div>
</div>

Som det kan ses, sørger scriptet for at koble stylen dynamic på det element der skal have speciel effekt, når script understøttes. Hvis scipting ikke er aktiveret vises info blot under billedet.