Calendrier dynamique: infobulle dans un "event"

Dusty35 Messages postés 7 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 7 mai 2010 - 10 févr. 2010 à 20:48
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 13 févr. 2010 à 23:55
Bonjour,

J'utilise un calendrier dynamique jquery week calendar html/css/javascript dont voici l'apercu.


J'ai récupéré les sources et il fonctionne très bien mais j'aimerais y apporter quelques modifications: Notamment des infobulles sur des images intégrées dans les events. Le soucis est que les infobulles restent dans la zone de l'event alors que je voudrai qu'elles "dépassent" et apparaissent au milieu de mon écran.

Voici les JS utilisé pour le calendrier
demo.js et jquery.weekcalendar.js

Pour l'infobulle, j'utilise cette méthode(+js & css) qui fonctionne sans soucis sur une page "simple"
<map name="map">

</map>


Auriez vous une idée pour cela?

Une autre question: savez vous comment indiquer la taille (width=/height=) de l'image dans le code ci dessus, je tourne le truc dans tout les sens et je ne vois pas comment faire.

Merci d'avance!

4 réponses

Dusty35 Messages postés 7 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 7 mai 2010
12 févr. 2010 à 18:57
Vraiment personne pour me donner des indices? J'ai peut-être pas été clair dans mes explications?
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
13 févr. 2010 à 08:48
Bonjour,
des infobulles sur des images intégrées dans les events
mais qu'est ce ?

- si ton document est contenu dans une page avec FRAME, il n'y a pas d'espoir...
- si ton document est contenu dans une page avec IFRAME, mets l'image à afficher dans le document parent...
;O)
0
Dusty35 Messages postés 7 Date d'inscription lundi 11 février 2008 Statut Membre Dernière intervention 7 mai 2010
13 févr. 2010 à 20:30
Bonjour, merci pour cette réponse!

En fait c'est assez compliqué (pour moi) As tu jeté un coup d'œil sur le calendrier de l'auteur?

Voici la page du calendrier:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

<link rel= 'stylesheet' type='text/css' href='reset.css' />
<link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css' />
<link rel='stylesheet' type='text/css' href='../jquery.weekcalendar.css' />
<link rel='stylesheet' type='text/css' href='demo.css' />

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type='text/javascript' src='../jquery.weekcalendar.js'></script>
<script type='text/javascript' src='demo.js'></script>

</head>
 
jQuery Week Calendar (full demo)



 About this demo 






<form>


<li>
Date:  
</li>
<li>
<label for ="start">Start Time: </label><select name="start"><option value="">Select Start Time</option></select>
</li>
<li>
<label for="end">End Time: </label><select name="end"><option value="">Select End Time</option></select>
</li>
<li>
<label for="title">Title: </label>
</li>
<li>
<label for="body">Body: </label><textarea name="body"></textarea>
</li>

</form>




Summary








Demonstrated Features


This calendar implementation demonstrates the following features:



<li></li>
<li>Dragging and resizing of calendar events</li>
<li>Restricted timeslot rendering based on business hours</li>
<li>Week starts on Monday instead of the default of Sunday</li>
<li>Allowing calEvent overlap with staggered rendering of overlapping events</li>
<li>.</li>
<li>Use of the 'eventRender' callback to add a different css class to calEvents in the past</li>
<li>Use of additional calEvent data to enforce readonly behaviour for a calendar event. See the event
titled "i'm read-only"</li>





</html>



Et il n'y a pas de frame ni d'Iframe dans aucuns fichiers necessaires au calendrier. En revanche, j'en ai dans les fichiers de mes infobulles. A l'origine, le fichier que j'utilise pour les infobulle affiche une image au survol d'une zone precise (area shape) et en plus affiche une page dans la frame gauche:

Fichier principal:

<html>
<head>
<title>MAP</title>
</head>

<frameset cols="340,*" framespacing="0" border="0">
<frame name="leftframe" src="map_G.html" target="_top" scrolling="no" noresize>
<frame name="mainframe" src="map_D.html" target="_top" scrolling="yes" noresize>
<noframes>


This page uses frames, but your browser doesn't support them.




</noframes>
</frameset>


Voici le fichier correspondant à la mainframe

<html>
<head>

<SCRIPT language=JavaScript>
<!--
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}

function MM_openBrWindow(theURL,winName,features) { //v2.0
  window.open(theURL,winName,features);
}
//-->
</SCRIPT>

<style type="text/css">			
@import url(http://192.168.1.10/css/module/main_modules.css);	
</style>		
<script type="text/javascript"  src="../../js/infoBulle.js"></script>	
 

</head>








<map name="map">




</map>														

</html>


Je voudrais donc utiliser le principe de l'image qui s'affiche au survol dans les events du calendrier mais comme expliqué plus haut, juste un petit bout de l'image s'affiche sans dépasser de ce dernier. Je comprend en gros tout le code mais je suis encore loin de maitriser et je ne suis pas sur de bien comprendre ce que tu me dis à propos du document parent, comment faire pour qu'il reconnaisse la zone survolée...pas évidant pour moi avec ces fichiers imbriqués...

Merci encore
0
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
13 févr. 2010 à 23:55
c'est donc normal nous sommes dans le cas des FRAMEs et chaque FRAME est indépendante et ne déborde pas sur les autres.
Une solution passerait donc par l'utilisation d'une IFRAME, qui contrairement aux FRAMEs, te permettrais de disposer de la totalité de l'espace du navigateur.
;O)
0
Rejoignez-nous