[JavaScript][CSS][HTML] Zmiana szerokości scrollbar Opcje

[php__amator]

Siema przedszkolaki,

Potrzebuję podpowiedzi w temacie jak w temacie (IMG:style_emoticons/default/smile.gif)
Chciałbym zmienić szerokość scroll baru ale .... i tu pojawia się problem bo wiem jak zmienić szerokość w oknie głównym, nie ma problemu. Problem pojawia się gdy chciałbym zmienić szerokość w .....

[HTML] pobierz, plaintext 
<select>
<option >costam</option>
<option >costam</option>
<option >costam</option>
<option >costam</option>
<option >costam</option>
<option >costam</option>
<option >costam</option>
<option >costam</option>
</select>
[HTML] pobierz, plaintext 

..... w liście rozwijanej (IMG:style_emoticons/default/smile.gif) W przypadku gdy lista jest krótka ... zero problemu ale gdy jest długa i pojawia się scroll bar ....
Czy i jeśli to możliwe to jak ?
Czy sam CSS da radę ?
Czy trzeba JS ?
Podpowiedzcie, szperam po sieci i nigdzie nie natknąłem się na żaden przykład jak tego dokonać.
Wszędzie znajduję tylko jak zmienić scroll bar okna głównego a to mi na nic (IMG:style_emoticons/default/sad.gif)

Nie powiem, że sprawa pilna. Chciałbym wykorzystać to do łatwiejszego wybierania "paluchami" bo celowanie w taki standardowy wąziutki pasek ... jest cokolwiek trudne (IMG:style_emoticons/default/smile.gif)

Pozdrawiam
phpamator

Ten post edytował phpamator 17.03.2014, 21:16:58

[timon27]

Teoretycznie się nie da.
Musisz więc zastosować jakieś obejście.


Pierwszy sposób:
Własny pasek przewijania w jquery. Powinien mieć odpowiednie opcje aby móc przedłużyć buttona i aby nie był zbyt 'fantazyjny' w porównaniu do systemowego.
http://www.as4you.pl/artykuly,59.html

Drugi sposób - trudniejszy ale własny.
Masz diva (div1) w którym chcesz zamieścić "oszukany" pasek:
1. skracasz div1 o 16 px z prawej
2. usuwasz mu pasek
3. z prawej tworzysz drugiego diva (div2)
4. w div2 wstawiasz obowiązkowy pasek z prawej (wypełni go on całkowicie)
5. w div2 zamieszczasz obrazek o szerokości 1px zaś wysokości odpowiedniej tak aby przycisk przewijania był taki jak chcesz.
6. w js pod zdarzenie przesuwania paska w div2 podpinasz przesuwanie zawartości div1

Tak ja to widzę.


Ten post edytował timon27 17.03.2014, 21:34:51

[php__amator]

Dzięki timon (pozdrowienia dla pumby)
trochę to zawiłeś (IMG:style_emoticons/default/smile.gif)
Próbowałeś kiedykolwiek czegoś takiego w przypadku jak mój czyli w
<select> ?
Zastanawiam się jak to miało by działać (IMG:style_emoticons/default/smile.gif)

[timon27]

Wiesz co, tak w ogóle select z setkami pozycji wygląda na kiepski pomysł.
(będzie to niefunkcjonalne - ktoś przesunie scrolla o 1px a select przeskoczy o 100 pozycji i pominie większość)
Powiedz co jest w tym selectcie to myślę że jakoś to inaczej da się rozwiązać.
Proponuję np. autocomplete:
http://jqueryui.com/autocomplete/

Ten post edytował timon27 17.03.2014, 22:04:27

[Turson]

Co do podpowiedzi, to HTMLowy <datalist> też się nada
(IMG:style_emoticons/default/smile.gif)

Ten post edytował Turson 17.03.2014, 22:09:24

[timon27]

Co do podpowiedzi, to HTMLowy <datalist> też się nada

(IMG:style_emoticons/default/questionmark.gif) (IMG:style_emoticons/default/questionmark.gif)
Jak to możliwe że nie zauważyłem tak przydatnego tagu?

[php__amator]

W select zasadniczo nic oprócz cyferek których ilość warunkowana jest aktualnym stanem,
czyli generuję dynamicznie tyle <option></option> ile jest dostępnych.
Realizuję to pętlą w php i wyświetlam przy produkcie.
W sumie najprościej byłoby wpakować tam input i klawiature ekranową. ale uparłem się na listy rozwijane (IMG:style_emoticons/default/sad.gif)

[timon27]

Zdecydowanie input (IMG:style_emoticons/default/smile.gif)
możesz też dodać "-" przed nim i "+" za (i domyślnie 0 lub 1).
i jak chcesz ograniczeni to albo jak ktoś wpisze ponad stan to automatycznie zamienia na stan albo (jak zazwyczaj to widzę) pole podświetla się na różowo a pod spodem pojawia sie stosowny komunikat.

Ten post edytował timon27 17.03.2014, 22:39:27

[kropamk]

z innej beczki, czy select nie jest na telefonach (bynajmniej android) interpretowany jako nowe okno z lista opcji? Nie spotkałem się aby pojawiał się desktopowy scrollbar (IMG:style_emoticons/default/wink.gif)

[php__amator]

Ale kiedy ja nie chce na "łatwiznę", input'a mogę tam zapakować w każdej chwili (IMG:style_emoticons/default/smile.gif)
to najmniejszy problem (IMG:style_emoticons/default/smile.gif)
Ja jednak chciałbym to zrobić inaczej, ciekawiej (IMG:style_emoticons/default/smile.gif)
może jakiś fajny patent z bo ja wiem .... czymś takim
+ + +
0 0 1
- - -
albo jakieś fajne graficzne rozwiązanie w postaci kółeczek jak w walizce z zamkiem szyfrowym (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif)

Kombinuje (IMG:style_emoticons/default/smile.gif)

[timon27]

(bynajmniej android)

Czyli co, windows mobile?

Na androidzie tak faktycznie jest.

[php__amator]

oooo kropa, właśnie coś takiego, jak w telefonach, jak coś jest do wybierania to odpala sie takie u dołu ekranu i można sobie "obracać" aż do uzyskania wymaganej wartości.

[Turson]

Poszukaj czegoś w stylu datepicker'a jquery

[timon27]

Kombinuje (IMG:style_emoticons/default/smile.gif)

Nie kombinuj.
W takich przypadkach użyszkodnicy wolą znane sobie rozwiązania.
Zamek szyfrowy będzie odstraszał.

[php__amator]

Zastanowię się. Póki co znalazłem coś takiego (IMG:style_emoticons/default/smile.gif)
http://demo.mobiscroll.com/select/select/j...p;mode=scroller
Fajne

Wogóle to odbiegliśmy od tematu, w dalszym ciągu potrzebuję podpowiedzi w kwestii jak zmienić szerokość scroll bar'u w <select> ?
Ale w jakiś prosty sposób ?
Albo nawet najprostszy ?
Pozdrawiam
phpamator

[Damonsson]

http://www.jqfancyfields.com
http://www.roblaplaca.com/docs/custom-selectbox/

[php__amator]

http://www.jqfancyfields.com
http://www.roblaplaca.com/docs/custom-selectbox/

Jeden z przykładów jest całkiem fajny, nie najlepszy ale rokuje nadzieje. Wystarczy, że znajdę jak jeszcze odrobinę poszerzyć scrollbar i jesteśmy w domu.
Kwestia parametrów w CSS i zmiana grafiki (IMG:style_emoticons/default/smile.gif)


Przemyślałem sprawę wzdłuż i wszerz. W końcu zdecydowałem się na Input plus klawiatura Ekranowa jsKB od Hebana (donatesoft) (na marginesie dodam, bardzo fajna klawiaturka, bardzo łatwa do zaimplementowania na stronie. Można ją też bez kłopotu do własnych potrzeb dostosować, zmienić wielkość, układ klawiszy czy kolorystykę itp) o ile potrzebuje się klawiatury ekranowej (IMG:style_emoticons/default/smile.gif)
Tak więc ostatecznie problem poszerzania scroll bar'u odleciał w siną dal i jego miejsce zajął <input> nieodwołalnie.

Dziękuję wszystkim za podpowiedzi i uwagi.
Temat uważam za zakończony.

phpamator