Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide Recherche
1675 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS/Javascript

  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
mickeliett​e
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();
  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 mickeliette le 07-11-2011 à 16:27:57

---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
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.*;
  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 mickeliette le 09-11-2011 à 15:08:27

---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
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


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
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:


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
Posté le 09-11-2011 à 15:37:05  profilanswer
 

Yes !!  :pt1cable:


---------------
PSN ID : supaaa_mika - Mon feed-back
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...

n°2110535
mickeliett​e
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 ?


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
Posté le 09-11-2011 à 15:51:31  profilanswer
 

Compris mais rien ne se passe  :heink:


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
Posté le 09-11-2011 à 15:54:45  profilanswer
 

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


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
Posté le 09-11-2011 à 16:03:40  profilanswer
 

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

Message cité 1 fois

---------------
PSN ID : supaaa_mika - Mon feed-back
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
 

mickeliette 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
mickeliett​e
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...


---------------
PSN ID : supaaa_mika - Mon feed-back
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
mickeliett​e
Posté le 09-11-2011 à 16:19:31  profilanswer
 

Un truc comme ça :
 

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


---------------
PSN ID : supaaa_mika - Mon feed-back
n°2110566
gueuledang​e
Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c
Posté le 09-11-2011 à 16:26:42  profilanswer
 

Ouep. Ca fonctionne?

n°2110568
mickeliett​e
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:


---------------
PSN ID : supaaa_mika - Mon feed-back
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/Javascript

  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

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.286 secondes

Hit-Parade
Copyright © 1997-2012 Hardware.fr SARL / Groupe LDLC / LesNumeriques.com / Version anglaise du site: BeHardware