Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1536 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Adapter un script jQuery (popin)... pour l'exécuter depuis un flash

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Adapter un script jQuery (popin)... pour l'exécuter depuis un flash

n°2110191
supaaamika
Posté le 07-11-2011 à 16:25:06  profilanswer
 

Bonjour à tous :)
 
Je me permets de venir vous exposer mon problème car je galère comme pas possible :pt1cable:  
 
Voici ce que je souhaiterais faire : exécuter une fonction jQuery depuis un flash pour ouvrir une popin dans ma page HTML.
 
Voici le code me servant de test : utilisation d'une image map + jQuery pour afficher ma popin
 
JS -> jquery-latest.pack.js
 

Code :
  1. $(document).ready(function() {
  2.   //select all the AREA tag with name equal to modal
  3.   //$('area[name=modal]').click(function(e) {
  4.   $('area').click(function(e) {
  5.    //Cancel the link behavior
  6.    e.preventDefault();
  7.    //Get the AREA tag
  8.    var id = $(this).attr('href');
  9.    //Get the screen height and width
  10.    var maskHeight = $(document).height();
  11.    var maskWidth = $(window).width();
  12.    //Set heigth and width to mask to fill up the whole screen
  13.    $('#mask').css({'width':maskWidth,'height':maskHeight});
  14.    //transition effect  
  15.    //$('#mask').fadeIn(2000);  
  16.    $('#mask').fadeTo("fast",0.6);
  17.    //Get the window height and width
  18.    var winH = $(window).height();
  19.    var winW = $(window).width();
  20.      
  21.    //Set the popup window to center
  22.    $(id).css('top',  winH/2-$(id).height()/2);
  23.    $(id).css('left', winW/2-$(id).width()/2);
  24.    //transition effect
  25.    $(id).fadeIn(800);
  26.   });
  27.   //if close button is clicked
  28.   $('.window .close').click(function (e) {
  29.    //Cancel the link behavior
  30.    e.preventDefault();
  31.    $('#mask').hide();
  32.    $('.window').hide();
  33.   });
  34.   //if mask is clicked
  35.   $('#mask').click(function () {
  36.    $(this).hide();
  37.    $('.window').hide();
  38.   });
  39.  });


 
CSS

Code :
  1. body{font-family:verdana;font-size:15px;padding:0;margin:0;}
  2.  a{color:#333;text-decoration:none}
  3.  a:hover{color:#ccc;text-decoration:none}
  4.  #mask{position:absolute;left:0;top:0;z-index:9000;background-color:#000;display:none;}
  5.  #boxe .window{position:absolute;left:0;top:0;width:1030px;height:596px;display:none;z-index:9999;padding:0;}
  6.  #boxe #dialog{width:1030px;height:596px;padding:0;background-color:#fff;}


 
HTML

Code :
  1. <img src="img/home.jpg" width="1263" height="1200" border="0" usemap="#Map" />
  2. <map name="Map" id="Map">
  3.        <area shape="rect" coords="860,446,1111,698" href="#dialog" name="modal" />
  4.        <area shape="rect" coords="867,762,1105,783" href="#dialog" name="modal" />
  5.  <area shape="rect" coords="390,846,610,1117" href="#dialog" name="modal" />
  6.      <area shape="rect" coords="280,3,1026,92" href="#dialog" name="modal" />
  7.     </map>
  8. <div id="boxe">
  9. <div id="dialog" class="window">
  10.  Résultats et rapports du jour | <a href="#"class="close"/>Fermer X</a><br /><br />
  11.  <iframe src="http://www.google.fr" width="1030" marginwidth="0" height="570" marginheight="0" scrolling="auto" frameborder="0" hspace="0" vspace="0"></iframe>
  12. </div>
  13.    <div id="mask"></div>
  14. </div>


 
.FLA

Code :
  1. import flash.external.*;
  2. btn.onRelease = function() {
  3. ExternalInterface.call("nomDeMaFonction" );
  4. }


 
Comment adapter le JS actuel pour qu'il fonctionne depuis un flash ?
 
Le JS actuel fonctionne avec le TAG "area" et l'attribut "href".
Par quoi remplacer dans mon .fla : ExternalInterface.call("nomDeMaFonction" ); ?
 
Sinon pourriez-vous me proposer une alternative au script/méthode utilisé ?
 
Merci d'avance pour votre aide  :jap:


Message édité par supaaamika le 07-11-2011 à 16:27:57

---------------
Mes anciens feedbacks
mood
Publicité
Posté le 07-11-2011 à 16:25:06  profilanswer
 

n°2110410
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 08-11-2011 à 22:04:05  profilanswer
 

Actuelement le script se lance des que le document (la page) est loadé et prete a etre afficher.
 
Il te suffit de prendre le corps de celle ci et de le mettre dans une fonction
 
function nomDeMaFonction()
{
// le code du .ready ici
}
 
Ensuite quand on cliquera sur le bouton de l'appli flash ça lancera ta fonction.

n°2110444
supaaamika
Posté le 09-11-2011 à 08:36:30  profilanswer
 

Je te remercie gueuledange pour ta piste ;)
 
Voici ce que j'ai fais :
 
JS

Code :
  1. function maFunction() {
  2.          $(document).ready(function() {
  3.          ...


 
FLASH (as2)

Code :
  1. import flash.external.*;
  2. btn.onRelease = function() {
  3. ExternalInterface.call("maFunction" );
  4. }


 
Mon problème est le suivant : par quoi remplacer/modifier ces lignes (dans le JS) :
 

Code :
  1. //select all the A tag with name equal to modal
  2.           //$('a[name=modal]').click(function(e) {
  3.           $('area').click(function(e) {


 

Code :
  1. //Get the AREA tag
  2.           var id = $(this).attr('href');


 
Je ne peux plus faire référence au tag AREA et à son attribut HREF... :heink:


Message édité par supaaamika le 09-11-2011 à 15:08:27

---------------
Mes anciens feedbacks
n°2110516
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:03:19  profilanswer
 

vire le .ready.... met que le corps

n°2110517
supaaamika
Posté le 09-11-2011 à 15:07:55  profilanswer
 

Je veux bien virer cette ligne : $(document).ready(function()
 
Mais ça ne devrait pas fonctionner car il y aura un problème de tag et attribut : AREA et #dialog


---------------
Mes anciens feedbacks
n°2110520
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:12:45  profilanswer
 

Ah, oui pour le binding des click il te faudra quand meme une .ready ailleurs.
 
Il est online le site? j'aimerai bien avoir une vue global.


Message édité par gueuledange le 09-11-2011 à 15:13:10
n°2110527
supaaamika
Posté le 09-11-2011 à 15:31:37  profilanswer
 

Voici l'URL avec l'ensemble des éléments : http://mika4dev.rd-h.fr/test/
 
Merci pour ton aide :jap:


---------------
Mes anciens feedbacks
n°2110530
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:36:22  profilanswer
 

Ok, donc en faite tu veux juste que quand on click sur ton aplli flash ca t'affiche le div#boxe?  
 
C'est bien ca?

n°2110531
supaaamika
Posté le 09-11-2011 à 15:37:05  profilanswer
 

Yes !!  :pt1cable:


---------------
Mes anciens feedbacks
n°2110533
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:39:37  profilanswer
 

Trop facile :O
 
Tu met le div#boxe en display none
 
et dans le flash externanl call: $("#boxe" ).toggle()
 
fini...

mood
Publicité
Posté le 09-11-2011 à 15:39:37  profilanswer
 

n°2110535
supaaamika
Posté le 09-11-2011 à 15:44:49  profilanswer
 

Si je résume ton idée :
 
Dans le flash : ExternalInterface.call($("#boxe" ).toggle());
 
Et dans mon HTML : <div id="boxe" style="display:none;">
 
Est-ce exact ?


---------------
Mes anciens feedbacks
n°2110538
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:50:47  profilanswer
 

ouep
 
Donc quand tu cliquera sur le swf ca passera le #boxe en display:block

n°2110539
supaaamika
Posté le 09-11-2011 à 15:51:31  profilanswer
 

Compris mais rien ne se passe  :heink:


---------------
Mes anciens feedbacks
n°2110541
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 15:53:20  profilanswer
 

T'as update le truc online?
 
As-tu mis une width/height sur Boxe??


Message édité par gueuledange le 09-11-2011 à 15:54:12
n°2110542
supaaamika
Posté le 09-11-2011 à 15:54:45  profilanswer
 

Yes !
La console FireBug ne m'affiche aucune erreur lorsque je clique sur le flash...


---------------
Mes anciens feedbacks
n°2110548
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:00:44  profilanswer
 

Quand je passe le #boxe en display block a la main avec chrome, rien ne s'affiche non plus... A tout les coup l'appel marche mais c'est juste un probleme de CSS...

n°2110554
supaaamika
Posté le 09-11-2011 à 16:03:40  profilanswer
 

Si je change le display none en block via FireBug, le DIV s'affiche


---------------
Mes anciens feedbacks
n°2110555
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:05:23  profilanswer
 

Es-tu sur que l'evenement du flash est bien triggered?
 
Remplace le $("#boxe" ).toggle()
 
Par:
 
alert('toto')
 
 
Comme ca au moins on sera fixe...

n°2110557
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:06:09  profilanswer
 

supaaamika a écrit :

Si je change le display none en block via FireBug, le DIV s'affiche


 
Oui mais il est vide, on voit rien.

n°2110561
supaaamika
Posté le 09-11-2011 à 16:13:51  profilanswer
 

J'ai testé avec : getURL("javascript:functionTest()" );
Et ça fonctionne !
 
En revanche avec : ExternalInterface.call(alert('toto'););
ça ne fonctionne pas...


---------------
Mes anciens feedbacks
n°2110562
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:18:19  profilanswer
 

Ok donc passe par une fonction pour faire le .toggle() et ca devrai le faire du coup :)
 
Sinon j'ai vu que tu a l .ready en double dans le.pack.js et direct dans la page. Supprime en une.


Message édité par gueuledange le 09-11-2011 à 16:19:18
n°2110563
supaaamika
Posté le 09-11-2011 à 16:19:31  profilanswer
 

Un truc comme ça :
 

Code :
  1. function functionTest() {
  2.           $("#boxe" ).toggle();
  3. }


---------------
Mes anciens feedbacks
n°2110566
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:26:42  profilanswer
 

Ouep. Ca fonctionne?

n°2110568
supaaamika
Posté le 09-11-2011 à 16:29:45  profilanswer
 

Oui :)
J'ai du ajuster la CSS.
Cette solution fonctionne mais me fait perdre : le centrage en fonction de la résolution...
 
Donc je vais voir si je ne vais m'orienter vers un solution de type "lightbox".
 
Merci encore pour ton aide et ta patience  :jap:


---------------
Mes anciens feedbacks
n°2110571
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:37:07  profilanswer
 

Euh pour le centrage c'est juste du css...
Au pire si tu veux pas t'emmerde tu rajoute dans fonctionTest()
 
De rien.

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Adapter un script jQuery (popin)... pour l'exécuter depuis un flash

 

Sujets relatifs
Spybot : silent install & silent scan : script boqué par une fênetre<audio> jquery problème avec l'event ended
[resolu] comment récupérer le contenu d'un json avec jqueryjquery et ui : j'ai besoin d'un petit coup de main pour me lancer.
Intégration Galerie (Flash) dans page html[jQuery] Code non exécuté
Problème script awk !! =/Script Glovepie pour axe x ?
menu javascript + slider jquery avec IE7Executer le code d'un bouton Access sous Excel
Plus de sujets relatifs à : Adapter un script jQuery (popin)... pour l'exécuter depuis un flash


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR