Changer de mois sur calendrier css

Question

Tricky

16 Jan 2012 à 08:10

Bonjour!

En quête de réponse je viens me réfugier ici et mettre fin à des heures de recherches et torture de méninges.
Pour placer les choses dans leur contexte, je crée des designs et des petits sites-vitrines en xhtml et css, je me débrouille mais sans plus, j'avoue être bien plus à l'aise sur Photoshop que devant Notepad... Mais brave bête et bonne poire que je suis, quand on m'a demandé de concevoir de A à Z un site bien fourni avec plein de trucs que je sais pas faire, j'ai bien sûr dit "ouaip, no problem, google est mon ami". Smiley sweatdrop

Là on me demande une page Agenda, avec un calendrier dynamique, certaines dates seront de couleurs différentes selon les manifestations et leur lien renverra vers les infos utiles qui y seront liées. J'ai trouvé un bon plan pour faire le calendrier en xhtml et css, c'est joli, simple et bien pratique pour les mises à jour, mais je voudrais garder mon calendrier fixe à gauche avec les infos utiles sur le reste de la page à droite. Donc ça ne m'intéresse pas d'aligner 12 calendriers, ça fait pas pro. je ne maîtrise absolument pas javascript et quand j'essaie de décrypter les codes trouvés un peu partout je ne comprends rien. Je souhaiterais avoir mon calendrier, et deux petites flèches à droite et à gauche de mon div... et quand je clique sur une flèche le mois précédent ou suivant s'affiche.
La réponse à mon problème doit probablement être d'une simplicité monstrueuse mais n'y connaissant strictement rien, la solution ne me vient pas...

Voilà la portion de mon code xhtml et une capture d'écran:

<div id="Calendrier">
<!-- Fevrier -->
<div class="slide">
 <p class="calendartitle">Février 2012</p>
   <ul id="days"><li><span title="Lundi">LU</span> <span class="sep">|</span>
     <span title="Mardi">MA</span> <span class="sep">|</span>
     <span title="Mercredi">ME</span> <span class="sep">|</span>
     <span title="Jeudi">JE</span> <span class="sep">|</span>
     <span title="vendredi">VE</span> <span class="sep">|</span>
     <span title="Samedi">SA</span> <span class="sep">|</span>
     <span title="Dimanche">DI</span></li></ul>
   <ul class="weeks"><li><a class="nu" href="#" title="">--</a> <span class="sep">|</span>
     <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
     <a class="na" href="#" title="">01</a> <span class="sep">|</span>
     <a class="al" href="#" title="Active Date Link">02</a> <span class="sep">|</span>
     <a class="na" href="#" title="">03</a> <span class="sep">|</span>
     <a class="na" href="#" title="">04</a> <span class="sep">|</span>
     <a class="na" href="#" title="">05</a></li></ul>
   <ul class="weeks"><li><a class="na" href="#" title="">06</a> <span class="sep">|</span>
     <a class="na" href="#" title="">07</a> <span class="sep">|</span>
     <a class="na" href="#" title="">08</a> <span class="sep">|</span>
     <a class="na" href="#" title="">09</a> <span class="sep">|</span>
     <a class="na" href="#" title="">10</a> <span class="sep">|</span>
     <a class="al" href="#" title="Active Date Link">11</a> <span class="sep">|</span>
     <a class="na" href="#" title="">12</a></li></ul>
   <ul class="weeks"><li><a class="al" href="#" title="Active Date Link">13</a> <span class="sep">|</span>
     <a class="na" href="#" title="">14</a> <span class="sep">|</span>
     <a class="na" href="#" title="">15</a> <span class="sep">|</span>
     <a class="na" href="#" title="">16</a> <span class="sep">|</span>
     <a class="na" href="#" title="">17</a> <span class="sep">|</span>
     <a class="na" href="#" title="">18</a> <span class="sep">|</span>
     <a class="na" href="#" title="">19</a></li></ul>
   <ul class="weeks"><li><a class="na" href="#" title="">20</a> <span class="sep">|</span>
     <a class="na" href="#" title="">21</a> <span class="sep">|</span>
     <a class="na" href="#" title="">22</a> <span class="sep">|</span>
     <a class="na" href="#" title="">23</a> <span class="sep">|</span>
     <a class="na" href="#" title="">24</a> <span class="sep">|</span>
     <a class="na" href="#" title="">25</a> <span class="sep">|</span>
     <a class="al" href="#" title="Active Date Link">26</a></li></ul>
   <ul class="weeks"><li><a class="na" href="#" title="">27</a> <span class="sep">|</span>
     <a class="na" href="#" title="">28</a> <span class="sep">|</span>
     <a class="na" href="#" title="">29</a> <span class="sep">|</span>
     <a class="nu" href="#" title="Active Date Link">--</a> <span class="sep">|</span>
     <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
     <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
     <a class="nu" href="#" title="">--</a></li></ul>
</div>
</div>

Suivent 10 autres div identiques pour les 10 autres mois de l'année, je vais vous épargner 5km de codes identiques...

Le CSS:


.slide 
{margin : 0 auto;
padding : 10px;
text-align : center;
width : 21em;
border : 1px solid #ccc;}

.calendartitle 
{color : #669900;
font-weight : bold;}

ul#days, ul.weeks 
{font-family : 'courier new', monospace;
list-style-type : none;
margin : 20px 0 20px 0;
margin-left: -35px;}

ul#days li span 
{background-color : #669900;
border : 1px solid #000;
cursor : help;
font-weight : bold;
color : #fff;
padding : 5px;
margin-left: 0;}

ul.weeks li a.al, ul.weeks li a.na  
{color : #666;
text-decoration : none;
background-color : #ffffcc;
border : 1px solid #999;
padding : 5px;}

ul.weeks li a.na, ul.weeks li a.na:hover, ul.weeks li a.na:focus, ul.weeks li a.na:active   
{background : transparent;
color : #666;
cursor : default;}

ul.weeks li a.al:hover, ul.weeks li a.al:focus, ul.weeks li a.al:active 
{color : #000;
background-color : #eecc11;
border : 1px solid #000;
text-decoration : none;
cursor : pointer;}

ul.weeks li a.nu 
{color : #eee;
padding : 5px;
border : 1px solid #ccc;
background-color : #eee;
cursor : default;}

span.sep 
{display : none;}

La capture:
http://img406.imageshack.us/img406/8003/screenshot1z.jpg

Un énorme merci d'avance à celui ou celle qui se penchera sur mon souci!

audrasjb

16 Jan 2012 à 09:43

Bonjour,

Cela se fait plutôt bien en Javascript. L'idée est de faire se superposer toutes les divisions portant la classe "slide" au sein de la division "Calendrier". Ensuite, via Javascript, masquer 11 des 12 divisions portant la classe "slide" et utiliser les événements de clic sur chaque bouton pour faire glisser les éléments, un peu comme dans n'importe quel diaporama. Tu peux aussi étudier l'extension jQuery jCarousel par exemple, qui fait exactement ce que tu souhaites obtenir.

Maintenant, je suspecte fortement l'outil que tu as utilisé pour faire ce calendrier de comprendre cette fonctionnalité nativement, quand on voit les noms de classes utilisés ("slide"). As-tu une page en ligne ? As-tu bien pris connaissance de la documentation de cet outil ?

Tricky a écrit :
[…] bonne poire que je suis, quand on m'a demandé de concevoir de A à Z un site bien fourni avec plein de trucs que je sais pas faire, j'ai bien sûr dit "ouaip, no problem, google est mon ami" […] Donc ça ne m'intéresse pas d'aligner 12 calendriers, ça fait pas pro. je ne maîtrise absolument pas javascript et quand j'essaie de décrypter les codes trouvés un peu partout je ne comprends rien […] La réponse à mon problème doit probablement être d'une simplicité monstrueuse mais n'y connaissant strictement rien, la solution ne me vient pas...

Ce qui ne fait pas pro, c'est cette attitude qui consiste à accepter n'importe quel projet/mission sans en connaître les tenants et aboutissants : «bah, je trouverais bien un plugin ou un bout de code sur internet pour faire ça !». Tu prends des risques pour toi, comme pour ton client. Dans le cadre d'une pratique amatrice, chacun est évidemment libre d'apprendre comme il le souhaite (sérieusement, en s'autoformant ; à la Rache, avec des morceaux de code mis bouts à bouts), c'est évident, mais dans le cadre d'une prestation commerciale, c'est un peu ahurissant : imagine une seconde si un plombier ou un architecte travaillaient de la même façon !
Modifié par audrasjb (16 Jan 2012 - 09:45)

Tricky

16 Jan 2012 à 15:47

Merci beaucoup pour ta réponse, je vais me pencher sur le jQuery jCarousel, j'espère y arriver!

Pour les attributs, j'ai essayé un tutoriel, j'ai pas réussi mais j'ai gardé les noms... Smiley smile

Celui-ici d'ailleurs: Tuto Slideshow Dynamique

"audrasjb" a écrit :
Ce qui ne fait pas pro, c'est cette attitude qui consiste à accepter n'importe quel projet/mission sans en connaître les tenants et aboutissants : «bah, je trouverais bien un plugin ou un bout de code sur internet pour faire ça !». Tu prends des risques pour toi, comme pour ton client. Dans le cadre d'une pratique amatrice, chacun est évidemment libre d'apprendre comme il le souhaite (sérieusement, en s'autoformant ; à la Rache, avec des morceaux de code mis bouts à bouts), c'est évident, mais dans le cadre d'une prestation commerciale, c'est un peu ahurissant : imagine une seconde si un plombier ou un architecte travaillaient de la même façon !

Je suis tout à fait d'accord avec toi, mais il y a aussi des circonstances atténuantes. J'ai eu un accident du travail, j'ai le dos foutu, j'ai 26 ans, pas le permis, pas d'argent et évidemment je ne trouve pas de boulot. Donc je bidouille sur le pc et comme les gens me demandent bien plus souvent de réaliser des sites que des peintures numériques ou des designs, il faut bien commencer quelque part et j'apprends sur le tas avec les moyens du bord. Parfois quand t'as pas le choix ben tu t'y mets, pour certains geeks les langages coulent de source, mais pour d'autres c'est un parcours du combattant, quand tu acceptes de faire un site pour gagner ta croûte et que tu te heurtes à des demandes de galeries flash, de contenus dynamiques etc tu retrousses tes manches même si tu ne comprends rien plutôt que de refuser une source de revenus Smiley smile

Après, j'en suis à mon 4ème site et je sais faire bien plus de choses aujourd'hui qu'au premier jour, j'en saurai encore plus quand j'aurai réussi celui en cours héhé!

Merci pour les conseils et j'espère y arriver!

Esquisse Designs

audrasjb

17 Jan 2012 à 11:13

Tricky a écrit :
Pour les attributs, j'ai essayé un tutoriel, j'ai pas réussi mais j'ai gardé les noms... Celui-ici d'ailleurs: Tuto Slideshow Dynamique

Cet exemple est tout à fait fonctionnel pour ce que tu souhaites faire. Si tu n'a pas réussi à l'implémenter, je ne vois pas pourquoi cela se passerait mieux avec jCarousel (sauf peut-être par… chance ?).
Pourrais-tu mettre en ligne une page d'exemple pour voir ce qui cloche ? Sans ça, difficile de t'aider davantage.

cooltrane

3 Jan 2013 à 15:57

audrasjb a écrit :

Ce qui ne fait pas pro, c'est cette attitude qui consiste à accepter n'importe quel projet/mission sans en connaître les tenants et aboutissants : «bah, je trouverais bien un plugin ou un bout de code sur internet pour faire ça !». Tu prends des risques pour toi, comme pour ton client. Dans le cadre d'une pratique amatrice, chacun est évidemment libre d'apprendre comme il le souhaite (sérieusement, en s'autoformant ; à la Rache, avec des morceaux de code mis bouts à bouts), c'est évident, mais dans le cadre d'une prestation commerciale, c'est un peu ahurissant : imagine une seconde si un plombier ou un architecte travaillaient de la même façon !

ouhhh le donneur de leçon !!!!
Chacun fait ce qu'il peut et même si c'est à "la rache" avec des morceaux de code, ça le regarde ! Si ça fonctionne bien, c'est l'essentiel. je ne pense pas que Triccky va leur refiler un site pourri...C'est agaçant cette dictature du professionnalisme.... Et puis des plombiers et des architectes qui bossent mal, j'en connais...

Sujet clos