Astuces Forumactif
Vous souhaitez réagir à ce message ? Créez un compte en quelques clics ou connectez-vous pour continuer.
Membres connectés récemment
Voir tous les membres

[PHPBB3]Tooltip avec iframe


2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 12 Sep 2018 - 15:54

Re bonjour,

J'ai quasiment "tooltipstered" toutes mes infobulles, amis je bute sur celle ci à cause de l'iframe.

Dans mes généralités:
Code:
<!--                                                                                              Logos partenaires                                 -->
<div class="partenaire">
                                                                          <iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">   </iframe>
</div>


La page html (probablement améliorable):


Je crois qu'il ne passe pas....


Merci pour votre aide.


Dernière édition par photoclic le Mer 12 Sep 2018 - 17:06, édité 1 fois
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 12 Sep 2018 - 15:55

Je le remets là:

La page html (probablement améliorable):

Code:
<meta name="viewport" content="width=device-width, initial-scale=1" />    <style>
    * {box-sizing:border-box}
    body {
      font-family: Verdana,sans-serif;
          max-width: 300px;
          max-height: 300px;
      overflow:hidden !important;
    }
  
    .mySlides {display:none}

    /* Slideshow container */
    .slideshow-container {
      max-width: 250px;
      position: absolute;
      margin: auto;
    }

 /* Titre slideshow*/
.nametext {
 font-size: 18px;
 font-family: Comic Sans MS;
 color: #3b699c;
 padding: 8px 12px;
 position: relative;
 text-align:center;
}  
  

    /* Fading animation */
    .fade {
      -webkit-animation-name: fade;
      -webkit-animation-duration: 1s;
      animation-name: fade;
      animation-duration: 1s;
    }

    @-webkit-keyframes fade {
      from {opacity: .5}
      to {opacity: 1}
    }

    @keyframes fade {
      from {opacity: .5}
      to {opacity: 1}
    }

 </style>                              
<div class="slideshow-container">
                        
 <div class="mySlides fade">
               <span style="display: block;text-align:center;padding: 5px;margin-top: -10px;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;">Nos partenaires                                                                                                                        </span><a href="https://photoclic.forum-pro.fr/t19916-partenaires-photos#M14" rel="nofollow" target="_blank"><img src="https://i.servimg.com/u/f25/18/97/96/21/logo_a10.jpg" title="Cliquer pour voir les infos du partenaire" style="border: 8px #35aed7;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:100px;max-width:200px;" /> </a>                                                                                                                                        
 </div>
                                                  
 <div class="mySlides fade">
                 <span style="display: block;text-align:center;padding: 5px;margin-top: -10px;font-size: 16px;font-family: Comic Sans MS;color: #3b699c;">Nos partenaires                                                                                                                         </span> <a href="https://www.facebook.com/atelierphotomarie/" rel="nofollow" target="_blank"><img src="https://i.servimg.com/u/f25/18/97/96/21/logo_p10.png" title="Cliquer pour voir les infos du partenaire" style="border: 8px #35aed7;border-style: ridge;display: block;margin-left: auto;margin-right: auto;max-height:100px;max-width:200px;" /> </a>                                                                                                                                        
 </div>
                                                   <span class="dot"></span>      <span class="dot"></span>      <span class="dot"></span>          
</div>
 <script>
    var slideIndex = 0;
    showSlides();

    function showSlides() {
        var i;
        var slides = document.getElementsByClassName("mySlides");
        var dots = document.getElementsByClassName("dot");
        for (i = 0; i < slides.length; i++) {
           slides[i].style.display = "none";  
        }
        slideIndex++;
        if (slideIndex > slides.length) {slideIndex = 1}    
        for (i = 0; i < dots.length; i++) {
            dots[i].className = dots[i].className.replace(" active", "");
        }
        slides[slideIndex-1].style.display = "block";  
        dots[slideIndex-1].className += " active";
        setTimeout(showSlides, 5000); // Change image every 7 seconds
    }
    </script>

le but donc et d'avoir le tooltip sur l'infobulle.

Merci pour votre aide.


Edit:
En voulant poster l'html, la fenêtre se réduit sans laisser la possibilité d'envoyer.
En le mettant dans ce second message, la fenêtre se réduit aussi, mais l'accès au bouton reste possible.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 12 Sep 2018 - 16:06

hello Serge,
si tu supprimes l'infobulle dans ta page html :
Code:
title="Cliquer pour voir les infos du partenaire"


et que dans généralités tu remplaces:

Code:
<div class="partenaire">
<iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
</div>


Par :

Code:

<!--Logos partenaires-->
<div class="partenaire"title="Cliquer pour voir les infos du partenaire">
<iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
</div>


Il suffit de placer l'infobulle sur la div contenant l'iframe  impeccable


Edit:
En voulant poster l'html, la fenêtre se réduit sans laisser la possibilité d'envoyer.
En le mettant dans ce second message, la fenêtre se réduit aussi, mais l'accès au bouton reste possible.


Oui, il y a un bug avec l'éditeur marreordi marreordi marreordi lOL

avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 12 Sep 2018 - 16:31

Re Phil,

En faisant ainsi, je n'ai plus d'infobulles.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 12 Sep 2018 - 16:37

Hum étonnant car sur mon fofo de test, c'est fonctionnel Serge,

tu peux remplacer par:
Code:

    <!--Logos partenaires-->
    <div class="partenaire"title="Cliquer pour voir les infos du partenaire">

    <iframe src="https://photoclic.forum-pro.fr/h15-partenaires-photos" style="width:250px;border:none;height: 150px;float: right;margin-right: 25%;margin-top: -92px;">  </iframe>
<script>
        
jQuery('.partenaire').tooltipster({
          animation : 'fade',
          arrow : true,
          speed : 300,
          delay : 300,
          onlyOne : true,
          theme : 'tooltipster-default'
        });
</script>
    </div>
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 12 Sep 2018 - 16:42

Cette fois l'infobulle est bien là et toolstipered super

Mais elle est décalée à gauche par rapport au diaporama.
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 12 Sep 2018 - 16:45

Mais elle est décalée à gauche par rapport au diaporama.

Il faut donner le style à la div et non à l'iframe Serge clin oeil
Et laisser juste le border none à l'iframe clin oeil

Je verrais mieux ce style pour ta div:
Code:

position: relative;
width: 250px;
border: none;
height: 150px;
left: 80%;
margin-top: -20%;
avatar
photoclic
https://photoclic.forum-pro.fr/

Messagephotoclic Mer 12 Sep 2018 - 17:05

OK Philippe, c’était bien ça, t'es incollable.

Encore un grand merci l'ami tape la
Milouze14
Milouze14
Fondateur

https://www.milouze14.net/

MessageMilouze14 Mer 12 Sep 2018 - 17:15

De rien Serge,

-Staff du Forum Milouze14-



  • Hello 
    Sujet résolu et déplacé dans le forum adéquat.

Pour toute information,merci de contacter un Membre du Staff

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum