RISOLTO: jquery collapse applicabile a un solo modulo

[ajedy]

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

[giusebos]

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.

[ajedy]

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
?

[giusebos]

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"

[giusebos]

dimenticavo, prova ad usare gli apici sigoli anzichè doppi.

[mmleoni]

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

[ajedy]

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>


[ajedy]

dimenticavo io sto usando un modulo che si chiamo mod_news_show_sp1_j25

[ajedy]

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???

[mmleoni]

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

[ajedy]

si mmleoni
grazie.
è proprio da quello che mi hai suggerito tu che sono riuscito a far quasi funzionare lo script.
Grazie ancora 

[mmleoni]

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

[ajedy]

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

[mmleoni]

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

[ajedy]

sono commosso.
funziona alla grande

GRAZIE

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

[ajedy]

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-->

[mmleoni]

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


ciao,
marco

[ajedy]

birra pagata.

per completezza vedete anche

http://forum.joomla.it/index.php/topic,238530.0.html