Si alarme activée ==> telle page du design

Utilisation du core de Jeedom Design
21

Hello,

Bon c’était juste dans l’idée car j’ai dû me creuser la tête un peu quand même mais j’ai réussi à pondre une fonction javascript semble-t-il fonctionnelle si tu veux essayer:

22

super ça marche ton code :slight_smile: encore merci.

Par contre, je sais pas si c’est chez moi ou si c’est le code mais avant ton code j’ai ça

1
11920×75 16.1 KB

et après le code j’ai ça

2
2888×118 18.8 KB

y’aurait un moyen qu’une fois selectionné ça soit comme la première image et pas juste en opacité dessus ?

23

Je sais pas faudrait voir le code que tu utilises… par exemple tu n’aurais pas une classe selected ET une classe active dans ton fichier css ? …ou plusieurs fichiers css différents ?

La fonction javascript que j’ai ajouté ne fait rien d’autre que d’identifier la page du design en cours pour ajouter une classe css sur l’élément actif afin de le différencier visuellement… Cette classe ajoutée est présente dans le fichier CSS déjà ajouté au code du menu.

24

j’utilise le code css d’origine de F$B333 et je ne crois pas y avoir touché, chez toi ça réagi comme moi actuellement ou comme je voudrais que ça soit ?

div.menu_top
{
	width:1281px;
	height:70px;
	background-color:rgba(0,0,0,0.6);
	border-bottom:2px solid rgba(0,0,0,1);

}
ul.monmenu
{
	width:1281px;
   	margin: 0 auto;
}

ul.monmenu ul.monmenu_sep
{

	list-style-type:none;
	color:rgba(255,255,255,0.8);
	font-family:Roboto;
	font-size: 16px;
	font-weight: normal;
}

li.monmenu
{

	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(0,0,0,0.2);
}

div.imagette
{

	text-align: center;
	margin-bottom: 5px;
	opacity: 0.3 ;

}

li.monmenu:hover{

	background-color: rgba(255,255,255,0.2);
}

li.selected{
	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;
	border-left: 1px solid rgba(255,255,255,0.3);
	border-right: 1px solid rgba(255,255,255,0.3);
	background-color: rgba(255,255,255,0.2);
}

li.monmenu_sep
{

	display:inline-block;
	width: 100px;
	margin-left: -5px;
	text-align: center;
	height: 70px;
	padding-top: 10px;

	border-right: 1px solid rgba(0,0,0,0.3);

}

div.bouton{

	opacity: 1;

}

div.bouton:hover
{

	opacity: 0.5;
}
25

Merci @Salvialf, j’ai testé ton code et ça marche bien :+1: En revanche, j’ai la même remarque que @sikuland : l’icône active (selected) n’apparait plus avec une transparence nulle comme avant. Seul le cadre actif est en surbrillance.
Je pense que la classe « selected » devrait porter sur l’icone et non pas sur le cadre actif (dans le code initial de @F$B333 la classe passe de « imagette » à « selected »)

26

Je ne sais pas vous en êtes dans la discussion, mais pour avoir l’imagette opacity 1, il faut ajouter
$(planID+’ div’).addClass(‹ bouton ›);
en dessous de
$(planID+’ li’).addClass(‹ selected ›);

et la cela réagit comme initialement. (bon je le laisse mais cette soluce a été trouvé dans un autre poste par nitrogramme