(X)HTML, JavaScript, DHTML, XML, CSS Client scripting tehnologije, Dynamic HTML, Cascading Stylesheets, XML i standardi |
|
Alati teme | Način prikaza |
|
29. 08. 2012. | #1 |
novi član
Na probnom radu
Datum učlanjenja: 17.05.2012
Poruke: 18
Hvala: 4
0 "Hvala" u 0 poruka
|
Maskiranje browse button i IE
Imam upload formu. Problem je sto klijent trazi da se umesto browse dugmeta ubaci neka fensi slicica.
Ja sam to uradio na sledeci nacin: Napravio sam div sa tom slicicom a u njemu stavio <input type="file"> polja koje sam sakrio. Stavio sam Kôd:
opacity: 0; -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)';filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); 1) U svim pretrazivacima izgled je dobar. 2) U safari, operi, chrome, ff radi super. 3) Problem je u IE. POsto sam za div stavio sirinu 200px, onda sam i za <input> stavio toliko. Tako da kada kliknem na desnu polovinu slicice aktivira se klik i sve je ok, a ako kliknem na levu polovinu nista se ne desava, tacnije pojavi mi se kursor misa kao da cu upisem tekst (posto se input sastoji od dela browse i dela koji prikazuje selektovanu putanju, znaci ponasa se kao da hocu da upisem tekst u to polje u kome treba da se pojavi putanja fajla)... Jel zna neko ispravan i bezbolniji nacin dodavanja slicice Browse dugmetu , a pri tom da se vidi dobro u svim pretrazivacima? Ili neki savet oko resavanja ovoga? |
29. 08. 2012. | #2 |
Aleksandar Janković
Qualified
Datum učlanjenja: 16.10.2010
Lokacija: Bg-Sd
Poruke: 165
Hvala: 70
54 "Hvala" u 36 poruka
|
Izbegavaj da radiš to preko eventa. Internet explorer to smatra sigurnosnim propustom.
Princip koji ti je potreban je da sakriješ dugme(u svim browserima) i stavis ga preko tog dugmeta na koji želiš da dobiješ upload. Kada korisnik klikne, kliknuće na nevidljivi input element za upload.
__________________
ajankovic.com] |
29. 08. 2012. | #3 |
banned
Professional
Datum učlanjenja: 04.06.2005
Poruke: 371
Hvala: 0
738 "Hvala" u 83 poruka
|
Postavi html i css kod.
Pokušaj tako što ćeš veličinu file input elementa menjati menjanjem font-size css osobine, postavi neku veliku vrednost npr. font-size: 100px; a div elementu postavi overflow: hidden;. File input elemenat pozicioniraj unutar div position: absolute; top: 0px; right: 0px;
__________________
Don't look at me; I'm lost too. “If you can't dazzle them with brilliance, baffle them with bul*s**t.” Poslednja izmena od Br@nkoR : 29. 08. 2012. u 11:55. |
29. 08. 2012. | #4 |
profesionalac
Qualified
Datum učlanjenja: 02.05.2009
Poruke: 193
Hvala: 27
8 "Hvala" u 6 poruka
|
Evo jednog primera, meni radi.
HTML kôd:
<style> .file_input_div { position: relative; width: 190px; height: 27px; overflow: hidden; } .file_input_button { width: 190px; position: absolute; top: 0px; background-color: #2791CB; color: #FFFFFF; border:0px; padding:2px; font-weight:bold; cursor:pointer; } .file_input_hidden { font-size: 45px; position: absolute; right: 0px; top: 0px; opacity: 0; cursor:pointer; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -khtml-opacity: 0; -moz-opacity: 0; } </style> <div class="file_input_div"> <input type="button" value="Dodaj dokument" class="file_input_button box_border" /> <input type="file" id="fileNameDodC4" class="file_input_hidden" name='fajl' /> </div> |
29. 08. 2012. | #6 |
novi član
Na probnom radu
Datum učlanjenja: 17.05.2012
Poruke: 18
Hvala: 4
0 "Hvala" u 0 poruka
|
Ok, pomoglo. Tnx
Nisam ne znam kako, al sam ga napravio nekako Menjao sam position na relative, i jos nesto sitno. Bitno je da radi. |
|
|