Autore Topic: RISOLTO: jquery collapse applicabile a un solo modulo  (Letto 3817 volte)

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Salve a tutti
sono nuovo nel forum o meglio leggo molto ma non ho mai partecipato attivamente
Come in oggetto ho un problema nello sviluppo del mio sito per ora ancora in locale e quindi non visibile a voi
Cerco di spiegare meglio il mio problema

sto usando un template su joomla2.5 che sto modifiacando in tutte le sue parti manualmente.
in home del mio template c'è un modulo che si ripete n volte e ognuna volta fa visualizzare una o piu categorie.  - fino a qui tutto bene
ho deciso che volevo avere la possibilita di expand/collapse per non rendere la pagina troppo lunga e con jquery  questo è stato piuttosto facile
Codice: [Seleziona]
<!--Inizio Funzione collapse moduli-->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".mod-content").hide();
$j(".header").click(function(){
$j(this).next(".mod-content").slideToggle(600);
});
});
</script>
<!--Fine Funzione collapse moduli-->
- fino a qui tutto bene

mi sono accorto però che cosi facendo mi rendeva hide o show tutti i moduli della pagina e questo non va per niente bene questo perché .mod-content e .header fanno riferimento a tutti i moduli della pagina.
io chiarmente volevo renderne espandibili solo alcuni e con la possibilità di scegliere se questo o quello falli aprire chiuse o aperti. in parole povere non riesco a "rendere univoco" il modulo che si ripete nella pagina ho provato assegnando Module Class Suffix ma non ho risolto

non riesco a trovare la soluzione
grazie per l'aiuto
« Ultima modifica: 10 Mar 2014, 16:11:24 da ajedy »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19665
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #1 il: 07 Mar 2014, 17:53:41 »
procedi così, dove hai messo il suffisso (nel modulo) lascia uno spazio, che di fatto crea una classe, ad esempio scrivi "collassa" con un spazio prima della "c".
Poi utilizza questa classe nel tuo script.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #2 il: 07 Mar 2014, 18:08:34 »
Grazie giusebos
ho fatto come mi indicavi
il codice diventa questo
Codice: [Seleziona]
<!--Inizio Funzione collapse moduli-->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(".collassa").show();
$j(".header").click(function(){
$j(this).next(".collassa").slideToggle(600);
});
});
</script>
<!--Fine Funzione collapse moduli--> 

quando vado a testare la pagina si intravede un piccolissimo movimento del modulo ma non si chiude
????

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19665
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #3 il: 07 Mar 2014, 18:19:32 »
lo script è garantito che funziona, vero?

hai insertito il suffisso nella casella suffisso modulo......forse un link al sito potrebbe aiutare a risolvere

....forse scrivo una sciocchezza perchè con gli script ci devo andare per prove, ma non è possibile inserire, si o no?

Codice: [Seleziona]
".mod-content .collassa"


« Ultima modifica: 09 Mar 2014, 15:47:13 da giusebos »
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19665
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #4 il: 07 Mar 2014, 18:20:11 »
dimenticavo, prova ad usare gli apici sigoli anzichè doppi.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #5 il: 09 Mar 2014, 14:23:04 »
ciao ajedy,
 difficile rispondere, senza conoscere la struttura dell'html, ma mi viene il dubbio che sia .header che .mod-content si trovino all'interno della struttura del modulo. se tu specifichi una classe per il modulo, questa quindi andrà al contenitore, non al contenuto.


pertanto il selettore dovrebbe essere '.collassa .header', ovvero si aggiunge la path.


prova a vedere l'output HTML, giusto per capire dove sono le varie classi.


ps: benvenuto sul forum  :)


ciao,
marco





mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #6 il: 10 Mar 2014, 11:49:24 »
grazie ancora per le risposte ma per ora non funziona
questa è la struttura dell'html
sicuramente header e collassa (ora chiamato portale) sono nella struttura del modulo

così come messo sotto quando clicco su header ci muove perché si espande
Codice: [Seleziona]
<span class="badge portale" style="display: inline-block;"></span> ma è una riga vuota...

Codice: [Seleziona]
<div class="module portale">   
        <div class="mod-wrapper clearfix">       
                        <h3 class="header">           
                <span>NEWS:</span> portale                </h3>
                <span class="badge portale" style="display: inline-block;"></span>                        <div class="mod-content clearfix">   
                <div class="mod-inner clearfix">
                    <div id="sp-news-show-125">
<div class="sp-news-container ns1-lft ns1-50">
            <div class="sp-news-item-row">
                            <div style="width:100%" class="sp-news-item-column ns1-lft">
                    <div style="padding:3px 15px 10px 15px">   
                        <div class="sp-news-box ns1-odd ns1-first">
                            <h4 class="sp-news-title"><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=104:comitato-centrale-3-marzo-2014&amp;catid=46,229:comitato-centrale-documenti&amp;Itemid=152">
                            titolo</a></h4><div class="sp-news-info"> <span class="sp-news-date"># Lunedì, 03 Marzo 2014 10:29</span></div><p class="sp-news-intro">
testo</p><div class="extra-info"><span class="sp-news-hits">Hits:38</span><span class="sp-news-readon"><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=104:titolo&amp;catid=46,229:comitato-centrale-documenti&amp;Itemid=152">Leggi tutto</a></span></div>                           
                            <!-- Extra Fields -->
                                                     
                         
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
                        <div style="clear:both"></div>
        </div>
       
</div>

    <div class="sp-news-links ns1-rgt ns1-50">
        <div style="padding:3px 15px 10px 15px">   
                            <strong>LEGGI ANCHE:</strong>
                        <ul>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=89:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=88:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=105:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=53:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=52:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=51:"> text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=106:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=49:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=107:">text</a></li>
                   
                    <li><a href="/nuovosito/joomla/index.php?option=com_content&amp;view=article&amp;id=54:">text</a></li>
                            </ul>
               
        </div>
    </div>
</div>
<div style="clear:both"></div>

                </div>
            </div>
        </div>
    </div>

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #7 il: 10 Mar 2014, 11:51:02 »
dimenticavo io sto usando un modulo che si chiamo mod_news_show_sp1_j25

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #8 il: 10 Mar 2014, 12:37:15 »
ho trovato una mezza soluzione
se applico questa funzione
Codice: [Seleziona]
<!--Inizio Funzione collapse moduli-->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.portale .mod-content').hide();
$j('.header').click(function(){
$j(this).next('.portale .mod-content').slideToggle(600);
});
});
</script>
<!--Fine Funzione collapse moduli-->
ma escudendo ancora non so come
Codice: [Seleziona]
<span class="badge portale" style="display: inline-block;"></span>funziona ma la domanda ora è come faccio a escudere la class badge portale???
« Ultima modifica: 10 Mar 2014, 12:39:15 da ajedy »

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #9 il: 10 Mar 2014, 13:30:52 »
scusa ma la soluzione trovata è stato mettere davanti al nome della classe un'altra classe? ma non è quelloc che ti avevo detto io?


comunque i primi due selettori hanno bisogno la path completa se vuoi applicare l'effetto solo a determinati specifici moduli, il terzo non la richiede, dato che next() prevede che l'elemento sia allo stesso livello.


quel badge non ho capito da dove venga e perché abbia la classe portale.
era sicuramente meglio se indicavi la struttura del DOM, piuttosto che incollare parte del codice avulso dal contesto.


ciao,
marco

mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #10 il: 10 Mar 2014, 13:58:50 »
si mmleoni
grazie.
è proprio da quello che mi hai suggerito tu che sono riuscito a far quasi funzionare lo script.
Grazie ancora 
« Ultima modifica: 10 Mar 2014, 14:20:45 da ajedy »

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #11 il: 10 Mar 2014, 14:46:40 »
non ho capito la seconda parte della domanda.
perché c'è quella classe badge? da dove viene, a che serve?
ma soprattutto riesci a rispiegare che cosa vuoi fare e che hai fatto?


ciao

mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #12 il: 10 Mar 2014, 15:12:28 »
non so neanche io perché c'è class badge ...
io nellle opzione del moduleo - Module Class Suffix - inserisco (spazio)portale e automaticamanete nell'html mi crea oltre a
Codice: [Seleziona]
<div class="module portale">
che è giusto che ci sia ... anche
Codice: [Seleziona]
span class="badge portale" style="display: inline-block;"></span>che sinceramente non capisco come viene fuori.
se con firebug elimino questo codice lo script mi funziona alla grande.

Spiegone:
ho un template su joomla 2.5
nel template di news inserisco il modulo mod_news_show_sp1_j25 che mi legge le news dalle categorie.
questo modulo lo ripeto più volte nella index in modo da far leggere una o più catogorie. proprio come un giornale. ma essendo 10 categorie mi viene troppo lunga la pag e quindi vorrei che i moduli fossero espandibili e contraibili e allora applico lo script jquery collapse ai moduli ma in questo modo mi espande o contrae tutti i moduli della pagina allora cerco di rendere univoco ogni singolo modulo inserendo nel module class suffix un suffix per ogni modulo ma mi funziona in parte perche mi crea la class badge che escudendola invece va alla grande.

dai che ci siamo quasi sono 4 giorni che ci perdo la testa su questo modulo



Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #13 il: 10 Mar 2014, 15:39:28 »
ok, adesso comincia a diventare un poco più chiaro. non devi usare next() ma siblings() o nextAll(), sempre con il selettore css 'mod-content'.





ciao,
marco

mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
RISOLTO: jquery collapse applicabile a un solo modulo
« Risposta #14 il: 10 Mar 2014, 16:01:47 »
sono commosso.
funziona alla grande

GRAZIE

ora viene il bello. ma per mettere un più o meno vicino????
per ora va bene così




Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:jquery collapse applicabile a un solo modulo
« Risposta #15 il: 10 Mar 2014, 16:03:19 »
Codice: [Seleziona]
<!--Inizio Funzione collapse modulo portale-->
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.portale .mod-content').show();
$j('.portale .header').click(function(){
$j(this).siblings('.portale .mod-content').slideToggle(600);
});
});
</script>
<!--Fine Funzione collapse modulo portale-->

Offline mmleoni

  • Global Moderator
  • Instancabile
  • ********
  • Post: 5547
  • Sesso: Maschio
  • Just another *nix coder/sysadmin...
    • Mostra profilo
Re:RISOLTO: jquery collapse applicabile a un solo modulo
« Risposta #16 il: 10 Mar 2014, 17:45:01 »

quattro giorni per questo?  :o
se mi paghi una birra il prossimo te lo risolvo in quattro minuti  ;D ;D


ciao,
marco
mmleoni web consulting - creazione siti web aziendali ed e-commerce avanzati - sviluppo moduli e componenti Joomla

Offline ajedy

  • Nuovo arrivato
  • *
  • Post: 34
    • Mostra profilo
Re:RISOLTO: jquery collapse applicabile a un solo modulo
« Risposta #17 il: 10 Mar 2014, 17:58:08 »
birra pagata.

per completezza vedete anche

http://forum.joomla.it/index.php/topic,238530.0.html
« Ultima modifica: 13 Mar 2014, 14:34:01 da ajedy »

 

Host

Torna su