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

Adapter un script jQuery (popin)... pour l'exécuter depuis un flash - HTML/CSS - Programmation

Marsh Posté le 07-11-2011 à 16:25:06    

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();
  8.    //Get the AREA tag
  9.    var id = $(this).attr('href');
  11.    //Get the screen height and width
  12.    var maskHeight = $(document).height();
  13.    var maskWidth = $(window).width();
  15.    //Set heigth and width to mask to fill up the whole screen
  16.    $('#mask').css({'width':maskWidth,'height':maskHeight});
  18.    //transition effect  
  19.    //$('#mask').fadeIn(2000);  
  20.    $('#mask').fadeTo("fast",0.6);
  22.    //Get the window height and width
  23.    var winH = $(window).height();
  24.    var winW = $(window).width();
  25.      
  26.    //Set the popup window to center
  27.    $(id).css('top',  winH/2-$(id).height()/2);
  28.    $(id).css('left', winW/2-$(id).width()/2);
  30.    //transition effect
  31.    $(id).fadeIn(800);
  32.   });
  34.   //if close button is clicked
  35.   $('.window .close').click(function (e) {
  36.    //Cancel the link behavior
  37.    e.preventDefault();
  39.    $('#mask').hide();
  40.    $('.window').hide();
  41.   });
  43.   //if mask is clicked
  44.   $('#mask').click(function () {
  45.    $(this).hide();
  46.    $('.window').hide();
  47.   });
  48.  });


 
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.*;
  3. btn.onRelease = function() {
  4. ExternalInterface.call("nomDeMaFonction" );
  5. }


 
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
Reply

Marsh Posté le 07-11-2011 à 16:25:06   

Reply

Marsh Posté le 08-11-2011 à 22:04:05    

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.

Reply

Marsh Posté le 09-11-2011 à 08:36:30    

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.*;
  3. btn.onRelease = function() {
  4. ExternalInterface.call("maFunction" );
  5. }


 
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
Reply

Marsh Posté le 09-11-2011 à 15:03:19    

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

Reply

Marsh Posté le 09-11-2011 à 15:07:55    

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
Reply

Marsh Posté le 09-11-2011 à 15:12:45    

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
Reply

Marsh Posté le 09-11-2011 à 15:31:37    

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


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 15:36:22    

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?

Reply

Marsh Posté le 09-11-2011 à 15:37:05    

Yes !!  :pt1cable:


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 15:39:37    

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

Reply

Marsh Posté le 09-11-2011 à 15:39:37   

Reply

Marsh Posté le 09-11-2011 à 15:44:49    

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
Reply

Marsh Posté le 09-11-2011 à 15:50:47    

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

Reply

Marsh Posté le 09-11-2011 à 15:51:31    

Compris mais rien ne se passe  :heink:


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 15:53:20    

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
Reply

Marsh Posté le 09-11-2011 à 15:54:45    

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


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 16:00:44    

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...

Reply

Marsh Posté le 09-11-2011 à 16:03:40    

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

Message cité 1 fois

---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 16:05:23    

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...

Reply

Marsh Posté le 09-11-2011 à 16:06:09    

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.

Reply

Marsh Posté le 09-11-2011 à 16:13:51    

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


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 16:18:19    

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
Reply

Marsh Posté le 09-11-2011 à 16:19:31    

Un truc comme ça :
 

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


---------------
Mes anciens feedbacks
Reply

Marsh Posté le 09-11-2011 à 16:26:42    

Ouep. Ca fonctionne?

Reply

Marsh Posté le 09-11-2011 à 16:29:45    

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
Reply

Marsh Posté le 09-11-2011 à 16:37:07    

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

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed