[RISOLTO] Template con colonne collassabili

[d-force]

Salve a tutti, seguendo un tutorial trovato in rete, ho costruito un template (per Joomla 2.5) in cui si trova una sezione (in pratica un "div" contenitore largo 1000px) che presenta 5 colonne.


Vedi immagine allegata.


Ognuna delle 5 colonne ha le seguenti caratteristiche:
- Ha assegnato un modulo (es. user1 per la prima colonna, user2 per la seconda colonna, e così via...).
- E' larga 200px.


Vorrei fare in modo che se un modulo (ad esempio quello in posizione user5) non è pubblicato, le altre 4 colonne si auto-ridimensionano fino ad occupare tutto lo spazio del div contenitore di 1000px.


In pratica si allargano da 200px a 250px.


Per fare questo ho utilizzato la proprietà "countModules" nel seguente modo:


Prima della dichiarazione del Template ho inserito la funzione che conta i moduli e ri-assegna la larghezza in base a quanti sono pubblicati:

Codice: [Seleziona]

<?php
$nmod = 0;
if ($this->countModules("user1")) $shelf++;
if ($this->countModules("user2")) $shelf++;
if ($this->countModules("user3")) $shelf++;
if ($this->countModules("user4")) $shelf++;
if ($this->countModules("user5")) $shelf++;
// se sono pubblicati 5 moduli
if ( $nmod == 5 ) {
  $modwidth = "200px"; // ogni modulo sar&agrave; largo il 20%
  // se sono pubblicati 4 moduli
}if ( $nmod == 4 ) {
  $modwidth = "250px"; // ogni modulo sar&agrave; largo il 25%%
// se sono pubblicati 3 moduli
}if ( $nmod == 3 ) {
  $modwidth = "333px"; // ogni modulo sar&agrave; largo il 33.3%
// se sono pubblicati 2 moduli
}if ( $nmod == 2 ) {
  $modwidth = "500px"; // ogni modulo sar&agrave; largo il 50%
} else if ($nmod == 1) { // se &egrave; pubblicato 1 modulo
  $modwidth = "1000px"; // il modulo sar&agrave; largo il 100%
}
?>



Poi nel corpo del Template ho inserito questo codice:

Codice: [Seleziona]



<?php if ($this->countModules("user1")||
         $this->countModules("user2")||
         $this->countModules("user3")||
         $this->countModules("user4")||
         $this->countModules("user5"))  ?>


 
<div id="myshelf">
<!-- Inizio Contenitore principale-->


<?php if ($this->countModules("user1")) {?>
<div id="mod1" style="width:<?php echo $modwidth ?>;" >
       <jdoc:include type="modules" name="user1" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user2")) {?>
<div id="mod2" style="width:<?php echo $modwidth ?>;" >
       <jdoc:include type="modules" name="user2" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user3")) {?>
<div id="mod3" style="width:<?php echo $modwidth ?>;" >
       <jdoc:include type="modules" name="user3" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user4")) {?>
<div id="mod4" style="width:<?php echo $modwidth ?>;" >
       <jdoc:include type="modules" name="user4" style="xtml" /><><?php } ?>
 <?php if ($this->countModules("user5")) {?>
<div id="mod4" style="width:<?php echo $modwidth ?>;" >
       <jdoc:include type="modules" name="user5" style="xtml" /><><?php } ?>


<><!-- Fine Contenitore principale-->




Nel foglio di stile, definisco i parametri delle varie colonne (ma questo non è un problema...):

Codice: [Seleziona]

#myshelf{
width:980px;
height:455px;
margin:auto;
padding:15px 0 0 0;
background-color:#339999;
position:relative;
}


#mod1,#mod2,
#mod3,#mod4{
text-align:left;
width:176px;
float:left;
}


#mod1 .moduletable,#mod2 .moduletable,
#mod3 .moduletable,#mod4 .moduletable{
  text-align:left;
  padding:5px;
  color:#000;
  font-size:1.1em;
}
 
#mod1 .moduletable h3,#mod2 .moduletable h3,
#mod3 .moduletable h3,#mod4 .moduletable h3{
  text-align:left;
  padding-left:5px;
  color:#ff6600;
  font-size:1.3em;
}


Il problema è questo:


La funzione che definisce la larghezza dei div ($modwidth) non funziona.


Se apro il sorgente della pagina vedo:

Codice: [Seleziona]

<div id="mod1" style="width:;" >

Dove width non ha nessun valore...


Dove è l'errore che non permette al div di allargarsi?


Grazie in anticipo per il vostro aiuto!


d-force

[allegato eliminato da un amministratore essendo vecchio più di un anno]

[d-force]

Salve a tutti!


Spero sia utile a qualcuno, in pratica ho risolto così:


Si inserisce questo codice prima della dichiarazione del template:

Codice: [Seleziona]

<?php 
if($this->countModules('user1 or user2 or user3 or user4 or user5') == 5) $modwidth = "225px"; 
if($this->countModules('user1 and user2 and user3 and user4 and user5') == 4) $modwidth = "176px"; 
?>


Nel body della pagina si inserisce quest'altro codice così:

Codice: [Seleziona]

<div id="myshelf">
<!-- Inizio Contenitore principale-->


<?php if ($this->countModules("user1")) {?>
<div id="mod1" style="width:<?php echo $modwidth;?>;" >
       <jdoc:include type="modules" name="user1" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user2")) {?>
<div id="mod2" style="width:<?php echo $modwidth;?>;" >
       <jdoc:include type="modules" name="user2" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user3")) {?>
<div id="mod3" style="width:<?php echo $modwidth;?>;" >
       <jdoc:include type="modules" name="user3" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user4")) {?>
<div id="mod4" style="width:<?php echo $modwidth;?>;" >
       <jdoc:include type="modules" name="user4" style="xtml" /><><?php } ?>
<?php if ($this->countModules("user5")) {?>
<div id="mod5" style="width:<?php echo $modwidth;?>;" >
       <jdoc:include type="modules" name="user5" style="xtml" /><><?php } ?>


<><!-- Fine Contenitore principale-->


In pratica, se ci sono 4 moduli pubblicati, la variabile $modwidth diventa 225px, se invece ce ne sono 5 di moduli pubblicati  la variabile $modwidth diventa 176px.


Tutto quà.


D-force

[ciccioroky]

Grande!
Mi è stato molto utile questo post. Avevo lo stesso problema e seguendo le tue info sono riuscito a risolvere. Tranne una cosa:

Tu hai fatto collassare due posizioni, la 5 e la 4. Se volessi collassarne 4 di posizioni?
ho provato ad inserire queste righe prima della dichiarazione del template ma non vanno.

if($this->countModules('col_1 or col_2 or col_3 or col_4') == 4) $modwidth = "293px";
if($this->countModules('col_1 and col_2 and col_3 and col_4') == 3) $modwidth = "220px";
if($this->countModules('col_1 or col_2 or col_3 or col_4') == 2) $modwidth = "880px";
if($this->countModules('col_1 and col_2 and col_3 and col_4') == 1) $modwidth = "440px";

aiuti?

[d-force]

Cosa devi fare esattamente?

[ciccioroky]

praticamente ho questa struttura
<div id="container">
    <div id="col_1"><>
    <div id="[size=78%]col_2[/size][size=78%]"><>[/size]
    <div id="[size=78%]col_3[/size][size=78%]"><>[/size]
    <div id="[size=78%]col_4[/size][size=78%]"><>[/size]
<>


voglio che se elimino le posizioni all'interno dei div, i div rimanenti continuino ad occupare sempre il 100% della larghezza del div container.


Esempio:
eliminando col _3 voglio che i restanti 3 div occupino il 100% della larghezza, se elimino col_3 e col_2 i restanti continuano ad occupare il 100% della larghezza.


Sono riuscito a spiegarmi?


Seguendo le indicazioni di questo post, riesco a far collassare solo due div.

[d-force]

Non sono un esperto di php, poi hai modificato il codice che ho inserito nell'esempio...


Comunque prova così:

Codice: [Seleziona]

<?php 
if($this->countModules('pos-1 or pos-2 or pos-3 or pos-4 or pos-5') == 5) $modwidth = "33%"; 
?>


[ciccioroky]

Mi sono accorto solo ora che la struttura che ho inserito non è corretta.
sono stati aggiunti dei parametri che non ho messo io.
Posto la struttura corretta scusate.

Codice: [Seleziona]

<div id="container"> 
  <div id="col_1"><>
  <div id="col_2"><>   
  <div id="col_3"><>   
  <div id="col_4"><>
<>


Vorrei che se fossero pubblicate:
4 colonne ogni colonna deve avere width:220px
3 colonne ogni colonna deve avere width:293px
2 colonne ogni colonna deve avere width:440px
1 colonna che deve avere width:880px

[d-force]

Facciamo ordine....


Mi serve sapere:


- La larghezza totale del div contenitore che contiene le colonne collassabili
- Numero totale dei div (che poi saranno quelli che collasserai....) all'interno del div contenitore

[ciccioroky]

larghezza 100% del div contenitore che contiene 4 div da collassare.

[d-force]

OK quindi poniamo che il div contenitore è 400px.


se ci sono pubblicate 4 posizioni il div di ciascuna posizione sarà 100px
se ce ne sono 2 [size=78%]div di ciascuna posizione sarà 200px[/size]

Ho capito bene?

[Peppe-73]

Scusate se non ai risolto toglilo dal titolo dopo lo rimetti sei ai VERAMENTE    risolto

[d-force]

Scusate se non ai risolto toglilo dal titolo dopo lo rimetti sei ai VERAMENTE    risolto

Peppe, se leggi tutto il topic capisci che il problema è risolto,  sto solo cercando di aiutare ciccioroky che probabilmente non ha capito bene il funzionamento.


Tutto quà.

[Peppe-73]

Va aperto un nuovo tred, non si continua su uno gia risolto 

[d-force]

Allora il thread lo aprirà ciccioroky...

[ciccioroky]

si fatto
eccolo [size=78%]Template con colonne collassabili 2[/size]

[d-force]

Ci sto lavorando....

[d-force]

Purtroppo non sono riuscito a trovare una soluzione che permetta di collassare più di una colonna per volta...


Se ho più tempo proverò a dare dei test nei prossimi giorni, nel frattempo attendiamo che qualcun'altro del forum risponda con una soluzione...

[ciccioroky]

grazie comunque...sto provando anche io delle soluzioni.