Changer couleur de background

Version imprimable

bonjour
je cherche a changer le fond de ma page on cliquant sur un lien , le lien est dynamique il change selon 2 variables mois et annee je travaille avec jsp

voici le code de mon jsp

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
<%
    String annee = (String)session.getAttribute("annee") == null ? "":(String)session.getAttribute("annee");
    String mois= (String)session.getAttribute("mois") == null ? "" : (String)session.getAttribute("mois");
   
    LinkedList liste = null;
    if(session.getAttribute("list_mois_annee") != null){
        liste = (LinkedList)session.getAttribute("list_mois_annee");
    }
   (LinkedList)session.getAttribute("list_mois_annee");   
    if(liste == null) liste = new LinkedList();
   
%>
 
<li> 
 <span><%=mois%>/<%=mois%></span> 
	<ul id="bg_menu"> 
 <%  
 Iterator itAnnee = liste.iterator();
 while(itAnnee.hasNext()) 
 { 
        HashMap hAnnee = (HashMap)itAnnee.next(); 
        String mois_tmp = (String)hAnnee.get("mois"); 
        String annee_tmp = (String)hAnnee.get("annee"); 
                
 %>  
 
	<li><a href="authentification?mois=<%=mois_tmp%>&amp;annee=<%=annee_tmp%>" target="_self" onclick="changeCouleur(this.couleur)"><%=mois_tmp%> / <%=annee_tmp%></a></li> 
 
 <% }%>

les menus sont stocké dans une liste ils semblent à janvier 2014,fevrier 2014....
je cherche lorsque je choisi le lien janvier 2014 le couleur du fond de ma page sera rouge si je choisi fevrier 2014 la couleur change en bleu

j'ai essayer de faire une fonction java script

Code:

1
2
3
4
5
6
7
8
9
10
11
function changeCouleur(couleur){
 
    if(mois=="janvier" && annee==2014){
        document.body.style.backgroundcolor='red';
    }
    else if(mois=="fevrier" && annee==2014){
            document.body.style.backgroundcolor='bleu';
    }
 
 
}

mais lorsque j'appelle cette fonction rien ne change

31/01/2014, 10h23
jeffray03

tu dois faire un truc de ce genre:

Code:

<body style='background-color: ${summary.color}'>

et changer simplement la valeur de summary.color

Eric
31/01/2014, 10h49
amani1

j'ai essayer ça mais le menu disparait
31/01/2014, 10h51
jeffray03

comment est ce que tu l´as fait?
est ce possible de voir le code?
Eric
31/01/2014, 10h58
jeffray03

ah je viens de m´apercevoir du probleme:
question:
comment est ce que tu lui transmet la valeur du mois et de l´année?
sinon il n´entrera jamais dans tes ifs.
et du coup rien ne changera.

Eric

j'ai ajouté ça a ma page JSP
Code:

1 2 3 <li><a href="authentification?mois=<%=mois_tmp%>&annee=<%=annee_tmp%>" target="_self" onclick="changeCouleur(this.couleur)"><%=mois_tmp%> / <%=annee_tmp%></a></li> <body style='background-color: red;'>
j'ai pas compris en fait ${summary.color} est qu'il s'agit d'une variable java script??

le mois et l'annee son transmet a partir de servlet d'authentification

au niveau de ma page jsp j'ai recuperer ces 2 variables
Code:

1 2 String annee = (String)session.getAttribute("annee") == null ? "":(String)session.getAttribute("annee"); String mois= (String)session.getAttribute("mois") == null ? "" : (String)session.getAttribute("mois");

voici un exemple que j´ai fait avec que du html, tu devrais pouvoir l´adapter avec du jsp:

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
 
  <html>
  <head>
     <script language="javascript" type="text/javascript">
     var param = getURLParam("param");
 
 
   function getURLParam(strParamName) {
      var strReturn = "";
      var strHref = window.location.href;
      if ( strHref.indexOf("?") > -1 ) {
         var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
         var aQueryString = strQueryString.split("&");
         for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
            if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ) {
               var aParam = aQueryString[iParam].split("=");
               strReturn = aParam[1];
               break;
            }
         }
      }
      return unescape(strReturn);
   }
   
    function chngebg ()
    {
           
            document.body.bgColor = param;
       
    }
   </script>
  </head>
  <body onload="chngebg()">
 
   <h1>Eine kleine Verweissammlung</h1>
 
<p>
  <a href="index.html?param=red">Rot</a> Nachrichten<br>
  <a href="index.html?param=blue">Blau</a> Nachrichten<br>
  <a href="index.html?param=yellow">Gelb</a> Nachrichten<br>
 
</p>
 
  </body>
</html>

et si tu n´y arrive pas peux-tu nous envoyer ton code (javascript et jsp)
Eric

Bonjour,
il faut que tu passes tes variable "mois" et "annee" dans ta fonction javascript.
Code:

1 2 3 4 5 6 7 8 function changeCouleur(mois, annee){ if(mois=="janvier" && annee==2014){ document.body.style.backgroundcolor='red'; } else if(mois=="fevrier" && annee==2014){ document.body.style.backgroundcolor='bleu'; } }
que tu appelleras par
Code:

1 2 onclick="changeCouleur('${mois}', ${annee});"
Ensuite je te conseille plutot d'appliquer une classe à ton body, ca te permettra de définir la couleur avec une feuille de style
Code:

1 2 3 4 5 6 7 8 9 function changeCouleur(mois, anneer) { if(mois=="janvier" && annee==2014){ document.body.className = 'couleur1'; } else if(mois=="fevrier" && annee==2014){ document.body.className = 'couleur2'; } }
et dans ta feuille de style
Code:

1 2 3 4 5 6 7 body.couleur1 { background-color: red; } body.couleur2 { background-color: blue; }

31/01/2014, 12h06
amani1
j'ai essayer de changer mais rien ne change ma page jsp n'execute pas le code java script j'ai mis mes 2 fichiers dans la même repertoire et j'ai ajouter ça a ma page JSP
Code:

1 2 3 4 5 <head> <script type="text/javascript" src="changecouleur.js"></script> </head>
31/01/2014, 12h14
jeffray03

est ce que ton fichier .js, se trouve dans le meme repertoire que ton application ton fichier jsp?
31/01/2014, 12h21
amani1

oui dans le même répertoire

j'ai essayer de faire en sorte que les liens soient statique et du coup j'ai changer
Code:

1 2 <li ><a href="authentification?mois=Janvier&annee=2014" target="_self" onclick="{ document.body.className = 'couleur2';}" >Janvier / 2014</a></li> <li><a href="authentification?=fevrier&annee=2014" target="_self" onclick="{ document.body.className = 'couleur3';}">fevrier/ 2014</a></li>
mais lorsque je clique sur le lien la couleur du fond change mais disparu et moi je veut qu'elle reste mais je sais pas pourquoi est ce que je dois changer le onclick par un autre evenements??

31/01/2014, 15h54
VirgApps

Ce qui peut poser problème c'est que tu as une fonction javascript sur une balise lien.
Autrement dit la fonction javascript va s’exécuter (la couleur change) puis tu seras redirigé sur une autre page (exécution du lien) et du coup tu perd le changement de couleur.

Les liens dans ta liste ne servent qu'à changer la couleur de fond ou également à changer de page ?
31/01/2014, 16h03
amani1

non il servent seulement a changer la couleur pas de redirection vers d'autres pages.
j'ai essayer de mettre mon code java script dans la balise li au lieu de celle de lien mais le resultat est le même la couleur disparu
31/01/2014, 16h18
VirgApps
Oui il faut mettre le JavaScript sur le li mais également supprimer la balise <a> car le lien sera tout de même exécuté.
Code:

1 2 <li onclick="document.body.className = 'couleur2';" >Janvier / 2014</li> <li onclick="{ document.body.className = 'couleur3';}">fevrier/ 2014</li>
31/01/2014, 17h06
amani1

oui j'ai essayer ça mais le probléme c'est lorsque je clique sur un lien le nom de ce dernier s'affiche dans l'url une fois le <a> est supprimer le lien ne sera pas afficher et du coup je vais perdre l'information sur le lien affiché y'a t'il d'autre solution qui me permet de récupérer le nom de lien choisi
31/01/2014, 17h33
VirgApps

En fait ce qui va déterminer quelle méthode utilisée c'est de savoir si tu repasses côté serveur quand tu cliques sur ta liste.
Si non : un javascript fera l'affaire
Si oui : il faut que tu récupères les paramètres durant ton traitement côté serveur puis que tu les retournes lors de ton retour client puis avec un if en jstl tu peux définir quelle classe ajouter à ton body.

mon probleme est lorsque j'appelle mon fichier java script lors de l’exécution rien ne change on dirait que le code java script ne s’exécute pas malgré que j'ai mis
ça et les 2 fichiers jsp et js se trouvent dans la même repertoire
Code:

1 2 3 4 5 6 <head> <script type="text/javascript" src="changecouleur.js"></script> </head>
et j'ai essayé d’écrire mon code java script dans le fichier jsp en dure entre les balise
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <body> <script type="text/javascript"> function changeCouleur(mois, anneer) { if(mois=="janvier" && annee==2014){ document.body.className = 'couleur1'; } else if(mois=="fevrier" && annee==2014){ document.body.className = 'couleur2'; } } </script> </body>
toujours je rencontre le même probléme :?

02/02/2014, 18h43
-Dici-

Dans les paramètres de la fonction tu as mis anneer au lieu d'annee. Par ailleurs je ne m'y connais pas moi-même en JS mais je sais que c'est très chiant à débuguer car quand ça plante il ne se passe tout simplement rien en général.

Il faut utiliser des outils de débugage (je pense que tous les navigateurs en embarquent si on cherche un peu) mais j'en dirai pas plus là-dessus car je ne les utilise pas.
03/02/2014, 09h47
VirgApps

Exact, avec Chrome ou Firefox tu pourras savoir si tu as une erreur javascript.
Ou plus basiquement tu peux mettre un

Code:

alert('test');

au tout début de ton script voir déjà s'il s'execute.