problemi con datepicker: z-index
Taggato: datepicker z-index
- Questo topic ha 5 risposte, 2 partecipanti ed è stato aggiornato l'ultima volta 13 anni, 7 mesi fa da raptus257.
- AutorePost
- 13 Settembre 2010 alle 15:29 #1561raptus257Partecipante
salve, sono nuovo del forum quindi un saluto a tutti, avrei un problema che non riesco a risolvere con il datepeaker ui di jquery; il fatto è che nel mio sito uso già un plug-in per una galleria di immagini che assega ad ognuna di queste uno z-index piu alto in modo da farle visualizzare a turno. La quesione si crea quando apro il calendarietto del datepeacker e questo, siccome gli viene assegnato un valore z-index fisso non modificabile dal css, mi và a finire sotto la galleria delle immagini rimanendo in parte coperto. Ho cercato di modificare il javascript del plugin ma non essendo programmatore non sò dove mettere le mani; Qualche idea su come risolvere?
13 Settembre 2010 alle 20:35 #1763jqueryitaliaAmministratoreCiao raptus257 e benvenuto!!!
Il datepicker dovrebbe avere un foglio stile di default: quindi dovrebbe essere sufficiente settare lo z-index del div con class “ui-datepicker” ad un valore più alto di quello che viene settato per le immagini.
Se ciò non bastasse ti consiglio ti seguire il consiglio che trovi in questa pagina http://www.west-wind.com/weblog/posts/891992.aspx dove viene utilizzato il plugin maxZIndex. Alla fine dell’articolo trovi le istruzioni da applicare al datepicker.
14 Settembre 2010 alle 01:56 #1764raptus257Partecipanteho seguito il tuo consiglio ed ho cercato di utilizzare il plug-in maxZIndex, pero non funziona ugualmente 🙁
Ho inserito il seguente codice nell’head della pagina:
<script> $.maxZIndex = $.fn.maxZIndex = function(opt) { /// <summary> /// Returns the max zOrder in the document (no parameter) /// Sets max zOrder by passing a non-zero number /// which gets added to the highest zOrder. /// </summary> /// <param name="opt" type="object"> /// inc: increment value, /// group: selector for zIndex elements to find max for /// </param> /// <returns type="jQuery" /> var def = { inc: 10, group: "*" }; $.extend(def, opt); var zmax = 0; $(def.group).each(function() { var cur = parseInt($(this).css('z-index')); zmax = cur > zmax ? cur : zmax; }); if (!this.jquery) return zmax; return this.each(function() { zmax += def.inc; $(this).css("z-index", zmax); }); } jQuery('#txtDate').datepicker({ showButtonPanel: true, showOn: 'button', buttonImageOnly: true, buttonImage: '/wconnect/images/calendar.gif', beforeShow: function() {$('#ui-datepicker-div').maxZIndex(); }, dateFormat: 'mm/dd/yy' }).attachDatepickerInputKeys(); </script>
forse devo cambiare qualcosa? il codice va inserito in qualche alta parte?
14 Settembre 2010 alle 23:49 #1765jqueryitaliaAmministratoreChe verisone di jQueryUI stai utilizzando?
La pagina è visibile in rete? Se si puoi darmi l’indirizzo?
15 Settembre 2010 alle 11:34 #1766raptus257Partecipantela pagina è questa: http://www.bbvillaangela.it/; per adesso finche non risolvo ho abbassato il div delle prenotazioni anche se adesso sto facendo qualche prova
15 Settembre 2010 alle 12:03 #1767raptus257PartecipanteRagazzi ho risolto!!! ho apero il file .js del datepicker (jquery.ui.datepicker.js), qui mi sono andato a trovare la riga di codice dove viene assegnato lo z-index ad un valore di 1:
inst.dpDiv.zIndex( $(input).zIndex()+1 );
e non ho fatto altro che cambiare il valore ad 8:
inst.dpDiv.zIndex( $(input).zIndex()+8 );
poi siccome nella galleria che sto usando lo z-index delle immagini ha un valore massimo di 7 il gioco è fatto!
Spero che questo articolo possa aiutare altri perche ho visto anche nei forum esteri che questo è un problema abbastanza diffuso.
un saluto a tutti, alla prossima
- AutorePost
- Devi essere connesso per rispondere a questo topic.