Fork me on GitHub






lionhell
APCal 2.21 : problème infobulle googlemap et popup calendrier
#1
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Infobulle:

Sur la page d'accueil du module les infobulles s'affichent correctement.

En lecture détail d'évènement l'infobulle est compressée et ne s'affiche pas correctement.


Popup calendrier:

En bordure de calendrier la popup est rognée par le bord du calendrier.


J'ai fait une petite vidéo sur youtube pour illustrer:

http://youtu.be/Rwf7orWqA5o

Posté le : 05/07/2014 13:20

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#2
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Infobulle googlemap: problème réglé

Dans le fichier templates/apcal_event_detail.html , il faut modifier la valeur maxWidth de la ligne 89:

avant:

var infowindow = new google.maps.InfoWindow({maxWidth: 25});


après:

var infowindow = new google.maps.InfoWindow({maxWidth: 250});



(Elle est limitée à 25 avant la modif !!!)


Reste à voir la popup en mode calendrier ...

Posté le : 05/07/2014 22:10

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#3
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Pour la popup j'ai vu où se trouve le problème mais j'ai besoin de vos lumières pour le régler !



Le css de la popup du calendrier APCal est défini dans APCal/apcal.css

Le calendrier et sa popup sont contenus dans une div du thème dont le css "#tf-container" est défini dans montheme/style.css

Or #tf-container possède un overflow:hidden , donc rien ne peut déborder de cette zone.

Si je remplace hidden par visible dans style.css la popup peut déborder et s'affiche normalement.

Mais cela veut dire que tout autre élément du site, de APCal ou non, peut déborder du cadre, et ce n'est peut-être pas une bonne idée de libérer le flow !

Ma question:

Comment conserver style.css du thème intact, en laissant overflow:hidden, mais permettre à la popup de déborder ?

Merci ...

Posté le : 06/07/2014 01:04

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#4
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Autre piste ... la position de la popup est définie par ce script dans le template lui-même:

function moveBox(id){

var box = document.getElementById(id);
var browWidth = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
var browHeight = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
var boxWidth = box.offsetWidth;
var boxHeight = box.offsetHeight;
var boxX = window.event.pageX ? window.event.pageX : window.event.clientX + document.documentElement.scrollLeft;
var boxY = window.event.pageY ? window.event.pageY : window.event.clientY + document.documentElement.scrollTop;
        
 box.style.left = ((boxX + boxWidth + 20 >= browWidth) ? browWidth - boxWidth - 20 : boxX) + "px";
 box.style.top = ((window.event.clientY + boxHeight + 20 >= browHeight) ? boxY - boxHeight - 25 : boxY + 25) + "px";

}


Dans FF cela affiche la popup juste en dessous du lien et elle reste fixe.

Dans IE la popup est décalée assez loin à droite et en dessous, et la popup se déplace avec le curseur.

Il faudrait corriger ce décalage sous IE, et ensuite que ce soit IE ou FF, soit:
- décaler la popup pour qu'elle ne déborde pas
- autoriser le débordement comme évoqué au-dessus.

Posté le : 06/07/2014 01:26

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#5
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Bon, j'ai réussi à corriger l'erreur de syntaxe relative à l'affichage dans IE. Il manquait des guillemets pour les propriétés style.left et style.top.

Donc il ne reste plus qu'à :

- soit autoriser le débordement à droite.
- soit décaler à gauche la popup si elle déborde.

Mais pour le décalage je crois que le calcul de la limite de débordement se base sur la fenêtre alors qu'il faudrait que ce soit par rapport à #tf-container.

Mais pour que ce soit valable avec n'importe quel thème, il faudrait retrouver la limite du conteneur , qui n'a pas forcément le même id selon les thèmes ...

Posté le : 06/07/2014 02:15

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#6
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Bon je bidouille depuis des heures sans succès en jonglant avec javascript+CSS mais je n'y arrive pas.

Si quelqu'un maîtrise mieux que mois cette matière voici le script où tout se joue:

function moveBox(id)
{
var box = document.getElementById(id);
var browWidth = window.innerWidth ? window.innerWidth : document.body.offsetWidth;
var browHeight = window.innerHeight ? window.innerHeight : document.body.offsetHeight;
var boxWidth = box.offsetWidth;
var boxHeight = box.offsetHeight;
var boxX = window.event.pageX ? window.event.pageX : window.event.clientX + document.documentElement.scrollLeft;
var boxY = window.event.pageY ? window.event.pageY : window.event.clientY + document.documentElement.scrollTop;
        
box.style.left = '"' + ((boxX + boxWidth + 20 >= browWidth) ? browWidth - boxWidth - 20 : boxX) + "px"; 
box.style.top = '"' + ((window.event.clientY + boxHeight + 20 >= browHeight) ? boxY - boxHeight - 25 : boxY + 25) + "px";
}


C'est dans le fichier /templates/apcal_montly.html


Ce qu'il faut c'est déterminer la position du bord droit de tf-container pour que le tooltip soit décalé s'il dépasse.

Ou alors bord droit du tableau class=month si c'est plus simple.

Posté le : 06/07/2014 15:26

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut
lionhell
Re: APCal 2.21 : problème infobulle googlemap et popup calendrier
#7
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
En fait mon problème est que je n'arrive pas à trouver la valeur "left" en absolu du tableau ... j'obtiens toujours "0" car je pense que c'est la valeur relative par rapport à son parent.

Il me faudrait une valeur par rapport à l'écran.

Mais je me trompe peut-être sur ce "0", je ne suis sûr de rien.


Je rappelle que l'autre solution, si elle existe, serait de permettre au tooltip de sortir du cadre tf-container qui possède un overflow: hidden.

Est-ce possible ?

Posté le : 06/07/2014 15:40

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Rapport Haut

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.
Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

23 Personne(s) en ligne (21 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 23 | Plus ...