Qu'est-ce qui ne fonctionne pas

Bonjour à tous,

J'ai un léger problème. J'affiche un calendrier, du Dimanche au Samedi. Durant le mois, nous pouvons avoir un évènement. Quand l'évèment a lieu, soit le Dimanche, Lundi, Mardi, quand nous passons notre souris sur la journée une fenêtre s'affiche plus a notre droite, et dans le cas des autres journées, plus à notre gauche.

Mais voila, ca ne se passe pas comme ca. L'affichage demeure toujours plus à gauche et ce peu importe la journée. Voici un exemple de code, afin que vous puissiez comprendre ce dont je parle, et afin que vous puissiez m'éclaircir.

J'utilise IE8, et j'ai également testé avec Google Chrome, mais le résultat est le même.

Voici le code généré :

<td>           
	<!-- Date inside the month -->
	<div class="daynum">
		<a href="javascript:;" onClick="window.open('event.php?year=2009&month=7&day=10');">10</a>
	</div>               
	<div>
		<a href="event.php?eventID=1&year=2009&month=7&day=10" target="_blank" onMouseOver="show('eventBox1');" onMouseOut="hide('eventBox1');">MChristian</a>
	</div>						
	<!-- Display Box -->
	<div class="event" id="eventBox1" style="color:#000000">
		<div class="eventTitle">
			Locateur : MChristian
		</div>							
		<div class="eventDesc">                        
			Début Location : Vendredi&nbsp;10&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
			Fin Location :  Lundi&nbsp;13&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
			Prive : Non
		</div>
	</div>			
</td>


<td>           
	<!-- Date inside the month -->
	<div class="daynum">
		<a href="javascript:;" onClick="window.open('event.php?year=2009&month=7&day=12');">12</a>
	</div>               
	<div>
		<a href="event.php?eventID=1&year=2009&month=7&day=12" target="_blank" onMouseOver="show('eventBox1');" onMouseOut="hide('eventBox1');">MChristian</a>
	</div>						
	<!-- Display Box -->
	<div class="eventdebut" id="eventBox1" style="color:#000000">
		<div class="eventTitle">
			Locateur : MChristian
		</div>							
		<div class="eventDesc">                        
			Début Location : Vendredi&nbsp;10&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
			Fin Location :  Lundi&nbsp;13&nbsp;juillet&nbsp;2009&nbsp;0:00<br>
			Prive : Non
		</div>
	</div>			
</td>

Vous pouvez voir dans la première cellule, vous avez un div class = event, et dans la seconde cellule un div class = eventdebut

Voici le code CSS pour chacun d'eux

table.calTheme1 div.event {
	position: absolute;
	padding: 5px 5px 5px 5px;
	border: 3px solid #ffffff;
	background-color: #6f6d56;
	background-image:url(../../images/cellpic4.gif);
	margin: 5px;
	visibility: hidden;
	left: 15%;
	top: 70%;
	width: 350px;
}

table.calTheme1 div.eventdebut {
	position: absolute;
	padding:5px 5px 5px 5px;
	border: 3px solid #ffffff;
	background-color: #6f6d56;
	background-image:url(../../images/cellpic4.gif);
	margin: 5px;
	visibility: hidden;
	left: 50%;
	top: 70%;
	width: 350px;
}

Et le code JavaScript permettant d'afficher la boite lorsque on passe notre souris sur celle-ci.

 <script type="text/javascript">
	function show(id) {
		var div = document.getElementById(id);
		div.style.visibility = 'visible';
	}
	
	function hide(id) {
		var div = document.getElementById(id);
		div.style.visibility = 'hidden';
	}
</script>

Le tout a deja fonctionné, mais pour une raison X, je ne sais plus pourquoi ca ne fonctionne plus.

Merci de m'aider
Sylvain Bourdeau
Modifié par ConceptInterWEB (03 Jul 2009 - 00:33)

Bonjour,

Je dirais que c'est normal, vu que les positions left:50% et left:15% se réfèrent sans doute au premier parent, soit le td.

au cas zoù, essaie de donner une position relative à ta table pour tenter d'indiquer une origine à tes divs d'information.

Sinon, modifie ton js. Avec jQuery, ce ne devrait pas être si difficile.

PS: Tu as plusieurs éléments qui ont des ids identiques ... c'est mal.
Modifié par loicbcn (03 Jul 2009 - 10:53)

Bonjour,

J'ai mis une position relative pour le tableau et ca ne regle pas le probleme.

Qu'est-ce que jQuery exactement ? De quel facon, est-ce que il peut m'etre utile ?

Et plusieurs IDs identiques, si tu me parles de EventBox1, c'est normal que c'est l'ID de l'evenement. Et dans l'exemple, il se deroule sur 4 jours.