11548 sujets

JavaScript, DOM et API Web HTML5

2 colonnes:faire disparaitre l'une et mettre l'autre à 100% de large

Pages :
Bonjour,
c'est mon premier post sur ce forum et je le fait dans la mesure où j'ai un problème avec mon site que je développe sous Joomla. Dans mon template, j'ai un menu horizontale en haut, ensuite un menu vertical à gauche sur la page d'acceuil et donc dans la place qu'il reste, le contenu de mon site.
J'aimerais que quand l'utilisateur ne soit plus sur la page d'acceuil, le menu de gauche disparaisse et que le contenu prenne toute la largeur de la page.
Le problème est que je ne vois pas comment faire cela avec mon css.
Je vous met des images pour expliquer cela:
upload/11939-forum1.png
upload/11939-forum2.png

Je mets le code source de mon fichier index.php pour que vous puissiez voir à quoi correspondent les div:
<div id="outer-1024" >
		<div id="pathway">
			<?php mospathway() ?>
		</div>
  <div id="leftcol">
			<a name="menu"></a>
			<?php
			if (mosCountModules( "left" )) {
				mosLoadModules ( 'left',-3);
			}
			?>
  </div>
  <?php
		if ((mosCountModules( "right" )) || (mosCountModules( "top" ))) {
			?>
			<div id="maincol-broad-1024" >
			<?php
		} else {
			?>
			<div id="maincol-wide-1024" >
			<?php
		}
			if (mosCountModules( "user1" )) {
				?>
				<div id="<?php echo $usera; ?>">
					<?php mosLoadModules ( 'user1',-2); ?>
				</div>
				<?php
			}
			if (mosCountModules( "user2" )) {
				?>
				<div id="<?php echo $userb; ?>">
					<?php mosLoadModules ( 'user2',-2); ?>
				</div>
				<?php
			}
			?>
                  <div class="clr"></div>
	              </div>


et le code css correspondant:
#leftcol{
 width: 152px;
 float: left;
 position: relative;
 margin-right: 5px;
 } 
#maincol-wide-1024{ 
float: left; 
width: 800px;
padding-top: 3px !important;
padding-top: 0px;
 margin-left: 0px !important;
 margin-left: -5px;
 }


où #leftcol correspond au menu de gauche et #maincol-wide-1024 au contenu.

Voila, j'espère que vous pourrez m'aidez. Merci d'avance. Smiley smile
Modifié par blackdn2 (19 Apr 2007 - 13:01)
avec un petit js qui met "display:none;" a "leftcol" et "width:9xx px;" a "maincol" non ?

si tu a besoin de plus d'aide je peux tenter de te repondre plus precisement Smiley cligne (par contre je ne connais pas joomla Smiley rolleyes )
Je me disais bien que pour modifier dynamiquement la largeur de maincol, la seule solution serait de passer par javascript.
Peut-tu m'en dire plus sur la marche à suivre ?
Merci d'avance.
moi j ai une page comme ca j 'ai mis dans le html de la page ou je voulais bouger des choses

<body onload="appel();">


et dans l entete

<script type="text/javascript"> 
 function appel() { 
 	document.getElementById('regiongauchemodifiable').style.width = 90 +"%" ;
 	document.getElementById('regiondroitemodifiable').style.display = 'none' ;
 }
 
</script>
CPascal a écrit :
moi j ai une page comme ca j 'ai mis dans le html de la page ou je voulais bouger des choses


Salut, merci pour ta réponse mais pourrais-tu m'expliquer plus en détail car je ne comprends pas trop ce qu'il faut que je fasse. Smiley confused
et bien j'ai une methode, que j'ai appris de moi meme, et qui doit surement etre pleine de defauts que s'empresseront de corriger les habitués Smiley langue

mais elle marche Smiley biggrin

tu met entre les balises head ce petit JS :

<script type="text/javascript">
	function HideMenu() {
		document.getElementById("leftcol").style.display="none";
		document.getElementById("maincol-wide-1024").style.width="950px";
	} 
	function ShowMenu() {
		document.getElementById("leftcol").style.display="block";
		document.getElementById("maincol-wide-1024").style.width="800px";
	}
</script>


et dans les liens qui font quitter la page d'accueil tu appel la fonction Hide, comme ca :

<a href="#" onclick="HideMenu()"> le liens </a>


et parreil sur le lien qui renvoie a la page d'accueil tu peux appeller la fonction show.
m'enfin tout cela n'est valable que si tu ne recharge pas la page hein, on est bien d'accord Smiley rolleyes
titus.sensei a écrit :
et bien j'ai une methode, que j'ai appris de moi meme, et qui doit surement etre pleine de defauts que s'empresseront de corriger les habitués Smiley langue

mais elle marche Smiley biggrin

tu met entre les balises head ce petit JS :

<script type="text/javascript">
	function HideMenu() {
		document.getElementById("leftcol").style.display="none";
		document.getElementById("maincol-wide-1024").style.width="950px";
	} 
	function ShowMenu() {
		document.getElementById("leftcol").style.display="block";
		document.getElementById("maincol-wide-1024").style.width="800px";
	}
</script>


et dans les liens qui font quitter la page d'accueil tu appel la fonction Hide, comme ca :

<a href="#" onclick="HideMenu()"> le liens </a>


et parreil sur le lien qui renvoie a la page d'accueil tu peux appeller la fonction show.
m'enfin tout cela n'est valable que si tu ne recharge pas la page hein, on est bien d'accord Smiley rolleyes


Merci pour cette explication détaillée, mais le problème est que comme Joomla est un CMS, il crée automatiquement les liens dans les menus Smiley decu donc je ne peux pas les modifier à la main donc je ne peux pas utiliser cette méthode.

Ou alors la solutions serait de modifier les code de joomla pour qu'il insère un onclick="HideMenu()" dans les liens qui le nécessitent.

Je pense que ca serait assez compliqué. N'y a t'il pas d'autres solutions ?
Pas le temps de lire tout le sujet, mais pour information ce genre de chose se gère très bien uniquement avec des CSS, une colonne de gauche flottante et un bloc de contenu sans largeur fixe, avec un contexte de formatage pour qu'il soit bien repoussé par la colonne flottante.
Florent V. a écrit :
Pas le temps de lire tout le sujet, mais pour information ce genre de chose se gère très bien uniquement avec des CSS, une colonne de gauche flottante et un bloc de contenu sans largeur fixe, avec un contexte de formatage pour qu'il soit bien repoussé par la colonne flottante.


Oui j'imagine que ça se fait très bien mais le problème est que je ne sais pas ce que sont les contexte de formatage ni comment ne pas mettre une largeur fixe, etc...

Désolé mais je ne m'y entend pas trop en css et en js... Smiley confus
bon j avais downloadé joomla y a pas longtemps j'y ai jeté un oeil.

a mon avis faut agir a 2 endroit meme si j' ai trouvé qu'un seul de ses endroits pour l'instant. enfin selon ma methode.

1/ ca c'est "facile" entre guillemets

dans le dossier template sur le fichier index.php que tu nous a montré fais 

<body onlaod="appel();">


et avant entre les balises <head> et </head> place 

<script type="text/javascript">
 function appel() {
     document.getElementById('leftcol').style.display = 'none' ;
 }
</script>


a priori ca marche je l'ai testé sur le template "made your web" ca passait et aprés le div contenu se "dilate" de lui même et prends tous l'espace disponible....mais la mise en page etait un peu moche les css était a retoucher surement, peut etre au niveau du padding.

2/ bon reste a trouver ou s'est

ensuite et ben faudrait que tu aille dans ta page d'accueil et sur celle-ci
je te propose d'ecraser la fonction javascript en ecrivant

<script type="text/javascript">
function appel() {
document.getElementById('leftcol').style.display = 'block' ;
}
</script>

bon j'entends les hurlements ...... c pas propre je sais....en plus sur un site sur les normes ...bref...j'ai essayé une fois cette methode et
a ma grande grande surprise javascript a accepter le coup....

sinon dois y avoir d'autre moyen de faire....a priori le template est pas si dur a retoucher et il n'y a qu'un seul template
Modifié par CPascal (19 Apr 2007 - 16:33)
Je suis en train d'essayer cette solution et justement j'utilise le template madeyourweb (que j'ai déja modifié à mon gout) et pour l'instant, le problème est que mon maincol ne change pas de largeur quand on quite la page d'acceuil.

edit: ca ne fonctionne pas en fait car j'ai rajouté un alert(); dans le script et rien ne se passe quand je rafraichi la page.
De plus, on peut controler dans joomla sur quelle page apparaitra tel ou tel module donc le problème est plus de modifier la largeur du maincol...
Modifié par blackdn2 (19 Apr 2007 - 16:49)
blackdn2 a écrit :
Oui j'imagine que ça se fait très bien mais le problème est que je ne sais pas ce que sont les contexte de formatage ni comment ne pas mettre une largeur fixe, etc...

Je comprends qu'un type qui débarque pour donner une information technique sans source, sans lien vers un tutoriel, et sans explications, ça puisse perturber un peu. En même temps, il est parfois bon de se prendre un peu en main et de faire les choses par soi-même.

En l'occurrence :
- En cherchant «contexte de formatage» sur Google, j'obtiens des résultats plutôt corrects. Une recherche dans le salon CSS de ce forum devrait aussi donner quelques résultats intéressants.
- «Ne pas mettre une largeur fixe», c'est pas sorcier non plus. Qu'est-ce qu'une largeur fixe en CSS ? Un bloc qui a un width: ...; (les pointillés représentent une valeur, par exemple une valeur en px ou en %). Un bloc sans largeur fixe, c'est un bloc sans propriété width.

Un peu d'autonomie, que diable ! Smiley cligne
Pourquoi du javascript?
Pourquoi ne pas tout simplement dans la feuille de style rajouter un display:none à #leftcol pour toutes les autres pages que l'accueil et adapter la largeur de #maincol-wide-1024 selon qu'on est sur la page d'accueil ou non ?

Je ne connais pas Joomla, mais si tu a moyen d'identifier chaque page directement dans le HTML (par exemple en donnant un id à chaque body), tu pourrais avoir <body id="accueil">, <body id="liens">, <body id="page-trucmuche">

Il te suffit alors de modifier ton css comme cela :

#leftcol {
display:none;
}
#accueil #leftcol {
display:block; /*On ne l'affiche que sur la page d'accueil */
}
#maincol-wide-1024 {
width:XXXpx; /* en fonction de la largeur que tu veux donner sur toutes les autres pages*/
}
#accueil #maincol-wide-1024 {
width:XXXpx; /* En fonction de la largeur que tu veux donner sur l'accueil */
}

La logique est la même que pour les exemples donnés en javascript mais le CSS est suffisant ici amha.
En espérant que ca aide Smiley smile
Tymlis a écrit :
Pourquoi du javascript?
Pourquoi ne pas tout simplement dans la feuille de style rajouter un display:none à #leftcol pour toutes les autres pages que l'accueil et adapter la largeur de #maincol-wide-1024 selon qu'on est sur la page d'accueil ou non ?

Je ne connais pas Joomla, mais si tu a moyen d'identifier chaque page directement dans le HTML (par exemple en donnant un id à chaque body), tu pourrais avoir <body id="accueil">, <body id="liens">, <body id="page-trucmuche">

Il te suffit alors de modifier ton css comme cela :

#leftcol {
display:none;
}
#accueil #leftcol {
display:block; /*On ne l'affiche que sur la page d'accueil */
}
#maincol-wide-1024 {
width:XXXpx; /* en fonction de la largeur que tu veux donner sur toutes les autres pages*/
}
#accueil #maincol-wide-1024 {
width:XXXpx; /* En fonction de la largeur que tu veux donner sur l'accueil */
}

La logique est la même que pour les exemples donnés en javascript mais le CSS est suffisant ici amha.
En espérant que ca aide Smiley smile


Le problème est que je ne sais pas si j'ai un moyen de récuperer l'id de chaque page (je pense que c'est possible) mais en plus je n'est pas envie de trop modifier le code original de mon template pour conserver la manière dont fonctionne joomla.
C'est pourquoi la solution du js me paraissait interessante. Mais il semble que mon script ne soit pas pris en compte. Pour le vérifier, j'ai mis un 
alert();

et quand je recharge ma page, il ne se passe rien...
Si quelqu'un a une idée... Smiley smile
Mets quelque chose dans ton alert déjà ^^

alert("Bhou !")


Sinon, si tu regardes le code de ta page d'accueil, le alert() y est bien présent?
Tymlis a écrit :
Mets quelque chose dans ton alert déjà ^^

alert("Bhou !")


Sinon, si tu regardes le code de ta page d'accueil, le alert() y est bien présent?


J'ai fait ce que tu as dit et c'est pareil.
Le début du code de ma page donne ça:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">

 function appel() {

     document.getElementById('leftcol').style.display = 'none' ;
     document.getElementById('maincol-wide-1024').style.width = '100%' ;
     alert("Bouh !");

 }

</script>


Donc je ne sais pas où est le problème...
Modifié par blackdn2 (20 Apr 2007 - 10:06)
Actuellement tu a juste défini ta fonction, il te reste à y faire appel quelque part dans la page.


Pour ça, rajoute
<script language="javascript">
appel();
</script>


quelque part sur ta page d'accueil (en fin de page de préférence...) enfin après le chargement de tes colonnes en tout cas.
Ou alors rajoute dans la balise <body 
onload="appel()"

(ca la lancera une fois la page chargée)
Tymlis a écrit :
Actuellement tu a juste défini ta fonction, il te reste à y faire appel quelque part dans la page.


Pour ça, rajoute
<script language="javascript">
appel();
</script>


quelque part sur ta page d'accueil (en fin de page de préférence...) enfin après le chargement de tes colonnes en tout cas.
Ou alors rajoute dans la balise <body 
onload="appel()"

(ca la lancera une fois la page chargée)


J'avais bien mis:

<body onlaod="appel();">


Donc je pense que ça aurait du appeler le script ?
Mea Culpa Smiley confused Smiley confused
Mais effectivement après correction, cela fonctionne Smiley smile
Mais mon problème maintenant est que je voudrais que le script ne se lance que sur les pages différentes de la page d'acceuil.
Aurais-tu une piste ?
Pages :
Sujet clos
Aller à