WEB:Norge

Her er noen smarte, men små kode snutter basert på rammeverket jQuery:

1. Endre skrift størrelsen på siden
$(".fontsize0").click(function() { $("body").css("font-size", "100%"); });
$(".fontsize1").click(function() { $("body").css("font-size", "120%"); });
$(".fontsize2").click(function() { $("body").css("font-size", "140%"); });
<ul>
<li class="fontsize0">Normal</li>
<li class="fontsize1">Medium</li>
<li class="fontsize2">Stor</li>
</ul>

2. Bytte ut <hr /> med <div class=”hr”></div>

$("hr").replaceWith('<div class="hr"></div>');

3. Bruk av ajax
$.ajax({
type: "POST",
url: "php-fil.php",
data: "foo=bar&foobar=orange",
success: function(msg){
alert( "Alt gikk bra " + msg );
}
});

4. Scroll til toppen av siden
$("#top").click(function() { $('html, body').animate({scrollTop:0}, 'slow'); });

Se her For del 1 av denne guiden

Del 2, mus over effekt
Denne funksjonen fungerer på samme måte som toggle, bare at den reagerer på “mus over” isteden for “klikk”.
Bruk samme kode som i del 1, men endre toggle med hover.

Så hva kan vi bruke denne funksjonen til? Mulighetene står egentlig i kø, men jeg skal vise hvordan denne effekten kan brukes til å lage en “drop down” meny.

La oss ta html delen først.

<ul class="hovedmeny">
  <li><a href="#">Menypunkt 1</a></li>
  <li><a href="#">Menypunkt 2</a>
    <ul class="undermeny">
      <li><a href="#">Hei på deg</a></li>
      <li><a href="#">Klikk i vei</a></li>
    </ul>
  </li>
</ul>

Med denne listen skal vi gjøre følgende:
a) Skjule underelementer med klassen “undermeny”
b) Vise underelementer når vi beveger musen over hovedelementene

Hørtes dette vanskelig ut..? Det er faktisk utrolig lett!

$(document).ready(function() {
  $(".undermeny").hide();
  $(".hovedmeny li").hover(
    function() { $("ul",this).show(); },
    function() { $("ul",this).hide(); }
  );
});

Legg merke til at vi bruker funksjonene “show” og “hide”. Disse er ganske logiske (De viser og skjuler noe) men kan også brukes til å vise mer flytende effekter. Prøv å endre $(“ul”,this).hide(); med $(“ul”,this).hide(“slow”);

Det finnes en del gode rammeverk for javascript. En av disse er jQuery. I denne guiden skal jeg vise hvor enkelt ting kan gjøres med nettopp dette rammeverket.

Del 1: Toggle
“Toggle” betyr å bytte mellom ting. Denne funksjonen lar oss for eksempel bytte mellom to bilder.

$(document).ready(function() {
  $(".bytt").toggle(
    function() { $(".meg").attr("src", "after.jpg"); },
    function() { $(".meg").attr("src", "before.jpg"); }
  );
});

Om vi nå lager html-strukturen på denne måten:

<img class="meg" src="bilde1.jpg" alt="bilde bytte" />
<span class="bytt">Se før og etter bilder av meg!</span>

Når en bruker da trykker på “Se før og etter bilder av meg!” vil bildet bytter mellom “before.jpg” og “after.jpg”

Forklaring:

det første vi gjør er å bruke $(document).ready(function() {
Dette vil klargjøre scriptet såsnart DOM er lastet.
Neste er å legge toggle funsksjonen til teksten. Til dette bruker vi klassen “bytt” (<span class=”bytt”>)
$(".bytt").toggle(

Toggle funskjonen er avhenging av to funsksjoner å bytte imellom.
function() { $(".meg").attr("src", "after.jpg");

Neste funksjon blir det originale bildet

function() { $(".meg").attr("src", "before.jpg"); }

Inne i disse funsksjonene sier vi at et element med klassen “meg” skal endre attributen “src” (Som er bilde kilden)
$(".meg").attr("src", "before.jpg");