Inserire immagine con drop down nella toolbar

2 partecipanti


Pagina 1 di 2 1, 2  Successivo

Risolto Inserire immagine con drop down nella toolbar

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

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

Ora stavo armeggiando con questo.

https://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.
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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:
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

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

Viene fuori una cosa strana
Inserire immagine con drop down nella toolbar WHUwVnodQj26AAAAABJRU5ErkJggg==

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>');
});
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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.

Inserire immagine con drop down nella toolbar JvggYNRbWMv05ru3tPrRoNGopqGcTTcarxkANoReMyNdGgoaiWc3WmtMqIcaNBQ1EtpM7Lf1tp1tCgoaiW4TnZVNctCC1XLe+gQUNRLamBYeDW1JOiQUNRlNfRoKGoFtOa2iwNo0FDUS3j2pCpdQ6q+arifTRoKKqF3QntGho0FEV5HQ0aiqK87v8BbXAwhcqSyUEAAAAASUVORK5CYII=

Però scompare del tutto il drop down.

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


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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da Niko 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
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

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

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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 Dom 4 Gen 2015 - 15:03

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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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://2img.net/i/fa/i/toolbar/pa0.png">');
});

prova a dirmi se funziona anche per te :/
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

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

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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 Lun 5 Gen 2015 - 11:20

ma quel codice serve per aggiungere un elemento alla Toolbar, tutto qui :p
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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?
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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://2img.net/i/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://2img.net/i/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:
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

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

Non ti preoccupare Wink 

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

Inserire immagine con drop down nella toolbar 0WKWvJlkzP4AAAAAElFTkSuQmCC

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
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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:
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

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

Già fatto sul mio forum di prova

http://proveprovate.forumattivo.it/


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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 Mar 6 Gen 2015 - 21:57

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

in pratica sostituisce il contenuto con Testo
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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?
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
});

prova a farne uno unico in questo modo Wink
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 Mer 7 Gen 2015 - 21:36

potresti darmi tutto il codice che hai inserito? Wink

figurati, dai che ci riusciamo Inserire immagine con drop down nella toolbar 1825098098
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
    });
La Valle dell'Eco
La Valle dell'Eco
****

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

Visualizza il profilo 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 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://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
});
Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 26
Messaggi : 9008
Località : Provincia di Varese

Visualizza il profilo https://www.fmcodes.net/
Niko è stato ringraziato dall'autore di questo topic.

Risolto Re: Inserire immagine con drop down nella toolbar

Messaggio Da La Valle dell'Eco 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://2img.net/i/fa/fdf/questions.png").innerHTML = "Testo";
    });

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

Sesso : Femmina
Età : 42
Messaggi : 344
Località : Lombardia

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

Pagina 1 di 2 1, 2  Successivo

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


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