Javascript : ouvrir une pop-up depuis un menu déroulant ?

[leondumoulin]

Bonsoir,

 

Comment ouvrir une fenêtre pop-up depuis un menu déroulant ?

 

c-a-d lier :

 

onClick="MM_openBrWindow('mapage.htm','Mon titre','scrollbars=no,width=756,height=567')" onFocus="if(this.blur)this.blur()"

 

à :

 

<option value="exemples.htm~">Page exemples</option>

 

Merci,

 

Léon

[KewlCat]

Sur le OnChange de ton <SELECT> tu peux ouvrir un popup à partir du SelectedIndex

 

J'ai plus la syntaxe exacte sous la main, mais dans tes <OPTION> tu mets l'URL :

 

<OPTION VALUE="http//ma.page.a/ouvrir">Ma Page à Ouvrir</OPTION>

 

et dans le select tu mets

 

<SELECT NAME="monSelect" OnChange="javascript: { window.open( monSelect.options[monSelect.SelectedIndex], 'chaipukoi', 'les options du popup'); }">

 

monSelect.selectedIndex contient le numéro de l'option sélectionnée

monSelect.options[x] contient la valeur (le "VALUE=...") de la xième OPTION

 

Vérifie bien que les syntaxes sont OK (surtout qu'elles sont case-sensitives), j'ai pas refait de Javascript depuis... euh... 6 mois ?!?

[leondumoulin]

Bonjour,

 

Merci KewlCat. Je suppose ( à tort ? ) que ta solution

implique que tous les liens dans le menu déroulant provoquent l'ouverture d'une pop-up.

Mon idée est qu'un seul de ces liens ouvre une pop-up, le reste ouvrant des fenêtres classiques.

Voici le code utilisé ( http://www.projectseven.com/extensions/listing.htm ) :

 

<script language="JavaScript" type="text/JavaScript">

<!--

function P7_JumpMenu(selObj,restore){ //v1.4 by Project Seven

var theFullString = selObj.options[selObj.selectedIndex].value;

if (restore) selObj.selectedIndex=0;

var theLength = theFullString.length;

var endPos = theFullString.lastIndexOf("~");

var theUrl, theTarget, theParent;

if (endPos > 0) {theUrl = theFullString.substring(0,endPos);}

else {theUrl = theFullString;}

endPos++

if (endPos < theLength) {theTarget = theFullString.substring(endPos,theLength)}

else {theTarget = "window:Main";}

if (theTarget == "window:New") {window.open(theUrl);}

else if (theTarget == "window:Main") {eval("parent.location='"+theUrl+"'");}

else {eval("parent.frames['"+theTarget+"'].location='"+theUrl+"'");}

}

//-->

</script>

 

Puis :

 

<form name="form1">

<select name="menu1" onChange="P7_JumpMenu(this,1)" style="FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Geneva, Arial, Sans-Serif; BACKGROUND-COLOR: #CC9900">

<option selected>Menu</option>

<option value="exemples.htm~">Your site</option>

<option value="links/index.php3~">Links</option>

<option value="contact.php~">Contact</option>

/// ici le lien qui ouvre une pop-up ///

</select>

</form>

 

Bonne journée,

 

Léon

[KewlCat]

Bah, il suffit de rajouter if (monSelect.selectedIndex) == 4 { ... } pour l'ouverture du popup dans le OnChange, si tu veux qu'il ne s'ouvre que sur un seul des libellés (ici le 5ème)...

[leondumoulin]

Bonsoir KewlCat,

 

Après quelques essais infructeux, je viens te redemander des précisions concernant ta réponse :

 

Comment placer if (monSelect.selectedIndex) == 4 { ... }

 

dans :

 

<select name="menu1" onChange="P7_JumpMenu(this,1)" style="FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Geneva, Arial, Sans-Serif; BACKGROUND-COLOR: #CC9900">

 

et de plus comment insérer la description de la fenêtre pop-up ? ( je suppose en remplacement des 3 points ? )

 

Merci encore,

 

Léon

[KewlCat]

<select name="menu1" onChange="if (monSelect.selectedIndex) == 4 { window.open( blablabla ); } else { P7_JumpMenu(this,1); }" style="FONT-SIZE: 10px; COLOR: #000000; FONT-FAMILY: Geneva, Arial, Sans-Serif; BACKGROUND-COLOR: #CC9900">

 

Ca s'utilise comme ça...

En fait, là, ça détourne l'appel à ta fonction P7_JumpMenu() si c'est la 5ème option du menu qui est sélectionnée...

[mofo]

Sur le OnChange de ton <SELECT> tu peux ouvrir un popup à partir du SelectedIndex

 

J'ai plus la syntaxe exacte sous la main, mais dans tes <OPTION> tu mets l'URL :

 

<OPTION VALUE="http//ma.page.a/ouvrir">Ma Page à Ouvrir</OPTION>

 

et dans le select tu mets  

 

<SELECT NAME="monSelect" OnChange="javascript: { window.open( monSelect.options[monSelect.SelectedIndex], 'chaipukoi', 'les options du popup'); }">

 

monSelect.selectedIndex contient le numéro de l'option sélectionnée

monSelect.options[x] contient la valeur (le "VALUE=...") de la xième OPTION

 

Vérifie bien que les syntaxes sont OK (surtout qu'elles sont case-sensitives), j'ai pas refait de Javascript depuis... euh... 6 mois ?!?

 

Coucou,

 

j'ai testé ta methode, mais ca ne marche pas.

 

Il ouvre un popup, mais ne trouve pas la page mis ds value de l'option ... c'est une page *.php, ca pose un probleme ???

 

Merci

[KewlCat]

Il se passe quoi exactement ? Il t'ouvre un popup avec "404 Not Found" dedans ??

[mofo]

C'est bien une erreur 404 ...

 

Je fais ca en dinamyque :

 

<SELECT NAME="monSelect" OnChange="javascript: { window.open( monSelect.options[monSelect.SelectedIndex], 'toto', 'toolbar=no, location=no, directories=no, status=yes, scrollbars=no, resizable=no, copyhistory=no, width=250, height=200, left=300, top=150'); } ">

<?

$match1=mysql_query("select * from cppa_matchs where match_etat='0' order by match_date DESC");

while($row1=mysql_fetch_row($match1))

{

 echo "<OPTION VALUE='matchs_pop.php'>CPPA vs ".$row1[1]."</OPTION><BR>n";

}

?>

</SELECT>

[KewlCat]

Le popup va s'ouvrir et tenter de charger l'url 'matchs_pop.php' ...

Là, il faut bien se rendre compte que si tu ne précises rien, c'est comme si tu disais à qqu'un d'ouvrir un navigateur web et de taper 'matchs_pop.php' dans la barre d'adresse !

Il te faut donc, à un moment où à un autre, préciser le reste de l'adresse :

- soit dans le window.open()

- soit dans le VALUE=

 

(ex : window.open("http://mon.site.a.moi/sous-rep/"+monSelect.options[etc.], etc.) ou VALUE='http://mon.site.a.moi/sous-rep/matchs_pop.php')