11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour, je me suis référé a votrte site très souvent.
Très bien expliquer, documenter, j ai carrément appris le CSS sur votre site.Hélas, je tombe un HIC ( hé oui sa arriv )
j ai repris le script de raphael sur les info bulle, je lai un peu modifier pour me correspondre..
Hélas j ai souci sur le faite que le javascript ne pe pas manipuler les balise "classe" a la place de "id" ds le code

CSS :

#pop1
{
	position: absolute;
	display:none;
	width: 300px;
	color:#4C4C4C;
	z-index: 500;
}

div.pop_texte
{
	background:white;
}
.haut
{
	float:center;
	height: 15px; width: 300px;
	background-repeat: no-repeat;
	font-size:0.82em;
	font-weight:bold;
	text-align:center;
	background:url("../images/bande_arrondi_haut.gif");
}

.bas
{
	float:center;
	height: 15px; width: 300px;
	background-repeat: no-repeat;
	font-size:1px; /* correction d'un bug IE */
	background: url("../images/bande_arrondi_bas.gif");
}

le code PHP de creation d'une info-bulle correspondant :

//recherche de l'image
						$ObjetCalque="
														<div id=\pop1\" >
															<div class=\"haut\">".ucfirst($data['Libelle_Keyword_Calque'])."</div>
																<div class=\"pop_texte\">
																	".$ImageSpace."
																	".$Descriptif."
																	".$ImageBasTexte."
																</div>
															<div class=\"bas\"></div>
														</div>
													";

ET pour FINIR le JAVASCRIPT

<SCRIPT>
			gk=window.Event?1:0; // navigateurs Gecko ou IE
			D=document;popup=encours=0
			function ctrl(e)
			{
				
				de=!D.documentElement.clientWidth?D.body:D.documentElement // IE6
				sx=gk?pageXOffset:de.scrollLeft //scroll h
				sy=gk?pageYOffset:de.scrollTop //scroll v
				x=gk?e.pageX:event.clientX+sx; //curseur x
				y=gk?e.pageY:event.clientY+sy; //curseur y
				el=gk?e.target:event.srcElement;
				if(!el.tagName)el=el.parentNode; // noeud #text
				if(el.className == 'pop')
			  {
			  	//popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style; 
			  	popup = D.getElementById('pop1').style; 
			  	if(popup!=encours) // seulement si changement  
			    {
			    	encours.display='none';
			    	with(popup)
				    {
				    	display="block";left=x+'px';top=y+10+'px';
				    }
				  encours=popup;
				  }
			  } 
			  else 
			  {
			  	encours.display='none';encours=0
			  }
			}
			D.onmousemove=ctrl;
			// charge la feuille de style des popups.
			D.write('');
	</SCRIPT>


Le probleme est que lors ce que je n'ai que un mot correspondant a un calque sur la page , cela marche tres bien.. mai des lors que je ve mettre plusieurs mots ( avec chacun un info bulle different, sa marche plu.. ce qui est normal )
Si quelqu'un pouvai me donner une otre solution que de faire un "id" par mot de ma page ds mon CSS?????
Merci a tous ceux ki pourront me donner un coup de main... Smiley cligne
Modérateur
Salut,

Rwick a écrit :
Hélas j ai souci sur le faite que le javascript ne pe pas manipuler les balise "classe" a la place de "id" ds le code
Il ne s'agit pas de balises mais d'attributs Smiley cligne ... mais d'où tiens-tu cela ? Smiley eek

Pour affecter une classe CSS via JS, tu n'as qu'à écrire :
oElem.className = 'maClasseCSS';


Pour sélectionner tous les éléments ayant une classe donnée, tu peux faire :
var oChilds = document.childNodes,
    iI = 0,
    iCount = oChilds.length;

for(iI; iI < iCount; iI++)
    if(oChilds[iI].className === 'maClasseCSS')
        // instruction commune à tous les éléments possédant la même classe
Salut,
a écrit :

Rwick a écrit :
Hélas j ai souci sur le faite que le javascript ne pe pas manipuler les balise "classe" a la place de "id" ds le code

Il ne s'agit pas de balises mais d'attributs cligne ... mais d'où tiens-tu cela ?



Je l ai vu sur http://developpeur.journaldunet.com/tutoriel/css/040407-css-difference-id-class.shtml[/url] ce ci =>>
a écrit :
Ajoutons que JavaScript peut manipuler les balises avec un id.

Sinon je v essayer d 'affecter une classe css au javascript Smiley cligne et je te dit sa Smiley smile
See You Soon Smiley lol
C bon Smiley cligne sa marche enfin..
meuh pas comme tu m'avais proposer koala64.. :X
j'ai fait un peu differement. Je m'explique :
Je recupere l'identifiant unique du div (' en l'affectant au href du lien qui est avec mon infos bulles')
exemple div :

<div id='identifiantUnique' style=\"position:absolute;etc...\">

et lexemple de lien est :

<a href='#identifiantUnique' class='pop'>$LibelleDuLien</a>


l'instruction javascript pour recuperer la souschaine identifiant unique est :

popup = D.getElementById(el.href.substring(el.href.lastIndexOf('#') + 1)).style;

Voilou avec tout sa je fais des infos-bulles a en faire palir n'importe qui Smiley langue
avec un seul style css pour toutes ( quels soit avec ou sans image ou texte ) xD
Merki a ceux qui ont essayer de m'aider
Developper Bien & Have Fun Smiley langue
@ une prochaine fois... ( @ chaque jour suffit son problème Smiley smile )
Modifié par Rwick (27 Mar 2007 - 16:08)
Modérateur
a écrit :
C bon Smiley cligne sa marche enfin..
meuh pas comme tu m'avais proposer koala64.. :X
Ah ! Dommage... C'était pourtant la façon la plus judicieuse de le faire... Smiley rolleyes


a écrit :
<div id='identifiantUnique' style=\"position:absolute;etc...\">
A quoi te servent les styles en ligne ? A rien apparemment vu que tu as un id...


a écrit :
Voilou avec tout sa je fais des infos-bulles a en faire palir n'importe qui Smiley langue
oui, surtout ceux qui naviguent au clavier Smiley ravi


a écrit :
Merki a ceux qui ont essayer de m'aider
Developper Bien & Have Fun Smiley langue
@ une prochaine fois... ( @ chaque jour suffit son problème Smiley smile )
De rien... Smiley smile c'est vrai, tu as raison... faut se reposer car demain, tu as de la lecture... Smiley cligne
Modifié par koala64 (27 Mar 2007 - 19:27)