18041 sujets

Questions générales et questions de débutants

Menu de mots-clefs qui change le style de div

Salut,

Apres de longues recherches je viens demander de l'aide..

J'ai une mozaique (de div) qui correspondent a des newsletters et auxquelles je souhaite attribuer des mots clefs (qui correspondent aux thematiques des newsletters). Par exemple voiture, alfaromeo, moto, freins, etc

Je souhaite creer un menu peu conventionnel : une suite de mots clefs (une vingtaine) qui mettrait en sur-brillance les div qui les contiennent.
Ainsi on pourrait voir qu'en cliquant sur les mots clefs "alfaromeo" et "frein" j'ai deux div qui se sont mises en surbrillance.

Alors je cherche des pistes pour monter ca... mais je ne sais pas par ou commencer..

Merci de me suggerer des pistes.

sam
Bonjour,

À priori, il fa te falloir du JavaScript, peut-être de l'AJAX.

L'idée serait de détecter le clic sur les mots clés et "d'activer" les blcos en conséquence, tout en stockant les clics dans un tableau.
..mm ok.. je vais essayer de chercher dans cette voie.. il y a peut-etre des choses a fouiller chez JQuery and co aussi me disais-je.. je vous tiens au courant de mes recherches..
Administrateur
Bonjour,

tu aurais 20 blocs (div) avec chacun un lien (un bouton) dedans, c'est bien ça ?

As-tu des connaissances en jQuery ou autre framework ou JS ?
Pour le code HTML, il te faut une classe "vignette_newsletter" que chaque bloc va avoir.
JS:
Au clic sur un des boutons, tu modifies les classes CSS du parent qui est porteur de la classe .vignette_newsletter et au second clic tu enlèves cette classe (en jQuery .toggle() et .toggleClass())
Dans tes CSS, il y a 2 versions des blocs : l'une avec la classe .vignette_newsletter et l'autre pour .vignette_newsletter.lautreclasse (pas compatible IE6 tel quel mais c'est très facilement corrigeable)
Modifié par Felipe (21 Mar 2011 - 17:25)
Salut,

@Felipe> je suis debutant en JavaScript.. j'apprend les bases mais je veux aller plus vite que la musique alors je pique des bout de code ci et la..

Apres quelque recherche, je peux être cependant plus précis et préfère reformuler ma requête ainsi:
J'ai 3 mots sous forme de boutons (voiture - alfaromeo - frein) tel un menu.
Et en dessous j'ai 20 blocs (div) - chacun correspond a une newsletter - qui affiche une image (vignette de la newsletter).
Quand j'active un bouton (voiture par exemple) j'aimerais que tous les div du bloc (ayant ce theme voiture) change de style (bordure/couleur/.. peu importe)

J'ai légèrement avancé dans mes recherches mais je suis loin du resultat.
Pour l'instant j'arrive activer/desactiver la mise en forme de mes div via un bouton (button)

Mais je n'arrive pas a assigner plusieurs mots clefs a mes div et activer/desactiver leur mise en forme selon les differents boutons actives...

voir ci dessous. 

<html>
<head>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").toggleClass("stamp_newsletter");
  });
});
</script>
<style type="text/css">
body{font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
.box{
	border:dashed 2px #666;
	width:200px;
	height:200px;
	float:left;
	margin:10px;
	padding:10px;}
.stamp_newsletter{
	border:dashed 2px #0CF;}
button.On {
    background-color: #999999;
    color: white;
    border: 1px solid black;
}
</style>
</head>

<body>

<button id="BorderButton" onclick="togglestamp_newsletter('Border');">Car</button>
<button id="TyreButton">Tyre</button>
<button id="Button">AlphaRomeo</button>


<h2>Example 1</h2>
<div id="stamp_newsletter" class="box">This paragraph starts with no classes. Click the links below to add or
remove the available classes.</div>
<div id="stamp_newsletter" class="box">This paragraph starts with no classes. Click the links below to add or
remove the available classes.</div>
<div id="stamp_newsletter" class="box">This paragraph starts with no classes. Click the links below to add or
remove the available classes.</div>


</body>
</html>


Si vous avez des idees, merci pour vos suggestions Smiley smile

Sam
Modifié par samsam (21 Mar 2011 - 22:08)
Bonjour,

J'ai progressé dans ma recherche. J'arrive a avoir des boutons qui sélectionnent des div avec certains mots clefs. Maintenant je souhaite pouvoir styler mes boutons de sorte que lorsqu'un mot est sélectionné (alpharomeo par exemple), une classe correspondant a un un état "actif" soit appliquée. idem pour un bouton est désactivé.

Quelqu'un a une suggestion ?

Vous pouvez voir ce code fonctionner en suivant ce lien
<html>
<head>
<title>jQuery: Change CSS</title>
<script type="text/javascript" src="css-class-functions.js"></script>
<script type="text/javascript" src="jquery-1.5.1.js"></script>
<script type="text/javascript">

function togglestamp_newsletter(attribute) {
    var example = document.getElementById('stamp_newsletter');
    FM.toggleClass(example, attribute);
    FM.toggleClass(attribute + 'Button', 'On');
};

  
</script>
<style type="text/css">
body {
	font-family:Verdana, Geneva, sans-serif;
	font-size:10px;
}
button.On {
	background-color: #999999;
	color: white;
	border: 1px solid black;
}
button.On {
	background-color: #999999;
	color: white;
	border: 1px solid black;
}
.box {
	border:dashed 2px #666;
	width:200px;
	height:200px;
	float:left;
	margin:10px;
	padding:10px;
}
</style>
</head>
<body>
<h1>jQuery contains selector example</h1>
<div class="box"> This alpharomeo need new tyres </div>
<div class="box"> This car is an alpharomeo </div>
<div class="box"> This is a car </div>
<div class="box"> Oula-Oula </div>
<div style="clear:both;"></div>
<button>div:contains(car)</button>
<button>div:contains(alpharomeo)</button>
<button>div:contains(tyre)</button>
<script type="text/javascript">
    $("button").click(function () {
 
	  var str = $(this).text();	
	  $('div.box').css("border", "2px dashed #666");
	  $(str).css("border", "2px solid #ff0000");
    });
</script>
<h2>Je voudrais combiner le code ci-dessus avec les boutons ci-dessous.</h2>
<p>
  <button id="BorderButton" onclick="togglestamp_newsletter('Border');">Car</button>
  <button id="TyreButton" onclick="togglestamp_newsletter('Tyre');">Tyre</button>
  <button id="AlphaRomeoButton" onclick="togglestamp_newsletter('AlphaRomeo');">AlphaRomeo</button>
</p>
<div id="stamp_newsletter" class="box">mkyong</div>
</body>
</html>

Modifié par samsam (25 Mar 2011 - 18:46)
Associer des mot-clés à des éléments DIV. Humm, comment pourrait-on faire ça proprement en HTML, je me le demande? Peut-être comme ceci:
<div class="mot1 mot5 mot7">...</div>
<div class="mot4 mot5 mot6">...</div>
<div class="mot2 mot4 mot6">...</div>
<div class="mot1 mot8">...</div>
<div class="mot2 mot3 mot7">...</div>


C'est un emploi plutôt pertinent de class. En HTML5, on peut aussi utiliser un attribut custom, ce qui nous permet de réserver class pour un identifiant commun à ces éléments et pour des états (sélectionné / pas sélectionné) que l'on active ou désactive en JavaScript. Ce qui pourrait nous donner:
<div class="machin" data-keywords="mot1 mot5 mot7">...</div>
<div class="machin" data-keywords="mot4 mot5 mot6">...</div>
<div class="machin" data-keywords="mot2 mot4 mot6">...</div>
<div class="machin" data-keywords="mot1 mot8">...</div>
<div class="machin" data-keywords="mot2 mot3 mot7">...</div>

En utilisant jQuery, on doit pouvoir utiliser des sélecteurs CSS3 pour récupérer tous les éléments portant la classe "machin" et ayant parmi leurs mots clés "mot4" par exemple. (Pour info, c'est possible aussi en CSS3 sans passer par JavaScript, mais pas dans tous les navigateurs.)
Sujet clos
Aller à