Inserire immagine con drop down nella toolbar


Pagina 1 di 2 1, 2  Seguente

Risolto Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Lun 22 Dic 2014 - 15:34

Mi sono immersa nei nuovi ghiottissimi tutorial. Complimenti ragazzi... avete fatto un lavorone.

Ora stavo armeggiando con questo.

http://aiuto.forumattivo.it/t16155-cinque-modi-per-personalizzare-la-toolbar?highlight=toolbar

per la precisione con questo codice

Codice:
$(window).load(function() {
    fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});


Lavora perfettamente, però io vorrei sostituire la parola forums con un immagine e " non gliela fo"....

is possible? Volete aiutare questa rompiscatole? tongue


Ultima modifica di La Valle dell'Eco il Gio 15 Gen 2015 - 14:49, modificato 1 volta
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Lun 22 Dic 2014 - 15:39

Ciao,

certo, basta inserire al posto di forum Questo codice:
Codice:
<img src="LINK">

e sostituisci Link con quello dell'immagine :good:
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Lun 22 Dic 2014 - 18:25

Viene fuori una cosa strana


Il link l'ho messo così. Ho toppato con le virgolette?
Codice:
 $(window).load(function() {
    fmtabs.list('<img src="http://i39.servimg.com/u/f39/18/91/14/63/new-2413.png">', '<a href="/portal?pid=3-">Messaggi ultima visita</a><br /><a href="/f2-">Forum 2</a>');
});
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Lun 22 Dic 2014 - 18:37

il codice sembra giusto pale

ti spiego il mio problema: il mio laptop è andato, e mi ritorna venerdì... quindi ora sono dal cellulare, motivo per cui non posso aiutarti subito Embarassed
per te è un problema aspettare?

mi dispiace davvero, perdonami
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Lun 22 Dic 2014 - 18:44

Ma figurati ! Aspettare non è un problema.
Intanto ci ragiono su anche io.

Ho notato una cosa.

se modifico il codice così 

Codice:
 $(window).load(function() {
    fmtabs.list('<img src=http://i39.servimg.com/u/f39/18/91/14/63/new-2414.png>', '<a href="/portal?pid=3-">Messaggi ultima visita</a><br /><a href="/f2-">Forum 2</a>');
});

non si impalla.



Però scompare del tutto il drop down.

Non so se può aiutarti questa scoperta, ma te lo dico.


Grazie di tutto.
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Lun 22 Dic 2014 - 18:46

ma in teoria gli apici e i quotes non dovrebbero disturbarsi a vicenda..
quando avrò il pc ci ragionerò, scusami ancora Embarassed
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Sab 27 Dic 2014 - 17:11

sono tornato Wink

dunque, tu mi dici che quel codice se lo usi per inserire del testo (esempio: forum) funziona normalmente, ma se vuoi inserire un'immagine al posto del testo, ti sballa tutto..

esatto? quindi con il testo funziona bene? Wink
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Sab 27 Dic 2014 - 18:05

Sì, esattamente.
Funziona con il testo, ma non con un immagine.
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Dom 4 Gen 2015 - 15:03

Ci sono novità?
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Dom 4 Gen 2015 - 18:37

Ciao,

perdonami me ne ero scordato Embarassed

allora ho fatto delle prove, e per esempio, questo codice mi funziona perfettamente:
Codice:
$(window).load(function() {
    fmtabs.add('<img src="http://illiweb.com/fa/i/toolbar/pa0.png">');
});

prova a dirmi se funziona anche per te :/
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Lun 5 Gen 2015 - 10:47

Niko scusami ma non va bene,
l'imagine si vede, ma dov'è il  menù drop-list? :???:
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Lun 5 Gen 2015 - 11:20

ma quel codice serve per aggiungere un elemento alla Toolbar, tutto qui :p
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Lun 5 Gen 2015 - 11:43

Ah, ok.
 Però io avevo chiesto come modificare il codice presente nel tuo tutorial che permetteva di creare una drop down list con immagine. :)
 Non si può fare?
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Lun 5 Gen 2015 - 15:18

hai ragione, sono proprio fuso Embarassed

allora con questo non ci sono problemi con le classi o testi a caso..
Codice:
$(window).load(function() {
fmtabs.list('<img src=http://illiweb.com/fa/fdf/questions.png>', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});

il problema è che nel codice javascript il primo elemento Forums che tu vuoi trasformare in immagine viene assegnata anche come classe per gli elementi del drop-down menù..
qualcosa del genere potrebbe funzionare:

Codice:
(function() {
  window.fmtabs = {
      add: function (name) {
        $('#fa_right').prepend('<div class="toolbar_name"><img src="' + name + '"></div>');
      },
      list: function (name, html) {
            $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name"><img src="' + name + '"></div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>');
            $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() {
              if (this.className == "toolbar_list_name") this.className += " active";
              else this.className = "toolbar_list_name";
              this.nextSibling.style.left = this.offsetLeft + 'px';
              this.nextSibling.style.top = this.offsetHeight + 'px';
              $(this.nextSibling).slideToggle();
            });
      }
  };
})();

$(window).load(function() {
fmtabs.list('http://illiweb.com/fa/fdf/questions.png', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
});

Se così non fosse, un'altra soluzione potrebbe essere quella di sostituire il testo con un'immagine in seguito.. ovvero:
  • Si carica lo script per il drop-down con il testo "Forum"
  • Un altro codice cambia testo con l'immagine


fammi sapere :thanks:
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Mar 6 Gen 2015 - 9:17

Non ti preoccupare Wink 

Io ho provato e così com'è c'è il solito problema: immagine senza drop down



Non ho capito i tuoi consigli su cosa modificare.


Se così non fosse, un'altra soluzione potrebbe essere quella di sostituire il testo con un'immagine in seguito.. ovvero:

  • Si carica lo script per il drop-down con il testo "Forum"
  • Un altro codice cambia testo con l'immagine






Mi puoi spiegare come ad un bambino? Embarassed
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Mar 6 Gen 2015 - 13:26

allora tu installa il tutorial con la scritta, quindi così come era nel tutorial Wink

quando lo hai installato ti dirò la seconda parte :good:
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Mar 6 Gen 2015 - 16:22

Già fatto sul mio forum di prova

http://proveprovate.forumattivo.it/


Passiamo allo step successivo :bene:
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Mar 6 Gen 2015 - 21:57

ora crea un altro javascript in tutte le pagine :new:
Codice:
$(function() {
document.getElementById("toolbar_list_name_http://illiweb.com/fa/fdf/questions.png").innerHTML = "Testo";
 }});

in pratica sostituisce il contenuto con Testo
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Mer 7 Gen 2015 - 6:56

Fatto lavorando 


.... però non si vede più nulla.

http://proveprovate.forumattivo.it/

Ho aggiunto questo senza eliminare il precedente, creando un nuovo Java.

Ho sbagliato?
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Mer 7 Gen 2015 - 21:14

Codice:
$(window).load(function() {
    fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
document.getElementById("toolbar_list_name_http://illiweb.com/fa/fdf/questions.png").innerHTML = "Testo";
});

prova a farne uno unico in questo modo Wink
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Mer 7 Gen 2015 - 21:35

Fatto. Ho rimosso tutti i precedenti e ho messo solo questo.
Niente. 
Sembra che non legga l'immagine. È così?

Mi spiace venir sembre fuori con richieste complicate
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Mer 7 Gen 2015 - 21:36

potresti darmi tutto il codice che hai inserito? Wink

figurati, dai che ci riusciamo
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Mer 7 Gen 2015 - 21:37

Oh yes

nel css
Codice:

    #fa_right .toolbar_list_name, #fa_right .toolbar_name {
        display: inline-block;
        line-height: 30px;
        padding: 0px 5px;
        color:rgb(206, 215, 229);
    }
    #fa_right .toolbar_list_name.active {
        background-color: #FFF;
        color: #000;
        border-left: 1px solid #000;
        border-right: 1px soli #000;
    }
    #fa_right .toolbar_list {
        display: none;
        position: absolute;
        list-style-type: none;
        margin: 0px;
        padding: 0px 10px;
        background-color: #FFFFFF;
        min-width: 200px;
        width: auto;
        border: 1px solid #333333;
        line-height: 30px;
        border-top: 0px solid #FFFFFF;
        z-index: 999;
        color: #000000 !important;
    }
    #fa_right .toolbar_list :link, #fa_right .toolbar_list :visited {
        color: #00569C !important;
    }

Java - tutte le pagine

Codice:
$(window).load(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    document.getElementById("toolbar_list_name_http://illiweb.com/fa/fdf/questions.png").innerHTML = "Testo";
    });
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko il Mer 7 Gen 2015 - 22:28

Cambiamo metodo di javascript allora
Exclamation ricordati che questo codice va inserito alla fine di quello "principale" Wink
Codice:
$(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    });

Poi prova a rimettere in un codice a parte questo:
Codice:
$(function() {
document.getElementById("toolbar_list_name_http://illiweb.com/fa/fdf/questions.png").innerHTML = "Testo";
});
avatar
Niko
Veterano dello staff
Veterano dello staff


Sesso : Maschile
Età : 21
Messaggi : 7761
Località : Provincia di Varese


Vedi il profilo dell'utente https://www.translationscloud.com
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco il Ven 9 Gen 2015 - 16:05

Ho provato. Purtroppo sparisce la toolbar.
Questa combinazione per ora è la migliore. Però niente immagine visibile.

Codice:
(function() {
      window.fmtabs = {
          add: function (name) {
            $('#fa_right').prepend('<div class="toolbar_name">' + name + '</div>');
          },
          list: function (name, html) {
                $('#fa_right').prepend('<div id="toolbar_list_name_' + name + '" class="toolbar_list_name">' + name + '</div><div id="toolbar_list_' + name.replace(/\s/g, '_') + '" class="toolbar_list">' + html + '</div>');
                $('#toolbar_list_name_' + name.replace(/\s/g, '_')).click(function() {
                  if (this.className == "toolbar_list_name") this.className += " active";
                  else this.className = "toolbar_list_name";
                  this.nextSibling.style.left = this.offsetLeft + 'px';
                  this.nextSibling.style.top = this.offsetHeight + 'px';
                  $(this.nextSibling).slideToggle();
                });
          }
      };
    })();
    $(window).load(function() {
        fmtabs.list('Forums', '<a href="/f1-">Forum 1</a><br /><a href="/f2-">Forum 2</a>');
    document.getElementById("toolbar_list_name_http://illiweb.com/fa/fdf/questions.png").innerHTML = "Testo";
    });

Se l'immagine la infilassimo nel CSS?
Non so, è un' idea. Embarassed
avatar
La Valle dell'Eco
****

Sesso : Femminile
Età : 37
Messaggi : 344
Località : Lombardia


Vedi il profilo dell'utente http://www.lavalledelleco.net/
La Valle dell'Eco è stato ringraziato dall'autore di questo topic.

Pagina 1 di 2 1, 2  Seguente

Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto

- Argomenti simili

 
Permessi di questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum