selectbox custom scroll cu JavaScrpt
Discutii si intrebari legate de scripturi si functii JavaScript, jQuery si Ajax, cod JavaScript in general.
-
dim
- Mesaje: 37
Re: selectbox custom scroll cu JavaScrpt
Am inlocuit ce mi-ai dat tu plus cele doua optiuni pt a inchide fereastra si acum este ok le afiseaza si in Internet Explorer 11 si in
Safari
Cod: Selectaţi tot
elms[n].addEventListener('mousedown', function(e){
if(e.target.size<4){
Cod: Selectaţi tot
elms[n].addEventListener('change', function(e){
am inlocuit
cu
si acum le afisaza de la 1 pe toate
singura problema pe care o mai am acum in
Safari este ca im deruleaza meniu il aranjza cum trebuie da nu ramne blocat sa pot sa aleg din el si nici nu afiseza nici o eroare
dim
salut am modificat scriptul si am adaugat:
Cod: Selectaţi tot
document.getElementById('sel').addEventListener('click', onClickHandler);
document.getElementById('sel').addEventListener('mousedown', onMouseDownHandler);
function onMouseDownHandler(e){
var el = e.currentTarget;
if(el.hasAttribute('size') && el.getAttribute('size') == '1'){
e.preventDefault();
}
}
function onClickHandler(e) {
var el = e.currentTarget;
if (el.getAttribute('size') == '1') {
el.className += " selectOpen";
el.setAttribute('size', '5');
}
else {
el.className = '';
el.setAttribute('size', '1');
}
}
acum imi deschide si inchide ferestra si in Safari doar ca se aplica primului element la restu nu are efect
MarPlo
Incearca scriptul urmator; am adaugat si codul de la tine:
Cod: Selectaţi tot
<select class='sel_cust_op' data-sel_op='50,48' name="quantity[{{ product['cart_id'] }}]"></select> -
<select class='sel_cust_op' data-sel_op='20,8' name="quantity[{{ product['cart_id'] }}]"></select> -
<select class='sel_cust_op' data-sel_op='25,17' name="quantity[{{ product['cart_id'] }}]"></select>
<script>
//From: https://marplo.net/
var is_safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); //True daca e Safari
//Receives: elms=array with <select> objects
function customSelOp(elms){
//parcurge array-ul
for(var n=0; n<elms.length; n++){
//preia valorile din atributul 'data-sel_op', le separa dupa ',' si le adauga ca numere in 2 variabile
var ar_atr = elms[n].getAttribute('data-sel_op').split(',');
var nr_op = ar_atr[0].trim()*1; //numar de optiuni
var sel_op = ar_atr[1].trim()*1; //optiunea selectata
var str_op =''; //pt. sirul cu optiuni
var str_sel_op =''; //pt. sirul cu optiunea selectata
//construeste sirurile cu optiuni
for(var i=nr_op; i>0; i--){
if(i ==sel_op) str_sel_op ='<option onclick="this.parentNode.size=1" selected value="'+i+'">'+i+'</option>'; //la clic pe ea face size 1 la elementul parinte
else str_op +='<option value="'+i+'">'+i+'</option>';
}
//adauga optiunile si cea selectata la urma
elms[n].innerHTML = str_op + str_sel_op;
//inregistrare evenimente
elms[n].addEventListener('mousedown', function(e){
if(is_safari){
var el = e.currentTarget;
if (el.getAttribute('size') =='1'){
el.className +=' selectOpen';
el.setAttribute('size', '5');
}
else {
el.className ='';
el.setAttribute('size', '1');
}
}
if(e.target && e.target.size<4){
if(e.target.options.length>5) e.target.size =5; //nr. optiuni vizibile
e.target.scrollTop =2345; //face scroll in jos de tot in lista select
}
});
//la click pe lista
elms[n].addEventListener('click', function(e){
var el = e.currentTarget;
if(el.hasAttribute('size') && el.getAttribute('size') =='1') e.preventDefault();
});
//la click in afara listei seteaza size 1
elms[n].addEventListener('blur', function(e){
e.target.size =1;
});
//la evenimentul change face size 1 si trimite form-ul in care e lista
elms[n].addEventListener('change', function(e){
e.target.size =1;
e.target.form.submit();
});
}
}
//preia elementele select cu class='sel_cust_op' si apeleaza functia cu ele
const sel_cust_op = document.querySelectorAll('select.sel_cust_op');
customSelOp(sel_cust_op);
</script>
Subiecte similare
-
Scroll down automat la Div cu Chat
JavaScript - jQuery - Ajax
Primul mesaj
Am in fisier chat, divul asta si incarcarea paginii cand e adaugata provine din alt fisier, eu vreau ca divul asta sa fie afisat intr-un patrat cu...
Ultimul mesaj
Acel cod javascript pt. scroll-down trebuie implementat in codul js din scriptul de chat.
Eu l-am folosit la scriptul de chat de la pagina:...