28220 sujets

CSS et mise en forme, CSS3

[Résolu]Menu déroulant CSS et SPIP1.9

Bonjour,
j'ai sur mon site fait avec SPIP des menu d'après la technique décrite par Eric Meyer à l'aide du fichier ccshover.htc pour que ça fonctionne sur IE.
J'était en SPIP1.8.2 et c'était nickel. Depuis le passage à la SPIP1.9 plus de menu sur IE. Dans la mise à jour, il y a eu des changements dans les chemin, j'utilise maintenant un dossier pour mes squelettes, mais je crois avoir fait les changements necessaires. Quelqu'un a t-il ce type de menu sur cette version de SPIP.
J'ai gardé l'ancienne version qui fonctionne toujours en sous-domaine.
Version 1.9
http://www.comtat-creation-entreprise.com/sommaire.php3
version 1.8.2
http://www.comtat-creation-entreprise.com/spip1.8/sommaire.php3
Gabriel
Modifié par gabou (11 May 2013 - 16:06)
Bonjour et bienvenue gabou Smiley smile

Je suis spipeur mais je n'ai pas encore migré mes sites sous la version 1.9.

Il n'y a pas qu'avec ie que tu as des problèmes, l'affichage sous FF n'a pas pas l'air d'être au top... En plus le lien que tu donnes affiche une erreur 404, les texte et images semble se chevaucher, etc...

Pour l'instant je ne vais pas pouvoir t'apporter beaucoup d'aide, je ne connais pas la méthode que tu as utilisée... A tout hasard, as-tu posé la question sur la liste de discussion de spip ? Smiley cligne
Modifié par dominique (24 Aug 2006 - 10:24)
Salut Dominique,
Euh j'était en train de bricoler dessus, le chevauchement à disparu.
Pour les liens je viens de tester ça marche aussi.

J'ai effectivement posé la question sur la liste SPIP tout à l'heure.
Si tu testes la version 1.8 avec IE sur PC les 3 menus en haut de page fonctionnent, mais pas sur la 1.9. C'est peut être un chemin qui ne fait fait pas bien ou un problème de cache????
Modifié par gabou (24 Aug 2006 - 10:49)
Ok, c'est mieux ainsi Smiley smile

Peut être un problème de chemin, que contient le fichier "ccshover.htc", s'il te plait ?
Voilà le fichier csshover.htc


<attach event="ondocumentready" handler="parseStylesheets" />
<script language="JScript">
/**
 *	HOVER - V1.00.031224 - whatever:hover in IE
 *	---------------------------------------------
 *	Peterned -  http://www.xs4all.nl/~peterned/
 
 *	(c) 2003 - Peter Nederlof
 *
 *	howto: body { behavior:url("csshover.htc"); }
 *	---------------------------------------------
 */

var CSSBuffer, doc = window.document;

function parseStylesheets() {
	var rules, sheet, sheets = doc.styleSheets;
	var bufferIndex = sheets.length;	
	var head = doc.getElementsByTagName('head')[0];
	var buffer = doc.createElement('style');

	buffer.setAttribute('media', 'screen');
	buffer.setAttribute('type', 'text/css');
	head.appendChild(buffer);
	CSSBuffer = sheets[bufferIndex];

	for(var i=0; i<sheets.length -1; i++) {
		sheet = sheets[i];
		if(!sheet.media || sheet.media == 'screen') {
			rules = sheet.rules;
			for(var j=0; j<rules.length; j++) {
				parseCSSRule(rules[j]);
			}
		}
	}
}
	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!select || !style || select.indexOf(':hover') < 0) return;
		var newSelect = select.replace(/\:hover/g, '.onHover');
		CSSBuffer.addRule(newSelect, style);
		
		var affected = select.replace(/\:hover.*$/g, '');
		var elements = getElementsBySelect(affected);
		for(var i=0; i<elements.length; i++) {
			if(elements[i].nodeName == 'A') continue;
			new HoverElement(elements[i]);
		}
	}

/**
 *	HoverElement
 *	-------------------------
 *	applies the hover
 */

function HoverElement(element) {
	if(element.isHoverElement) return;
	element.isHoverElement = true;
	element.attachEvent('onmouseover', 
		function() { element.className += ' onHover'; });

	element.attachEvent('onmouseout', 
		function() { element.className = element.className.replace(/onHover/g, ''); });
}

/**
 *	domFinder
 *	-----------------------------------
 *	returns list of elements based on css selector
 */

function getElementsBySelect(rule) {
	var nodeList = [doc], sets = rule.split(' ');
	for(var i=0; i<sets.length; i++) {
		nodeList = domFinder.filterNodes(sets[i], nodeList);
	}	return nodeList;
}

var domFinder = {
	findNodes:function(tag, docs) {
		var res, nodes = [];
		for(var i=0; i<docs.length; i++) {
			res = docs[i].getElementsByTagName(tag);
			for(var j=0; j<res.length; j++) nodes[nodes.length] = res[j];
		}	return nodes;
	},

	filterNodes:function(select, docs) {
		var filtered = [], nodes,rule,atr,s = (/#|\./).exec(select);
		if(!s) return this.findNodes(select, docs);
		nodes = this.findNodes((rule = select.split(s))[0], docs);
		atr = (s == '#')? 'id':'className';
		for(var i=0; i<nodes.length; i++) {
			if(new RegExp('(^|\\s)' +  rule[1] + '(\\s|$)').exec(nodes[i][atr]))
				filtered[filtered.length] = nodes[i];
		}	return filtered;
	}
}
</script>

[/i][/i][/i][/i][/i][/i][/i]
Modifié par gabou (24 Aug 2006 - 11:25)
Arffff ! je n'y connais rien en javascript Smiley confused

Bon à priori, il n'y a pas de chemin vers tel ou tel autre page dans ce script... Si c'est bien le cas, il ne serait pas en cause.

Es-tu certain qu'il est lancé avec la nouvelle version du site ? Il faudrait faire un test pour vérifier ça...

En apparté : J'ai lancé une validation w3c de ta page, attention 56 erreurs, c'est pas mal Smiley cligne
Bonjour,
Dans le lien vers la feuille de style : 
<link rel="stylesheet" href="skel/comtat.css" type="text/css" media="all" />
il faudrait enlever media="all".

Je ne peux pas dire pourquoi mais d'après quelques tests ça empêche le csshover.htc d'être efficace. En revanche pas de problème en remplaçant par media="screen".
J'ai du mal à contenir ma joie,… CA MARCHE Smiley ola

Merci à vous pour le coup de main, j'en ai profité pour faire un code un peu plus propre. je reviendrais

Gabriel
Modifié par gabou (11 May 2013 - 16:06)
Super ça, bravo Alan Smiley cligne

Pense à éditer le premier post du sujet pour ajouter [Résolu] dans le titre Smiley cligne merci !
Modifié par dominique (24 Aug 2006 - 15:22)
Sujet clos
Aller à