Classe "current" pour menu Lavalamp

Dany3d · avril 2011

Salut,

Je continue mon adaptation de thème statique vers Pluxml et j'ai intégré le menu Lavalamp dedans.
Pour ceux qui connaissent pas c'est par la:
http://nixboxdesigns.com/projects/jquery-lavalamp/demos/original.html

Tout marche très bien mais j'aimerais que comme dans la version HTML la classe current affiche la page selectionnée: ce que l'on fait avec un <li class="curent">....
Le curseur qui bouge revient par defaut au premier<li> lorsque l'on clique sur un autre lien du menu
Je me casse la tête dessus depuis 3 jours et j'ai tout essayé avec le js

Le concepteur dit qu'il faut declarer la classe current en php à travers Pluxml mais je ne sais comment faire

Avez-vous une idée pour declarer une classe active dans le menu en php?

<div id="navigation"   >
		<ul class="lavaLampNoImage" id="1" >
			<?php $plxShow->staticList('Accueil','<li id="#static_id" ><a href="#static_url" class="fadeThis" title="#static_name"><span class="title">#static_name</a></li>'); ?>
			<?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
		</ul>

merci

Frédéric · avril 2011

Bonsoir DAny3d,

Pluxml à déjà sa propre class (active/noactive) que tu as avec le code #static_status pour les pages statiques et #page_status pour le lien du blog.

Il se trouve dans le header.php du thème par defaut.

Pour rappel :

<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>

puis

<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>

Dany3d · avril 2011

Salut,
je precise que la classe current est dans le jquery
elle est declarée comme ca:
return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class=""></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0]

c'est pour cela que ça ne marche pas?
merci

Frédéric · avril 2011

Exacte, dans ce cas replace comme suit:

return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="noactive"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.active",this)[0]||$($li[0]).addClass("active")[0]

Pense a faire la modife dans ton css.

Dany3d · avril 2011

merci mais ca fonctionne pas..
ca m'a juste rajouté un souligné à l'accueil...
voici le js modifié:
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="noactive"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.active",this)[0]||$($li[0]).addClass("active")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$.dequeue(this,"fx")}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);

pourquoi dois-je modifier le css?
merci

Frédéric · avril 2011

Aurais tu un lien de ce menu en ligne sur un pluxml ?

Modifier le css car si tu t'es basé avec la class "current" il faut remplacer par active aussi.

#menu li a {
	display : block;
	padding : 5px 10px 4px 19px;
	color :  #FFF;
	text-decoration : none;
	font-size : 0.9em;
	letter-spacing : 2px;
	background : url("img/icons.png") no-repeat 0 -345px;
}
#menu li a:hover, #menu li a.active {
	background : url("img/icons.png") no-repeat 0 -377px;
}
#menu li#static-home { padding-left:5px; }
#menu li#static-home a{
	background : url("img/icons.png") no-repeat 0 -89px;
	padding : 5px 10px 4px 19px;
	height : 16px;
}
#menu li#static-home a.active, #menu li#static-home a:hover {
	background : url("img/icons.png") no-repeat 0 -121px;
	padding : 5px 10px 4px 19px;
	height : 16px;
}

Dany3d · avril 2011

Merci pour ton aide,
voila je l'ai mis sur un hebergement perso:
http://woww.ovh.org/bf/

les icones prennet la classe active mais pas le js...

Dany3d · avril 2011

Ca y est!..
j'ai reussi grâce à ton aide et à un post sur son site..
c'est un cas d'école..
voici la modif:
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
// change information box
var $block = $( $(menuItem).find('a').attr('href') );
$('.info').not($block).hide();
$block.fadeIn();
return true;
}
});

// initialize information box
$('.active').trigger('click');

$('.links a').click(function(){
var block = $(this).attr('href');
$('.active').removeClass('active');
$('.lavalamp').find('a[href=' + block + ']').parent().trigger('click');
})

});
</script>

j'ai remplacé la classe current du post par active géré par Pluxml.
3 soirs de passé dessus, mais j'ai bien fait de persever!
Dès que je fini mon theme je vous le montrerais
merci et à bientôt.
Dan

konyali6 · avril 2011

Salut Dany3d, je suis en train de chercher solution à mon problème depuis maintenant plus de 24h, et après tant de recherche, je n'ai toujours pas la solution, MAIS, dans toutes les recherches que j'ai pu faire, le topic le plus ressent qui traite de mon soucis est celui-ci, et apparemment, tu t'en es sorti finalement!

Mon problème n'est pas différent du tien: "Le curseur qui bouge revient par defaut au premier<li> lorsque l'on clique sur un autre lien du menu"...

Je me demandais si tu pouvais m'aider à ce sujet, je pense que toi seul peut me comprendre si tu as cherché pendant trois jours ...

Pour te montrer un minimum ce que j'ai fait:
Mon JS:

<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>
<script type="text/javascript">
$(function() { $("#menu").lavaLamp({ fx: "backout", speed: 500 })});
</script>

Et mon menu (HTML):

<ul id="menu">
<li><a href="accueil.html"><span class="current">Accueil</span></a></li>
<li><a href="biographie.html">Qui suis-je?</a></li>
<li><a href="moncv.html">Mon CV</a></li>
<li><a href="eportfolio.html">ePortfolio</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul> 

Pas besoin de montrer le CSS qui est correct selon moi, mais si au pire tu en as besoin, je le posterais.
A premiere vue, mon code peut paraitre basique, mais crois moi que pendant toute une journée, je n'ai fait que faire des essais dessus, et finalement, je l'ai laissé de base en attendant d'en apprendre plus sur le PHP et l'Ajax, Oui car certains essais consistait à passer par ces langages que je ne maitrise pas, mais je me disais que tu as surement plus simple que cela.

Sinon, je ne connais pas le pluXml non plus, mais si je dois l'apprendre je le ferais.

J'attends ton post avec impatiente, et merci d'avance.

Frédéric · avril 2011

Bonsoir,

Ton code du menu n'est pas du tout celui proposé par PluXml. (voir plus haut)

IL faut donc regarder la class sur la boucle du menu.

Actuellement ton curseur reste "bloqué" sur Accueil car tu force la class current (qui deviens active pour solutionner le problème).

Wiksa · juillet 2011

Bonjour,

La méthode indiquée plus haut marche sauf, dans mon cas, avec les catégories dans le menu principal : création d'un page statique à laquelle on attribue l'url d'une catégorie. Une fois sur la page de la catégorie le curseur revient sur accueil.

Avez-vous une idée cour corriger le tir ?

Merci

Dany3d · juillet 2011

bonjour,
chez moi aussi c'est pareil, il revient à l'accueil au lieu de rester sur blog.
ca ne me derange pas trop car le plus important est que le menu des pages statiques fonctionne, mais si qqun à une idée...

Classe "current" pour menu Lavalamp

Réponses