Salutation

Je vous invite à visiter mon site afin d'avoir une meilleur idée de se dont je vais parler plus bas.

Page d'accueil contenant les news

Donc comme vos pouvez le constater sur la page d'accueil, j'ai un système de news, qui ne fait (actuelement) qu'afficher les données tel quelles.

J'aimerais avoir un système me permettant d'avoir au premier visuel, le contenu mais pas en entier (ceci est fonctionnel dejà), et ensuite, que l'orsque l'on clique sur le lien "lire la suite" on affiche la suite de la news, mais en étant toujours sur la page d'accueil, et avec un éffet accordéon (slideUp , slideDown)

J'ai tester pas mal de scripts, j'ai essayer de les modifier, à chaque fois j'ai un soucis.

Du coup je vous demande votre aide pour réaliser cela

Voici un bout de code, vous permettant de voir ce que j'ai fait, mais il y a pas mal d’erreur, et malgré mes recherches, j'ai pas réussit (mes connaissance ens js sont très faibles Oo), et il n'y a pas d'ajax encore.

Le code "HTML"

<div id="prem"><?= substr($extrait, 0, $espace); ?>... (<a href="#show" class="toggleLink">Lire la suite.</a>)</div>
<div style="padding-bottom:10px;display: none;" id="toggle"><?php echo parseZCode($row->news_content); ?></div>

Le script JQuery
[javascript]
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Lire la suite';
var hideText='Fermer';

// initialise the visibility check
var is_visible = false;

// append show/hide links to the element directly preceding the element with a class of "toggle"
// $('#titret').prev().append(' (<a href="#voir" class="toggleLink">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('#toggle').hide();
$('#prem').show();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// switch visibility
is_visible = !is_visible;

// change the link depending on whether the element is shown or hidden
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style

//$('a.toggleLink').html(showText);
$('#prem').toggle('slow');
$(this).parent().next('#toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});
[/javascript]

Merci de votre aide, vraiment !!!!!!!

Très cordialement

Quel est le problème ? Rien ne fonctionne ?
Déjà regarde le code source de ta page pour voir si le code html est bien écrit dans tes div. Tu pourrais avoir un pb avec <?= substr($extrait, 0, $espace); ?> car les shrt tags ne sont plus activés par défaut avec php5, faudrait donc écrire <?php echo substr($extrait, 0, $espace); ?>

Non, ce code ne fonctionne pas du fait que j'ai mal utiliser jQuery.
De toute manière je ne compte pas l’utiliser ainsi, je compte faire de l'ajax pour afficher entièrement la news demandée, donc le problème n'est pas là.

J'ai besoin d'aide pour m'aider à réaliser ce système, car je ne connais pas beaucoup le javascript et/ou jQuery, et les codes donnés ne sont là que pour illustrer mes connaissances et mes erreurs, et je ne compte pas faire simplement un vulgaire copier collé d'un code trouvé sur internet, j'ai besoin d'apprendre Js et le système ajax (passer les variables d'une page à une autre, récupérer l'élément ect....), et ce système ne "lecture caché", peux m'aider en cela, très certainement même.

Ceci <? ?> est le short tag de <?php ?>, je ne l'utilise pas, ça bug souvent.
Mais ceci <?= $var ?>, est l'équivalent de <?php echo $var; ?>.
C'est autoriser depuis php 5.2 il me semble, et permet d'écrire de simple echo perdu au milieu du html plus vite.
Etant donné vu que je suis fainéant, j'utilise donc ceci quand j'ai juste un echo à faire au milieu de la ligne.
Y'a bien le système HEREDOC ou autre, mais j'ai pas l’habitude de les utiliser, du coup je fait comme dit plus haut ^^

Merci pour ton aide, j'ai bien vérifier, les balises sont correctement insérées et fermées.Tout niveau html et php est fonctionnel. C'est vraiment la partie Js qui foire, mais je me répéte ^^.

Merci beaucoup

Cordialement

Mais ceci <?= $var ?>, est l'équivalent de <?php echo $var; ?>.
C'est autoriser depuis php 5.2 il me semble

En fait bien avant, mais ce que veux dire AB c'est que jusqu'a php5.4 ceci est lié à la directive short open tag

Cette directive affecte également l'utilisation de <?=, qui est identique à <? echo, avant PHP 5.4.0. L'utilisation de cette écriture nécessite que l'option short_open_tag soit activée. Depuis PHP 5.4.0, <?= est toujours disponible.

@+

Merci de l'info ^^, c'est quand même utile, de toute manière j'ai pas de soucis, j'utilise wamp en local et en production ^^ donc toujours la dernière version de php

Vas à cette adresse et regarde l'exemple avec le bouton "Toogle'em". Cela devrait t'aider.

onclick sur ton lien tu envoies une requête ajax pour chercher le texte correspondant. Au retour (success) tu peuple ta div avec le texte (méthodes "html" ou "text" suivant les besoins) et tu applique le toogle. Avant de faire ta requête ajax tu vérifie si ton div est vide (avec la méthode "text"), et sinon tu fais simplement le toogle. Ce principe devrait fonctionner.

Si tu as plusieurs liens et textes à afficher il faudra utiliser des classes à la place des id.

J'ai regarder, mais j'ai plusieurs div avec la même classe, comment puis je faire pour différencier les div et éviter les erreurs?

Merci de ton aide.

Cordialement

salut :

Ne peux tu pas ajouter une classe supplémentaire (et l'utiliser) juste sur les div qui t’intéresse ?

Non c'est pour les div des news, vu que c'est une boucle, forcement ça répète les classes (ou id) des div, et de se coup y a des conflit.

Faudra étudier les "sélecteurs jquery" si tu veux pouvoir t'en sortir. C'est l'abc.

En fonction de ta construction html, tu utiliseras le sélecteur qui conviendra.
Par exemple si j'ai une construction avec des div successives, je peux utiliser "next" pour chercher le prochain élément html "frère" (même niveau htm) dont la classe est "suite" en faisant simplement :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script>
$(function()
{
	$(".click_suite").on("click",function () {
$(this).next(".suite").toggle("fast");
});    
})
</script>

<style type="text/css">
.suite {
	display : none;
}
.click_suite {
	cursor:pointer;
	text-decoration:underline;
}
</style>
</head>

<body>
<div class="click_suite">lire la suite</div>

<div class="suite">
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
</div>


<div class="click_suite">lire la suite1</div>

<div class="suite">
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
</div>

<div class="click_suite">lire la suite2</div>

<div class="suite">
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
</div>


</body>
</html>

En fonction de ta construction html, tu utiliseras le sélecteur qui conviendra.

Et inversement quand tu construit ton html tu as tout intérêt (si prévision d'utilisation javascript) à utiliser une structure qui te permettra d'avoir des sélecteurs simples.

je vais étudier celà, tester et voir comment ça fonctionne

Par contre, j'ai un extrait de texte et le lien pour lire la suite.

Comment puis-je faire dans ce cas pour refermer la div contenant l’extrait, et l’afficher à nouveau lorsqu'on clique une deuxième fois sur le lien?

De même inverser le texte contenu dans la div "click_suite" en mettant "fermer" au lieu de "lire"

Exemple:

<div class="extrait">voici le premier paragraphe de ma news ... </div>
<div class="click_suite">lire la suite</div>

<div class="suite">
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
</div>


<div class="extrait">voici le premier paragraphe de ma news1 ... </div>
<div class="click_suite">lire la suite1</div>

<div class="suite">
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
</div>

.....

En espérant que je vous embête pas trop.

Merci beaucoup

Cordialement

Je poste à la suite

En reprenant ton script, et celui que j'avais trouver sur le net.

En analysant et en essayant de modifier, j'ai aboutit sur un résultat fonctionnel mais peux être pas optimisé

Voici le code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script>
$(function()
{
	var showText='Lire la suite';
	var hideText='Fermer';
	var is_visible = false;

       $(".click_suite").on("click",function () {
		is_visible = !is_visible;
		// change l'état du lien en Lire la suite ou Fermer
		$(this).html( (!is_visible) ? showText : hideText);		
		
		$(this).next(".suite").toggle("slow");
		$(".extrait").toggle("fast");
	});    
})
</script>

<style type="text/css">
.suite {
        display : none;
}
.click_suite {
        cursor:pointer;
        text-decoration:underline;
}
</style>
</head>

<body>

<div class="extrait">voici le premier paragraphe de ma news ... </div>
<div class="click_suite">lire la suite</div>

<div class="suite">
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
la suite du texte,<br />
</div>


<div class="extrait">voici le premier paragraphe de ma news1 ... </div>
<div class="click_suite">lire la suite</div>

<div class="suite">
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
la suite du texte1,<br />
</div>

<div class="extrait">voici le premier paragraphe de ma news2 ... </div>
<div class="click_suite">lire la suite</div>

<div class="suite">
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
la suite du texte2,<br />
</div>


</body>
</html>

Quand pense tu?

Merci beacoup

Cordialement

ça ira mieux comme ça :
[javascript]<script>
$(function()
{
var showText='Lire la suite';
var hideText='Fermer';

$(".click_suite").on("click",function () {

var suite = $(this).next(".suite");
var that = $(this);

suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText) : that.text(showText);
});

$(this).prev(".extrait").toggle("fast");
});
})
</script>[/javascript]

Merci beaucoup, c'est mieux en effet.

J'ai modifier un peu le contenu, afin que la couleur du "lien" change en même temps que le texte change

Voici le code

[javascript]
$(function()
{
var showText='Lire la suite';
var hideText='Fermer';
var showColor='#0000ff';
var hideColor='#ff0000';

$(".click_suite").on("click",function () {

var suite = $(this).next(".suite");
var that = $(this);

suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText) : that.text(showText);
$(this).css("display") == "block" ? that.css({'color':hideColor}) : that.css({'color':showColor});
});

$(this).prev(".extrait").toggle("fast");
});
})
[/javascript]

Maintenant il me reste à savoir comment ajaxiser cela, afin de ne charger que les news complètes dont on veux lire la suite, et fermer la connexion pour les extraits.

J’espère que c'est pas trop compliquer Oo

Merci de votre aide

cordialement

Tu peux chainer les éléments si tu veux

[javascript]suite.toggle("slow",function(){
$(this).css("display") == "block" ? that.text(hideText).css('color',hideColor) : that.text(showText).css('color',showColor);
});[/javascript]