Problema inserimento menu jQuery..


Risolto Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Sab 6 Apr 2013 - 13:41

Ciao ragazzi! Volevo inserire il menu a cestino jQuery ma non trovo il codice qui.. volevo l'effetto come questo..

Qualcuno mi può dare il codice? Per favore! preferibilmente già fatto che non riesco a modificare molto bene questi codici.. (PHBB3) Grazie mille Very Happy


Ultima modifica di Ricky99 il Sab 18 Mag 2013 - 20:21, modificato 1 volta
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Niko il Sab 6 Apr 2013 - 14:47

Ciao,

dunque questo è il codice CSS da inserire:
Codice:
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}

Ora devi semplicemente andare in PDA > Generale > Promozione del forum > Motori di ricerca > Mede supplementari > :new:
Fatto questo scegliete: Aggiungere un javascript ed inserite questi link (prima uno, poi create un nuovo foglio ed inserite l'altro)

Codice:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>

In seguito crea un nuovo codice javascript (Pannello di gestione dei codici javascript) e aggiungi questo in tutte le pagine (o dove vuoi che compaia il menu):
Codice:
jQuery(document).ready(function() {
jQuery('#phpbb').after('<div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a href="Link5.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="nome" /></a></li>

<li><a href="Link4.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="Link3.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>

<li><a href="Link2.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="nome" /></a></li>

<li><a href="Link1.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="nome" /></a></li>
</ul></div>');
});

Fammi sapere se funziona e se così hai risolto :zen:
avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7707
Località : Provincia di Varese


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

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Sab 6 Apr 2013 - 18:20

Grazie per i codici ma come faccio a far in modo che se per esempio io clicco sull'icona di facebook condivide la pagina che si sta visitando su facebook?
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Niko il Dom 7 Apr 2013 - 13:42

La funziona di cui parli è disponibile anche nella toolbar di forumattivo :bene:

Ma se vuoi farlo anche con questo menu basta che aggiungi questo pezzo insieme agli altri:
Codice:
<li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Condividi su Facebook</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>
avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7707
Località : Provincia di Varese


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

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Lun 8 Apr 2013 - 17:37

niko non riesco ad inserirlo.. non mi appare.. mi puoi aiutare? Per favore!
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Niko il Lun 15 Apr 2013 - 17:59

Puoi mettermi qui il codice html che hai inserito? :bene:
avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7707
Località : Provincia di Varese


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

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Lun 15 Apr 2013 - 18:05

nel css ho messo:
Codice:
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/* IE Fixes */

nei motori di ricerca ho fatto 2 codici separati:
Codice:
<script src="http://code.jquery.com/jquery-1.4.2.min.js">
</script>
Codice:
<script src="http://www.yourjavascript.com/134446808/stack1.js">
</script>

nel javascript ho messo:
Codice:
jQuery(document).ready(function() {
jQuery('#phpbb').after('<div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="Facebook" /></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></li>

<li><a href="Link4.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="Link3.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>

<li><a href="Link2.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="nome" /></a></li>

<li><a href="Link1.com"><span>nome</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="nome" /></a></li>
</ul></div>');
});

ti prego aiutami Sad

EDIT: poi il codice javascript lo devo modificare con i vari link.. potresti darmi anche quelli come quello di facebook? grazie happy
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Niko il Sab 18 Mag 2013 - 14:47

Ciao,

hai risolto? :bene:
In caso contrario puoi mettermi uno screen del risultato che hai ottenuto?
avatar
Niko
Veterano dello staff


Sesso : Maschile
Età : 20
Messaggi : 7707
Località : Provincia di Varese


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

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da TeenPark il Sab 18 Mag 2013 - 14:52

Ti posto qui di seguito il codice di questo effetto, però è configurato per il mio forum:

Codice:
<style type="text/css">
.stack { position: fixed; bottom: 5px; right: 25px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
display: block;
position: absolute;
top: 17px;
right: 60px;
height: 14px;
line-height: 14px;
background-color:#000;
border: 0;
padding: 3px 10px;
text-align: center;
text-shadow: #000 1px 1px 1px;
font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
font-size: 12px;
color: #fcfcfc;
border-radius: 10px;
opacity: .85;
filter: alpha(opacity = 85);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style><div class="stack">
<img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
<ul id="stack">

<li><a href="https://www.facebook.com/OneHitcs"><span>Facebook</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="nome" /></a></li>

<li><a href="http://www.stumbleupon.com/su/502fgn/:1Lk9MJtvH:eRPkof-i/onehitcs.forumattivo.com/"><span>StrumbleUpon</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="nome" /></a></li>

<li><a href="http://it.reddit.com/r/gaming/comments/1eknsf/onehitcs_best_games_community/"><span>Reddit</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="nome" /></a></li>
</ul>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>

Non è completo, ho tolto la condivisione di AddThis e Digg.
Configuralo con le tue pagine ed hai finito.

P.S: Sconsiglio di inserire il seguente codice perché va in contrasto con la ToolBar facendola scomparire.
avatar
TeenPark
***

Sesso : Maschile
Età : 20
Messaggi : 144
Località : Messina


Vedere il profilo dell'utente http://onehitcs.forumattivo.com/
TeenPark è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Sab 18 Mag 2013 - 15:29

no, non ho risolto.. Nello screen non viene niente perché non compare.. Teenpark dove lo devo mettere quel codice?
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da TeenPark il Sab 18 Mag 2013 - 17:01

Inseriscilo in:
Pannello d'Amministrazione ---> Visualizzazione ---> Prima Pagina ---> Generalità ---> Messaggio sull'Indice ---> Contenuto del Messaggio

Fammi sapere.
avatar
TeenPark
***

Sesso : Maschile
Età : 20
Messaggi : 144
Località : Messina


Vedere il profilo dell'utente http://onehitcs.forumattivo.com/
TeenPark è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da Ricky99 il Sab 18 Mag 2013 - 20:18

Si si mi funziona peccato che si vede solo nell'indice.. Sad
avatar
Ricky99
Sono un nuovo membro :)

Sesso : Maschile
Età : 17
Messaggi : 6
Località : piemonte


Vedere il profilo dell'utente http://zermo2012.forumattivo.it
Ricky99 è stato ringraziato dall'autore di questo topic.

Risolto Re: Problema inserimento menu jQuery..

Messaggio Da TeenPark il Dom 19 Mag 2013 - 3:57

Se vuoi che si veda su tutte le pagine puoi benissimo risolvere, se hai PhPBB3 puoi inserirlo come annuncio in tutte le pagine tramite il Pannello d'Amministrazione, se invece hai PhPBB2 o PunBB dal Template.
avatar
TeenPark
***

Sesso : Maschile
Età : 20
Messaggi : 144
Località : Messina


Vedere il profilo dell'utente http://onehitcs.forumattivo.com/
TeenPark è stato ringraziato dall'autore di questo topic.

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