id, Img Loader et norme W3C

Version imprimable

Bonjour,

J'essaie de modifier un petit script qui affiche et pagine une série de news, mais j'ai des erreur lors de la validation W3C.

Voici le script :

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
<script type="text/javascript">
 
	$(document).ready(function(){
 
	//Display Loading Image
	function Display_Load()
	{
	    $("#loadingnews").fadeIn(900,0);
		$("#loadingnews").html("<img src='/home/ajax-loader.gif' alt='loader' />");
	}
	//Hide Loading Image
	function Hide_Load()
	{
		$("#loadingnews").fadeOut('slow');
	};
 
 
   //Default Starting Page Results
 
	$("#paginationnews li:first").css({'color' : '#EB4C07'}).css({'border' : 'none'});
 
	Display_Load();
 
	$("#contentnews").load("/scripts/pagination_data.php?page=1", Hide_Load());
 
 
 
	//Pagination Click
	$("#paginationnews li").click(function(){
 
		Display_Load();
 
		//CSS Styles
		$("#paginationnews li")
		.css({'border' : 'none'})
		.css({'color' : '#A0A0A0'});
 
		$(this)
		.css({'color' : '#EB4C07'})
		.css({'border' : 'none'});
 
		//Loading Data
		var pageNum = this.id;
 
		$("#contentnews").load("/scripts/pagination_data.php?page=" + pageNum, Hide_Load());
	});
 
 
});
</script>

Et le code pour la pagination :

Code:

1
2
3
4
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
<li id="4">4</li>

Et voici les erreurs :
- Erreur: document type does not allow element "img" here
il concerne l'image dans #loadingnews

- Erreur: value of attribute "id" invalid: "1" cannot start a name
il concerne la liste 1.2.3.4

Quelle sont les modifications que je peux y apporter pour êtres W3C compatible ?

Merci

14/01/2011, 17h37
thunder75

Pour les id de tes li vaut mieux commencer par une lettre, un chiffre seul n'est pas tres apprécié ^^
Pour la balise img, je ne vois pas.

+1 pour les ids, un id ne doit jamais être uniquement numérique

pour ce qui est de l'image, il considère que tu as mis une balise image dans ton code js.
Il suffit de masquer le code js pour le validateur en commentant (commentaire xhtml) le code js

Code:

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script type="text/javascript">
 // <![CDATA[ 
 
	$(document).ready(function(){
 
	//Display Loading Image
	function Display_Load()
	{
	    $("#loadingnews").fadeIn(900,0);
		$("#loadingnews").html("<img src='/home/ajax-loader.gif' alt='loader' />");
	}
	//Hide Loading Image
	function Hide_Load()
	{
		$("#loadingnews").fadeOut('slow');
	};
 
 
   //Default Starting Page Results
 
	$("#paginationnews li:first").css({'color' : '#EB4C07'}).css({'border' : 'none'});
 
	Display_Load();
 
	$("#contentnews").load("/scripts/pagination_data.php?page=1", Hide_Load());
 
 
 
	//Pagination Click
	$("#paginationnews li").click(function(){
 
		Display_Load();
 
		//CSS Styles
		$("#paginationnews li")
		.css({'border' : 'none'})
		.css({'color' : '#A0A0A0'});
 
		$(this)
		.css({'color' : '#EB4C07'})
		.css({'border' : 'none'});
 
		//Loading Data
		var pageNum = this.id;
 
		$("#contentnews").load("/scripts/pagination_data.php?page=" + pageNum, Hide_Load());
	});
 
 
});
// ]]> 
</script>

14/01/2011, 20h17
PseT34

Super pour le CDATA, le hic pour les id c'est que le script s'en sert pour la navigation par page. Id1 = page 1

Edit j'ai modifier mon script avec une lettre devant le chiffre.

Merci pour votre aide.
14/01/2011, 20h28
SpaceFrog
Ben non ..

Code:

var pageNum = this.id;

il prend l'id ...
Code:

1 2 $("#contentnews").load("/scripts/pagination_data.php?page=" + pageNum, Hide_Load());
Code:

1 2 3 4 <li id="pg1">1</li> <li id="pg2">2</li> <li id="pg3">3</li> <li id="pg4">4</li>
et pense juste à modifier

Code:

$("#contentnews").load("/scripts/pagination_data.php?page=pg1", Hide_Load());
14/01/2011, 20h34
PseT34

Oui c'est ce que j'ai fait, ensuite je traite la chaine passé en GET en supprimant le p de mon id.