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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Adapter un script jQuery (popin)... pour l'exécuter depuis un flash

supaaamika

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 :

$(document).ready(function() {
//select all the AREA tag with name equal to modal
//$('area[name=modal]').click(function(e) {
$('area').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the AREA tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
//$('#mask').fadeIn(2000);
$('#mask').fadeTo("fast",0.6);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(800);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});

CSS

Code :

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

HTML

Code :

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

.FLA

Code :

import flash.external.*;
btn.onRelease = function() {
ExternalInterface.call("nomDeMaFonction" );
}

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

Publicité

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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.

supaaamika

Je te remercie gueuledange pour ta piste

Voici ce que j'ai fais :

JS

Code :

function maFunction() {
$(document).ready(function() {
...

FLASH (as2)

Code :

import flash.external.*;
btn.onRelease = function() {
ExternalInterface.call("maFunction" );
}

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

Code :

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

Code :

//Get the AREA tag
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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

supaaamika

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

supaaamika

Voici l'URL avec l'ensemble des éléments : http://mika4dev.rd-h.fr/test/

Merci pour ton aide :jap:

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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?

supaaamika

Yes !! :pt1cable:

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

Trop facile

Tu met le div#boxe en display none

et dans le flash externanl call: $("#boxe" ).toggle()

fini...

Publicité

supaaamika

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

ouep

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

supaaamika

Compris mais rien ne se passe :heink:

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

supaaamika

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

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

supaaamika

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

Message cité 1 fois

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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.

supaaamika

J'ai testé avec : getURL("javascript:functionTest()" );
Et ça fonctionne !

En revanche avec : ExternalInterface.call(alert('toto');
ça ne fonctionne pas...

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

supaaamika

Un truc comme ça :

Code :

function functionTest() {
$("#boxe" ).toggle();
}

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

Ouep. Ca fonctionne?

supaaamika

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

gueuledange

Smokin chroniı̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̸̨̨̨̨̨̨c

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

De rien.

Publicité

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 jquery	jquery 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 IE7	Executer le code d'un bouton Access sous Excel
Plus de sujets relatifs à : Adapter un script jQuery (popin)... pour l'exécuter depuis un flash

Page générée en 0.066 secondes