Forum CMS Made Simple FR
Gabarit des news - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : Gabarit des news (/thread-720.html)


Gabarit des news - cmsms10 - 08/10/2010

Bonjour,
J'ai installé le module de news et souhaiterais le faire fonctionner comme suit:
je présente les titre des news en page d'accueil (uniquement les titres) et quand un visiteur clique sur le titre, le détail de la news cliquée s'affiche juste en dessous du titre. Je donne un exemple :

écran 1
---------------------
titre1
titre2
titre3
----------------------

écran2 : j'ai cliqué sur titre2 j'obtiens l'écran suivant:
---------------------
titre1
titre2
>détail de la news titre2
titre3
----------------------

Prière de me dire comment je peux faire cela car je n'ai pas trouvé dans les forums.
J'ai vu que c'était implémenté dans le module glossaire mais je n'ai pas su l'adapter.

En vous remerciant.

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.6.x
#~ Nom de l'hébergeur : ovh
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.6.6
#~ Installed Modules:
#~ * CMSMailer: 1.73.14
#~ * FileManager: 1.0.1
#~ * MenuManager: 1.6.2
#~ * ModuleManager: 1.3.1
#~ * News: 2.10.3
#~ * nuSOAP: 1.0.1
#~ * Printing: 1.0.4
#~ * Search: 1.6.1
#~ * ThemeManager: 1.1.1
#~ * TinyMCE: 2.5.5
#~ * FormBuilder: 0.6.2
#~ Config Information:
#~ * php_memory_limit:
#~ * process_whole_template: false
#~ * max_upload_size: 10000000
#~ * default_upload_permission: 664
#~ * assume_mod_rewrite: false
#~ * page_extension: html
#~ * internal_pretty_urls: false
#~ * use_hierarchy: true
#~ Php Information:
#~ * phpversion: 5.2.13
#~ * md5_function: On (True)
#~ * gd_version: 2
#~ * tempnam_function: On (True)
#~ * magic_quotes_runtime: Off (False)
#~ * memory_limit: 128M
#~ * max_execution_time: 30
#~ * safe_mode: Off (False)
#~ * session_save_path: /tmp (1777)
#~ * session.use_cookies: On (True)
#~ Server Information:
#~ * Server Api: cgi
#~ * Server Db Type: MySQL (mysql)
#~ * Server Db Version: 5.0.90
#~ ----------------------------------------------
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~


Gabarit des news - bess - 08/10/2010

salut monsieur cmsms10 (drôle de pseudo tiens Smile )

Le plus simple dans ton cas est de TOUT afficher dans la page dans le style suivant (à adapter dans ton cas et avec les gabarits déjà à ta dispo
Code :
<div class=englobe>
  <div class=titre>Titre1</div>
  <div class=detail>contenu détail 1</div>
</div>
<div class=englobe>
  <div class=titre>Titre2</div>
  <div class=detail>contenu détail 2</div>
</div>
<div class=englobe>
  <div class=titre>Titre3</div>
  <div class=detail>contenu détail 3</div>
</div>

une fois que t'es parvenu à afficher ce principe il te reste plus grand chose :
- la classe CSS "detail" doit être cachée : display:none;
- un Js bien placé (en Jquery par exemple) va lors d'un clic sur une div de classe "englobe" dans l'ordre les commandes suivantes
-->re-cacher l'ensemble des div de la class "detail" de toute la page
-->afficher la div de la class "detail" de la div ou le clic a été effectué.

Une autre solution full-css cette fois peut faire la même chose simplement en passant la souris au dessus de la div de classe "englobe", un peu comme un menu déroulant déroule ses sous-éléments dans CMSMS. Si tu souhaites utiliser cette voie tu as intérêt à avoir les reins solides côté conception CSS. le JS est plus abordable pour un débutant

Gabarit des news - cmsms10 - 08/10/2010

Merci bess,
J'ai suivi la 1ère piste que tu as indiquée, celle du js (je ne suis calé ni en js ni en css !).
J'ai repéré un exemple intéressant et je sais maintenant comment cacher/montrer des div via les id comme cela :

function montrer(object) {
if (document.getElementById)
document.getElementById(object).style.display = 'block';
}

function cacher(object) {
if (document.getElementById)
document.getElementById(object).style.display = 'none';
}

ensuite

<a href="#" onMouseOver="montrer('div1')" onMouseOut="cacher('div1')">titre</a>
<div id="div1" style="display:none;">Détail de la news</div>

La difficulté c'est que dans mon cas toutes les news titre1 / titre2 vont avoir la même classe et je ne sais pas comment différencier les news (il faudrait
que je leur donne des id différents ce qui n'est pas faisable).

Dans ce que tu dis :
--------------
-->re-cacher l'ensemble des div de la class "detail" de toute la page
-->afficher la div de la class "detail" de la div ou le clic a été effectué.
---------------

Le point 1 : je sais agir sur un id et là cela fonctionne uniquement pour la 1ère news
Le point 2 : je ne sais pas changer un seul élément car encore une fois j'agis sur un id

J'ai comme une impression que je tourne en rond ..

Gabarit des news - bess - 08/10/2010

désespère pas. Si t'es pas calé en Js c'est normal que ca te paraisse impossible ou trop complexe. Il n'en est rien en réalité.

va voir du côté des documentations et exemples Jquery qui sont pas mal foutu du tout.

exemple de code que je garantie pas de marcher... mais je dois pas être loin

supposons que l'on ai définit ton code HTML ainsi :

Code :
<div class="englobe">
  <div class="titre">Titre1</div>
  <div class="detail cache">contenu détail 1</div>
</div>
<div class="englobe">
  <div class="titre">Titre2</div>
  <div class="detail cache">contenu détail 2</div>
</div>
<div class="englobe">
  <div class="titre">Titre3</div>
  <div class="detail cache">contenu détail 3</div>
</div>

avec la classe cache très simplement constituée de

Code :
.cache{
display:none;
}

dans le header le Js pour afficher l'élément lorsque on survole sur une div ayant la class "englobe" se résume à

Code :
<script language="javascript" type="text/javascript" src="[.........]/jquery.js"></script>

<script type="text/javascript" language="javascript">
  $(document).ready(function(){

        $("div.englobe").hover(function () {
           $(this).find('div.detail').css('display', 'block');
         }, function () {
           $(this).find('div.detail').css('display', 'none');
         });

  }
</script>

Source à lire si tu veux comprendre ce que j'ai expliqué correctement :
http://docs.jquery.com/Tutorials:How_jQuery_Works
http://api.jquery.com/click/
http://api.jquery.com/find/
http://api.jquery.com/css/


et surtout faire un vrai code fonctionnel par ce que je viens de t'écrire celui là sans le tester :]

Gabarit des news - cmsms10 - 08/10/2010

Merci beaucoup bess,
Je vais installer jquery et tester tout cela. Bon WE.