Trenger hjelp med ratingbar

[Jonhoo]

Jeg har en "bar" (husker ikke hva det heter på norsk) hvor brukere kan se på en skala fra 0-100% hvor høyt en nedlasting er ratet (Pokkers engelsk ^^)

 

"Bar"en lages dynamisk av PHP fra resultater som er hentet fra en database, og er laget ved å bruke en table med to celler. Bredden på cellene blir kalkulert av PHP scriptet før HTMLkoden sendes ut. Resultatet blir da en table som ser ut som en "bar" hvor prosenten vises både som tekst og som en måler.

 

Det jeg lurer på er hvordan jeg kan la brukerene "rate" nedlastingen bare ved å føre musen over måleren. Med andre ord sånn at bredden på cellene blir endret ved hjelp av JavaScript og en mouseover effekt, og at når brukeren klikker så submitter (Uffameg) JavaScriptet ratingen ved hjelp av en onMouseDown..

 

Dere har sikkert sett det før, men jeg er dårlig til å forklare

 

Håper noen kan hjelpe meg, bare å spørre hvis jeg skal forklare mer....

 

Jon

[Torkild]

Heidu! Sorry denne kommer så sent, men nettet falt ned i natt.

 

I alle fall. Nå er ikke jeg så god på dette med javascript og dom og greier, men siden jeg akkuratt nå holder på å lære meg det, kan jeg jo ta treninger og prøve meg på dette.

 

OBS: Resultatet er langt i fra perfekt, hittil har jeg bare testet det i firefox og IE, og IE funker ikke. Den lar heller ikke brukeren stemme. Dette du har her er bare et utgangspunkt.

 

Hvis jeg hadde vært deg, så ville jeg droppet tabellen til det, den lager bare rør. jeg ville heller hatt en div, med en span i, for å markere.

 

Slik jeg ville laget den:

<div id="poll">
  <div id="pollinfo"></div>
  <a href="#"><span style="width:60%">60%</span></a>
</div>

div'en med id "pollinfo" er div'en som prosentinformasjonen skal dukke opp i.

 

Dette her vil jo se kjedelig ut, og det vil heller ikke være noe "bar"(var ikke lett den nei), så vil må jo legge til noe stil.

#poll {
  width: 400px;
  background-color: #CCC;
  margin: 60px;
}

#poll a {
  color: #000;
  text-decoration: none;
  text-align: right;
}

#poll span {
  display: block;
  background-color: #F00;
}

#poll #pollinfo {
  width: 89px;
  height: 30px;
  position: absolute;
  background: #F00 url("pollinfo_bg.png") no-repeat bottom;
  margin-top: -43px;
  font-family: Verdana;
  font-size: 10px;
  text-align: center;
}

Dette er selvfølgelig bare et eksempel. Jeg har prøvd å være flink på id'er, sånn at det skal være lett for deg å rediger etter ønske.

 

Videre trenger vi selve javascriptet, skal prøve å ta det litt bit for bit.

 

Første funksjonen er bare en funksjon som får addEventListener til å funke i alle store browsere.

// cross-borwser event handling for IE5+, NS6+ and Mozilla/Gecko
// By Scott Andrew
function addEvent(obj, evType, fn, useCapture) {
  if(obj.addEventListener) {
     obj.addEventListener(evType, fn, useCapture);
     return true;
  } else if(obj.attachEvent) {
     var r = obj.attachEvent('on' + evType, fn);
     return r;
  } else {
     obj['on' + evType] = fn;
  }
}

Neste linje bruker funksjonen over, og sier at når vinduet er lastet skal funksjonen 'barInit' lastes.

addEvent(window, 'load', barInit, false);

Funksjonen 'barInit' forteller klienten at hvis ikke funksjonen "document.getElementById" eksisterer skal scriptet avbrytes. Videre setter den to variabler, som inneholder den ene og den andre diven vi bruker. Den får "pollinfo" til å forsvinne, og til setter to eventListeners på "poll".

function barInit() {
  if(!document.getElementById)
     return;
  var poll = document.getElementById('poll');
  var pollinfo = document.getElementById('pollinfo');
  pollinfo.style.display = "none";
  addEvent(poll, 'mousemove', moveListener, false);
  addEvent(poll, 'mouseout', outListener, false);
}

Første eventListener leder til funksjonen moveListener, som sører for at prosenten av musens posisjon over "bar"en regnes ut, og at den tomme diven fylles med tekst og kommer til live. Posisjonen til den tomme diven er også festet til musen. Her er det bare masse utregninger, og ting som jeg mye ikke forstår helt selv, som vi hopper litt videre.

function moveListener(ev) {
  var e = window.event ? window.event : ev;
  var t = document.getElementById('poll');
  var curLeft = 0;

  var mouseLeft;
  if(e.pageX) {
     mouseLeft = e.pageX;
  } else {
     mouseLeft = e.clientX;
     if(isIE) {
        mouseLeft += document.body.scrollLeft;
     }
  }


  curLeft = mouseLeft - t.offsetLeft;
  curLeft = 100 / t.offsetWidth * curLeft;

  var pollinfo = document.getElementById('pollinfo');
  pollinfo.style.display = "block";
  pollinfo.style.left = mouseLeft - 45;
  pollinfo.innerHTML = "Gi din stemme!<br>" + curLeft + "%";

  var poll = document.getElementsByTagName('a');
  poll.href = "http://localhost/?" + curLeft;
}

Neste eventListener er "outListener", som sørger for at med en gang musens taes vekk fra "bar"en, så forsvinner også den "pollinfo"-diven.

function outListener() {
  var pollinfo = document.getElementById('pollinfo');
  pollinfo.style.display = "none";
}

Du kan se hvordan alt dette fungere på walabu.com/bar.

 

Vil si at alt jeg har laget her har jeg fått enten direkte fra boka DHTML Utopia: Modern Web Design Using JavaScript & DOM, eller via den. På koden min kan det virke som om boka er elendig, men det er heller nivået mitt som er dårlig. Vil anbefale den for nysgjerrige folk.

 

Jeg legger også ved all kildekode, sånn at du kan utforske det lettere på din egen maskin.

 

EDIT: Forresten ville jeg droppet javascipt i en sånn affere som dette, og heller laget en 10-stegs bar bare med hjelp av css. Eksempel kommer om noen min.

 

Da har jeg laget samme funksjonen i kun css og xhtml, dog bare med 10 alternativer, 10%, 20%, 30%, osv, men krever ikke javascript, og er lettere å vedlikeholde. Og du trenger jo ikke mer en 10 inputs.

 

I alle fall, så linker jeg bare til eksempelet, så kan du selv ta det ut i fra det.

linken er http://walabu.com/bar/10-steg.html

 

Den her fungere fortsatt ikke i IE, men om du sender meg en mail, så skal jeg nok få den til å gjøre det, og notice, send en mail, for jeg er ikke så mye på forumet, som du kanskje ser.

 

Da trenger du jo også emailen min da. tante[punktum]grusom[alfakrøll]gmail[punktum]com

bar.zip

Endret 14. august 2006 av Torkild