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


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


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


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


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


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


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


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


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


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


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


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


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