Pb d'adaptation et de logique ? sur script de news

**noceb** · 15/01/2013, 17h56

Bonjour,
Mon souci provient de l'adaptation du script news_slider jquery. je récupère bien les news de ma bdd mais celles-ci s'affichent les unes sous les autres et non plus les unes après les autres.

Voici le code initial :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
$(document).ready(function(){
var newsoption1 = {
  firstname: "mynews", //id de la div contenant les news
  secondname: "showhere", //id du conteneur o񠬥s news seront affich곍
  fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
  newsspeed:'6000' //vitesse de defilement de news
}
$.init_news(newsoption1);
var myoffset=$('#news_button').offset();
var mytop=myoffset.top-1;
$('#news_button').css({top:mytop});
});
</script>
 
<div id=mynews   style="display:none"> <!---div contenant les news  ------>
	<div id=news1 class=news_style > <!---1er news ------>
	<p><b>news 1:</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and 
	scrambled it to make a type specimen book. It has survived not only five centuries, <a href="#"> Lire la suite...</a></p>
	</div>
	<div id=news2 class=news_style > <!---2eme news ------>
	<p><b>news 2:</b> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and 
	scrambled it to make a type specimen book. It has survived not only five centuries, <a href="#"> Lire la suite...</a></p>
	</div><!---Vous pouvez ajouter autant de news que vous voulez en ajoutant dautres div avec la classe news_style----->
 
</div>
	<h1>Demonstration de News Slider en jQuery</h1>
	<div align=left id=mynewsdis><!---div pour afficher les news  ------>
		<div class=news_border><!----cadre des news---->
			<div id=showhere class=news_show ><!----le texte des news---->
			</div>
		</div>
		<div class=buttondiv id=news_button><!---bouton de navigation ------>
			<img src=prev.gif align="absmiddle" id=news_prev><img src=pause.gif align="absmiddle" id=news_pause><img src=next.gif align="absmiddle" id=news_next >
		</div>
 
	</div>

Et voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
 
$query = 'SELECT * FROM news ORDER BY id DESC';
$retour = mysql_query($query) OR die("<div class='erreur' non trouv&eacute;es.</div>");
$total = mysql_num_rows($retour);
 
if(isset($total)){ ?>            
<div align=left id=mynewsdis><!---div pour afficher les news  ------>
<div class=news_border><!----cadre des news---->
<div id=showhere class=news_show ><!----le texte des news---->
<?php
while ($data = mysql_fetch_assoc($retour)) // On fait une boucle pour lister les actus
	{
	?>
        <p class="italic"><?php echo $dateEvnt; ?></p>
    	<h4><?php echo $titre; ?></h4>
    	<p><?php echo $contenu ?></p></p>          
	<?php	
	} ?>
</div>
</div>
<div class=buttondiv id=news_button><!---bouton de navigation ------>
<img src="images/prev.gif" align="absmiddle" id=news_prev><img src="images/pause.gif" align="absmiddle" id=news_pause><img src="images/next.gif" align="absmiddle" id=news_next >
</div>
</div>
	 <?php
		}else echo 'Pas d\'actualit&eacute;s &agrave; afficher...'; ?>
 
 
            <?php
	// on libère l'espace mémoire alloué pour cette interrogation de la base
	mysql_free_result ($retour);  
	?>

J'ai enlevé tte la 1ère partie du code initial puisque c'est du display none et que les infos je les récupère de la bdd.

Merci d'avance à ceux qui pourraient m'aider, cela fait déjà un bon petit moment que je suis dessus et là je ne sais vraiment plus où j'en suis

**Winks** · 15/01/2013, 21h02

Si je comprend bien, tu essaies de reproduire le fonctionnement de ceci en php?
(Merci de mettre un lien vers la source, qu'on ait pas à google des termes du script pour savoir de quoi on parle/quel est le but de la chose)

Si c'est bien ça, il semble y avoir une petite incompréhension sur ce qu'est le PHP; Avec du PHP on gère les informations côté serveur, on a aucun contrôle sur la façon de l'afficher côté client. C'est pour ça qu'on utilise du HTML, mais le HTML est fixe. Pour "bouger" du HTML et rendre une page interactive, on utilise du javascript.

Si tu veux changer quelque chose sur ta page avec du PHP, il faut que le serveur travail entre 2, qu'il y ait un rechargement de la page.

J'ai enlevé tte la 1ère partie du code initial puisque c'est du display none et que les infos je les récupère de la bdd.

Ces display none sont justement écris en HTML avec du PHP pour que les informations soient disponible au javascript qui va les copier (une à la fois) dans #mynewsdis.

TL;DR:
Il te manque quelques bases sur ce qu'est le PHP et le JavaScript. Je te conseille de lire quelques tutos ici.

Pour que ça fonctionne, il faut:

Laisser le JavaScript:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script>
	$(document).ready(function(){
		var newsoption1 = {
			firstname: "mynews", //id de la div contenant les news
			secondname: "showhere", //id du conteneur o񠬥s news seront affich곍
			fourthname:"news_button", //la div qui contient les images de nvigation (suivant, precedent, pause)
			newsspeed:'6000' //vitesse de defilement de news
		}
		$.init_news(newsoption1);
		var myoffset=$('#news_button').offset();
		var mytop=myoffset.top-1;
		$('#news_button').css({top:mytop});
	});
</script>

Remplir #mynews avec les news récupérées en DB et les laisser en display:none

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id=mynews   style="display:none"> <!---div contenant les news  ------>
	<?php
	$query = 'SELECT * FROM news ORDER BY id DESC';
	$retour = mysql_query($query);
	while ($data = mysql_fetch_assoc($retour)) :
		?>
		<div id=news<?php echo $news_id; ?> class=news_style >
			<p>
			<h4><?php echo $titre ?></h4>
	<?php echo $contenu; ?>
			</p>
		</div>
<?php endwhile; ?>
</div>

Mettre le conteneur HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
<h1>Demonstration de News Slider en jQuery</h1>
<div align=left id=mynewsdis><!---div pour afficher les news  ------>
	<div class=news_border><!----cadre des news---->
		<div id=showhere class=news_show ><!----le texte des news---->
		</div>
	</div>
	<div class=buttondiv id=news_button><!---bouton de navigation ------>
		<img src=prev.gif align="absmiddle" id=news_prev><img src=pause.gif align="absmiddle" id=news_pause><img src=next.gif align="absmiddle" id=news_next >
	</div>
</div>

(/!\) J'ai ignoré tout ce qui est gestion d'erreur pour la simplicité. Et il te manque un ">" dans "<div class='erreur' non trouvées.</div>"

**noceb** · 16/01/2013, 09h32

Merci Winks pour ta réponse, j'étais à côté de la plaque... Je comprends mes erreurs.
Concernant les tutos, je me soigne petit à petit car c'est long, la pratique le prouve

Pb d'adaptation et de logique ? sur script de news [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager