Comment créer une pop-in afin de charger une div info ?

**OButterlin** · 29/03/2015, 12h59

Envoyé par Claudine

Pour mon instruction,voulez-vous me dire quel est le rapport avec l'erreur citée par le debugger sous IE? Je suppose qu'il s'agit de l'objet 'texte' et non 'application'.

Non, c'est juste qu'avec "application/javascript", le navigateur n'a pas reconnu le code comme étant du javascript...

Envoyé par Claudine

J'ai soif de connaître diverses résolutions de réaliser une pop-in dont celle proposée par MoumouteMasters le 20/03 à savoir:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#iddevotrediv').dialog();

tout en utilisant la bibliothèque Jquery .
J'avais utiliser dans mon précedent logiciel la bibliothèque Jquery mais je n'ai pas eu de résultat positif .Où introduire cette fameuse ligne de code?

jQuery est une excellente bibliothèque javascript, elle a un énorme avantage, elle nous affranchit des différences entre les différents navigateurs (et c'est un problème énorme).

Pour l'exemple donné, ce n'est pas la même chose, il s'agit d'une boite de dialogue, pas d'une info-bulle.
Pour l'utiliser, il suffit d'inclure les 2 bibliothèques requises (dans la partie <head> de préférence)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>         // <-- l'api de jQuery


  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  // <-- l'api de la partie User Interface (UI)

Dans ton cas, tu aurais d'ailleurs pu te contenter de la version prévue par html, à savoir l'attribut "title". En écrivant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3

echo'<td bgcolor="#CCCCCC" title="' . addslashes($row['infos']) . '">'.$row["MaPage"].'</a></td>'

on aurait eu à peu de chose près le même résultat, au css près...

Bref, il y a toujours x manières de faire les choses, heureusement d'ailleurs

**NoSmoking** · 29/03/2015, 19h56

Sans douter du fait que ça fonctionnera certainement,...

Je te rassure cela a fonctionné et fonctionne encore très bien, par contre

...on ne peut pas dire que ce soit la solution la plus limpide qui soit

je ne saisi pas ce que tu veux dire par là.

Personnellement, j'utilise jQuery pour l'aspect abstraction des spécificités du javascript par navigateur,

si tu préfères une solution jQuery en voilà une qui me semble aussi verbeuse qu'en vanilla JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function() {
    var pos,
        oBulle = $('<div>', {
            'id': 'bulle',
            'title': ' Cliquez pour fermer !'
        })
        .appendTo('body')
        .on('click', function() {
            $(this).hide();
        });
 
    $('span.info').on('click', function() {
        pos = $(this).position();
        oBulle
            .html($(this).find('span').html())
            .css({
                'left': pos.left,
                'top': pos.top
            })
            .show();
    });
});

**OButterlin** · 30/03/2015, 08h52

Envoyé par NoSmoking

je ne saisi pas ce que tu veux dire par là.

disons que je trouve que les solutions qui consistent à mouliner le code de la page pour ce genre d'opération ne sont pas de mon goût, je préfère une api qui se charge d'afficher l'information avec un appel genre showTitle(event, text)... elle permettrait en plus de s'adapter directement (à la demande) à l'espace disponible et recadrer la popup. Avec ta solution, s'il n'y a pas assez de place sur la droite, la popup est tronquée...

mais ce n'est que mon point de vue, ta solution fonctionne parfaitement.

**NoSmoking** · 30/03/2015, 19h10

Avec ta solution, s'il n'y a pas assez de place sur la droite, la popup est tronquée...

elle sera au plus réduite en largeur et viendra se coller sur le bord droit. Cette solution est très largement viable dans 99.9% des cas, lorsque l'on ne veut pas trop de super effet et encore.

**OButterlin** · 31/03/2015, 08h46

Envoyé par NoSmoking

elle sera au plus réduite en largeur et viendra se coller sur le bord droit.

Ben non, justement, je l'ai tester avec Firefox en réduisant la fenêtre et elle est tronquée.

Mais bon, on ne partage pas la même vision et ce n'est pas grave

**NoSmoking** · 02/04/2015, 22h04

Mais bon, on ne partage pas la même vision et ce n'est pas grave

je dirais simplement que nous n'avons pas la même approche du problème.

Pour moi

tout le contenu qui est pertinent doit appartenir au document, title pouvant d'ailleurs en faire partie.
il est important de séparer les différentes couche HTML-CSS-JS ne serait ce que pour la maintenance et la clarté du code, même si quelques coups de canif sont parfois nécessaire.
tout ce qui peut se faire en HTML ou en CSS n'est pas à faire en javascript, il existera bien sûr toujours des exceptions.

J'ai pris le temps de regarder ton code et de le tester après toutefois avoir corrigé un certains nombre de choses...

<!DOCTYPE HTML5> n'est pas un DOCTYPE valide et à pour effet de faire passer ton document en mode QUIRKS et c'est ce qui permet à ton script de fonctionner.
Avec un mode standard donc <!DOCTYPE HTML>, dans ce bout de code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function showPopup(evt, text) 
{ 
    if (window.event)
    {
        evt = window.event;
    }
    var top = evt.clientY + document.body.scrollTop; 
    var left = evt.clientX + document.body.scrollLeft; 
    var p = document.getElementById("popup"); 
    p.innerHTML = text; 
    p.style.top = top; 
    p.style.left = left; 
    p.style.display = "inline"; 
}

il manque au moins 2 choses, les unités (px) pour les positions et la prise en compte de document.documentElement pour que cela fonctionne correctement et ce quelque soit le DOCTYPE utilisé.

Exemple de fonction crossbrowser

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function getMousePos( e){
  e = e || event;
  var dE = document.documentElement,
      dB = document.body,
	    mX = e.pageX || ( e.clientX +( dE && dE.scrollLeft || dB && dB.scrollLeft || 0) -( dE.clientLeft || 0)),
	    mY = e.pageY || ( e.clientY +( dE && dE.scrollTop  || dB && dB.scrollTop  || 0) -( dE.clientTop  || 0));
	return({ x : mX, y : mY});
}

Ceci étant j'ai constaté le même rendu sur les 2 codes d'approche différentes.

Voilà le principal étant que Claudine ait trouvé son bonheur.

**OButterlin** · 03/04/2015, 11h28

Tu as bien fais de corriger, j'avais fais ça à la va vite...

Je partage ton avis de séparation html/css/javascript, là, on est bien dans un cas d'effet cosmétique que ni html, ni css ne savent faire pour le moment (enfin, à ma connaissance).
Ta solution de "mouliner" le code à chaque fois que la page est affiché est une solution, la mienne est plus sous la forme d'une api javascript réutilisable (que je mettrais dans un fichier externe) et qui sera appelé à la demande... c'est ce que j'appelais "vision"...
Généralement, je base mes api sur jQuery, ça m'évite de me soucier des différences entre navigateurs.

**Claudine** · 19/05/2015, 07h58

Bonjour à tous,

Désolée d'avoir resté muette aussi longtemps, mais on ne peut éviter les problèmes de santé .
Je vous suis particulièrement reconnaissante pour l'aide efficace apportée dans la résolution de mes problèmes.
A tous les membres merci et je sais que l'on peux compter sur vous.

Claudine

Comment créer une pop-in afin de charger une div info ?

JavaScript

Discussions similaires

Partager

Partager