[JavaScript]Slider + Show/Hide Opcje

[peja1990]

Witam,
proszę Was o pomoc bo sam już nie wiem jak to zrobić.

Mianowicie mam skrypt jQuery wyglądający tak (element oznaczony jako "1"):

Czyli dynamiczny suwak, który definiuje wynik w nawiasach, np. (50%).

Wszystko fajnie działa ale chciałem dodać jeszcze coś takiego aby obok, np. w elemencie oznaczonym na obrazku jako "2", wyświetlały się wyniki odpowiadające odpowiedniemu wynikowi z suwaka.

Tak aktualnie działa suwak:

[HTML] pobierz, plaintext 
$(document).ready(function() {
  $("#slider-range-max").slider({
    range: "max",
    min: 0,
    max: 100,
    value: 50,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
      switch(ui.value) {
        case 0:
          //$("#results").show();
          break;
      }
      if(ui.value == 0) {
        document.getElementById("amount").innerHTML = "zablokowany";
      } else {
        document.getElementById("amount").innerHTML = ui.value+"%";
      }
    }
  });
  $("#amount").val($("#slider-range-max").slider("value"));
  document.getElementById("amount").innerHTML = "50"+"%";
});
[HTML] pobierz, plaintext 

A tak aktualnie wyglądają wyniki, w HTML:

[HTML] pobierz, plaintext 
<div class="moduleAccess" rel="47">Jakiś moduł - 47%</div>
<div class="moduleAccess" rel="100">Jakiś moduł - 100%</div>
<div class="moduleAccess" rel="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" rel="31">Jakiś moduł - 31%</div>
<div class="moduleAccess" rel="99">Jakiś moduł - 99%</div>
[HTML] pobierz, plaintext 

Chciałbym zrobić tak, że gdyby na suwaku wynik był równy, np 67% obok wyświetlałyby się div'y których wartość atrybutu "rel" jest równa lub mniejsza "67".

Mam nadzieję, że wystarczająco objaśniłem mój problem.
Będę wdzięczny za wszelkie sugestie jak i wszelką pomoc.

Serdecznie pozdrawiam,
Kamil Dunaj

[Kostek.88]

To mam rozumiec, ze chcesz wyswietlic duzo divow z wartosciami, czy 1-go, w ktorym te wartosci beda dynamicznie aktualizowane? Jesli ma byc duzo divow, to jak przejedziesz 2x po suwaku to bedziesz mial ponad 100 divov....

Co do 1 diva to wydaje mi sie, ze po 17. linijce kodu powinienes wstawic jeszcze cos takiego:

[HTML] pobierz, plaintext 
document.getElementById("id_twojego_diva").innerHTML = ui.value+"%";
[HTML] pobierz, plaintext 

PS. Jesli chcesz utrzymac poprawny kod HTML to powinienes parametr rel zastapic innym atrybutem, np. id albo title. http://www.w3schools.com/tags/tag_div.asp pod tym adresem masz liste parametrow dopuszczalnych dla DIV. rel na pewno mozesz uzywac w linkach.

PS2. Troche mieszasz czysty JS z jQuery. Uwazam, ze przez jQuery mialbys latwiejszy dostep do znacznikow, np. zamiast linii 17. mialbys

[HTML] pobierz, plaintext 
$("#amount").html = ui.val()+"%";
[HTML] pobierz, plaintext 

Ten post edytował Kostek.88 13.12.2011, 23:07:43

[peja1990]

No ale przecież w 17 linijce jest dokładnie to co napisałeś i jak widać nie bardzo się rozumiemy.
Chcę wyświetlać dużo div'ów, których wartość "rel" może się powtarzać.

[Kostek.88]

Myslalem, ze #amount to to co nad paskiem. Ja napisalem przyklad to wyswietlenia tego w DIVie oznaczonym 2, ale niewazne. Chyba wiem co masz na mysli. W takim razie:

[HTML] pobierz, plaintext 
<div id="div_nr2">
   <!-- to jest div, ktory oznaczyles na rysunku jako 2 -->
</div>
[HTML] pobierz, plaintext 

No i jQuery (nadal twierdze, ze za 17. linijka):

[PHP] pobierz, plaintext 
$('#div_nr2').html('<div class="moduleAccess" rel=" ' + ui.value +  ' ">Jakiś moduł - ' + ui.value +  ' %</div>');
[PHP] pobierz, plaintext 

Lub ew. zastapic... ui.val() zamiast ui.value, ale nie jestem do konca pewien, szczerze mowiac nie uzywalem jeszcze tych paskow przewijania.

PS. Ew. zapoznaj sie ze strona jQuery API i poczytaj o append(), appendTo(), html(), text(), val() . W ogole na tej stronce masz mnostwo ciekawych przykladow i zrodla

Ten post edytował Kostek.88 14.12.2011, 00:21:11

[peja1990]

Nadal się nie rozumiemy.
Okienko oznaczone na obrazku jako "2" to nie jest jeden wynik.
Wynik z suwaka wyświetla się tutaj :: Poziom dostępu (75%)

W okienku oznaczonym jako "2" jest lista wyników, np:

[HTML] pobierz, plaintext 
<div class="moduleAccess" dir="47">Jakiś moduł - 47%</div>
<div class="moduleAccess" dir="100">Jakiś moduł - 100%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>
<div class="moduleAccess" dir="100">Jakiś moduł - 100%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="75">Jakiś moduł - 75%</div>
<div class="moduleAccess" dir="61">Jakiś moduł - 61%</div>
<div class="moduleAccess" dir="15">Jakiś moduł - 15%</div>
<div class="moduleAccess" dir="99">Jakiś moduł - 99%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>
[HTML] pobierz, plaintext 

Jak widać wartość atrybutów "dir" może się powtarzać więc nie mogę zastosować atrybutu "id".
Chcę zrobić coś na zasadzie:

[PHP] pobierz, plaintext 
result = $("div.moduleAccess").attr('dir');
if(result > ui.value) {
  //TUTAJ CHCĘ ZROBIĆ BY DIV KTÓREGO WARTOŚĆ ATRYBUTU "DIR" JEST MNIEJSZA LUB RÓWNA WARTOŚCI "ui.value" ZOSTAŁ WYŚWIETLONY A DIV'y KTÓRYCH WARTOŚĆ JEST WIĘKSZA OD WARTOŚCI "ui.value" ZOSTAŁY UKRYWANE CZYLI (.show(); i .hide();).
}
[PHP] pobierz, plaintext 

Załóżmy że wartość "ui.value" jest równa "52%" to wyświetlamy tylko te div'y:

[HTML] pobierz, plaintext 
<div class="moduleAccess" dir="47">Jakiś moduł - 47%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="15">Jakiś moduł - 15%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>
[HTML] pobierz, plaintext 

Jaśniejsze ?

Ten post edytował peja1990 13.12.2011, 23:32:22

[Kostek.88]

Zaraz... podalem Ci html... a powinno byc append

[HTML] pobierz, plaintext 
$('#div_nr2').append('<div class="moduleAccess" rel=" ' + ui.value +  ' ">Jakiś moduł - ' + ui.value +  ' %</div>');
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
if(ui.value == 0) {
   document.getElementById("amount").innerHTML = "zablokowany";
} else {
   if(ui.value < 50) {
$('#div_nr2').append('<div class="moduleAccess" rel=" ' + ui.value +  ' ">Jakiś moduł - ' + ui.value +  ' %</div>');
   }
   document.getElementById("amount").innerHTML = ui.value+"%";
}
[HTML] pobierz, plaintext 

A po co chcesz ukrywac i pokazywac DIVy? Nie lepiej skryptem decydowac, czy maja byc po prostu TWORZONE albo NIE?

Ten post edytował Kostek.88 14.12.2011, 00:00:09

[peja1990]

Kurcze, ale tutaj nie chodzi o generowanie kodu html w postaci :: <div class="moduleAccess" dir="47">Jakiś moduł - 47%</div>


To jest HTML, który jest stabilny, a JS ma go tylko wyświetlać lub chować:

Kod

<div class="moduleAccess" dir="47">Jakiś moduł - 47%</div>
<div class="moduleAccess" dir="100">Jakiś moduł - 100%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>
<div class="moduleAccess" dir="100">Jakiś moduł - 100%</div>
<div class="moduleAccess" dir="52">Jakiś moduł - 52%</div>
<div class="moduleAccess" dir="75">Jakiś moduł - 75%</div>
<div class="moduleAccess" dir="61">Jakiś moduł - 61%</div>
<div class="moduleAccess" dir="15">Jakiś moduł - 15%</div>
<div class="moduleAccess" dir="99">Jakiś moduł - 99%</div>
<div class="moduleAccess" dir="31">Jakiś moduł - 31%</div>

[Kostek.88]

http://jsfiddle.net/Qbbwp/


EDIT: Sorry, update http://jsfiddle.net/Qbbwp/1/ Nieprzytomny dzis jestem Oczywiscie zamiast < mozesz dac <=

Ten post edytował Kostek.88 14.12.2011, 00:19:01

[peja1990]

DOKŁADNIE O TO MI CHODZIŁO !!!!!!!!!!!!!!!!!!
DZIĘKI WIELKIE !!!!!!!!!!!!!!!
Gdybym mógł to dałbym Ci mistrzu milion razy POMÓGŁ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Jeszcze raz WIELKIE DZIĘKI !!!!
Pozdrawiam